/* Common Signin New - Modern Redesigned Styles */

/* Reset and Base Styles */
body .common-signin-new-wrapper *,
body .common-signin-new-wrapper *::before,
body .common-signin-new-wrapper *::after {
  box-sizing: border-box !important;
}

/* Background with gradient */
.common-signin-new-wrapper {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #f0f4f8 !important;
}

.common-signin-new-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: 
    radial-gradient(circle at 20% 50%, rgba(0, 0, 164, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 164, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(0, 0, 164, 0.05) 0%, transparent 50%) !important;
  z-index: 0 !important;
}

.common-signin-new-container {
  position: relative !important;
  width: 100% !important;
  max-width: 380px !important;
  z-index: 1 !important;
}

/* Card Styles */
.common-signin-new-card {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 18px !important;
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  animation: slideUp 0.5s ease-out !important;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card Header */
.common-signin-new-card-header {
  text-align: center !important;
  padding: 25px 30px 20px 30px !important;
  background: #0000a4 !important;
  color: white !important;
}

.common-signin-new-logo-container {
  margin-bottom: 12px !important;
}

.common-signin-new-image {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
  background: white !important;
  padding: 6px !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: cover !important;
}

.common-signin-new-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  color: white !important;
  letter-spacing: -0.5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.common-signin-new-subtitle {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Card Body */
.common-signin-new-card-body {
  padding: 28px !important;
  width: 100% !important;
}

/* Form Styles */
.common-signin-new-form {
  width: 100% !important;
  margin: 0 !important;
}

/* Message Styles */
.common-signin-new-message {
  background: #fee !important;
  border: 1px solid #fcc !important;
  color: #c33 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  animation: shake 0.5s ease-in-out !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.common-signin-new-message-icon {
  font-size: 16px !important;
}

/* Input Wrapper */
.common-signin-new-input-wrapper {
  margin-bottom: 18px !important;
  width: 100% !important;
}

.common-signin-new-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.common-signin-new-input-container {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.common-signin-new-input-icon {
  position: absolute !important;
  left: 12px !important;
  font-size: 16px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.common-signin-new-input {
  width: 100% !important;
  padding: 11px 14px 11px 40px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #111827 !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.common-signin-new-input:focus {
  border-color: #0000a4 !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 164, 0.1) !important;
  background: #ffffff !important;
}

.common-signin-new-input::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Options */
.common-signin-new-options {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

.common-signin-new-forgot-link {
  font-size: 13px !important;
  color: #0000a4 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.common-signin-new-forgot-link:hover {
  color: #000080 !important;
  text-decoration: underline !important;
}

/* Button */
.common-signin-new-button {
  width: 100% !important;
  padding: 12px 20px !important;
  background: #0000a4 !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 164, 0.4) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.common-signin-new-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 164, 0.5) !important;
}

.common-signin-new-button:active {
  transform: translateY(0) !important;
}

.common-signin-new-button-text {
  font-weight: 600 !important;
}

.common-signin-new-button-arrow {
  font-size: 18px !important;
  transition: transform 0.3s ease !important;
}

.common-signin-new-button:hover .common-signin-new-button-arrow {
  transform: translateX(4px) !important;
}

/* Divider */
.common-signin-new-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 24px 0 !important;
  color: #9ca3af !important;
  font-size: 13px !important;
}

.common-signin-new-divider::before,
.common-signin-new-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.common-signin-new-divider span {
  padding: 0 16px !important;
}

/* Footer */
.common-signin-new-footer {
  text-align: center !important;
  width: 100% !important;
}

.common-signin-new-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0000a4 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

.common-signin-new-footer-link:hover {
  color: #000080 !important;
  background: rgba(0, 0, 164, 0.1) !important;
}

.common-signin-new-footer-icon {
  font-size: 14px !important;
}

/* Tablet Styles */
@media (min-width: 768px) {
  .common-signin-new-wrapper {
    padding: 30px !important;
  }

  .common-signin-new-container {
    max-width: 400px !important;
  }

  .common-signin-new-card-header {
    padding: 30px 35px 25px 35px !important;
  }

  .common-signin-new-image {
    width: 70px !important;
    height: 70px !important;
  }

  .common-signin-new-title {
    font-size: 24px !important;
  }

  .common-signin-new-subtitle {
    font-size: 14px !important;
  }

  .common-signin-new-card-body {
    padding: 32px !important;
  }

  .common-signin-new-input {
    padding: 12px 16px 12px 44px !important;
    font-size: 15px !important;
  }

  .common-signin-new-button {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
}

/* Desktop Styles */
@media (min-width: 992px) {
  .common-signin-new-wrapper {
    padding: 40px !important;
  }

  .common-signin-new-container {
    max-width: 420px !important;
  }

  .common-signin-new-card {
    border-radius: 20px !important;
  }

  .common-signin-new-card-header {
    padding: 35px 40px 28px 40px !important;
  }

  .common-signin-new-image {
    width: 75px !important;
    height: 75px !important;
    border-width: 3px !important;
  }

  .common-signin-new-title {
    font-size: 26px !important;
  }

  .common-signin-new-subtitle {
    font-size: 14px !important;
  }

  .common-signin-new-card-body {
    padding: 35px !important;
  }
}

/* Mobile Landscape */
@media (max-width: 767px) and (orientation: landscape) {
  .common-signin-new-wrapper {
    padding: 15px !important;
    min-height: auto !important;
  }

  .common-signin-new-card-header {
    padding: 25px 30px 20px 30px !important;
  }

  .common-signin-new-image {
    width: 60px !important;
    height: 60px !important;
  }

  .common-signin-new-title {
    font-size: 24px !important;
  }

  .common-signin-new-card-body {
    padding: 30px !important;
  }

  .common-signin-new-input-wrapper {
    margin-bottom: 18px !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 375px) {
  .common-signin-new-wrapper {
    padding: 15px !important;
  }

  .common-signin-new-card {
    border-radius: 20px !important;
  }

  .common-signin-new-card-header {
    padding: 30px 25px 25px 25px !important;
  }

  .common-signin-new-image {
    width: 70px !important;
    height: 70px !important;
  }

  .common-signin-new-title {
    font-size: 24px !important;
  }

  .common-signin-new-subtitle {
    font-size: 14px !important;
  }

  .common-signin-new-card-body {
    padding: 30px 25px !important;
  }

  .common-signin-new-input {
    padding: 12px 14px 12px 44px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .common-signin-new-button {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  .common-signin-new-label {
    font-size: 13px !important;
  }
}

/* iOS Safari Fix */
@supports (-webkit-touch-callout: none) {
  .common-signin-new-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .common-signin-new-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Override Bootstrap if needed */
body .common-signin-new-card.card {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: none !important;
}

body .common-signin-new-card-body.card-body {
  padding: 40px !important;
}

body .common-signin-new-input.form-control {
  width: 100% !important;
  max-width: 100% !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
}

body .common-signin-new-button.btn {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  border-radius: 12px !important;
}