/* ==========================================================================
   StarBoost — auth.css
   Shared styling for register / login / forgot-password / reset-password /
   verify-otp. Bootstrap 5 provides grid + form semantics only; all visual
   styling here is on top of base.css's new blue/gold design-system tokens
   (see design-system-instructions.md). Reuses base.css's .form-group-icon,
   .btn-gold, .back-btn components rather than redefining them here.
   ========================================================================== */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 85% 0%, rgba(245, 166, 35, 0.12), transparent 40%),
    radial-gradient(circle at 10% 100%, rgba(47, 111, 237, 0.1), transparent 40%),
    var(--bg-soft);
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}
.auth-logo img { height: 28px; }

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem 3rem;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.1rem;
}
@media (min-width: 576px) {
  .auth-card { padding: 2.5rem; }
}

.auth-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1.1rem;
}

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.auth-card__subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.75rem;
}

/* ---- Form fields ----
   Built on base.css's .form-group-icon (icon-left input) — label sits above
   for accessibility, .form-group-icon wraps just the icon + input row. */
.auth-field { margin-bottom: 1.15rem; }

.auth-field > label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.auth-field .form-group-icon { margin-bottom: 0; }

.auth-field .form-group-icon.has-toggle input { padding-right: 44px; }

.auth-field .form-control.is-invalid,
.auth-field input.is-invalid {
  border-color: var(--error) !important;
}
.auth-field .invalid-feedback {
  display: none;
  color: var(--error);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}
.auth-field .form-control.is-invalid ~ .invalid-feedback,
.auth-field input.is-invalid ~ .invalid-feedback,
.auth-field.show-invalid .invalid-feedback {
  display: block;
}
.auth-field .field-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.auth-password-wrap { position: relative; }

.auth-row-link {
  display: flex;
  justify-content: flex-end;
  margin: -0.5rem 0 1.15rem;
}
.auth-row-link a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
}
.auth-row-link a:hover { color: var(--blue-dark); }
/* Login page: "Remember me" on the left, "Forgot password?" on the right,
   same row instead of each getting its own vertical slot. */
.auth-row-link--split { justify-content: space-between; align-items: center; }

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.auth-check input { margin-top: 0.2rem; }
.auth-check a { color: var(--blue); font-weight: 600; }
.auth-check--inline { align-items: center; margin-bottom: 0; cursor: pointer; }
.auth-check--inline input { margin-top: 0; accent-color: var(--blue); width: 16px; height: 16px; cursor: pointer; }
.auth-check--inline span { font-weight: 600; color: var(--ink); }

.auth-submit {
  width: 100%;
  justify-content: center;
}

.auth-footer-link {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-footer-link a { color: var(--blue); font-weight: 700; }

.auth-turnstile { margin: 1.25rem 0; display: flex; justify-content: center; }

/* ---- Alerts / flash ---- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}
.auth-alert-error { background: #FDECEC; color: #B91C1C; }
.auth-alert-success { background: #E7F8F1; color: var(--success); }

/* ---- Steps (OTP / progress) ---- */
.auth-steps { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.auth-steps .step-dot {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
}
.auth-steps .step-dot.done,
.auth-steps .step-dot.active { background: var(--gold); }

.auth-otp-input {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.3rem;
  font-weight: 700;
}

/* ---- Telegram button ---- */
.auth-telegram-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #26A5E4, #1E88C7);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.auth-telegram-btn:hover { color: #fff; opacity: 0.92; }

/* ---- Third-party plugin overrides: intl-tel-input + country-select-js ---- */
.iti { width: 100%; }
.iti input.form-control {
  /* intl-tel-input's own CSS (.iti--separate-dial-code input) already
     reserves 52px of left padding for the flag+dial-code box — that box is
     absolutely positioned (left:0) over the input, not a true sibling, so
     the input's left padding MUST be large enough to clear it or the dial
     code text overlaps the typed number. Our previous override
     (padding-left: 0.95rem) was smaller than that 52px reservation, which
     caused exactly that overlap. Widened further (68px) since some dial
     codes run to 4 digits (e.g. +1264) and still need clearance.
     Everything else here matches .country-select below so both fields in
     this form look consistent. */
  width: 100%;
  padding: 0.72rem 0.95rem 0.72rem 68px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-soft) !important;
  height: auto !important;
  font-family: var(--font-body);
  padding-left: 88px !important;
}
.iti input.form-control:focus {
  outline: none;
  border-color: var(--blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.iti__selected-flag {
  border-radius: var(--radius) 0 0 var(--radius);
}
.iti__country-list {
  /* Default plugin CSS has no explicit width, so it shrinks to whatever the
     longest visible row needs — on a narrow auth card that's narrower than
     the input above it and looks cramped/misaligned. Match the input's
     width (with a sensible floor for very narrow viewports) instead. */
  width: 100%;
  min-width: 280px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border-color: var(--line);
}
/* country-select-js keeps the "country-select" class on the WRAPPER div it
   creates (the original <input> underneath keeps only "form-control"). That
   means styling border/background/padding on .country-select as we did
   before was styling the wrapper while the actual <input> inside it still
   rendered Bootstrap's own default border + padding — a visible double
   border and taller-than-other-fields box. Fix: the wrapper carries no
   visual styling of its own (just position:relative, already set by the
   plugin's own CSS, for the flag icon to anchor against); the actual input
   is the only element that gets a border/background/radius. */
.country-select {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  font-family: var(--font-body);
}
.country-select input.form-control {
  width: 100%;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-soft) !important;
  height: auto !important;
  box-shadow: none !important;
  /* Only vertical padding is set here, to match the other fields' rhythm.
     Horizontal padding is deliberately left to the plugin's own CSS, which
     already reserves the correct space for the flag icon it renders inside
     this input — overriding it would push the flag and the country name
     text on top of each other, the same overlap bug already fixed on the
     phone field's dial-code box above. */
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 52px !important;
}
.country-select input.form-control:focus {
  outline: none;
  border-color: var(--blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--blue-soft) !important;
}
.country-select .country-list {
  /* Same fix as .iti__country-list above — country-select-js's dropdown
     also has no explicit width by default and ends up narrower than the
     input, wrapping country names awkwardly. */
  width: 100%;
  min-width: 280px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ---- Promo banner ---- */
.auth-promo {
  background: var(--gold-soft);
  border-left: 4px solid var(--gold-dark);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: #7A4E00;
}
.auth-promo strong { color: #5C3900; }