/* =========================================================================
   IzeChat — Premium Authentication Experience
   Super-App onboarding design system (Login / Signup / Forgot / Onboarding)
   Scoped under .ize_auth so it never leaks into the rest of the welcome theme.
   Light + Dark, glassmorphism, floating ecosystem, mobile-first, lightweight.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
.ize_auth {
  /* Brand palette — 2026-09-13: fixed to IzeChat's actual brand blue (sampled directly
     from themes/izeflow/img/logo.png's icon badge and themes/izeflow/img/icon.png — the
     two agree to within rounding, so this is the real, deliberate brand color) rather
     than the app's admin-configurable accent (--main / --main-hover from style.phtml).
     That admin color is a legitimate per-deployment setting used correctly everywhere
     else in the app (style.css's --main/--main-color pairing), but it had drifted to an
     amber/teal that doesn't match IzeChat's own logo — this auth/onboarding surface is
     the app's first impression, so it now always shows the real brand blue regardless of
     what the admin panel's button-color setting is set to. */
  --ize-rgb:         2, 128, 180;
  --ize-blue:        #0280b4;   /* Primary — real IzeChat brand blue (logo/app-icon badge) */
  --ize-blue-700:    #1f4366;   /* Primary hover — the logo wordmark's navy                */
  --ize-cyan:        #29D3E6;   /* Soft cyan — pillar accent only             */
  --ize-emerald:     #12B981;   /* Emerald   — success semantics              */
  --ize-violet:      #7C5CFF;   /* Pillar accent only                         */

  --ize-grad: linear-gradient(135deg, var(--ize-blue) 0%, var(--ize-blue-700) 100%);
  --ize-grad-soft: rgba(var(--ize-rgb), .12);

  /* Foreground color for accent-flavored text/icons/borders that sit ON the neutral page/card
     background (not on an --ize-grad fill) — the wordmark navy, not the lighter badge blue:
     the badge blue is ~4.2-4.4:1 as text on white/cream, just under the 4.5:1 floor for
     non-bold text, where the navy clears 10:1+. */
  --ize-accent-ink: #1f4366;

  /* Surfaces (light) — cream app background, white cards */
  --ize-bg:          var(--body-bg, #fcf5f0);
  --ize-bg-2:        var(--body-bg, #fcf5f0);
  --ize-surface:     #ffffff;
  --ize-glass:       rgba(255,255,255,.74);
  --ize-glass-brd:   rgba(255,255,255,.9);
  --ize-field:       rgba(0,0,0,.035);
  --ize-field-brd:   rgba(0,0,0,.10);

  /* Text */
  --ize-ink:         #1a2238;
  --ize-ink-2:       #5a6175;
  --ize-ink-3:       #666c85; /* was #8a90a3 (2.95:1 on --ize-bg, below the 4.5:1 floor for
     placeholders/helper text/OTP-resend/trust badges). 4.87:1 on --ize-bg, 4.9:1 on white. */

  /* FX */
  --ize-shadow:      0 18px 50px -14px rgba(20, 25, 45, .22);
  --ize-shadow-sm:   0 6px 18px -8px rgba(20, 25, 45, .18);
  --ize-radius:      22px;
  --ize-radius-sm:   14px;
  /* Derived from the fixed --ize-ink, not the admin-configurable accent: a colored glow at low
     opacity is illegible when the accent happens to be a light color (e.g. amber on white was
     ~1.1:1). A dark, fixed-color ring stays visible regardless of what --main is set to. */
  --ize-ring:        rgba(26, 34, 56, .5);

  --ize-ease: var(--ize-mo-e-glide);

  font-family: "Plus Jakarta Sans", "Readex Pro", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ize-ink);
}

/* Dark theme — driven by the site's night-mode cookie (.is-dark) or the OS */
.ize_auth.is-dark {
  --ize-bg:        #0b1020;
  --ize-bg-2:      #0e1530;
  --ize-surface:   #141c34;
  --ize-glass:     rgba(22,30,56,.66);
  --ize-glass-brd: rgba(120,140,210,.18);
  --ize-field:     rgba(255,255,255,.05);
  --ize-field-brd: rgba(255,255,255,.10);
  --ize-ink:       #eef2ff;
  --ize-ink-2:     #aab6da;
  --ize-ink-3:     #7a86ad;
  --ize-shadow:    0 24px 60px -16px rgba(0,0,0,.6);
  --ize-shadow-sm: 0 8px 24px -10px rgba(0,0,0,.55);
  /* Ink-derived, not accent-derived: an accent-tinted glow at any reasonable opacity tests at
     ~2:1 against this dark surface (below the 3:1 UI-component-contrast target). */
  --ize-ring:      rgba(238, 242, 255, .45);
  /* The fixed navy (#1f4366) reads fine as text on light surfaces (10:1+) but not on this
     dark one — falls back to the theme's own (already-safe) light ink token instead. */
  --ize-accent-ink: var(--ize-ink);
}

/* ----------------------------------------------------------- Page shell */
/* Keep <html>/<body> the SAME colour as the auth surface so no strip ever shows
   above the content or during overscroll. --ize-bg lives on .ize_auth (not on
   body), so key off the theme class / media query with real colours here.
   Also zero the browser's default body margin that opened the visible gap. */
html:has(.ize_auth), body:has(.ize_auth) { background: var(--body-bg, #fcf5f0) !important; margin: 0 !important; }
html:has(.ize_auth.is-dark), body:has(.ize_auth.is-dark) { background: #0b1020 !important; }
@media (prefers-color-scheme: dark) {
  html:has(.ize_auth:not(.is-light)), body:has(.ize_auth:not(.is-light)) { background: #0b1020 !important; }
}

.ize_auth {
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(60% 55% at 12% 6%,  rgba(var(--ize-rgb), .10), transparent 60%),
    radial-gradient(55% 50% at 92% 96%, rgba(var(--ize-rgb), .07), transparent 62%),
    var(--ize-bg);
}
.ize_auth * { box-sizing: border-box; }

/* Slow drifting aurora behind the cards */
.ize_aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 70vh;
  background: var(--ize-grad);
  filter: blur(120px); opacity: .14; z-index: 0;
  animation: izeAurora 18s var(--ize-ease) infinite alternate;
  pointer-events: none;
}
@keyframes izeAurora {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1);   opacity:.12; }
  100% { transform: translate3d(6%, 4%, 0)  scale(1.15); opacity:.20; }
}

.ize_shell {
  position: relative; z-index: 2;
  /* The shell carries its own full-viewport min-height (dynamic vh for mobile)
     so vertical centering never depends on a parent's resolved height. The grid
     rows are centered with align-content; when content is taller than the
     screen the shell simply grows and the page scrolls (top never clipped). */
  flex: 1 0 auto; width: 100%;
  min-height: 100vh; min-height: 100dvh;
  max-width: 1120px; margin: 0 auto;
  padding: 28px 20px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; align-content: center; gap: 48px;
}
.ize_shell.ize_single { grid-template-columns: 1fr; max-width: 480px; }

/* ------------------------------------------------- Ecosystem showcase */
.ize_eco {
  position: relative; z-index: 2;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: center;
}
.ize_eco_brand { display:flex; align-items:center; gap:12px; margin-bottom: 26px; }
.ize_eco_brand img { height: 42px; width:auto; }
.ize_eco_tag {
  font-size: 12px; font-weight: 700; letter-spacing:.14em; text-transform: uppercase;
  color: var(--ize-accent-ink);
  background: var(--ize-grad-soft);
  padding: 5px 12px; border-radius: 999px;
}
.ize_eco_h {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.ize_eco_h .grad {
  background: var(--ize-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ize_eco_p { font-size: 16px; line-height: 1.6; color: var(--ize-ink-2); max-width: 440px; margin: 0 0 30px; }

/* Floating super-app cards */
.ize_eco_stage { position: relative; height: 230px; }
.ize_float {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px;
  background: var(--ize-glass);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--ize-glass-brd);
  box-shadow: var(--ize-shadow-sm);
  will-change: transform;
  animation: izeFloat 6s var(--ize-ease) infinite;
}
.ize_float .ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display:grid; place-items:center;
  font-size: 19px; color:#fff;
}
/* f_chat's fill is the admin-configured accent (--ize-grad), unlike the other four floats'
   fixed decorative gradients, so it alone needs the admin's paired safe text/icon color. */
.ize_float.f_chat .ic { color: #fff; }
.ize_float .tx b { display:block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.ize_float .tx span { font-size: 11.5px; color: var(--ize-ink-3); }

.ize_float.f_chat   { top: 6%;   left: 2%;   animation-delay: 0s;   }
.ize_float.f_shop   { top: 0%;   right: 4%;  animation-delay: 1.1s; }
.ize_float.f_pay    { top: 46%;  left: 18%;  animation-delay: .6s;  }
.ize_float.f_comm   { bottom: 4%; right: 8%; animation-delay: 1.6s; }
.ize_float.f_ai     { bottom: 0%; left: 0%;  animation-delay: 2.1s; }

.ize_float.f_chat .ic { background: var(--ize-grad); }
.ize_float.f_shop .ic { background: linear-gradient(135deg,#12B981,#34d39e); }
.ize_float.f_pay  .ic { background: linear-gradient(135deg,#7C5CFF,#a07bff); }
.ize_float.f_comm .ic { background: linear-gradient(135deg,#29D3E6,#22b8d6); }
.ize_float.f_ai   .ic { background: linear-gradient(135deg,#FF7A59,#ff9d59); }

@keyframes izeFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-14px,0); }
}

/* ----------------------------------------------------------- Glass card */
.ize_panel { position: relative; z-index: 2; width: 100%; }
.ize_card {
  position: relative;
  width: 100%; max-width: 440px; margin: 0 auto;
  background: var(--ize-glass);
  -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--ize-glass-brd);
  border-radius: var(--ize-radius);
  box-shadow: var(--ize-shadow);
  padding: 34px 30px 30px;
  animation: izeRise .6s var(--ize-ease) both;
}
@keyframes izeRise { from { opacity:0; transform: translate3d(0,22px,0); } to { opacity:1; transform:none; } }

.ize_logo { text-align:center; margin-bottom: 18px; }
.ize_logo img { height: 46px; width:auto; }
.ize_h { font-size: 25px; font-weight: 800; letter-spacing:-.02em; text-align:center; margin: 0 0 6px; }
.ize_sub { font-size: 14.5px; color: var(--ize-ink-2); text-align:center; margin: 0 0 22px; }

/* Inline notices / errors */
.ize_notice {
  display:flex; align-items:center; gap:9px; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--ize-radius-sm); font-size: 13.5px; line-height:1.4;
  background: rgba(18,185,129,.12); border:1px solid rgba(18,185,129,.28); color:#0c8c63;
  animation: izeRise .5s var(--ize-ease) both;
}
.is-dark .ize_notice { color:#5fe3b6; }
.ize_errors:not(:empty) {
  display:flex; align-items:center; gap:9px; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--ize-radius-sm); font-size: 13.5px; line-height: 1.4;
  background: rgba(244,63,94,.10); border:1px solid rgba(244,63,94,.30); color:#e11d48;
  animation: izeShake .4s var(--ize-ease) both;
}
.ize_errors i { display:none; }
@keyframes izeShake {
  0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); }
}

/* ---------------------------------------------------------------- Fields */
.ize_field { position: relative; margin-bottom: 15px; }
.ize_field > input,
.ize_field > select,
.ize_field > textarea {
  width: 100%; height: 54px;
  padding: 0 48px 0 46px;
  border: 1.5px solid var(--ize-field-brd);
  border-radius: var(--ize-radius-sm);
  background: var(--ize-field);
  color: var(--ize-ink); font-size: 15px; font-family: inherit;
  transition: border-color .18s var(--ize-ease), box-shadow .18s var(--ize-ease), background .18s var(--ize-ease);
  -webkit-appearance: none; appearance: none;
}
.ize_field > textarea { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; }
.ize_field > select { padding-right: 40px; cursor: pointer; }
.ize_field > input::placeholder,
.ize_field > textarea::placeholder { color: var(--ize-ink-3); }
.ize_field > input:focus,
.ize_field > select:focus,
.ize_field > textarea:focus {
  outline: none; border-color: var(--ize-accent-ink);
  background: var(--ize-surface);
  box-shadow: 0 0 0 4px var(--ize-ring);
}
.ize_field .ize_ic {
  position:absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ize-ink-3); pointer-events:none;
  transition: color .18s var(--ize-ease);
}
.ize_field > input:focus ~ .ize_ic,
.ize_field > select:focus ~ .ize_ic { color: var(--ize-accent-ink); }
.ize_field.no-icon > input,
.ize_field.no-icon > select { padding-left: 16px; }

.ize_toggle {
  position:absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display:grid; place-items:center;
  color: var(--ize-ink-3); cursor: pointer; border-radius: 8px;
  transition: color .15s, background .15s;
}
.ize_toggle:hover { color: var(--ize-ink); background: rgba(var(--ize-rgb),.08); }
.ize_toggle.is-on { color: var(--ize-accent-ink); }

/* Phone field (country code + number) — nested controls need explicit styling
   because the base `.ize_field > input/select` rules only match direct children. */
.ize_field.phone { display:flex; gap: 8px; }
.ize_field.phone .ccode { width: 96px; flex: none; }
.ize_field.phone .pnum { flex: 1; }
.ize_field.phone .ccode select,
.ize_field.phone .pnum input {
  width: 100%; height: 54px;
  border: 1.5px solid var(--ize-field-brd); border-radius: var(--ize-radius-sm);
  background: var(--ize-field); color: var(--ize-ink); font-size: 15px; font-family: inherit;
  transition: border-color .18s var(--ize-ease), box-shadow .18s var(--ize-ease), background .18s var(--ize-ease);
}
.ize_field.phone .ccode select { padding: 0 8px; text-align:center; cursor:pointer; }
.ize_field.phone .pnum input { padding: 0 16px; }
.ize_field.phone .ccode select:focus,
.ize_field.phone .pnum input:focus {
  outline:none; border-color: var(--ize-accent-ink); background: var(--ize-surface); box-shadow: 0 0 0 4px var(--ize-ring);
}

/* select chevron */
.ize_select_wrap::after {
  content:""; position:absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ize-ink-3); border-bottom: 2px solid var(--ize-ink-3);
  transform: translateY(-65%) rotate(45deg); pointer-events:none;
}

/* Remember / forgot row */
.ize_row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 4px 0 20px; font-size: 13.5px; }
.ize_check { display:flex; align-items:center; gap: 9px; color: var(--ize-ink-2); cursor:pointer; user-select:none; }
.ize_check input { position:absolute; opacity:0; width:0; height:0; }
.ize_check .box {
  width: 19px; height: 19px; border-radius: 6px; flex:none;
  border: 1.5px solid var(--ize-field-brd); background: var(--ize-field);
  display:grid; place-items:center; transition: all .15s var(--ize-ease);
}
.ize_check .box svg { width: 12px; height:12px; color: #fff; opacity:0; transform: scale(.4); transition: all .15s var(--ize-ease); }
.ize_check input:checked + .box { background: var(--ize-grad); border-color: transparent; }
.ize_check input:checked + .box svg { opacity:1; transform: scale(1); }
.ize_check input:focus-visible + .box { box-shadow: 0 0 0 4px var(--ize-ring); }
.ize_link { color: var(--ize-accent-ink); font-weight: 600; text-decoration:none; }
.ize_link:hover { color: var(--ize-ink); text-decoration: underline; }

/* ---------------------------------------------------------------- Button */
.ize_btn {
  position: relative; width:100%; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ize-radius-sm);
  background: var(--ize-grad); background-size: 180% 180%;
  /* White on the fixed brand-blue --ize-grad: 4.4:1 on the lighter stop, 10.2:1 on the
     darker one — both clear the bold-text (700-weight) 3:1 floor with real margin. */
  color: #fff; font-size: 15.5px; font-weight: 700; font-family: inherit;
  text-align: center; text-decoration: none; line-height: 1;
  cursor:pointer; overflow:hidden;
  box-shadow: 0 12px 26px -10px rgba(var(--ize-rgb), .6);
  transition: transform .12s var(--ize-ease), box-shadow .2s var(--ize-ease), filter .2s;
}
.ize_btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(var(--ize-rgb), .68); animation: izeShift 3s ease infinite; }
.ize_btn:active { transform: translateY(0) scale(.985); }
.ize_btn:disabled { filter: grayscale(.35) opacity(.65); cursor: not-allowed; box-shadow:none; transform:none; }
.ize_btn .lbl { position: relative; z-index:1; }
.ize_btn::after { /* sheen */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ize-ease);
}
.ize_btn:hover::after { left: 130%; }
@keyframes izeShift { 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%; } }

.ize_btn.is-loading .lbl { visibility:hidden; }
.ize_btn.is-loading::before {
  content:""; position:absolute; inset:0; margin:auto; width: 22px; height: 22px; z-index:2;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius:50%;
  animation: izeSpin .7s linear infinite;
}
@keyframes izeSpin { to { transform: rotate(360deg); } }

.ize_btn.ghost {
  background: transparent; color: var(--ize-ink); border: 1.5px solid var(--ize-field-brd);
  box-shadow:none;
}
.ize_btn.ghost:hover { background: rgba(var(--ize-rgb),.06); border-color: var(--ize-accent-ink); transform: translateY(-2px); animation:none; }
.ize_btn.ghost::after { display:none; }

/* ------------------------------------------------------- Social + foot */
.ize_divider { display:flex; align-items:center; gap:14px; margin: 22px 0 18px; color: var(--ize-ink-3); font-size: 12.5px; font-weight:600; }
.ize_divider::before, .ize_divider::after { content:""; flex:1; height:1px; background: var(--ize-field-brd); }
.ize_social { display:flex; justify-content:center; gap: 12px; }
.ize_social a {
  width: 50px; height: 50px; border-radius: 14px; display:grid; place-items:center;
  background: var(--ize-surface); border: 1.5px solid var(--ize-field-brd);
  transition: transform .15s var(--ize-ease), box-shadow .15s, border-color .15s;
}
.is-dark .ize_social a { background: var(--ize-field); }
.ize_social a:hover { transform: translateY(-3px); box-shadow: var(--ize-shadow-sm); border-color: transparent; }
.ize_social a svg { width: 22px; height: 22px; }
.ize_social a.fb svg { fill:#1877F2; } .ize_social a.gg svg { fill:#EA4335; } .ize_social a.tw svg { fill:#1DA1F2; }

.ize_foot { text-align:center; margin-top: 22px; font-size: 14px; color: var(--ize-ink-2); }
.ize_foot a { color: var(--ize-accent-ink); font-weight: 700; text-decoration:none; }
.ize_foot a:hover { text-decoration: underline; }

/* Trust indicators */
.ize_trust { display:flex; flex-wrap:wrap; justify-content:center; gap: 8px 16px; margin-top: 20px; }
.ize_trust span { display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight:600; color: var(--ize-ink-3); }
.ize_trust svg { width: 15px; height:15px; color: var(--ize-emerald); }

/* ----------------------------------------------------- Password helpers */
.ize_strength { margin: -4px 0 14px; }
.ize_strength_bar { height: 6px; border-radius: 999px; background: var(--ize-field-brd); overflow:hidden; }
.ize_strength_bar i { display:block; height:100%; width:0; border-radius:999px; transition: width .3s var(--ize-ease), background .3s; }
.ize_strength.s1 i { width:25%;  background:#f43f5e; }
.ize_strength.s2 i { width:50%;  background:#f59e0b; }
.ize_strength.s3 i { width:75%;  background:#3b82f6; }
.ize_strength.s4 i { width:100%; background:#12B981; }
.ize_strength_lbl { margin-top:6px; font-size: 12px; font-weight:600; color: var(--ize-ink-3); }

.helper-text { list-style:none; margin: -4px 0 14px; padding: 12px 14px; border-radius: var(--ize-radius-sm);
  background: var(--ize-field); border:1px solid var(--ize-field-brd); font-size: 12.5px; display:none; }
.helper-text.is-visible { display:block; }
.helper-text li { position: relative; padding-left: 22px; color: var(--ize-ink-3); margin-bottom:5px; }
.helper-text li:last-child { margin-bottom:0; }
.helper-text li::before { content:"○"; position:absolute; left:0; color: var(--ize-ink-3); }
.helper-text li.valid { color: var(--ize-emerald); }
.helper-text li.valid::before { content:"✓"; color: var(--ize-emerald); }

.auth-match { display:flex; align-items:center; gap:8px; margin:-4px 0 14px; padding: 9px 14px; border-radius: var(--ize-radius-sm); font-size: 13px; font-weight:600; }
.auth-match[hidden] { display:none; }
.auth-match-icon { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; }
.auth-match.valid   { background: rgba(18,185,129,.12); color:#0c8c63; } .auth-match.valid .auth-match-icon { background: var(--ize-emerald); }
.auth-match.invalid { background: rgba(244,63,94,.10); color:#e11d48; }   .auth-match.invalid .auth-match-icon { background:#f43f5e; }

/* --------------------------------------------------------- Register steps */
.ize_steps_head { margin-bottom: 22px; }
.ize_progress { height:6px; border-radius:999px; background: var(--ize-field-brd); overflow:hidden; }
.ize_progress i { display:block; height:100%; border-radius:999px; background: var(--ize-grad); width: 25%; transition: width .4s var(--ize-ease); }
.ize_steps_meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.ize_steps_meta .step_no { font-size:12.5px; font-weight:700; color: var(--ize-accent-ink); }
.ize_steps_meta .step_nm { font-size:12.5px; color: var(--ize-ink-3); }

.ize_steps { position: relative; }
.ize_step {
  position:absolute; top:0; left:0; right:0; height:0; overflow:hidden;
  opacity:0; transform: translateX(26px); pointer-events:none;
  transition: opacity .35s var(--ize-ease), transform .35s var(--ize-ease);
}
.ize_step.is-active {
  position: relative; height:auto; overflow:visible; opacity:1; transform:none; pointer-events:auto;
}
.ize_step.is-prev { transform: translateX(-26px); }
.ize_step_title { font-size: 18px; font-weight: 800; letter-spacing:-.01em; margin: 0 0 4px; }
.ize_step_sub { font-size: 13.5px; color: var(--ize-ink-2); margin: 0 0 18px; }
.ize_nav { display:flex; gap: 12px; margin-top: 6px; }
.ize_nav .ize_btn { flex:1; }
.ize_nav .ize_btn.back { flex: 0 0 52px; padding:0; }

/* interests chips */
.ize_chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom: 16px; }
.ize_chips label { cursor:pointer; }
.ize_chips input { position:absolute; opacity:0; }
.ize_chip {
  display:inline-flex; align-items:center; gap:6px; padding: 9px 14px; border-radius:999px;
  background: var(--ize-field); border:1.5px solid var(--ize-field-brd); color: var(--ize-ink-2);
  font-size: 13px; font-weight:600; transition: all .15s var(--ize-ease);
}
.ize_chips input:checked + .ize_chip { background: var(--ize-grad-soft); border-color: var(--ize-accent-ink); color: var(--ize-accent-ink); }

/* avatar uploader */
.ize_avatar { display:flex; flex-direction:column; align-items:center; gap:10px; margin: 4px 0 18px; }
.ize_avatar_ring {
  width: 96px; height:96px; border-radius:50%; padding:3px; background: var(--ize-grad);
  cursor:pointer; position:relative;
}
.ize_avatar_ring img, .ize_avatar_ring .ph {
  width:100%; height:100%; border-radius:50%; object-fit:cover; background: var(--ize-field);
  display:grid; place-items:center; color: var(--ize-ink-3);
}
.ize_avatar_ring .ph svg { width: 34px; height:34px; }
.ize_avatar_ring .cam { position:absolute; right:2px; bottom:2px; width:30px; height:30px; border-radius:50%;
  background: var(--ize-blue); color: #fff; display:grid; place-items:center; border:3px solid var(--ize-surface); }
.ize_avatar_ring .cam svg { width:15px; height:15px; }
.ize_avatar small { color: var(--ize-ink-3); font-size:12px; }

/* terms */
.ize_terms { display:flex; align-items:flex-start; gap:10px; margin: 4px 0 18px; font-size: 13px; color: var(--ize-ink-2); }
.ize_terms .ize_check .box { margin-top:1px; }
.ize_terms a { color: var(--ize-accent-ink); font-weight:600; text-decoration:none; }
.ize_terms a:hover { text-decoration:underline; }

/* ------------------------------------------------------------- OTP code */
.ize_otp { display:flex; justify-content:center; gap: 10px; margin: 8px 0 18px; direction:ltr; }
.ize_otp input {
  width: 52px; height: 60px; text-align:center; font-size: 24px; font-weight:800;
  border:1.5px solid var(--ize-field-brd); border-radius: var(--ize-radius-sm);
  background: var(--ize-field); color: var(--ize-ink);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ize_otp input:focus { outline:none; border-color: var(--ize-accent-ink); box-shadow: 0 0 0 4px var(--ize-ring); transform: translateY(-2px); }
.ize_otp input.filled { border-color: var(--ize-accent-ink); }
.ize_resend { text-align:center; font-size: 13px; color: var(--ize-ink-3); margin-top:4px; }
.ize_resend a { color: var(--ize-accent-ink); font-weight:700; }

/* ----------------------------------------------------------- Onboarding */
.ize_onb {
  position: fixed; inset:0; z-index: 60; display:flex; flex-direction:column;
  background:
    radial-gradient(70% 60% at 18% 4%,  rgba(var(--ize-rgb), .16), transparent 60%),
    radial-gradient(65% 55% at 92% 98%, rgba(var(--ize-rgb), .12), transparent 62%),
    var(--ize-bg);
  /* v3 (2026-09-13): no padding here at all — .ize_slide_art needs an unobstructed
     path to the true device edge on every side (including the top, under the status
     bar), so every row that still needs an inset (top bar, dots, actions) now carries
     its own padding instead of inheriting it from this shared container. Padding here
     was also what caused the two earlier attempts at edge-to-edge art to fail: any
     amount of negative margin on a descendant still gets clipped at .ize_onb_track's
     overflow:hidden boundary, which sat inset by exactly this padding. */
  animation: izeRise .4s var(--ize-ease) both;
}
.ize_onb[hidden] { display:none; }
/* First-paint routing (set synchronously by the inline script in content-simple.phtml):
   until onboarding is completed, REVEAL the carousel and HIDE the Login shell, so a fresh
   install shows onboarding immediately and the Login card never flashes underneath it.
   These override the #ize_onb [hidden] attribute and the shell's default display. */
.ize_auth.ize_onb_pending #ize_onb   { display:flex !important; }
.ize_auth.ize_onb_pending .ize_shell { display:none !important; }
.ize_onb_top {
  /* Floats OVER the art (z-index above the track) instead of sitting on its own row
     above it, so the photo can run to the true top of the screen underneath it. */
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding: max(20px, calc(env(safe-area-inset-top, 0px) + 16px)) 22px 0;
}
/* Both now floating over a photo (see .ize_onb_top) — the scrim alone isn't reliable across
   every photo's brightness, so give the logo and Skip their own light halo too. */
/* A glow/text-shadow halo isn't enough against a near-black photo (the AI slide) — same
   fix already proven on .ize_art_chip_ai: a real solid-ish pill background, not a trick. */
.ize_onb_top img {
  height: 34px; padding: 5px 9px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.3);
}
.ize_onb_skip {
  border:0; color: var(--ize-ink-2); font-size:14px; font-weight:600; cursor:pointer;
  padding:10px 16px; border-radius:999px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.3);
}

/* Transform-based carousel: the track is a clipped viewport, the rail holds the
   slides and is translated one full width per step. touch-action:pan-y lets the
   page scroll vertically while our JS owns the horizontal swipe (one slide per
   gesture — no momentum skipping). */
.ize_onb_track { flex:1; overflow:hidden; position:relative; touch-action:pan-y; }
.ize_onb_rail { display:flex; height:100%; width:100%; will-change:transform; }
.ize_slide {
  flex: 0 0 100%; min-width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap: 8px;
  user-select:none; -webkit-user-select:none;
}
.ize_onb_dots i { cursor:pointer; }
/* Onboarding art: one real photo per slide (not an emoji-in-blob), with at most one
   small feature-specific accent on top — see the 2026-09-13 onboarding redesign. */
.ize_slide_art {
  /* A proportion of the slide's own height (the slide is stretched to 100% of the
     track by the rail's default flex stretch) — runs from the true top of the
     screen, under .ize_onb_top, all the way to true left/right edges: nothing
     between this and the device edge carries padding any more (see .ize_onb above). */
  position: relative; overflow: hidden; flex: 0 0 66%; width: 100%;
}
.ize_slide_art::before { /* light scrim so the (dark-colored) logo/Skip stay legible over any photo */
  content:""; position:absolute; left:0; right:0; top:0; height:34%;
  background: linear-gradient(180deg, rgba(255,255,255,.68), transparent);
  pointer-events:none;
}
.ize_slide_art::after { /* the soft glow / fade into the page — same on every slide */
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background: linear-gradient(180deg, transparent, var(--ize-bg));
  pointer-events:none;
}
.ize_art_photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ize_art_shade { /* just enough for a light chip to sit on — never a color wash */
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.14), transparent 32%, transparent 60%, rgba(0,0,0,.16));
}

/* Slide 1 — Connect: three real contact photos floating over the hero photo.
   top offsets start at 18% (not lower) to clear .ize_onb_top's floating header. */
.ize_art_peer {
  /* aspect-ratio, not a height percentage: the art container's own aspect ratio swings a
     lot between a tall mobile viewport and a wide desktop one, and width%/height% resolve
     against different axes — that mismatch is what was rendering these as ovals on desktop.
     Deriving height from width instead guarantees a true circle regardless of container shape. */
  position:absolute; border-radius:50%; overflow:hidden; aspect-ratio:1/1;
  box-shadow:0 10px 20px -6px rgba(0,0,0,.4); border:3px solid #fff;
}
.ize_art_peer img { width:100%; height:100%; object-fit:cover; display:block; }

/* Slide 2 — Shop & Pay: a small payment-confirmation chip over the market photo */
.ize_art_chip_pay {
  /* Above the container's bottom fade (34% of height, see .ize_slide_art::after) so the
     chip stays crisp instead of washing out into the page background. */
  position:absolute; right:16px; bottom:40%; max-width:62%; border-radius:16px;
  background:rgba(255,255,255,.96); padding:11px 13px; box-shadow:0 16px 30px -14px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:9px; z-index:1;
}
.ize_art_chip_pay .ic {
  width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#1c4b32,#0c231a);
}
.ize_art_chip_pay .ic svg { width:16px; height:16px; color:#eafff2; }
.ize_art_chip_pay b { display:block; font-size:12.5px; color:#16341f; font-family:"Bricolage Grotesque",sans-serif; }
.ize_art_chip_pay span { font-size:10px; color:#7c7568; font-weight:600; }

/* Slide 3 — AI: a single glass chip — the photo's own phone-glow does the rest.
   top clears the floating .ize_onb_top header (safe-area-aware, not a flat px guess). */
.ize_art_chip_ai {
  position:absolute; left:14px; top: calc(max(20px, env(safe-area-inset-top, 0px) + 16px) + 40px);
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px);
  color:#fff; font-size:11.5px; font-weight:700; padding:7px 12px 7px 9px; border-radius:99px;
}
.ize_art_chip_ai svg { width:13px; height:13px; color:#ffd166; }

.ize_slide h2 { font-size: clamp(22px, 6vw, 28px); font-weight:800; letter-spacing:-.02em; margin: 14px 0 0; padding: 0 22px; }
.ize_slide p { font-size: 15px; line-height:1.55; color: var(--ize-ink-2); max-width: 340px; margin: 6px auto 0; padding: 0 22px; }

.ize_onb_dots { display:flex; justify-content:center; gap:8px; margin: 18px 0; padding: 0 22px; }
.ize_onb_dots i { width:8px; height:8px; border-radius:999px; background: var(--ize-field-brd); transition: all .3s var(--ize-ease); }
.ize_onb_dots i.on { width:26px; background: var(--ize-grad); }

.ize_onb_actions {
  display:flex; flex-direction:column; gap: 11px; max-width: 440px; width:100%; margin:0 auto;
  padding: 0 22px max(18px, env(safe-area-inset-bottom));
}
.ize_onb_actions .ize_btn { height: 52px; }
/* Branding text on the page background, not a filled control — must not depend on the
   admin-configured accent being legible against --ize-bg (it isn't, currently). */
.ize_onb_final h2 { color: var(--ize-ink); }
.ize_onb_pills { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.ize_onb_pills span { font-size:13px; font-weight:700; padding:7px 13px; border-radius:999px; background: var(--ize-glass); border:1px solid var(--ize-glass-brd); }

/* Success splash */
.ize_success { text-align:center; padding: 10px 0; }
.ize_success_ring { width: 92px; height:92px; margin: 0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background: rgba(18,185,129,.14); animation: izePop .5s var(--ize-ease) both; }
.ize_success_ring svg { width:46px; height:46px; color: var(--ize-emerald); }
@keyframes izePop { 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
.ize_quick { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 20px 0 6px; }
.ize_quick a { display:flex; flex-direction:column; align-items:center; gap:8px; padding: 16px 8px; border-radius: var(--ize-radius-sm);
  background: var(--ize-field); border:1.5px solid var(--ize-field-brd); color: var(--ize-ink); font-size:13px; font-weight:700;
  transition: transform .15s var(--ize-ease), border-color .15s; }
.ize_quick a:hover { transform: translateY(-3px); border-color: var(--ize-accent-ink); }
.ize_quick a .qic { width: 40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; color:#fff; }

/* skeleton loader */
.ize_skel { background: linear-gradient(90deg, var(--ize-field) 25%, rgba(255,255,255,.5) 37%, var(--ize-field) 63%);
  background-size: 400% 100%; animation: izeSkel 1.3s ease infinite; border-radius: 8px; }
@keyframes izeSkel { 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* recaptcha + legacy bits centering */
.ize_card .g-recaptcha { margin: 0 0 14px; display:flex; justify-content:center; }
.ize_card .form-group { margin: 0; }
.ize_hide { display:none !important; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 920px) {
  .ize_shell { grid-template-columns: 1fr; max-width: 480px; gap: 8px; padding-top: 20px; }
  .ize_eco { display: none; }            /* showcase folds into the card header on phones */
  .ize_eco.mobile_lite { display:flex; min-height:auto; text-align:center; align-items:center; margin-bottom: 6px; }
  .ize_eco.mobile_lite .ize_eco_stage,
  .ize_eco.mobile_lite .ize_eco_p { display:none; }
  .ize_eco.mobile_lite .ize_eco_brand { justify-content:center; margin-bottom: 14px; }
  .ize_eco.mobile_lite .ize_eco_h { font-size: 24px; }
}
@media (max-width: 480px) {
  .ize_card { padding: 26px 20px 24px; border-radius: 20px; box-shadow: var(--ize-shadow-sm); }
  .ize_h { font-size: 22px; }
  .ize_otp input { width: 46px; height: 54px; font-size: 21px; }
  .ize_quick { grid-template-columns: repeat(2,1fr); }
}

/* --------------------------------------------------- Motion preference */
@media (prefers-reduced-motion: reduce) {
  .ize_auth *, .ize_onb * { animation: none !important; transition: none !important; }
}

/* OS dark fallback when night cookie isn't set */
@media (prefers-color-scheme: dark) {
  .ize_auth:not(.is-light) {
    --ize-bg:#0b1020; --ize-bg-2:#0e1530; --ize-surface:#141c34;
    --ize-glass:rgba(22,30,56,.66); --ize-glass-brd:rgba(120,140,210,.18);
    --ize-field:rgba(255,255,255,.05); --ize-field-brd:rgba(255,255,255,.10);
    --ize-ink:#eef2ff; --ize-ink-2:#aab6da; --ize-ink-3:#7a86ad;
    --ize-shadow:0 24px 60px -16px rgba(0,0,0,.6); --ize-shadow-sm:0 8px 24px -10px rgba(0,0,0,.55);
    --ize-ring:rgba(238, 242, 255, .45); /* ink-derived — see .is-dark comment */
    --ize-accent-ink: var(--ize-ink); /* see .is-dark: the fixed navy isn't legible on a dark surface */
  }
}