/* Murlix Easy Invest — client area theme
   Covers: forgotPassword.php, register.php, view_plans.php
   (login.php uses login-theme.css, dashboard.php uses dashboard-theme.css for now.
    Next iteration will consolidate all five into one client-theme.css.)
   Loaded AFTER Bootstrap and inline <style>, so these rules win.
   Delete this file to fully revert. */

/* ---------- Global ---------- */
body {
  background: #F7F8FA !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: #0B1220 !important;
}
:focus-visible {
  outline: 3px solid #0B1220 !important;
  outline-offset: 2px !important;
}

/* ---------- Auth card (forgotPassword + register) ---------- */
.login-box,
.register-box {
  max-width: 460px !important;
  background: #FFFFFF !important;
  padding: 40px 36px !important;
  border-radius: 12px !important;
  border: 1px solid #E2E5EA !important;
  box-shadow: 0 8px 30px rgba(11, 18, 32, 0.06) !important;
  animation: none !important;
}
.login-box h2,
.register-box h2 {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #0B1220 !important;
  margin-bottom: 6px !important;
}
.login-box p {
  color: #475467 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
}

/* Icon circle (forgotPassword) — brand mark, ink + amber accent */
.login-box .icon-box {
  background: #0B1220 !important;
  color: #C68A3D !important;
  font-size: 28px !important;
  width: 64px !important;
  height: 64px !important;
  box-shadow: none !important;
  margin-bottom: 8px !important;
}

/* ---------- Form labels + inputs ---------- */
.login-box .form-label,
.register-box .form-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0B1220 !important;
  margin-bottom: 6px !important;
}
.login-box .form-control,
.register-box .form-control {
  border: 1px solid #C9CED6 !important;
  border-radius: 6px !important;
  padding: 11px 12px !important;
  font-size: 14.5px !important;
  color: #0B1220 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
.login-box .form-control::placeholder,
.register-box .form-control::placeholder {
  color: #6B7280 !important;
  opacity: 1;
}
.login-box .form-control:hover,
.register-box .form-control:hover {
  border-color: #0B1220 !important;
}
.login-box .form-control:focus,
.register-box .form-control:focus,
.login-box .form-control:focus-visible,
.register-box .form-control:focus-visible {
  border-color: #0B1220 !important;
  outline: 3px solid #0B1220 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------- Primary CTA ---------- */
.login-box .btn-custom,
.register-box .btn-custom {
  background: #C68A3D !important;
  color: #0B1220 !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 13px 24px !important;
  letter-spacing: 0 !important;
  transition: background 0.15s ease;
  transform: none !important;
  box-shadow: none !important;
}
.login-box .btn-custom:hover,
.login-box .btn-custom:focus,
.register-box .btn-custom:hover,
.register-box .btn-custom:focus {
  background: #B47B34 !important;
  color: #0B1220 !important;
  transform: none !important;
  box-shadow: none !important;
}
.login-box .btn-custom:focus-visible,
.register-box .btn-custom:focus-visible {
  outline: 3px solid #0B1220 !important;
  outline-offset: 2px !important;
}
.register-box .btn-custom:disabled {
  background: #C68A3D !important;
  color: #0B1220 !important;
  border-color: #C68A3D !important;
  opacity: 0.75 !important;
}

/* ---------- Helper / footer links ---------- */
.login-box .helper-link,
.login-box a,
.register-box a {
  color: #8A5A0F !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
}
.login-box a:hover,
.login-box a:focus,
.register-box a:hover,
.register-box a:focus,
.login-box .helper-link:hover {
  color: #6E4708 !important;
}

/* ---------- Alerts ---------- */
.login-box .alert-danger,
.register-box .alert-danger {
  background: #FCEBEB !important;
  color: #7A1F1F !important;
  border: 1px solid #E9BCBC !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
}
.login-box .alert-success,
.register-box .alert-success {
  background: #E1F5EE !important;
  color: #04342C !important;
  border: 1px solid #A9DDCA !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
}

/* ---------- Registration success modal ---------- */
#passwordModal .modal-content {
  border-radius: 12px !important;
  border: 1px solid #E2E5EA !important;
}
#passwordModal .modal-header.bg-success {
  background: #0B3532 !important;
  color: #FFFFFF !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: none !important;
}
#passwordModal .modal-title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}
#passwordModal #generatedPassword {
  border: 1px solid #C9CED6 !important;
  background: #F7F8FA !important;
  font-family: "JetBrains Mono", "Courier New", monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: #0B1220 !important;
}
#passwordModal .btn-outline-secondary,
#passwordModal .btn-outline-primary {
  border-color: #C9CED6 !important;
  color: #0B1220 !important;
}
#passwordModal .btn-outline-secondary:hover,
#passwordModal .btn-outline-primary:hover {
  background: #F7F8FA !important;
  border-color: #0B1220 !important;
  color: #0B1220 !important;
}
#passwordModal .btn-success {
  background: #C68A3D !important;
  color: #0B1220 !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
}
#passwordModal .btn-success:hover,
#passwordModal .btn-success:focus {
  background: #B47B34 !important;
  color: #0B1220 !important;
}
#passwordModal #copyMsg {
  color: #04342C !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}
#passwordModal .modal-body p.small {
  color: #6B7280 !important;
}

/* ---------- Plans page: header + heading ---------- */
h4.fw-bold {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  color: #0B1220 !important;
  font-size: 22px !important;
  margin-top: 8px;
  margin-bottom: 24px !important;
}

/* Reuse the navbar theme from dashboard-theme */
nav.navbar {
  background: #0B1220 !important;
  border-bottom: 1px solid #1B2436;
}
.navbar-brand {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  color: #F7F8FA !important;
}
.navbar-text {
  color: #C7CDDA !important;
}
.navbar-text .text-warning {
  color: #C68A3D !important;
  font-weight: 600;
}
.navbar .nav-link {
  color: #C7CDDA !important;
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #FFFFFF !important;
}
.navbar .btn-danger {
  background: transparent !important;
  color: #F7F8FA !important;
  border: 1px solid #4A5468 !important;
  font-weight: 600;
  border-radius: 6px !important;
}
.navbar .btn-danger:hover,
.navbar .btn-danger:focus {
  background: #E24B4A !important;
  border-color: #E24B4A !important;
  color: #FFFFFF !important;
}
.navbar-toggler {
  border: 1px solid #4A5468 !important;
}
.navbar-toggler:focus-visible {
  outline: 3px solid #C68A3D !important;
  outline-offset: 2px !important;
}

/* ---------- Plan cards ---------- */
.plan-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E5EA !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
.plan-card:hover {
  border-color: #C9CED6 !important;
}
.plan-title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #0B1220 !important;
}
.plan-desc {
  color: #475467 !important;
  font-size: 13.5px !important;
  margin-top: 4px !important;
}

/* Price + strikethrough — contrast fix (was #999) */
.plan-price {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #0B1220 !important;
}
.base-price {
  color: #6B7280 !important;
  font-size: 16px !important;
}

/* Discount chip — contrast-safe */
.discount-chip {
  background: #E1F5EE !important;
  color: #04342C !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border: 1px solid #C7E8DA;
}

/* Duration toggles */
.duration-btn {
  border: 1px solid #C9CED6 !important;
  color: #0B1220 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #FFFFFF !important;
  transition: all 0.15s ease;
}
.duration-btn:hover {
  border-color: #0B1220 !important;
}
.duration-active {
  background: #0B1220 !important;
  color: #FFFFFF !important;
  border-color: #0B1220 !important;
}

/* Features */
.feature-row {
  font-size: 13.5px !important;
  color: #475467 !important;
  padding: 4px 0 !important;
  margin-bottom: 0 !important;
}

/* Buy button */
.btn-buy {
  background: #C68A3D !important;
  color: #0B1220 !important;
  border-radius: 6px !important;
  padding: 12px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.btn-buy:hover,
.btn-buy:focus {
  background: #B47B34 !important;
  color: #0B1220 !important;
}
.btn-buy:focus-visible {
  outline: 3px solid #0B1220 !important;
  outline-offset: 2px !important;
}

/* Trial badge — quieter */
.trial-badge {
  background: #E1F5EE !important;
  color: #04342C !important;
  border: 1px solid #C7E8DA !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
}

/* Muted text — contrast fix */
.text-muted {
  color: #6B7280 !important;
}

/* ---------- Footer ---------- */
footer {
  background: #0B1220 !important;
  color: #C7CDDA !important;
  border-top: none !important;
  padding: 20px 0 !important;
  margin-top: 40px !important;
}
footer small {
  color: #8A93A8 !important;
  font-size: 12.5px;
}

/* ---------- Mobile ---------- */
@media (max-width: 576px) {
  .login-box,
  .register-box {
    padding: 28px 22px !important;
  }
  .login-box h2,
  .register-box h2 {
    font-size: 20px !important;
  }
  .plan-card {
    padding: 20px !important;
  }
}