/* ============================================================
   Volboo Auth Pages — landing design blend (light & dark)
   Mirrors the index1.php / landing-styles.css aesthetic:
   Inter + Sora type, mint (#34d399) CTAs, deep-green hero
   panel, 34–44px radii, soft mint glows.

   Load LAST in <head> (after css/styles.css AND any page-level
   <style> block) so these overrides win the cascade.

   Theme is set ONLY by the landing/dashboard toggle via
   localStorage("theme") + includes/theme-head.php — auth pages
   have no toggle of their own.
   ============================================================ */

/* ---------- Tokens remapped to the landing palette ---------- */
:root{
  --mint:#34d399;
  --mint-strong:#2fc78d;
  --green-deep:#0c4534;
  --green-hero:#10241b;

  --bg:#ffffff;
  --bg-body:#ffffff;
  --bg-card:#e9ece9;
  --bg-input:#eef1ec;
  --bg-hover:#e3e8e3;
  --text:#131a16;
  --text2:#58695f;
  --text3:#5f6d64;
  --text4:#93a096;
  --border:#dfe5df;
  --accent:#0ea774;
  --accent-hover:#0c8f64;
  --accent-light:rgba(52,211,153,.16);
  --radius-lg:26px;
  --radius-xl:34px;
  --shadow-lg:0 24px 60px rgba(10,30,20,.12);
}

[data-theme="dark"]{
  --bg:#151a16;
  --bg-body:#151a16;
  --bg-card:#181f19;
  --bg-input:#1c241e;
  --bg-hover:#222b24;
  --text:#eef1ee;
  --text2:#93a096;
  --text3:#98a49b;
  --text4:#6d7a70;
  --border:#28322a;
  --accent:#34d399;
  --accent-hover:#2fc78d;
  --accent-light:rgba(52,211,153,.14);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
}

/* ---------- Typography — Inter body, Sora display ---------- */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(52,211,153,.10), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(52,211,153,.06), transparent 60%),
    var(--bg-body);
  color:var(--text);
  transition:background-color .35s ease,color .35s ease;
}

.auth-header h2,
.branding-content h1,
.forgot-card h2,
.reset-card h1,
.verify-card h1,
.verification-card .auth-header h2,
.otp-header h3{
  font-family:'Sora','Inter',sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}

/* Theme is controlled from the landing page — never show a toggle here */
.theme-toggle-container,
.theme-toggle-fixed{display:none !important}

/* ============================================================
   SPLIT LAYOUT (login / register / business verification)
   ============================================================ */
.auth-container{
  padding:14px;
  gap:14px;
  background:transparent;
}

/* Brand panel becomes the landing hero: deep green, 44px radius,
   mint glow from the top — identical recipe to .hero */
.auth-branding{
  border-radius:44px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(52,211,153,.12), transparent 55%),
    var(--green-hero);
}
.auth-branding::before{
  background:radial-gradient(circle, rgba(52,211,153,.16) 0%, transparent 70%);
}

.branding-content .logo img{filter:none}
.branding-content h1{
  font-size:clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.025em;
}
.branding-content h1 .accent{color:var(--mint)}
.branding-content>p{color:#c2cdc6}

/* Feature rows become landing-style glass pills */
.features-list{gap:14px}
.feature-item{
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  padding:12px 20px;
  color:rgba(255,255,255,.88);
}
.feature-item i{
  color:var(--mint);
  background:rgba(52,211,153,.16);
}

/* Form side */
.auth-form-container{background:transparent}
.auth-header h2{font-size:2rem}
.auth-header p{color:var(--text3)}

/* ============================================================
   CONTROLS — mint pill CTA, exactly like the landing .btn-cta
   ============================================================ */
.auth-form .btn.btn-primary,
.forgot-card .btn.btn-primary,
.verification-actions .btn.btn-primary,
.btn.btn-accent{
  background:var(--mint);
  color:#0d241a;
  border:none;
  font-weight:600;
  letter-spacing:.1px;
  padding:14px 26px;
  font-size:.95rem;
  box-shadow:0 6px 18px rgba(52,211,153,.22), inset 0 -3px 0 rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.auth-form .btn.btn-primary:hover,
.forgot-card .btn.btn-primary:hover,
.verification-actions .btn.btn-primary:hover,
.btn.btn-accent:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 10px 24px rgba(52,211,153,.3), inset 0 -3px 0 rgba(0,0,0,.15);
  background:var(--mint);
}
.auth-form .btn.btn-primary:active,
.btn.btn-accent:active{transform:translateY(0)}
.auth-form .btn.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none;filter:none}

/* Inputs: keep the pill, glow mint on focus */
.input-wrapper{background:var(--bg-input);border-color:var(--border)}
.input-wrapper:focus-within,
.auth-form .input-wrapper:focus-within,
.forgot-card .input-wrapper:focus-within{
  border-color:var(--mint);
  background:var(--bg);
  box-shadow:0 0 0 4px rgba(52,211,153,.16);
}

/* ============================================================
   CARD LAYOUTS (forgot / reset / verify) — landing panel look
   ============================================================ */
.forgot-container{
  background:transparent;
}
[data-theme="dark"] .forgot-container{background:transparent}

.forgot-card,
.reset-card,
.verify-card{
  background:var(--bg-card);
  border:1px solid transparent;
  border-radius:34px;
  box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .forgot-card,
[data-theme="dark"] .reset-card,
[data-theme="dark"] .verify-card{border-color:rgba(255,255,255,.05)}
.forgot-card::before{display:none}

/* Icon badges: dark-green circle + pale mint glyph, like landing
   feature icons */
.forgot-card .icon-wrap,
.reset-card .icon-circle,
.verify-card .verify-icon,
.verification-icon{
  background:var(--green-deep);
  color:#dff3e8;
  border:none;
}
[data-theme="dark"] .forgot-card .icon-wrap,
[data-theme="dark"] .reset-card .icon-circle,
[data-theme="dark"] .verify-card .verify-icon,
[data-theme="dark"] .verification-icon{background:#0e5138}

/* State variants keep their semantic colors */
.verify-error .verify-icon,
.verification-icon.error{background:var(--red-light);color:var(--red)}
.verification-icon.success{background:var(--accent-light);color:var(--accent)}

/* Spinners pick up the mint accent */
.spinner,
.verify-loading .verify-spinner{
  border-color:var(--border);
  border-top-color:var(--mint);
}

/* ============================================================
   OTP MODAL (login) — align with the mint CTA treatment
   ============================================================ */
.otp-modal{background:var(--bg);border-color:var(--border)}
.btn-confirm-otp{
  background:var(--mint);
  color:#0d241a;
  box-shadow:0 6px 18px rgba(52,211,153,.22), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn-confirm-otp:hover{background:var(--mint);filter:brightness(1.04)}
.otp-input:focus{
  border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(52,211,153,.16);
}
.otp-input.filled{border-color:var(--mint)}
.otp-icon-badge{background:var(--green-deep);color:#dff3e8}
[data-theme="dark"] .otp-icon-badge{background:#0e5138}
