/* ═══════════════════════════════════════════════════════
   AUTH MODULE — Shared stylesheet
   Pages: login, signup, forgot password, reset password,
          reset done, reset complete, reset error
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SPLIT LAYOUT (Left panel + Right form)
   ═══════════════════════════════════════════════════════ */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 62px);
  background: var(--cream);
}

/* ─────────────────────────────────────────────────────
   LEFT PANEL
   ───────────────────────────────────────────────────── */
.auth-left {
  position: relative;
  background: linear-gradient(135deg, #751e19 0%, #4a0000 50%, #1a0000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem 0;
}

.auth-left-glow {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: radial-gradient(ellipse at 30% 70%,
    rgba(212,175,55,0.5) 0%, transparent 60%);
  pointer-events: none;
}

.auth-left-mandala {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url('/static/website/images/mandala.png');
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.auth-left-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 3rem;
  max-width: 100%;
}

.auth-left-emoji {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  line-height: 1;
}

.auth-left-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #fff;
}

.auth-left-sub {
  color: rgba(255,255,255,0.70);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 22rem;
  margin: 0 auto 2rem;
}

.auth-left-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 22rem;
  margin: 0 auto;
}

.auth-left-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  font-size: 0.875rem;
  text-align: left;
}
.auth-left-feature i { color: var(--gold); }

/* ─────────────────────────────────────────────────────
   RIGHT PANEL
   ───────────────────────────────────────────────────── */
.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--cream);
}

.auth-card {
  width: 100%;
  max-width: 440px;
}

.auth-form-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

/* ── Headings ── */
.auth-form-title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.auth-form-sub {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

/* ── Django / system messages ── */
.auth-msg {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.auth-msg-error {
  background: var(--red-light);
  border-color: var(--red);
  color: var(--red);
}
.auth-msg-success {
  background: var(--green-light);
  border-color: var(--green);
  color: #16a34a;
}
.auth-msg-info {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

/* ── Password toggle ── */
.auth-pw-group { position: relative; }

.auth-pw-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}
.auth-pw-toggle:hover { color: var(--red); }

/* ── Options row (remember + forgot) ── */
.auth-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text);
}
.auth-remember input {
  accent-color: var(--red);
  cursor: pointer;
}

.auth-forgot {
  font-size: 0.875rem;
  color: var(--red);
  font-weight: 500;
  transition: color 0.2s;
}
.auth-forgot:hover { color: var(--red-dark); }

/* ── Divider ── */
.auth-divider {
  text-align: center;
  margin: 1.5rem 0;
  color: var(--muted);
  font-size: 0.875rem;
  position: relative;
}
.auth-divider span {
  background: #fff;
  padding: 0 0.75rem;
  position: relative;
  z-index: 1;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

/* ── Bottom text/link ── */
.auth-bottom-text {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0;
}

.auth-bottom-link {
  color: var(--red);
  font-weight: 600;
  transition: color 0.2s;
}
.auth-bottom-link:hover { color: var(--red-dark); }

/* ── Additional helper: terms checkbox on signup ── */
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.auth-terms input {
  accent-color: var(--red);
  cursor: pointer;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.auth-terms a {
  color: var(--red);
  font-weight: 500;
}

/* ── Additional helper: centered single-card layout
     for reset pages that don't need the left panel ── */
.auth-single {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: var(--cream);
  min-height: calc(100vh - 62px);
}
.auth-single .auth-card { max-width: 480px; }

/* ── Icon circle for status pages
     (reset_done, reset_complete, reset_error, email_sent) ── */
.auth-status-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.75rem;
  color: #fff;
}
.auth-status-icon.success { background: var(--gradient-gold); }
.auth-status-icon.error   { background: var(--gradient); }
.auth-status-icon.info    { background: linear-gradient(135deg, #3b82f6, #1e40af); }

.auth-status-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  margin-bottom: 0.75rem;
}

.auth-status-text {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-status-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── Form hint (small helper text under inputs) ── */
.auth-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.375rem;
  display: block;
}

/* ── Password strength meter (signup only) ── */
.auth-strength {
  margin-top: 0.5rem;
}
.auth-strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width 0.3s, background 0.3s;
}
.auth-strength-fill.weak   { width: 33%; background: #ef4444; }
.auth-strength-fill.medium { width: 66%; background: #f59e0b; }
.auth-strength-fill.strong { width: 100%; background: var(--green); }

.auth-strength-label {
  font-size: 0.7rem;
  margin-top: 0.25rem;
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* ── Tablet ≤ 991px ── */
@media (max-width: 991.98px) {
  .auth-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-left {
    padding: 2.5rem 0;
    min-height: 260px;
  }
  .auth-left-emoji { font-size: 3.5rem; margin-bottom: 0.75rem; }
  .auth-left-title { font-size: 1.75rem; margin-bottom: 0.5rem; }
  .auth-left-sub {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 0 1rem;
  }
  .auth-left-features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
  }
  .auth-left-feature {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  .auth-right { padding: 2rem 1rem; }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
  .auth-left {
    padding: 2rem 0;
    min-height: 220px;
  }
  .auth-left-content { padding: 0 1.25rem; }
  .auth-left-emoji { font-size: 3rem; }
  .auth-left-title { font-size: 1.5rem; }
  .auth-left-sub { font-size: 0.85rem; }

  .auth-left-features { display: none; }

  .auth-right { padding: 1.5rem 1rem; }

  .auth-form-box {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-sm);
  }

  .auth-form-title { font-size: 1.375rem; }
  .auth-form-sub { font-size: 0.8125rem; margin-bottom: 1.25rem; }

  .auth-form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .auth-divider { margin: 1.25rem 0; }

  .auth-bottom-text { font-size: 0.875rem; }

  .auth-single { padding: 2rem 1rem; }

  .auth-status-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .auth-status-title { font-size: 1.2rem; }
  .auth-status-text { font-size: 0.85rem; }
}

/* ── Small mobile ≤ 400px ── */
@media (max-width: 400px) {
  .auth-left {
    padding: 1.5rem 0;
    min-height: 180px;
  }
  .auth-left-emoji { font-size: 2.5rem; }
  .auth-left-title { font-size: 1.25rem; }
  .auth-left-sub { font-size: 0.8rem; margin-bottom: 0; }

  .auth-form-box { padding: 1.5rem 1rem; }
  .auth-form-title { font-size: 1.25rem; }
}



/* ═══════════════════════════════════════════════════════
   SIGNUP — Left panel extras + form tweaks
   (Uses .auth-layout / .auth-left / .auth-right from login)
   ═══════════════════════════════════════════════════════ */

/* ── Gold accent inside the title ── */
.auth-left-title-accent {
  color: var(--gold-shine);
}

/* ── Contact info at bottom of the signup left panel ── */
.signup-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.signup-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
}
.signup-contact-item i {
  color: var(--gold);
  font-size: 0.75rem;
}

.signup-contact-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   SIGNUP FORM — smaller scale to fit ~9 fields
   ═══════════════════════════════════════════════════════ */

/* Wider form card for signup (more fields) */
#register-form ~ * { max-width: 100%; }

.auth-form-box:has(#register-form) {
  padding: 2rem 1.75rem;
}

@media (min-width: 992px) {
  .auth-card:has(#register-form) { max-width: 520px; }
}

/* Field label */
.auth-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark);
}
.auth-label .required { color: var(--red); }

/* Field spacing */
.auth-field { margin-bottom: 0.85rem; }

/* Two-column rows */
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.auth-row .form-group { margin-bottom: 0; }

/* Compact form control inside signup */
.auth-form-box .form-control {
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  min-height: 42px;
}

/* Icon-prefixed inputs */
.input-group {
  position: relative;
  display: block;
  width: 100%;
}

.input-group .input-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 0.85rem;
  line-height: 1;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Input inside a group gets left padding to clear the icon */
.input-group .form-control {
  padding-left: 2.5rem !important;
  width: 100%;
}

/* Password field: extra padding on the right for the eye toggle */
.input-group.auth-pw-group .form-control {
  padding-right: 2.75rem !important;
}

/* Password toggle button */
.auth-pw-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
  transition: color 0.2s;
}
.auth-pw-toggle i { font-size: 0.85rem; }
.auth-pw-toggle:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════
   CHIPS — same visual as before, cleaner
   ═══════════════════════════════════════════════════════ */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 2rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 0.72rem;
  color: var(--text);
  font-family: inherit;
  line-height: 1.3;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}

.chip.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 2px 8px rgba(178,34,34,0.25);
}

/* ═══════════════════════════════════════════════════════
   PASSWORD STRENGTH (uses .auth-strength from shared CSS)
   — visible only when typing
   ═══════════════════════════════════════════════════════ */
.auth-strength {
  display: none;
  margin-top: -0.15rem;
  margin-bottom: 0.85rem;
}
.auth-strength.is-visible { display: block; }

.auth-strength-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   SUBMIT + SWITCH LINK
   ═══════════════════════════════════════════════════════ */
.auth-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.auth-switch {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}
.auth-switch a {
  color: var(--red);
  font-weight: 600;
  margin-left: 0.25rem;
}
.auth-switch a:hover { color: var(--red-dark); }

/* ═══════════════════════════════════════════════════════
   SIGNUP RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .signup-contact { margin-top: 1.5rem; padding-top: 1rem; }
}

@media (max-width: 640px) {
  .auth-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .signup-contact-item { font-size: 0.75rem; }
  .signup-contact-hours { font-size: 0.68rem; }

  .auth-form-box:has(#register-form) {
    padding: 1.5rem 1.15rem;
  }

  .auth-form-box .form-control {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }
  .auth-form-box .input-group .form-control {
    padding-left: 2.2rem;
  }

  .chip { font-size: 0.68rem; padding: 0.3rem 0.65rem; }
}

@media (max-width: 400px) {
  .chip { font-size: 0.65rem; padding: 0.28rem 0.55rem; }
  .auth-label { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════
   RESET PASSWORD PAGE
   ═══════════════════════════════════════════════════════ */

/* Hidden error box (toggled by JS) */
.auth-error-hidden {
  display: none;
}

/* Visible error box — flex layout with icon */
#password-error {
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
#password-error:not(.auth-error-hidden) {
  display: flex;
}
#password-error i { flex-shrink: 0; font-size: 0.95rem; }
#password-error span { flex: 1; font-size: 0.85rem; }

/* Hint text under password field */
.auth-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.3rem;
  display: block;
}

/* Mobile tweak */
@media (max-width: 640px) {
  #password-error span { font-size: 0.8rem; }
  .auth-hint { font-size: 0.68rem; }
}


/* ═══════════════════════════════════════════════════════
   STATUS CARD — Reset Complete / Reset Done / Reset Error
   ═══════════════════════════════════════════════════════ */

/* Centered status card (icon + heading + text + actions) */
.auth-form-box-center {
  text-align: center;
}

/* Larger status icon inside the form box */
.auth-form-box-center .auth-status-icon {
  margin-top: 0.5rem;
}

/* Spacing between title and text */
.auth-form-box-center .auth-status-title {
  margin-bottom: 0.75rem;
}

.auth-form-box-center .auth-status-text {
  margin-bottom: 1.75rem;
}

/* Action buttons */
.auth-form-box-center .auth-status-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Outline button inside auth card */
.auth-form-box .btn-outline {
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--dark);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition);
  text-decoration: none;
  min-height: 44px;
  font-size: 0.95rem;
}

.auth-form-box .btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .auth-form-box-center .auth-status-icon {
    margin-top: 0;
  }
  .auth-form-box-center .auth-status-title { margin-bottom: 0.5rem; }
  .auth-form-box-center .auth-status-text { margin-bottom: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════
   TIP BOX — info callout inside auth status cards
   ═══════════════════════════════════════════════════════ */
.auth-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: #1e40af;
  text-align: left;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.auth-tip-box > i {
  color: #3b82f6;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.auth-tip-box strong {
  color: #1e3a8a;
  font-weight: 600;
  display: block;
  margin-bottom: 0.15rem;
}

.auth-tip-box a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.auth-tip-box a:hover {
  text-decoration: underline;
}

/* Mobile tweak */
@media (max-width: 640px) {
  .auth-tip-box {
    padding: 0.75rem 0.85rem;
    font-size: 0.78rem;
    gap: 0.5rem;
  }
  .auth-tip-box > i { font-size: 0.9rem; }
}


/* ═══════════════════════════════════════════════════════
   TIP BOX — error variant (red)
   ═══════════════════════════════════════════════════════ */
.auth-tip-box-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.auth-tip-box-error > i { color: #dc2626; }
.auth-tip-box-error strong { color: #7f1d1d; }
.auth-tip-box-error a { color: var(--red); }