/* Phase 6: Mooncar mobile-inspired authentication surfaces */
.bravo-login-page,
.modal.login,
#confirm_password {
  --auth-ink: var(--mooncar-text, #000000);
  --auth-muted: var(--mooncar-text-muted, #898a8d);
  --auth-primary: var(--mooncar-primary, #043630);
  --auth-primary-strong: var(--mooncar-primary-strong, #02251f);
  --auth-accent: var(--mooncar-accent, #1b9624);
  --auth-surface: var(--mooncar-surface, #ffffff);
  --auth-soft: var(--mooncar-surface-soft, #f5f5f7);
  --auth-border: var(--mooncar-border-soft, #e8ecea);
  --auth-radius: var(--mooncar-radius-xl, 20px);
  --auth-radius-inner: var(--mooncar-radius-lg, 16px);
  --auth-shadow: var(--mooncar-shadow-soft, 0 18px 45px rgba(4, 54, 48, 0.08));
  --auth-focus-ring: var(--mooncar-focus-ring, 0 0 0 3px rgba(4, 54, 48, 0.12));
  --auth-transition: var(--mooncar-transition-fast, 0.2s ease);
  color: var(--auth-ink);
}

.bravo-login-page {
  min-height: calc(100vh - 220px);
  align-items: center;
  padding: 64px 0 82px;
}

.bravo-login-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 390px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 54, 48, 0.08), rgba(4, 54, 48, 0));
  z-index: -1;
}

.bravo-login-page > [class*="col-md-"] {
  width: 100%;
}

.bravo-login-page .col-md-5,
.bravo-login-page .col-md-8 {
  flex: 0 0 min(100%, 520px);
  max-width: 520px;
}

.bravo-login-page .col-md-8 {
  max-width: 640px;
}

.bravo-login-page .col-md-5 > div,
.bravo-login-page .card {
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow);
}

.bravo-login-page .col-md-5 > div {
  padding: 34px;
}

.bravo-login-page .form-title,
.bravo-login-page .card-header,
.modal.login .modal-title,
#confirm_password .modal-title {
  margin: 0;
  color: var(--auth-ink);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.bravo-login-page .form-title {
  margin-bottom: 24px;
}

.bravo-login-page .form-title::after,
.bravo-login-page .card-header::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--auth-primary);
}

.bravo-login-page .card {
  border-color: var(--auth-border);
}

.bravo-login-page .card-header {
  padding: 30px 34px 18px;
  border: 0;
  background: var(--auth-surface);
}

.bravo-login-page .card-body {
  padding: 10px 34px 34px;
}

.bravo-login-page .form-group,
.modal.login .form-group,
#confirm_password .form-group {
  position: relative;
  margin-bottom: 18px;
}

.bravo-login-page label,
.modal.login label,
#confirm_password label {
  color: var(--auth-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.bravo-login-page .form-control,
.modal.login .form-control,
#confirm_password .form-control {
  min-height: 50px;
  border: 1px solid var(--auth-border);
  border-radius: 14px;
  background: var(--auth-soft);
  color: var(--auth-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
  transition: border-color var(--auth-transition), background-color var(--auth-transition), box-shadow var(--auth-transition);
}

.bravo-login-page .form-control:hover,
.bravo-login-page .form-control:focus,
.modal.login .form-control:hover,
.modal.login .form-control:focus,
#confirm_password .form-control:hover,
#confirm_password .form-control:focus {
  border-color: rgba(4, 54, 48, 0.28);
  background: var(--auth-surface);
  outline: 0;
  box-shadow: var(--auth-focus-ring);
}

.bravo-login-page .form-control::placeholder,
.modal.login .form-control::placeholder,
#confirm_password .form-control::placeholder {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
}

.bravo-form-login .form-group .input-icon,
.bravo-form-register .form-group .input-icon {
  color: var(--auth-primary);
  opacity: 0.72;
}

.bravo-form-login .password-field-group .form-control,
.bravo-form-register .password-field-group .form-control {
  padding-right: 52px;
}

.bravo-form-login .password-toggle,
.bravo-form-register .password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(4, 54, 48, 0.08);
  color: var(--auth-primary);
  cursor: pointer;
  transition: background-color var(--auth-transition), box-shadow var(--auth-transition), color var(--auth-transition);
}

.bravo-form-login .password-toggle:hover,
.bravo-form-login .password-toggle:focus,
.bravo-form-register .password-toggle:hover,
.bravo-form-register .password-toggle:focus {
  background: var(--auth-primary);
  color: #ffffff;
  outline: 0;
  box-shadow: var(--auth-focus-ring);
}

.bravo-login-page input[type="checkbox"],
.modal.login input[type="checkbox"],
#confirm_password input[type="checkbox"] {
  accent-color: var(--auth-primary);
}

.bravo-login-page .d-flex.justify-content-between,
.modal.login .d-flex.justify-content-between {
  align-items: center;
  gap: 14px;
}

.bravo-login-page .d-flex.justify-content-between a,
.modal.login .d-flex.justify-content-between a,
.bravo-login-page .c-grey a,
.modal.login .c-grey a {
  color: var(--auth-primary);
  font-weight: 900;
}

.bravo-login-page .btn-primary,
.modal.login .btn-primary,
#confirm_password .btn-primary,
.bravo-form-login .form-submit,
.bravo-form-register .form-submit {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--auth-primary), #000000);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(4, 54, 48, 0.24);
  transition: transform var(--auth-transition), box-shadow var(--auth-transition), background var(--auth-transition);
}

.bravo-login-page .btn-primary:hover,
.bravo-login-page .btn-primary:focus,
.modal.login .btn-primary:hover,
.modal.login .btn-primary:focus,
#confirm_password .btn-primary:hover,
#confirm_password .btn-primary:focus {
  background: linear-gradient(135deg, var(--auth-primary-strong), #000000);
  color: #ffffff;
  outline: 0;
  box-shadow: 0 18px 40px rgba(4, 54, 48, 0.32), var(--auth-focus-ring);
  transform: translateY(-1px);
}

.bravo-login-page .btn:disabled,
.bravo-login-page .btn.disabled,
.bravo-login-page button:disabled,
.modal.login .btn:disabled,
.modal.login .btn.disabled,
.modal.login button:disabled,
#confirm_password .btn:disabled,
#confirm_password .btn.disabled,
#confirm_password button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
}

.bravo-login-page .btn-link,
.modal.login .btn-link {
  color: var(--auth-primary);
  font-weight: 900;
}

.bravo-login-page .advanced,
.modal.login .advanced {
  margin: 22px 0;
  padding-top: 20px;
  border-top: 1px solid var(--auth-border);
}

.bravo-login-page .advanced p,
.modal.login .advanced p {
  margin-bottom: 14px;
  color: var(--auth-muted);
  font-weight: 800;
}

.bravo-login-page .advanced .row,
.modal.login .advanced .row {
  margin-left: -6px;
  margin-right: -6px;
}

.bravo-login-page .advanced [class*="col-"],
.modal.login .advanced [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
}

.bravo-login-page .btn_login_fb_link,
.bravo-login-page .btn_login_gg_link,
.bravo-login-page .btn_login_tw_link,
.modal.login .btn_login_fb_link,
.modal.login .btn_login_gg_link,
.modal.login .btn_login_tw_link {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--auth-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--auth-ink);
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
}

.bravo-login-page .btn_login_fb_link:hover,
.bravo-login-page .btn_login_fb_link:focus,
.bravo-login-page .btn_login_gg_link:hover,
.bravo-login-page .btn_login_gg_link:focus,
.bravo-login-page .btn_login_tw_link:hover,
.bravo-login-page .btn_login_tw_link:focus,
.modal.login .btn_login_fb_link:hover,
.modal.login .btn_login_fb_link:focus,
.modal.login .btn_login_gg_link:hover,
.modal.login .btn_login_gg_link:focus,
.modal.login .btn_login_tw_link:hover,
.modal.login .btn_login_tw_link:focus {
  border-color: rgba(4, 54, 48, 0.24);
  color: var(--auth-primary);
  outline: 0;
  box-shadow: var(--auth-focus-ring);
}

.bravo-login-page .invalid-feedback,
.bravo-login-page .message-error,
.modal.login .invalid-feedback,
.modal.login .message-error,
#confirm_password .invalid-feedback,
#confirm_password .message-error {
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  color: #9d1f2f;
  font-size: 12px;
  font-weight: 800;
}

.bravo-login-page .message-error,
.modal.login .message-error,
#confirm_password .message-error {
  padding: 0;
}

.bravo-login-page .alert,
.modal.login .alert,
#confirm_password .alert {
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
}

.bravo-login-page .alert-success,
.modal.login .alert-success,
#confirm_password .alert-success {
  border-color: rgba(27, 150, 36, 0.2);
  background: rgba(27, 150, 36, 0.08);
  color: var(--auth-accent);
}

.bravo-login-page .alert-danger,
.modal.login .alert-danger,
#confirm_password .alert-danger {
  border-color: rgba(157, 31, 47, 0.2);
  background: rgba(157, 31, 47, 0.08);
  color: #9d1f2f;
}

.modal.login .modal-dialog,
#confirm_password .modal-dialog {
  max-width: 480px;
}

.modal.login .modal-content,
#confirm_password .modal-content {
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow);
}

.modal.login .modal-header,
#confirm_password .modal-header {
  align-items: center;
  padding: 24px 28px 16px;
  border: 0;
  background: var(--auth-surface);
}

.modal.login .modal-title::after,
#confirm_password .modal-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--auth-primary);
}

.modal.login .modal-body,
#confirm_password .modal-body {
  padding: 10px 28px 28px;
}

.modal.login .close,
#confirm_password .close {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--auth-border);
  border-radius: 50%;
  background: var(--auth-soft);
  opacity: 1;
}

.modal.login .close:hover,
.modal.login .close:focus,
#confirm_password .close:hover,
#confirm_password .close:focus {
  background: rgba(4, 54, 48, 0.08);
  outline: 0;
  box-shadow: var(--auth-focus-ring);
}

.modal.login .close img,
#confirm_password .close img {
  width: 14px;
  height: 14px;
}

#confirm_password .bc-form-confirm-password {
  margin: 0;
}

@media (max-width: 767px) {
  .bravo-login-page {
    min-height: auto;
    padding: 28px 0 56px;
  }

  .bravo-login-page .col-md-5 > div,
  .bravo-login-page .card {
    border-radius: 18px;
  }

  .bravo-login-page .col-md-5 > div,
  .bravo-login-page .card-header,
  .bravo-login-page .card-body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .bravo-login-page .col-md-5 > div {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .bravo-login-page .card-header {
    padding-top: 26px;
  }

  .bravo-login-page .form-title,
  .bravo-login-page .card-header,
  .modal.login .modal-title,
  #confirm_password .modal-title {
    font-size: 24px;
  }

  .bravo-login-page .form-group.row {
    display: block;
  }

  .bravo-login-page .form-group.row .col-form-label.text-md-right {
    padding-bottom: 8px;
    text-align: left;
  }

  .bravo-login-page .form-group.row [class*="col-md-"],
  .bravo-login-page .form-group.row .offset-md-4 {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
  }

  .bravo-login-page .advanced [class*="col-"],
  .modal.login .advanced [class*="col-"] {
    margin-bottom: 10px;
  }

  .modal.login .modal-dialog,
  #confirm_password .modal-dialog {
    margin: 12px;
  }
}

@media (max-width: 375px) {
  .bravo-login-page .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bravo-login-page .col-md-5 > div,
  .bravo-login-page .card-header,
  .bravo-login-page .card-body,
  .modal.login .modal-header,
  .modal.login .modal-body,
  #confirm_password .modal-header,
  #confirm_password .modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .bravo-login-page .d-flex.justify-content-between,
  .modal.login .d-flex.justify-content-between {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}