/*rzm:s77*/
:root {
    --cma-font: IRANYekan, tahoma, sans-serif;
    --cma-bg-start: #0f0c29;
    --cma-bg-mid: #302b63;
    --cma-bg-end: #24243e;
    --cma-text: #1a1a2e;
    --cma-muted: #7c7c9a;
    --cma-border-input: rgba(26, 26, 46, 0.12);
    --cma-radius-sm: 12px;
    --cma-radius-md: 20px;
    --cma-radius-lg: 28px;
    --cma-accent: #6366f1;
    --cma-accent-dark: #4f46e5;
    --cma-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --cma-success: #10b981;
    --cma-success-light: #34d399;
    --cma-danger: #ef4444;
    --cma-warning: #f59e0b;
    --cma-focus: rgba(99, 102, 241, 0.35);
    --cma-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --cma-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --cma-transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --cma-logo-size: clamp(116px, 36vw, 208px);
    --cma-logo-padding: clamp(14px, 3vw, 22px);
    --cma-logo-radius: clamp(26px, 7.5vw, 44px);
    --cma-title-size: clamp(24px, 5vw, 32px);
    /* 20px on a 390px phone as before, 16-17px on a 320px one (so the phone
       number fits), 32px from ~620px up. */
    --cma-card-padding: clamp(16px, 5.2vw, 32px);

    /* RZK 2026-10-25 (round 3): every surface of the page is painted from the
       tokens below. Light values here; the dark values are the same tokens in
       dark-reader-woo/assets/css/src/50-overrides.css (block "cma-page"), so
       dark mode changes values, never rules. */
    --cma-page-glow-1: rgba(99, 102, 241, 0.15);
    --cma-page-glow-2: rgba(168, 85, 247, 0.12);
    --cma-page-glow-3: rgba(6, 182, 212, 0.1);
    --cma-orb-1: rgba(99, 102, 241, 0.27);
    --cma-orb-2: rgba(168, 85, 247, 0.22);
    --cma-orb-3: rgba(6, 182, 212, 0.11);
    --cma-card-bg: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
    --cma-card-edge: rgba(255, 255, 255, 0.7);
    --cma-card-shadow: 0 40px 90px -34px rgba(5, 4, 25, 0.75), 0 22px 44px -28px rgba(79, 70, 229, 0.55);
    --cma-card-accent: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --cma-divider: rgba(26, 26, 46, 0.07);
    --cma-tint: rgba(99, 102, 241, 0.055);
    --cma-tint-strong: rgba(99, 102, 241, 0.1);
    --cma-tint-bd: rgba(99, 102, 241, 0.14);
    --cma-on-accent: #ffffff;
    --cma-btn-glow: 0 14px 30px -12px rgba(99, 102, 241, 0.8);
    --cma-btn-glow-hover: 0 18px 36px -12px rgba(99, 102, 241, 0.9);
    --cma-btn2-bg: rgba(99, 102, 241, 0.08);
    --cma-btn2-bg-hover: rgba(99, 102, 241, 0.14);
    --cma-btn2-fg: #4338ca;
    --cma-link-fg: #4f46e5;
    --cma-link-bg-hover: rgba(99, 102, 241, 0.09);
    --cma-veil: rgba(255, 255, 255, 0.6);
    --cma-danger-ring: rgba(239, 68, 68, 0.16);
    --cma-msg-error: #dc2626;
    --cma-msg-error-bg: rgba(239, 68, 68, 0.12);
    --cma-msg-ok: #059669;
    --cma-msg-ok-bg: rgba(16, 185, 129, 0.14);
    --cma-msg-info: #4338ca;
    --cma-msg-info-bg: rgba(99, 102, 241, 0.12);
    --cma-notice-warn-bg: linear-gradient(180deg, rgba(245, 158, 11, 0.13) 0%, rgba(245, 158, 11, 0.05) 100%);
    --cma-notice-warn-fg: #7c4a03;
    --cma-notice-info-bg: linear-gradient(180deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.04) 100%);
    --cma-notice-info-fg: #2f327d;
    --cma-footer-fg: rgba(255, 255, 255, 0.58);
    --cma-footer-link: rgba(255, 255, 255, 0.86);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.cma-page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    /* The body's default 8px margin; the template's old inline
       "html, body { margin: 0 }" only repeated this. */
    margin: 0;
    padding: 0;
    font-family: var(--cma-font);
    color: var(--cma-text);
    background-color: var(--cma-bg-start);
    overflow-x: hidden;
    position: relative;
}

/* RZK 2026-10-25: the page gradient lives on this fixed layer, together with
   the three soft lights. It used to be the body's own background with
   background-attachment: fixed, which browsers repaint on every scroll and
   every viewport resize (the phone keyboard opening is one). A fixed layer is
   painted once and composited. */
.cma-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, var(--cma-page-glow-1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, var(--cma-page-glow-2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 90%, var(--cma-page-glow-3) 0%, transparent 50%),
        linear-gradient(135deg, var(--cma-bg-start) 0%, var(--cma-bg-mid) 50%, var(--cma-bg-end) 100%);
    pointer-events: none;
    z-index: 0;
}

.cma-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    /* RZK 2026-10-24: one 400px tile (the SVG is built to tile: stitchTiles)
       instead of one noise image the size of the viewport. The browser
       rasterises the fractal noise once and repeats it, rather than redrawing
       a full-screen filter whenever the viewport changes size - which on a
       phone is every time the keyboard opens for the phone or code field. */
    background-size: 400px 400px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Keyframes: none here. Every animation of this page, with its keyframes, is
   printed by Rozhika Performance > Animations (rozhika-inp-optimizer,
   includes/motion/registry.php, source s77) in the <style id="rzk-motion">
   block, which is where it can be set to original / new / off. auth.js only
   toggles classes (cma-enter, cma-enter-side, is-hiding...). This file used to
   repeat the same @keyframes; loading later, its copies silently replaced the
   ones the Animations tab prints. */

.cma-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* RZK 2026-10-25: the lights are soft by construction - a radial gradient that
   fades to nothing over the whole circle (closest-side) - instead of a hard
   gradient blurred by filter: blur(60px). The blur cost a full offscreen
   filter pass for each of these large fixed layers, re-run whenever the
   viewport changed size; the gradient alone draws the same glow. Each orb is
   a little larger to keep the old spread. */
.cma-orb-1 {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -160px;
    background: radial-gradient(circle closest-side, var(--cma-orb-1) 0%, transparent 100%);
}

.cma-orb-2 {
    width: 420px;
    height: 420px;
    bottom: -110px;
    left: -110px;
    background: radial-gradient(circle closest-side, var(--cma-orb-2) 0%, transparent 100%);
}

.cma-orb-3 {
    width: 300px;
    height: 300px;
    top: calc(40% - 50px);
    left: calc(10% - 50px);
    background: radial-gradient(circle closest-side, var(--cma-orb-3) 0%, transparent 100%);
}


/* RZK 2026-10-25 (CLS): the column starts at a top offset taken from the
   viewport, not from the content. It used to be centred vertically, so when
   the code panel appeared - half a second or more after «ادامه», too late to
   count as part of the tap - the whole card and the logo jumped up ~145px to
   re-centre (Chrome measured CLS 0.19 + 0.05 for every sign-in). Now content
   added below only extends the page downward. The offset puts the first
   screen where centring did: half the viewport minus about half its height. */
.cma {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(18px, 6vw, 40px);
    padding-top: max(18px, calc(50vh - 262px));
    padding-top: max(18px, calc(50dvh - 262px));
    direction: rtl;
    color: var(--cma-text);
    position: relative;
    z-index: 1;
}

.cma-logo-area {
    margin-bottom: clamp(20px, 4vw, 30px);
    text-align: center;
}

/* RZK 2026-10-25: an app-icon tile. It used to be 85% white over the dark page
   behind a 20px backdrop blur, which read as a dull grey square (and the blur
   was repainted whenever anything behind it moved). Now: an opaque, slightly
   warm white tile with a hairline brand-gradient edge and a soft lift, a
   little smaller on phones so the form stays above the keyboard. The edge is
   a second background clipped to the border box, so there is no extra layer. */
.cma-logo {
    --cma-logo-tile: linear-gradient(160deg, #ffffff 0%, #f6f3f9 100%);
    --cma-logo-edge: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(196, 181, 253, 0.7) 55%, rgba(139, 92, 246, 0.55) 100%);
    --cma-logo-lift: 0 18px 40px -12px rgba(15, 12, 41, 0.55), 0 0 60px rgba(99, 102, 241, 0.32);
    width: var(--cma-logo-size);
    height: var(--cma-logo-size);
    margin: 0 auto;
    padding: var(--cma-logo-padding);
    background: var(--cma-logo-tile) padding-box, var(--cma-logo-edge) border-box;
    border: 1.5px solid transparent;
    border-radius: var(--cma-logo-radius);
    box-shadow: var(--cma-logo-lift);
    display: flex;
    align-items: center;
    justify-content: center;
    /* The breathing glow moved to ::after below. box-shadow cannot be
       composited, so animating it here repainted the logo every frame. */
    position: relative;
}

/* ---------------------------------------------------------------------------
 * Breathing glow, done on the compositor.
 *
 * This used to be `animation: cmaGlow` on .cma-logo, interpolating box-shadow
 * blur and alpha. box-shadow is a paint property that Chrome cannot hand to the
 * compositor, so every frame of a 3s infinite loop cost a main-thread style
 * recalculation plus a repaint of the logo. Measured on /my-account/ at 4x CPU
 * throttle: 121 style recalculations and 242 paints every 2 seconds, forever,
 * on the page where people type their credentials.
 *
 * The same effect as an opacity cross-fade of a fixed shadow: opacity IS
 * compositable, so the loop leaves the main thread entirely. Measured after:
 * 4 recalculations and 0 paints per 2 seconds. The element keeps its static
 * base glow from --cma-shadow-glow, so the resting state is unchanged, and the
 * box geometry is untouched (verified identical at 185x185).
 * --------------------------------------------------------------------------- */
.cma-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5), 0 0 80px rgba(139, 92, 246, 0.3);
    opacity: 0;
}

.cma-logo:hover {
    transform: scale(1.05) rotate(2deg);
}

.cma-logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cma-logo-title {
    font-size: var(--cma-title-size);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.cma-logo-subtitle {
    font-size: clamp(13px, 2.5vw, 15px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.cma-card {
    /* RZK 2026-10-25: an opaque card. It was 95% white over a 40px
       backdrop-filter blur - a blur nobody could see through a 95% surface,
       but one the browser redrew on every frame something behind it moved
       (the animated lights) and on every keyboard resize. */
    width: 100%;
    max-width: 440px;
    background: var(--cma-card-bg);
    border: 1px solid var(--cma-card-edge);
    border-radius: var(--cma-radius-lg);
    box-shadow: var(--cma-card-shadow);
    overflow: hidden;
    position: relative;
}

/* The brand line along the top edge, fading out before the corners so it
   follows the card's curve instead of being cut by it. */
.cma-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cma-card-accent);
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.cma-header {
    padding: clamp(24px, 5vw, 30px) var(--cma-card-padding) clamp(16px, 3.5vw, 20px);
    text-align: center;
    border-bottom: 1px solid var(--cma-divider);
}

.cma-brand-title {
    /* RZK 2026-10-25: the page's heading (an <h1> on /login/), sized as one:
       17px on a 320px phone up to 20px. Was 12-14px, the size of the
       sub-heading under it, so the card had no clear title. */
    display: block;
    font-size: clamp(17px, 15.5px + 0.5vw, 20px);
    font-weight: 900;
    line-height: 1.5;
    color: var(--cma-text);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.cma-brand-sub {
    /* One line that follows the step: «شماره موبایل خود را وارد کنید», then
       which number the code went to (auth.js, setStepText). */
    display: block;
    font-size: clamp(12.5px, 11.5px + 0.3vw, 14px);
    font-weight: 500;
    line-height: 1.7;
    color: var(--cma-muted);
    margin: 0;
    text-wrap: balance;
}

.cma-brand-sub bdi {
    color: var(--cma-text);
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.cma-body {
    padding: clamp(20px, 4vw, 24px) var(--cma-card-padding) var(--cma-card-padding);
    position: relative;
}

.cma-form {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 20px);
}

.cma-field {
    margin: 0;
}

/* A real <label for> on every field (clicking it focuses the field and
   screen readers announce it). */
.cma-label {
    display: block;
    font-size: clamp(13px, 12px + 0.3vw, 14px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--cma-text);
    margin-bottom: clamp(8px, 2vw, 10px);
    cursor: default;
}

.cma-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cma-label-row .cma-label {
    margin-bottom: 0;
}

.cma-help {
    margin-top: clamp(8px, 1.5vw, 10px);
    color: var(--cma-muted);
    font-size: clamp(12px, 11.3px + 0.25vw, 13px);
    font-weight: 500;
    line-height: 1.7;
}

.cma-req {
    color: var(--cma-danger);
    font-weight: 900;
}

.cma-input {
    /* RZK 2026-10-25: painted from tokens, like the code boxes; each state
       below changes tokens only, so one rule owns the field. */
    --cma-in-bd: var(--cma-border-input);
    --cma-in-bg: #fafbff;
    --cma-in-ring: transparent;
    width: 100%;
    border: 2px solid var(--cma-in-bd);
    border-radius: var(--cma-radius-md);
    background: var(--cma-in-bg);
    box-shadow: 0 0 0 4px var(--cma-in-ring);
    padding: clamp(14px, 3vw, 18px) clamp(16px, 3.5vw, 22px);
    color: var(--cma-text);
    caret-color: var(--cma-accent);
    outline: 0;
    font-family: var(--cma-font);
    /* RZK 2026-08-27: pinned to 16px. Measured 11.70px at 390px, which makes
       mobile Safari zoom the viewport on focus -- and this page focuses the
       field with JavaScript on load, so a fluid idle size would also produce a
       load-time layout shift that counts against CLS. 16px on a text input is a
       platform floor in the same way 24px is a floor for a tap target. */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.cma-input:hover {
    --cma-in-bd: rgba(99, 102, 241, 0.35);
    --cma-in-bg: #fff;
}

.cma-input:focus {
    --cma-in-bd: var(--cma-accent);
    --cma-in-bg: #fff;
    --cma-in-ring: var(--cma-focus);
}

.cma-input.is-invalid,
.cma-input.is-invalid:focus {
    /* RZK 2026-10-25: a field the visitor has to fix (set by auth.js, cleared
       on the next keystroke in it). */
    --cma-in-bd: var(--cma-danger);
    --cma-in-ring: var(--cma-danger-ring);
}

.cma-input::placeholder {
    color: var(--cma-muted);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   PHONE FIELD (RZK 2026-10-25)

   One rounded field holding a «+۹۸» chip and the number. The field is the
   only thing with a border; the chip sits inside it with its own radius, so
   there is no seam or second border to line up. Painted from tokens; the
   states are:
     hover · focus (indigo ring) · .is-complete (10 valid digits: violet, with
     a check) · .is-invalid (red, set when «ادامه» is pressed on a bad number,
     cleared on the next keystroke) · .is-locked (the code was sent to this
     number: calm tint, green check, no hover).
   The states are classes set by auth.js, not :has(), which keeps style
   recalculation on each keystroke local to this field.
   --------------------------------------------------------------------------- */
.cma-phone {
    --cma-phone-bd: var(--cma-border-input);
    --cma-phone-bg: #fafbff;
    --cma-phone-ring: transparent;
    --cma-phone-chip-bg: rgba(99, 102, 241, 0.08);
    --cma-phone-chip-fg: var(--cma-accent-dark);
    --cma-phone-mark: transparent;
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: row-reverse;
    gap: 2px;
    min-height: clamp(54px, 13vw, 60px);
    padding: 5px;
    border: 2px solid var(--cma-phone-bd);
    border-radius: var(--cma-radius-md);
    background: var(--cma-phone-bg);
    box-shadow: 0 0 0 4px var(--cma-phone-ring);
    cursor: text;
}

.cma-phone:hover {
    --cma-phone-bd: rgba(99, 102, 241, 0.35);
    --cma-phone-bg: #fff;
}

.cma-phone:focus-within {
    --cma-phone-bd: var(--cma-accent);
    --cma-phone-bg: #fff;
    --cma-phone-ring: var(--cma-focus);
}

.cma-phone.is-complete {
    --cma-phone-bd: #8b5cf6;
    --cma-phone-mark: #8b5cf6;
}

.cma-phone.is-invalid {
    --cma-phone-bd: var(--cma-danger);
    --cma-phone-ring: rgba(239, 68, 68, 0.16);
    --cma-phone-mark: transparent;
}

.cma-phone.is-locked {
    --cma-phone-bd: rgba(99, 102, 241, 0.2);
    --cma-phone-bg: rgba(99, 102, 241, 0.045);
    --cma-phone-ring: transparent;
    --cma-phone-chip-bg: rgba(99, 102, 241, 0.06);
    --cma-phone-mark: var(--cma-success);
    cursor: default;
}

/* The check at the far end of the number: a mask, so its colour is a token. */
.cma-phone::after {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(11px, 3.5vw, 18px);
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: var(--cma-phone-mark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.3-5.4 5.9a1 1 0 0 1-1.45.04l-2.6-2.6a1 1 0 1 1 1.42-1.42l1.86 1.87 4.7-5.13a1 1 0 0 1 1.47 1.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.3-5.4 5.9a1 1 0 0 1-1.45.04l-2.6-2.6a1 1 0 1 1 1.42-1.42l1.86 1.87 4.7-5.13a1 1 0 0 1 1.47 1.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.cma-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(12px, 3vw, 16px);
    border-radius: calc(var(--cma-radius-md) - 8px);
    background: var(--cma-phone-chip-bg);
    color: var(--cma-phone-chip-fg);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    direction: ltr;
    user-select: none;
    -webkit-user-select: none;
}

.cma-input-phone {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0 clamp(36px, 11vw, 44px) 0 clamp(10px, 3vw, 16px);
    border: 0;
    border-radius: calc(var(--cma-radius-md) - 8px);
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    color: var(--cma-text);
    -webkit-text-fill-color: currentColor;
    opacity: 1;
    caret-color: var(--cma-accent);
    font-family: var(--cma-font);
    /* 16px: the iOS no-zoom floor (see .cma-input). */
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: clamp(0.8px, 0.38vw, 1.5px);
    direction: ltr;
    text-align: left;
}

.cma-input-phone::placeholder {
    color: var(--cma-muted);
    opacity: 0.7;
    font-weight: 600;
}

.cma-phone.is-locked .cma-input-phone {
    cursor: default;
}

/* Once the code is on its way the hint about the number has done its job. */
.cma-phone.is-locked + .cma-help {
    display: none;
}

.cma-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2.5vw, 14px);
}

.cma-check {
    --cma-check-bg: var(--cma-tint);
    --cma-check-bd: var(--cma-tint-bd);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    margin: 0;
    padding: 12px clamp(14px, 3vw, 16px);
    background: var(--cma-check-bg);
    border: 1px solid var(--cma-check-bd);
    border-radius: 14px;
    color: var(--cma-text);
    font-size: clamp(13px, 12px + 0.3vw, 14px);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cma-check:hover {
    --cma-check-bg: var(--cma-tint-strong);
}

.cma-check.is-on {
    --cma-check-bd: rgba(99, 102, 241, 0.34);
}

.cma-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--cma-accent);
    cursor: pointer;
}

.cma-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.cma-actions[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   BUTTONS (RZK 2026-10-25)
   Primary (ادامه / ورود به حساب / ثبت نام): 54px tall, 15px label with an
   arrow pointing the way the page reads (left, in RTL). Secondary (ویرایش
   شماره): a quiet tinted button with a pencil, so it reads as a way back
   rather than a second field. Both have a visible keyboard focus ring.
   --------------------------------------------------------------------------- */
.cma-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    border: 0;
    border-radius: 16px;
    padding: 14px clamp(20px, 4vw, 26px);
    cursor: pointer;
    color: var(--cma-on-accent);
    font-family: var(--cma-font);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.1px;
    background: var(--cma-gradient-primary);
    background-size: 200% 200%;
    box-shadow: var(--cma-btn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    outline: 0;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.cma-btn-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.cma-btn:focus-visible {
    box-shadow: var(--cma-btn-glow), 0 0 0 4px var(--cma-focus);
}

.cma-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    opacity: 0;
}

.cma-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--cma-btn-glow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    background-position: 100% 50%;
}

.cma-btn:active {
    transform: translateY(0) scale(0.99);
    box-shadow: var(--cma-btn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.cma-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* The shimmer belongs to the primary button only (its keyframes and hover
   rule live in the Animations layer); disabled buttons never show it. */
.cma-btn:disabled::before {
    opacity: 0;
}

.cma-btn.secondary {
    min-height: 48px;
    background: var(--cma-btn2-bg);
    color: var(--cma-btn2-fg);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

.cma-btn.secondary .cma-btn-ico {
    width: 16px;
    height: 16px;
}

.cma-btn.secondary::before {
    display: none;
}

.cma-btn.secondary:hover {
    background: var(--cma-btn2-bg-hover);
    transform: none;
    box-shadow: none;
}

.cma-btn.secondary:focus-visible {
    box-shadow: 0 0 0 4px var(--cma-focus);
}

.cma-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    background: transparent;
    border: 0;
    padding: 6px 12px;
    margin: 0;
    cursor: pointer;
    color: var(--cma-link-fg);
    font-family: var(--cma-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 999px;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

.cma-link:hover {
    background: var(--cma-link-bg-hover);
}

.cma-link:focus-visible {
    box-shadow: 0 0 0 3px var(--cma-focus);
}

/* While the countdown runs the link is disabled and shows the time left. */
.cma-link:disabled {
    color: var(--cma-muted);
    cursor: default;
    background: transparent;
}

.cma-countdown {
    display: inline-block;
    min-width: 2.6em;
    text-align: center;
    direction: ltr;
}

.cma-countdown:empty {
    display: none;
}

.cma-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cma-section + .cma-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--cma-divider);
}

.cma-otp-wrap {
    background: var(--cma-tint);
    border: 1px solid var(--cma-tint-bd);
    border-radius: var(--cma-radius-md);
    padding: clamp(16px, 3.5vw, 20px) clamp(14px, 3vw, 18px);
}

.cma-otp-wrap .cma-help {
    margin-top: 12px;
    text-align: center;
}

.cma-otp {
    display: flex;
    gap: clamp(8px, 2vw, 10px);
    justify-content: center;
    direction: ltr;
}

.cma-otp input {
    /* RZK 2026-10-24: the box is painted from four tokens, and every state
       below only changes tokens. One rule owns the box; nothing overrides it. */
    --cma-otp-bd: var(--cma-border-input);
    --cma-otp-bg: #fff;
    --cma-otp-ring: transparent;
    width: clamp(44px, 10vw, 52px);
    height: clamp(52px, 12vw, 60px);
    min-width: 0;
    margin: 0;
    /* iOS: no UA padding and a "normal" line box, so the digit and the caret
       sit on the vertical centre of the box. line-height:1 with this font and
       the old focus transform:scale() put both below the centre on iPhone. */
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--cma-radius-sm);
    border: 2px solid var(--cma-otp-bd);
    background: var(--cma-otp-bg);
    box-shadow: 0 0 0 4px var(--cma-otp-ring);
    color: var(--cma-text);
    -webkit-text-fill-color: currentColor;
    opacity: 1;
    text-align: center;
    font-family: var(--cma-font);
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 800;
    line-height: normal;
    outline: 0;
    caret-color: var(--cma-accent);
}

.cma-otp input:hover {
    --cma-otp-bd: rgba(99, 102, 241, 0.3);
}

.cma-otp input:focus {
    --cma-otp-bd: var(--cma-accent);
    --cma-otp-ring: var(--cma-focus);
}

/* A digit has been typed: violet, the colour of the login button, so the
   code reads as "entered, not judged yet". Green and red are kept for the
   server's verdict. */
.cma-otp input.filled,
.cma-otp.is-verifying input {
    --cma-otp-bd: #8b5cf6;
    --cma-otp-bg: rgba(139, 92, 246, 0.06);
}

.cma-otp.is-success input {
    --cma-otp-bd: var(--cma-success);
    --cma-otp-bg: rgba(16, 185, 129, 0.07);
    --cma-otp-ring: transparent;
}

.cma-otp.is-error input {
    --cma-otp-bd: var(--cma-danger);
    --cma-otp-bg: rgba(239, 68, 68, 0.06);
    --cma-otp-ring: transparent;
}

.cma-otp.is-error input:focus {
    --cma-otp-ring: rgba(239, 68, 68, 0.22);
}

.cma-captcha-field {
    margin: 0;
}

.cma-captcha-field [data-captcha] {
    max-width: 100%;
    border-radius: var(--cma-radius-sm);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   MESSAGES (RZK 2026-10-25, round 5)
   Inline, where the problem is - under the phone field, under the code boxes
   or under the field to fix - in place of that spot's hint line (the hint is
   hidden while a message is shown, so a one-line message takes exactly its
   room and nothing below moves). A small tinted icon, the sentence in the
   tone's colour, and at most one action as a compact pill at the end of the
   line. This replaces the floating toast, which on phones covered the logo,
   broke into several lines and competed with the keyboard. The entrance is
   the Animations row «Field — cma Slide In» (class cma-enter-side).
   --------------------------------------------------------------------------- */
.cma-msg {
    --cma-msg-fg: var(--cma-msg-error);
    --cma-msg-ico-bg: var(--cma-msg-error-bg);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    margin-top: clamp(8px, 1.5vw, 10px);
    color: var(--cma-msg-fg);
    font-size: clamp(12.5px, 11.8px + 0.25vw, 13.5px);
    font-weight: 600;
    line-height: 1.7;
}

.cma-msg.is-ok {
    --cma-msg-fg: var(--cma-msg-ok);
    --cma-msg-ico-bg: var(--cma-msg-ok-bg);
}

.cma-msg.is-info {
    --cma-msg-fg: var(--cma-msg-info);
    --cma-msg-ico-bg: var(--cma-msg-info-bg);
}

.cma-msg-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 0.2em;
    border-radius: 50%;
    background: var(--cma-msg-ico-bg);
}

.cma-msg-ico svg {
    width: 11px;
    height: 11px;
}

.cma-msg-text {
    /* The sentence always has the whole line (after the icon), so it is
       never squeezed into a narrow column next to the button. */
    flex: 1 1 calc(100% - 26px);
    min-width: 0;
}

/* The action sits on its own line under the sentence, aligned with it. */
.cma-msg-action {
    flex: 0 0 auto;
    min-height: 28px;
    margin: 2px 0 0;
    margin-inline-start: 26px;
    padding: 2px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--cma-btn2-bg);
    color: var(--cma-btn2-fg);
    font-family: var(--cma-font);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

.cma-msg-action:hover {
    background: var(--cma-btn2-bg-hover);
}

.cma-msg-action:focus-visible {
    box-shadow: 0 0 0 3px var(--cma-focus);
}

/* The message takes the hint's place. */
.cma-field.has-msg > .cma-help,
.cma-otp-wrap.has-msg > .cma-help {
    display: none;
}

/* Under the code boxes. */
.cma-otp-wrap > .cma-msg {
    margin-top: 12px;
}

.cma-loading-overlay {
    /* A light veil while a request runs (no backdrop blur: it was painted in
       the same frame as the tap that started the request). */
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--cma-veil);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

.cma-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.cma-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--cma-tint-strong);
    border-top-color: var(--cma-accent);
}

.cma-loading {
    display: none;
}

.cma-footer {
    margin-top: clamp(20px, 4vw, 24px);
    text-align: center;
}

.cma-footer-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cma-footer-fg);
    margin: 0;
}

.cma-footer-ico {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cma-footer-link {
    color: var(--cma-footer-link);
    font-weight: 700;
    text-decoration: none;
}

.cma-footer-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cma-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--cma-success) 0%, var(--cma-success-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35);
}

.cma-success-icon svg {
    width: 40px;
    height: 40px;
    stroke: #fff;
    stroke-width: 3;
    fill: none;
}

/* The first screen is taller from here up (the logo tile grows to 208px). */
@media (min-width: 700px) {
    .cma {
        padding-top: max(18px, calc(50vh - 325px));
        padding-top: max(18px, calc(50dvh - 325px));
    }
}

@media (max-width: 520px) {
    .cma-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cma-orb-1 {
        width: 360px;
        height: 360px;
    }

    .cma-orb-2 {
        width: 300px;
        height: 300px;
    }

    .cma-orb-3 {
        display: none;
    }
}

@media (max-width: 380px) {
    .cma-otp input {
        width: 38px;
        height: 46px;
        font-size: 16px;
        border-radius: 10px;
    }
}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ---------------------------------------------------------------------------
   NOTICE  (RZK 2026-08-02, task 5)

   Shown when the visitor was sent here for a reason -- e.g. they tried to check
   out as a guest. Uses the page's existing tokens so it belongs to the design
   rather than looking bolted on, and scales on the same clamp() basis as the
   rest of the card.
   --------------------------------------------------------------------------- */
.cma-notice {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 2.4vw, 12px);
    margin: 0;
    padding: clamp(12px, 3vw, 16px) var(--cma-card-padding);
    border-bottom: 1px solid var(--cma-divider);
    text-align: right;
}

.cma-notice--warning {
    background: var(--cma-notice-warn-bg);
    color: var(--cma-notice-warn-fg);
}

.cma-notice--info {
    background: var(--cma-notice-info-bg);
    color: var(--cma-notice-info-fg);
}

.cma-notice-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 5.2vw, 24px);
    height: clamp(20px, 5.2vw, 24px);
    margin-top: 1px;
}

.cma-notice-icon svg {
    width: 100%;
    height: 100%;
}

.cma-notice--warning .cma-notice-icon { color: var(--cma-warning); }
.cma-notice--info .cma-notice-icon { color: var(--cma-accent); }

.cma-notice-body {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1vw, 5px);
    min-width: 0;
}

.cma-notice-title {
    /* RZK 2026-08-02: one fluid ramp rather than a fixed size. 11.5px on a 320px
       phone, 14.5px from ~430px up, and every width in between is on the line --
       the same approach the mini cart uses, so the two read consistently. */
    font-size: clamp(12px, calc(8.3px + 1vw), 14.5px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.2px;
}

.cma-notice-text {
    font-size: clamp(12px, calc(8.24px + 0.8vw), 13.2px);
    font-weight: 500;
    line-height: 1.8;
    opacity: 0.92;
}

/* RZK 2026-10-25: the old "iOS zoom guard" (font-size:16px !important on
   :focus) is gone. Both .cma-input and .cma-input-phone are 16px at rest now,
   so it only overrode a value with the same value. */