/* ═══════════════════════════════════════════════════════════════
   Alta Web — auth.css
   Styles for: Login, Register, Forgot Password, OTP, Reset Password
═══════════════════════════════════════════════════════════════ */

/* ── Auth Page Layout ─────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left panel — brand/visual */
.auth-panel-left {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.auth-panel-left-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1B3A2F 0%, #102019 100%);
}
.auth-panel-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/*
  These sit on the dark green panel. They were the fill green at 15%,
  which against that background is about one step of lightness — the
  shapes were there in the DOM and invisible on screen. The lifted
  green from alta_mark_light.svg at 62%, on a 2px stroke, reads as a
  deliberate mark without competing with the type over it.
*/
.deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(91,175,141,0.62);
}
/*
  Lifts the panel's content above the background and the decorations.
  The :not() is load-bearing: this rule ties with .deco-circle on
  specificity and, coming later, was winning — which turned two
  absolutely positioned 400px and 240px circles into flex items. On the
  desktop column that merely padded the layout; in the mobile band it
  made a 72px strip 432px tall.
*/
.auth-panel-left > *:not(.deco-circle) { position: relative; z-index: 1; }

.auth-brand { display: flex; align-items: flex-end; gap: 6px; }
/* Same dark panel as the footer, so the same lifted palette. */
.auth-brand-mark {
  height: 36px;
  aspect-ratio: 456 / 151;
  flex-shrink: 0;
  background: url('/assets/icons/alta_logo_full_light.svg') left center / contain no-repeat;
}
.auth-brand-name { display: none; }
.auth-brand-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: -0.153em;
  color: white;
}

.auth-panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-panel-tagline {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin-bottom: 16px;
}
.auth-panel-tagline em {
  font-style: normal;
  /*
    Not --primary. This headline sits on the dark green panel, where
    the fill green is 2.0:1 against its own background — the accent
    word was effectively invisible. This is the lifted green from
    alta_mark_light.svg, 5.3:1 on the same panel.
  */
  color: #5BAF8D;
}
.auth-panel-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  max-width: 320px;
  margin-bottom: 36px;
}
.auth-feature-list { display: flex; flex-direction: column; gap: 12px; }
.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.auth-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(47,107,85,0.15);
  border: 1px solid rgba(47,107,85,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-panel-footer {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}

/* Right panel — form */
.auth-panel-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  min-height: 100vh;
  background: var(--white);
  overflow-y: auto;
}

.auth-form-wrap {
  width: 100%;
  max-width: 400px;
}

.auth-form-header { margin-bottom: 28px; }
.auth-form-title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}
.auth-form-sub { font-size: 13.5px; color: var(--subtle); line-height: 1.55; }

/* Social login */
.social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.social-btn:hover { border-color: var(--faint); background: var(--surface); }

/* Password strength meter */
.pw-strength { margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.pw-bars { display: flex; gap: 4px; }
.pw-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.2s;
}
.pw-bar.filled-weak { background: var(--error); }
.pw-bar.filled-mid { background: var(--gold); }
.pw-bar.filled-strong { background: var(--success); }
.pw-label { font-size: 11px; color: var(--subtle); }

/* Register step progress */
.reg-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.reg-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--subtle);
}
.reg-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.reg-step.active .reg-step-num { background: var(--blue); border-color: var(--blue); color: var(--on-primary); }
.reg-step.active { color: var(--primary-text); font-weight: 600; }
.reg-step.done .reg-step-num { background: var(--success); border-color: var(--success); color: white; }
.reg-step-line { flex: 1; height: 1px; background: var(--border); }

/* OTP input boxes */
.otp-row { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.otp-box {
  width: 52px;
  height: 60px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
}
.otp-box.filled { border-color: var(--primary-text); background: var(--blue-lt); }
.otp-box.active { border-color: var(--primary-text); background: var(--white); box-shadow: 0 0 0 3px var(--blue-lt); }

/* The boxes are real <input>s now, one digit each. Flex centring does
   nothing to an input's own text, so it centres itself instead, and the
   focus ring reuses the .active look rather than the browser default. */
input.otp-box {
  display: block;
  text-align: center;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input.otp-box::-webkit-outer-spin-button,
input.otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.otp-box:focus { border-color: var(--primary-text); background: var(--white); box-shadow: 0 0 0 3px var(--blue-lt); }

/* Any auth button mid-request: still readable, but not clickable twice. */
.btn.is-busy { opacity: 0.6; pointer-events: none; }

.auth-footer-link { text-align: center; font-size: 13px; color: var(--subtle); margin-top: 20px; }
.auth-footer-link a { color: var(--primary-text); font-weight: 600; cursor: pointer; }

/* Terms row */
.terms-row { font-size: 12px; color: var(--subtle); line-height: 1.55; }
.terms-row a { color: var(--primary-text); font-weight: 600; }

/* Phone input with dial code.

   The dial code is a <select>, and select.js replaces it with a button
   carrying the same class — so these rules target the button. The
   native element it leaves behind is styled by .select-native alone.

   The min-width keeps the field boundary still: dial codes run from
   two characters to five, and the input beside it shouldn't resize
   every time the country changes. */
.phone-input-group { display: flex; gap: 0; }
button.phone-dial {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--input-bg);
  font-size: 13.5px;
  color: var(--dark);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 92px;
}
/* The focus ring is drawn on all four sides, so it needs to sit above
   the input's border rather than under the seam between them. */
button.phone-dial[aria-expanded="true"],
button.phone-dial:focus-visible { position: relative; z-index: 1; }
.phone-dial-input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Forgot password flow icon */
.auth-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* ── ══════════════════════════════════════════════════════
   RESPONSIVE — AUTH

   Same breakpoints as common.css.
══════════════════════════════════════════════════════ ── */

@media (max-width: 1024px) {
  /*
    The left panel is brand and reassurance; the right panel is the
    job the visitor came to do. On one column the form has to come
    first, so the panel is reduced to a band above it carrying just
    the logo — enough to say whose site this is without pushing the
    fields below the fold.
  */
  .auth-page {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .auth-panel-left {
    /*
      relative, not static: the panel has overflow:hidden to clip the
      decorative circles, but that only clips descendants whose
      containing block it is. Made static, it stopped being theirs and
      the circles spilled out of the band across the form below.
    */
    position: relative;
    /*
      The base rule pins this to 100vh for the two-column layout. Not
      overriding it here was the whole bug: on a phone the panel stayed
      a full screen tall, so the sign-in form began one entire viewport
      below the fold with nothing but empty brand panel above it.
    */
    height: auto;
    padding: 20px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  /* The tagline, feature list and copyright have no room in a band.
     The copyright's class is auth-panel-footer — an earlier pass wrote
     .auth-panel-foot, which matches nothing, so it kept showing. */
  .auth-panel-body,
  .auth-panel-left .auth-panel-footer { display: none; }
  .auth-panel-right { padding: 32px 24px 56px; }
}

@media (max-width: 640px) {
  .auth-panel-left { padding: 16px; }
  .auth-panel-right { padding: 24px 16px 48px; }
  .auth-form-wrap { max-width: none; }
  /* Google and Facebook side by side get too narrow to read. */
  .social-login { grid-template-columns: 1fr; }
}