/* ==========================================================
   login-common.css — Login / Register / Auth pages
   Uses the same CSS variables as site.css
   ========================================================== */

/* ── Page wrapper ─────────────────────── */
.login-page-container {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) clamp(16px, 3vw, 24px);
  background: radial-gradient(circle at 25% 40%, rgba(232,117,26,.07), transparent 38%),
              linear-gradient(180deg, #FEF9F3 0%, #F5F1EA 100%);
}

/* ── Card ─────────────────────────────── */
.login-glass-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 4vw, 3rem);
  width: 100%;
  max-width: 520px;
}

.login-glass-card h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--black);
  margin: 0 0 .4rem;
}

.login-subtitle {
  font-size: .93rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* ── Form group ────────────────────────── */
.login-form-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Individual field ────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.form-field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: #fafafa;
  outline: none;
  transition: border-color .2s, background .2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--saffron);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(232,117,26,.1);
}

.form-field input::placeholder { color: var(--light); }

/* ── Two-column field row ─────────────── */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr;
  gap: .75rem;
}

.form-row-phone {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: .75rem;
}

/* ── Checkbox row ────────────────────── */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--ink);
}

.form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--saffron);
  flex-shrink: 0;
  cursor: pointer;
}

.form-checkbox label {
  cursor: pointer;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Checkbox terms row ─────────────── */
.form-terms {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.form-terms input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--saffron);
  flex-shrink: 0;
  margin-top: .15rem;
  cursor: pointer;
}

.form-terms label {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}

/* ── Forgot password ─────────────────── */
.forgot-password-link {
  text-align: right;
  margin-top: -.25rem;
}

.forgot-password-link a {
  font-size: .83rem;
  color: var(--saffron);
  font-weight: 500;
}

.forgot-password-link a:hover { color: var(--saffron-dark); }

/* ── Submit button ───────────────────── */
.login-button-style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--saffron);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s, transform .15s;
  margin-top: .5rem;
}

.login-button-style:hover { background: var(--saffron-dark); }
.login-button-style:active { transform: scale(.97); }

/* ── Error alert ─────────────────────── */
.form-error-alert {
  padding: .75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  color: #b91c1c;
  font-size: .875rem;
}

.form-error-alert i { margin-right: .35rem; }

/* ── Field error message ─────────────── */
.form-field-error {
  font-size: .82rem;
  color: #b91c1c;
  margin-top: .15rem;
}

/* ── Field hint ──────────────────────── */
.form-field-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.5;
}

/* ── Social divider ──────────────────── */
.social-divider {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.social-divider p {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .9rem;
}

/* ── Google button ───────────────────── */
.social-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
  margin-bottom: .5rem;
}

.social-btn-google:hover {
  border-color: var(--saffron);
  box-shadow: var(--shadow-sm);
}

/* ── Sign up / sign in switcher ──────── */
.signup-section {
  text-align: center;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.signup-section p {
  font-size: .9rem;
  color: var(--muted);
  margin: 0;
}

.signup-section a {
  color: var(--saffron);
  font-weight: 600;
}

.signup-section a:hover { color: var(--saffron-dark); }

/* ── Password hint box ───────────────── */
.password-hint-box {
  background: var(--saffron-pale);
  border: 1px solid rgba(232,117,26,.2);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-top: .25rem;
}

.password-hint-box p {
  color: var(--ink);
  font-weight: 600;
  font-size: .8rem;
  margin: 0 0 .25rem;
}

.password-hint-box ul {
  color: var(--muted);
  font-size: .8rem;
  padding-left: 1.2rem;
  margin: 0;
}

.password-hint-box li { margin-bottom: .15rem; }

/* ── Responsive ──────────────────────── */
@media (max-width: 560px) {
  .form-row-2,
  .form-row-3,
  .form-row-phone {
    grid-template-columns: 1fr;
  }
}

/* ── Inline info / warning boxes ─────── */
.login-info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}
.login-warning-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}

/* ── Radio / checkbox option row ─────── */
.login-radio-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .45rem;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
}
.login-radio-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--saffron); cursor: pointer; }

/* ── Resend / secondary action button ── */
.login-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .72rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--rule);
  background: transparent;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  margin-top: .5rem;
  font-family: var(--font-body);
}
.login-secondary-btn:hover { border-color: var(--saffron); background: var(--saffron-pale); color: var(--ink); }

/* ── Resend links row ─────────────────── */
.login-resend-row {
  text-align: center;
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--muted);
}
.login-resend-row a, .login-resend-row button[type=submit] {
  color: var(--saffron);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .88rem;
  padding: 0;
}
.login-resend-row a:hover, .login-resend-row button[type=submit]:hover { text-decoration: underline; }
.login-resend-sep { color: var(--rule); margin: 0 .5rem; }

/* ── Preference option rows ──────────── */
.pref-opts { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.pref-opt-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.pref-opt-row:hover { border-color: var(--saffron); background: var(--saffron-pale); }
.pref-opt-row input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--saffron); margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.pref-opt-info { flex: 1; }
.pref-opt-title { font-size: .9rem; font-weight: 600; color: var(--black); margin-bottom: .15rem; }
.pref-opt-desc { font-size: .8rem; color: var(--muted); }

/* ── Social provider icon ─────────────── */
.social-provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--saffron-pale);
  color: var(--saffron);
  font-size: 1.4rem;
  margin-bottom: .75rem;
}
.social-provider-icon.google { background: #fef2f2; color: #dc2626; }
.social-provider-icon.facebook { background: #eff6ff; color: #2563eb; }

/* ── Social account info summary ──────── */
.social-account-summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}
.social-account-summary-title { font-weight: 600; color: var(--black); margin-bottom: .5rem; font-size: .875rem; }
.social-account-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.social-account-summary-item small { font-size: .75rem; color: var(--muted); display: block; margin-bottom: .1rem; }