/* Lantern auth modal v7 - see template-parts/auth-modal.php.
   v7 = v6 + the card keeps ONE height for every view (no per-frame layout/paint while switching tabs; the old
   height tween was the main cost), custom properties are set on small subtrees only, and a successful login
   holds its success moment then fades out before the page reloads.
   v6 = v4 + motion pass. One curve family (iOS drawer curve for movement, strong ease-out for entrances), the old
   view cross-fades out while the card resizes under it (no pop), the lights live in their own clipped layer so
   the card no longer needs overflow:hidden + radius over animated children, the lantern swing is a compositor
   animation, and the flicker is calmer.
   The lantern IS the progress bar: it dims to a low flame when the form is empty and brightens as the
   fields fill; the primary button only turns orange (the one accent) when the form can be sent.
   Cold slate UI + one warm light source. Light = layered gradients whose opacity follows --lit (set by JS
   on .mza-card); opacity-only, so it stays on the GPU. The flicker is slow and smooth (ease-in-out, three
   different periods) and is switched off for reduced-motion.
   Motion rules: ease-out entrances (cubic-bezier(.23,1,.32,1)), UI transitions < 300ms, transform+opacity
   only, hover gated to real pointers. No blur / backdrop-filter anywhere (low-end phones).
   NEVER add letter-spacing to Persian text: it breaks the joined letterforms.
   Earlier looks: backups/auth-modal-2026-10-09/ (v2) and backups/auth-modal-v3-2026-10-09/. */

.mza {
  --gh: 28; --ambient-opacity: .2;
  --mza-card: #0f1218;
  --mza-field: #161a22;
  --mza-line: rgba(255, 255, 255, .07);
  --mza-line-strong: rgba(255, 255, 255, .14);
  --mza-ink: #eceff4;
  --mza-muted: #8993a4;
  --mza-faint: #566073;
  --mza-ember: #f2711c;
  --mza-ember-hi: #f9a066;
  --mza-focus: rgba(255, 214, 160, .55);
  --mza-focus-ring: rgba(255, 190, 110, .1);
  --mza-danger: #f87171;
  --mza-ok: #86efac;
  --mza-out: cubic-bezier(.23, 1, .32, 1);
  --mza-drawer: cubic-bezier(.32, .72, 0, 1); /* iOS sheet curve: fast start, long soft landing */
  --mza-r: 12px;
  position: fixed; inset: 0; z-index: 10000;
  font-family: 'Vazirmatn', Tahoma, system-ui, sans-serif;
  color: var(--mza-ink); line-height: 1.7; font-size: 14px;
  opacity: 0; transition: opacity .16s ease-in;
}
.mza[hidden] { display: none !important; }
.mza.is-open { opacity: 1; transition: opacity .2s ease-out; }
.mza *, .mza *::before, .mza *::after { box-sizing: border-box; }
/* :where() keeps these at zero specificity so component classes win */
.mza :where(button, input) { font: inherit; color: inherit; }
.mza :where(button) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mza :focus-visible { outline: 2px solid var(--mza-focus); outline-offset: 2px; }

.mza-scrim { position: absolute; inset: 0; background: rgba(8, 6, 5, .9); }
.mza-ambient, .mza-floor { position: absolute; pointer-events: none; left: 50%; }
.mza-ambient {
  width: min(150vw, 900px); height: min(150vw, 900px); top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(183,133,86,.34), rgba(161,119,81,.12) 45%, transparent 72%);
  opacity: var(--ambient-opacity, .2); transition: opacity .4s ease-out;
}
.mza-floor { display: none; }
.mza-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.mza-card {
  position: relative; width: min(100%, 380px);
  background: var(--mza-card);
  border: 1px solid var(--mza-line); border-radius: 24px; padding: 0 24px 22px; --lit: .2;
  box-shadow: 0 28px 70px -28px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: transform .16s ease-in, opacity .16s ease-in;
}
.mza.is-open .mza-card { opacity: 1; transform: none; transition: transform .32s var(--mza-drawer), opacity .2s ease-out; }
.mza-card.is-shaking { animation: mza-shake .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes mza-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(5px); } }

.mza-x {
  position: absolute; z-index: 3; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--mza-faint);
  display: grid; place-items: center; padding: 0;
  transition: color .15s, background-color .15s, transform .12s var(--mza-out);
}
.mza-x::after { content: ""; position: absolute; inset: -4px; }
.mza-x:active { transform: scale(.92); }
.mza-x svg { width: 16px; height: 16px; }

.mza-brand { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; padding-top: 0; margin-top: -6px; text-align: center; }
.mza-brand h3 { font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif; font-weight: 400; font-size: 27px; margin: 0; line-height: 1.4; color: var(--mza-ink); }
.mza-brand p { margin: 0 0 4px; color: var(--mza-muted); font-size: 13px; }
.mza-brand h3, .mza-brand p { transition: opacity .12s ease-out, transform .12s ease-out; }
.mza-brand .mza-out { opacity: 0; transform: translateY(2px); }

/* --- the sky: thread, lantern, and the light it throws --- */
/* The lights are clipped by this wrapper (not by the card), so only these layers pay for the rounded clip. */
.mza-lights { position: absolute; z-index: 0; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.mza-lights .mza-lt { pointer-events: none; }
.mza-sky { position: relative; height: 212px; width: calc(100% + 48px); margin-inline: -24px; pointer-events: none; }
.mza-lt { position: absolute; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); opacity: var(--lit); transition: opacity .6s ease-out, transform .6s var(--mza-out); will-change: opacity, transform; }
.mza-lt i { position: absolute; inset: 0; border-radius: inherit; animation: mza-ember 4.3s ease-in-out infinite; }
/* bloom hugging the paper: warm white core, amber falloff, red-orange rim (a flame's colour temperature) */
.mza-lt-bloom { top: 118px; width: 250px; height: 250px; }
.mza-lt-bloom i { background: radial-gradient(closest-side, rgba(255,240,205,.62) 0%, rgba(255,196,120,.34) 28%, rgba(255,140,60,.14) 56%, rgba(210,80,30,.05) 78%, transparent 100%); }
/* the room: a wide soft pool that reaches the title and tabs and fades before the fields */
.mza-lt-pool { top: 214px; width: 560px; height: 380px; }
.mza-lt-pool i { background: radial-gradient(closest-side, rgba(255,176,98,.26) 0%, rgba(255,140,60,.1) 52%, transparent 100%); animation-duration: 6.1s; animation-delay: -1.7s; }
/* light raking across the top edge of the card */
.mza-lt-rim { top: 0; width: 300px; height: 90px; }
.mza-lt-rim i { background: radial-gradient(closest-side, rgba(255,214,160,.34), transparent 100%); animation: none; }
/* Smooth, shallow, irregular: eased between keyframes (no hard steps), amplitude <= ~3.5%. */
@keyframes mza-ember { 0%, 100% { opacity: 1 } 19% { opacity: .978 } 38% { opacity: .994 } 57% { opacity: .968 } 76% { opacity: .99 } }
.mza-card.is-flare .mza-lt-bloom { transform: translate(-50%, -50%) scale(1.3); }
.mza-card.is-flare .mza-lt-pool { transform: translate(-50%, -50%) scale(1.12); }
.mza-rig { will-change: transform; position: absolute; top: 0; left: 50%; width: 0; height: 100%; transform-origin: 50% 0; }
.mza-rig::before { content: ""; position: absolute; top: 0; left: -.5px; width: 1px; height: 38px; background: linear-gradient(rgba(255,222,180,0), rgba(255,222,180,.55)); }
.mza-lantern { position: absolute; top: 36px; left: 0; width: 66px; height: 151px; transform: translateX(-50%); }
.mza-lantern img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: var(--lantern-filter, brightness(.75) saturate(.8)); transition: filter .6s ease-out; will-change: filter; }
/* a small hotspot over the wick so the lantern reads as lit, not just brighter */
.mza-lantern::after { content: ""; position: absolute; left: 50%; top: 68%; width: 34px; height: 46px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,246,222,.85), rgba(255,200,120,.35) 55%, transparent); opacity: var(--lit, .42); transition: opacity .6s ease-out; }
.mza-lantern.is-flicker { animation: mza-flick .42s steps(1) both; }
@keyframes mza-flick { 0% { opacity: 1 } 20% { opacity: .35 } 40% { opacity: .9 } 60% { opacity: .3 } 80% { opacity: .8 } 100% { opacity: 1 } }

/* clip-path tabs: the "selected" look is a duplicate row clipped to the active half, so colour and shape move as one */
.mza-seg { position: relative; display: grid; margin: 4px 0 16px; border-radius: 12px; padding: 3px; background: #0a0c10; box-shadow: inset 0 0 0 1px var(--mza-line); }
.mza-seg-row { display: grid; grid-template-columns: 1fr 1fr; }
.mza-seg-row button { border: 0; background: transparent; padding: 8px 0; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: #7e8898; transition: transform .12s var(--mza-out); }
.mza-seg-row button:active { transform: scale(.97); }
.mza-seg-top { position: absolute; inset: 3px; pointer-events: none; background: #e9edf3; border-radius: 9px; transition: clip-path .32s var(--mza-drawer); }
.mza-seg-top .mza-seg-row button { color: #11141a; }
.mza-card[data-mode="login"] .mza-seg-top { clip-path: inset(0 0 0 50% round 9px); }
.mza-card[data-mode="register"] .mza-seg-top { clip-path: inset(0 50% 0 0 round 9px); }

/* --mza-body-h is measured once by JS (tallest view), so switching views never resizes the card. */
.mza-body { position: relative; min-height: var(--mza-body-h, 0px); }
/* Padding holds the focus ring so no ancestor edge can slice it; the negative margin keeps the fields where they were. */
.mza-form { display: grid; gap: 10px; margin: -4px; padding: 6px; }
.mza-form[hidden] { display: none; }
#loginForm, #mzaForgotForm, #mzaOtpForm, #mzaNewpassForm { gap: 14px; }
/* measuring pass: every view laid out invisibly at the real width */
.mza-card.is-measuring .mza-form { position: absolute; left: -4px; right: -4px; top: -4px; margin: 0; visibility: hidden; }
/* The new view settles in with a short stagger (25ms steps) a beat after the old one starts leaving. */
.mza-form:not([hidden]):not(.is-leaving) > * { animation: mza-in .3s var(--mza-out) both; animation-delay: 50ms; }
.mza-form:not([hidden]):not(.is-leaving) > :nth-child(2) { animation-delay: 75ms; }
.mza-form:not([hidden]):not(.is-leaving) > :nth-child(3) { animation-delay: 100ms; }
.mza-form:not([hidden]):not(.is-leaving) > :nth-child(4) { animation-delay: 125ms; }
.mza-form:not([hidden]):not(.is-leaving) > :nth-child(n+5) { animation-delay: 150ms; }
@keyframes mza-in { from { opacity: 0; transform: translateY(8px); } }
/* The leaving view drops out of the flow so the card can resize under it, and fades without moving. */
.mza-form.is-leaving { position: absolute; top: -4px; left: -4px; right: -4px; margin: 0; pointer-events: none; animation: mza-leave .12s ease-in both; }
@keyframes mza-leave { to { opacity: 0; } }

.mza-field {
  position: relative; display: flex; align-items: center; height: 48px; margin: 0;
  background: var(--mza-field); border: 1px solid var(--mza-line); border-radius: var(--mza-r);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.mza-field:focus-within { border-color: var(--mza-focus); box-shadow: 0 0 0 3px var(--mza-focus-ring); }
.mza-field.is-bad { border-color: rgba(248, 113, 113, .55); box-shadow: 0 0 0 3px rgba(248, 113, 113, .1); }
.mza-field > svg { width: 18px; height: 18px; margin-inline: 14px 4px; color: var(--mza-faint); flex: none; transition: color .15s; }
.mza-field:focus-within > svg { color: var(--mza-muted); }
.mza-field input {
  flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; box-shadow: none;
  /* Disable native inset edges: the enclosing field supplies the whole frame. */
  -webkit-appearance: none; appearance: none; border-radius: 0;
  padding: 0 8px 0 12px; direction: ltr; text-align: left; font-size: 15px; color: var(--mza-ink);
  caret-color: var(--mza-ink);
  text-decoration: none; color-scheme: dark;
}
/* Typed text is forced to ink (autofill tries to recolour it); the placeholder keeps its own quiet colour. */
.mza-field input:not(:placeholder-shown) { -webkit-text-fill-color: var(--mza-ink); }
/* The field draws the focus ring (:focus-within); the bare input must not add its own box. */
.mza-field input:focus, .mza-field input:focus-visible { outline: none; box-shadow: none; }
/* Browser autofill paints its own light box inside the field; repaint it as the field. */
.mza-field input:-webkit-autofill,
.mza-field input:-webkit-autofill:hover,
.mza-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mza-ink);
  -webkit-box-shadow: 0 0 0 100px var(--mza-field) inset;
  caret-color: var(--mza-ink);
  transition: background-color 99999s ease-out 0s;
  /* Square corners would overpaint the field's rounded border and ring (field radius 12 - 1px border). */
  border-radius: 11px;
}
.mza-field input:autofill { background: transparent; color: var(--mza-ink); -webkit-text-fill-color: var(--mza-ink); }
.mza-field input:placeholder-shown { direction: rtl; text-align: right; }
.mza-field input::placeholder { color: var(--mza-faint); -webkit-text-fill-color: var(--mza-faint); opacity: 1; }
.mza-eye { border: 0; background: transparent; color: var(--mza-faint); width: 44px; height: 100%; display: grid; place-items: center; flex: none; padding: 0; transition: color .15s; }
.mza-eye svg { width: 18px; height: 18px; }

.mza-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 0 4px; }
.mza-meter-track { height: 4px; border-radius: 99px; background: #241d19; overflow: hidden; }
.mza-meter-fill {
  height: 100%; width: 0; border-radius: inherit; background: hsl(var(--gh), 96%, 60%);
  transition: width .3s var(--mza-out), background-color .3s;
}
.mza-meter-label { font-size: 11.5px; font-weight: 700; color: hsl(var(--gh), 80%, 68%); min-width: 5em; text-align: left; }
.mza-meter-label:empty::before { content: "قدرت رمز"; color: var(--mza-faint); font-weight: 500; }

.mza-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 12.5px; color: var(--mza-muted); }
.mza-row--center { justify-content: center; }
.mza-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.mza-check input { accent-color: #d9cdc0; width: 15px; height: 15px; margin: 0; }
.mza-link { border: 0; background: transparent; padding: 2px 0; font-size: 12.5px; font-weight: 600; color: var(--mza-muted); text-decoration: underline; text-decoration-color: var(--mza-line-strong); text-underline-offset: 4px; transition: color .15s; }
.mza-link:disabled { color: var(--mza-faint); font-weight: 500; cursor: default; }
.mza-link span { font-variant-numeric: tabular-nums; }

.mza-note { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -2px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--mza-muted); }
.mza-note.is-shown { display: flex; }
.mza-note.is-ok { color: var(--mza-ok); }
.mza-note.is-bad { color: var(--mza-danger); font-weight: 700; }
.mza-note .mza-link { font-size: 12px; }
.mza-note .mza-sep { color: var(--mza-faint); }
.mza-dots { display: inline-flex; gap: 3px; }
.mza-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: mza-dot 1s infinite ease-in-out; }
.mza-dots i:nth-child(2) { animation-delay: .15s; }
.mza-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mza-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.mza-lead { margin: 0 0 4px; text-align: center; color: var(--mza-muted); font-size: 13px; }
.mza-lead b { color: var(--mza-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mza-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mza-otp input {
  width: 100%; min-width: 0; height: 52px; padding: 0; text-align: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--mza-field); border: 1px solid var(--mza-line); border-radius: var(--mza-r); outline: 0; color: var(--mza-ink);
  caret-color: var(--mza-ink); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.mza-otp input:focus { border-color: var(--mza-focus); box-shadow: 0 0 0 3px var(--mza-focus-ring); }
.mza-otp input.is-filled { background: #241d19; border-color: var(--mza-line-strong); }

/* The orange face is a pseudo-element that only fades in (opacity = compositor). Animating background-color and a
   blurred box-shadow on the button itself repainted both every frame at the success moment. */
.mza-cta {
  position: relative; isolation: isolate; height: 50px; margin-top: 4px; border: 0; border-radius: var(--mza-r); overflow: hidden; width: 100%;
  background: #1a1f29; color: #6d7788; font-weight: 800; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .12s var(--mza-out), color .25s ease-out;
}
.mza-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #f4802f, #e8681b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  opacity: 0; transition: opacity .3s ease-out; will-change: opacity;
}
.mza-cta[data-ready="true"]:not([data-state="busy"])::before, .mza-cta[data-state="done"]::before { opacity: 1; }
.mza-cta[data-ready="true"]:not([data-state="busy"]), .mza-cta[data-state="done"] { color: #fff; }
.mza-cta:active { transform: scale(.97); }
.mza-cta:disabled { background: #231c18; color: var(--mza-muted); box-shadow: inset 0 0 0 1px var(--mza-line-strong); cursor: not-allowed; transform: none; }
.mza-cta[data-ready]:disabled::before { opacity: 0; }
.mza-cta:disabled .mza-cta-idle { font-variant-numeric: tabular-nums; }
.mza-cta > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .2s, transform .24s var(--mza-out); }
.mza-cta-busy, .mza-cta-done { opacity: 0; transform: translateY(8px); pointer-events: none; }
.mza-cta[data-state="busy"] { color: var(--mza-ink); box-shadow: inset 0 0 0 1px var(--mza-line-strong); cursor: progress; }
.mza-cta[data-state="busy"] .mza-cta-idle, .mza-cta[data-state="done"] .mza-cta-idle { opacity: 0; transform: translateY(-8px); }
.mza-cta[data-state="busy"] .mza-cta-busy, .mza-cta[data-state="done"] .mza-cta-done { opacity: 1; transform: none; }
.mza-cta-busy span { font-size: 13.5px; font-weight: 700; color: var(--mza-ink); }
.mza-orb { width: 24px; height: 24px; display: block; }
.mza-tick { width: 20px; height: 20px; }
.mza-tick path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.mza-cta[data-state="done"] .mza-tick path { transition: stroke-dashoffset .35s .08s ease-out; stroke-dashoffset: 0; }

/* Empty by default: no reserved gap under the button. */
.mza-msg { margin: 12px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--mza-danger); }
.mza-msg:empty { display: none; }
.mza-msg:not(:empty) { animation: mza-in .2s var(--mza-out) both; }
.mza-msg.is-ok { color: var(--mza-ok); }

/* Hover only on real pointers: touch screens would leave the state stuck after a tap. */
@media (hover: hover) and (pointer: fine) {
  .mza-x:hover { color: var(--mza-ink); background-color: rgba(255, 232, 210, .07); }
  .mza-seg-row button:hover { color: var(--mza-ink); }
  .mza-eye:hover { color: var(--mza-ink); }
  .mza-link:not(:disabled):hover { color: var(--mza-ink); }
  .mza-field:not(:focus-within):not(.is-bad):hover { border-color: var(--mza-line-strong); }
  .mza-cta[data-ready="true"]:not(:disabled):hover { filter: brightness(1.06); }
}

/* Touch devices keep the light but avoid perpetual large-layer animations,
   filter interpolation, per-field staggering and layout-height animation. */
.mza.mza-touch .mza-lt i { animation: none; }
.mza.mza-touch .mza-lt { transition: opacity .25s ease-out; }
.mza.mza-touch .mza-lt-pool { width: 380px; height: 280px; }
.mza.mza-touch .mza-ambient { width: 420px; height: 420px; }
.mza.mza-touch .mza-lantern img { transition: none; }
.mza.mza-touch .mza-card { transform: translateY(4px); }
.mza.mza-touch.is-open .mza-card { transform: none; transition: transform .18s ease-out, opacity .15s ease-out; }
.mza.mza-touch .mza-form:not([hidden]) > * { animation: mza-fade .15s ease-out both; }
.mza.mza-touch .mza-body { transition: none; }
.mza.mza-touch .mza-seg-top { transition: none; }

@media (max-width: 380px) {
  .mza-card { padding: 0 16px 18px; }
  .mza-sky { width: calc(100% + 32px); margin-inline: -16px; }
  .mza-otp { gap: 6px; }
  .mza-otp input { height: 48px; font-size: 20px; }
}
/* Hand-off after a successful login/signup: let the success moment land, then ease out instead of cutting to a reload. */
.mza.is-handoff .mza-card { opacity: 0; transform: translateY(-8px) scale(.985); transition: transform .26s var(--mza-drawer), opacity .22s ease-in; }
.mza.is-handoff .mza-scrim { background: rgb(8, 6, 5); transition: background-color .26s ease-out; }
.mza-scrim { transition: background-color .26s ease-out; }

/* Reduced motion: keep the opacity/colour fades (they explain state), drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .mza-lt i, .mza-lantern::after { animation: none; }
  .mza-form.is-leaving { display: none; }
  .mza-seg-top { transition: none; }
  .mza-card, .mza.is-open .mza-card { transform: none; transition: opacity .15s linear; }
  .mza.mza-touch .mza-card, .mza.mza-touch.is-open .mza-card { transform: none; transition: opacity .15s linear; }
  .mza.is-handoff .mza-card { transform: none; transition: opacity .15s linear; }
  .mza-form:not([hidden]) > *, .mza-msg:not(:empty) { animation-name: mza-fade; animation-delay: 0s !important; }
  .mza-card.is-shaking { animation: none; }
  .mza-cta > span, .mza-cta-busy, .mza-cta-done { transform: none !important; }
  .mza-x:active, .mza-seg-row button:active, .mza-cta:active { transform: none; }
}
@keyframes mza-fade { from { opacity: 0; } }