/* =============================================================================
   dotvoiceAI — sign-in pages  ·  auth.css
   The split layout shared by the admin login and the vendor/agent sign-in.
   Loaded ALONGSIDE landing.css or portal.css, both of which define the same
   brand tokens, so this file only owns the layout.
============================================================================= */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--bg);color:var(--text)}

/* ── Brand panel ─────────────────────────────────────────── */
.auth-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 48px;overflow:hidden;color:#fff;
  background:linear-gradient(145deg,#1a1205 0%,#2a1408 35%,#3a1410 70%,#1a0d14 100%);
  background-size:cover;background-position:center}
/* Warm wash over whatever sits behind — gradient or a photo the operator drops
   into images/login.jpg — so the copy keeps its contrast either way. */
.auth-side::before{content:"";position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(249,115,22,.55),rgba(239,68,68,.35) 55%,rgba(10,14,24,.88));
  z-index:0}
/* A soft brand glow, top-right. */
.auth-side::after{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(251,146,60,.5),transparent 68%);
  z-index:0;pointer-events:none}
.auth-side > *{position:relative;z-index:1}

.auth-side-top{flex-shrink:0}
.auth-logo{height:46px;width:auto;display:block}
.auth-side-mid{max-width:440px}
.auth-side-mid h1{margin:0 0 14px;font-size:2.5rem;line-height:1.14;font-weight:800;letter-spacing:-.02em}
.auth-side-mid p{margin:0 0 26px;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.82)}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.auth-points li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;font-weight:600;
  color:rgba(255,255,255,.94)}
.auth-tick{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);font-size:.68rem;font-weight:800;margin-top:1px}
.auth-wave{width:100%;max-width:560px;height:80px;fill:rgba(255,255,255,.55)}

/* ── Form side ───────────────────────────────────────────── */
/* Centred with `margin:auto`, NOT justify-content:center. A flex item centred
   by justify-content cannot be scrolled back to once it overflows — the top is
   cut off and unreachable. margin:auto centres the same way but keeps the
   overflow reachable, which matters on short windows and when the Turnstile
   widget pushes the password form past the fold. */
.auth-main{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:40px 28px 52px;background:var(--bg);overflow-y:auto;max-height:100vh}
.auth-theme{position:absolute;top:22px;right:22px;z-index:2}
/* The link variant ("Back to site") sizes itself — landing.css has no .btn-sm,
   so it must not rely on one. The admin page's icon button is left alone. */
a.auth-theme{padding:7px 13px;font-size:.8rem;line-height:1.2;border-radius:9px}
/* .small lives in portal.css but not landing.css; both pages use it. */
.auth .small{font-size:.8rem}
.auth-form{width:100%;max-width:390px;margin:auto}
.auth-logo-sm{display:none;height:40px;width:auto;margin:0 0 18px}
.auth-badge{display:inline-block;padding:4px 11px;border-radius:20px;background:rgba(249,115,22,.14);
  border:1px solid rgba(249,115,22,.34);color:var(--brand3);
  font-size:.65rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.auth-badge + h2{margin-top:12px}
.auth-form h2{margin:0 0 5px;font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.auth-sub{margin:0 0 20px;color:var(--muted);font-size:.88rem}
.auth-submit{width:100%;margin-top:18px;padding:12px;font-size:.95rem}
.auth-foot{margin:18px 0 0;text-align:center}
/* In the flow, directly under the card — pinned to the bottom it would float
   over the form as soon as the content scrolled. */
.auth-copy{margin:16px 0 0;text-align:center;font-size:.72rem;flex-shrink:0}

/* Password field with a reveal control inside it */
.auth-pw{position:relative;display:block}
.auth-pw input{padding-right:44px}
.auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin-top:3px;
  width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:8px;
  font-size:.95rem;opacity:.5;line-height:1}
.auth-eye:hover{opacity:.85;background:var(--panel2)}
.auth-eye.on{opacity:1;color:var(--brand3)}

/* The panes were sized for a modal that could grow as tall as it liked. On a
   page they share the viewport with the header and footer, so trim the gaps —
   the password pane with a Turnstile widget was the tallest case and pushed its
   button below the fold. */
.auth-form .tabs{margin-bottom:16px}
.auth-form .pane{text-align:left}
.auth-form .login-form{gap:12px}
.auth-form .stage-note{margin-bottom:12px}
.auth-form .otp-msg{margin-top:8px}
.auth-form .modal-foot{margin-top:14px}
.auth-form .cf-turnstile{margin-top:12px}
/* On a short window every gap counts; give the form the space instead. */
@media(max-height:760px){
  .auth-main{padding-top:24px;padding-bottom:28px}
  .auth-form h2{font-size:1.4rem}
  .auth-sub{margin-bottom:14px}
  .auth-form .tabs{margin-bottom:12px}
  .auth-copy{display:none}
}

@media(max-width:940px){
  /* No room for two columns: keep the form, drop the panel, bring the logo in. */
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-logo-sm{display:block}
  html[data-theme="light"] .auth-logo-sm.logo-dark{display:none}
  html:not([data-theme="light"]) .auth-logo-sm.logo-light{display:none}
  .auth-main{justify-content:flex-start;padding-top:56px}
}
@media(max-width:420px){
  .auth-main{padding-left:18px;padding-right:18px}
}