/* =========================================================================
   AGAH OTP AUTH — LOGIN PAGE + CART MODAL

   Visual language ported from the "Login Modal With OTP" design
   (artifact e3e64393). This file is styling only: every class name,
   data-* hook and element that app.js / app-legacy.js reach for is left
   exactly where it was, so no flow changes behaviour.

   What the design specifies, and what is implemented below:

     surface   white card on a warm cream page, 20px radius, soft
               warm-tinted elevation, no border
     controls  8px radius, 1.5px hairline border, brand-tint focus ring
     type      display face for headings, body face everywhere else,
               tall line-heights for Farsi
     motion    150/220ms on a calm standard curve, no bounce

   Colours are the design's oklch ramps verbatim. A @supports fallback
   restates them as sRGB hex for browsers without oklch (pre-2023
   Chrome/Firefox, older Android WebViews), so the palette degrades to
   the same colours instead of to unstyled text.

   Fonts are the site's REAL faces — iransans (body) and gramophone
   (display). The design proposed Vazirmatn / Noto Naskh Arabic but
   flagged them itself as guesses standing in for fonts it could not
   read; the brand's own faces are what it was approximating.
   ========================================================================= */

:root {
    /* ---- palette ------------------------------------------------------ */
    /* Brand brown. primary-500 is exactly #a96045 — the design's own ramp
       shape (its lightness ladder, its chroma curve, its 2°-per-step hue
       drift) re-anchored on that colour, so every tint, hover and active
       state stays harmonically related to it instead of being a lone
       hardcoded value. */
    --color-primary-100: oklch(95% 0.0138 48.8);
    --color-primary-200: oklch(89% 0.0321 46.8);
    --color-primary-300: oklch(80% 0.0596 44.8);
    --color-primary-400: oklch(68% 0.0826 42.8);
    --color-primary-500: oklch(56.7% 0.1032 40.8);
    --color-primary-600: oklch(48% 0.0978 38.8);
    --color-primary-700: oklch(40% 0.0826 36.8);
    --color-primary-800: oklch(32% 0.0657 34.8);
    --color-primary-900: oklch(22% 0.0443 32.8);
    --color-ink-900: oklch(20% 0.02 40);
    --color-ink-700: oklch(38% 0.02 40);
    --color-ink-500: oklch(55% 0.016 40);
    --color-ink-300: oklch(75% 0.01 40);
    --color-ink-100: oklch(90% 0.008 45);
    --color-cream-0: oklch(100% 0 0);
    --color-cream-50: oklch(99% 0.004 60);
    --color-cream-100: oklch(97% 0.009 55);
    --color-cream-200: oklch(94% 0.014 52);
    --color-gold-300: oklch(88% 0.058 85);
    --color-gold-500: oklch(72% 0.11 80);
    --color-gold-700: oklch(50% 0.098 75);
    --color-red-500: oklch(58% 0.19 25);
    --color-red-700: oklch(42% 0.16 24);
    --color-success-500: oklch(60% 0.13 150);

    /* ---- semantic ----------------------------------------------------- */
    --surface-canvas: var(--color-cream-50);
    --surface-page: var(--color-cream-100);
    --surface-sunken: var(--color-cream-200);
    --surface-card: var(--color-cream-0);
    --text-primary: var(--color-ink-900);
    --text-secondary: var(--color-ink-700);
    --text-muted: var(--color-ink-500);
    --text-on-brand: var(--color-cream-50);
    --text-link: var(--color-primary-600);
    --text-link-hover: var(--color-primary-700);
    --border-subtle: var(--color-ink-100);
    --border-strong: var(--color-ink-300);
    --brand-primary: var(--color-primary-500);
    --brand-primary-hover: var(--color-primary-600);
    --brand-primary-active: var(--color-primary-700);
    --brand-primary-tint: var(--color-primary-100);
    --brand-gold: var(--color-gold-500);
    --state-success: var(--color-success-500);
    --state-error: var(--color-red-500);
    --focus-ring: var(--color-primary-400);

    /* ---- type --------------------------------------------------------- */
    --font-display: 'gramophone', 'iransans', Tahoma, sans-serif;
    --font-body: 'iransans', 'gramophone', Tahoma, sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-h3: 1.5rem;
    --leading-h3: 1.35;
    --text-h4: 1.25rem;
    --text-body: 1rem;
    --leading-body: 1.8;
    --text-caption: 0.875rem;
    --leading-caption: 1.6;
    --text-micro: 0.75rem;
    --leading-micro: 1.5;

    /* ---- space -------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ---- shape, elevation, motion ------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px oklch(20% 0.02 40 / 0.06), 0 4px 12px oklch(20% 0.02 40 / 0.06);
    --shadow-elevated: 0 8px 24px oklch(20% 0.02 40 / 0.10), 0 2px 6px oklch(20% 0.02 40 / 0.07);
    --shadow-popover: 0 20px 48px oklch(20% 0.02 40 / 0.20);
    --scrim: oklch(20% 0.02 40 / 0.45);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-base: 220ms;

    /* ---- compatibility aliases ----------------------------------------
       The previous token names are kept, now pointing at the new ramps, so
       any rule elsewhere (theme overrides, course-woo-cards, the skip
       button's own var() fallbacks) that still references --cwc-* keeps
       resolving to a real colour instead of falling back to a hardcoded
       value that no longer matches. */
    --cwc-bg: var(--surface-page);
    --cwc-surface: var(--surface-card);
    --cwc-surface-strong: var(--surface-card);
    --cwc-field: var(--surface-card);
    --cwc-text: var(--text-primary);
    --cwc-muted: var(--text-muted);
    --cwc-primary: var(--brand-primary);
    --cwc-primary-dark: var(--brand-primary-hover);
    --cwc-tint: var(--brand-primary-tint);
    --cwc-accent: var(--color-gold-300);
    --cwc-border: var(--border-subtle);
    --cwc-shadow: var(--shadow-card);
    --cwc-shadow-soft: var(--shadow-elevated);
    --cwc-radius-xl: var(--radius-lg);
    --cwc-radius-lg: var(--radius-lg);
    --cwc-radius-md: var(--radius-md);
    --cwc-radius-sm: var(--radius-sm);
    --cwc-ring: 0 0 0 3px var(--brand-primary-tint);
    --cwc-danger: var(--state-error);
    --cwc-success: var(--state-success);
    --cwc-transition: var(--duration-base) var(--ease-standard);
}

/* sRGB fallback for engines without oklch. Only the raw ramp is restated —
   every semantic token above is a var() reference, so it inherits these
   automatically. */
@supports not (color: oklch(50% 0.1 40)) {
    :root {
        --color-primary-100: #f7ece7;
        --color-primary-200: #eed5c9;
        --color-primary-300: #e0b29f;
        --color-primary-400: #c4886f;
        --color-primary-500: #a96045;
        --color-primary-600: #8b4832;
        --color-primary-700: #6d3626;
        --color-primary-800: #4f251b;
        --color-primary-900: #2c120d;
        --color-ink-900: #1e130f;
        --color-ink-700: #4c3f3a;
        --color-ink-500: #7a6f6b;
        --color-ink-300: #b4aca9;
        --color-ink-100: #e3dcda;
        --color-cream-0: #ffffff;
        --color-cream-50: #fefbf9;
        --color-cream-100: #faf4ef;
        --color-cream-200: #f3e9e3;
        --color-gold-300: #e9d5ac;
        --color-gold-500: #c99d4e;
        --color-gold-700: #835a13;
        --color-red-500: #d33a3c;
        --color-red-700: #90101c;
        --color-success-500: #3b9555;
        --shadow-card: 0 1px 2px rgba(30, 19, 15, .06), 0 4px 12px rgba(30, 19, 15, .06);
        --shadow-elevated: 0 8px 24px rgba(30, 19, 15, .10), 0 2px 6px rgba(30, 19, 15, .07);
        --shadow-popover: 0 20px 48px rgba(30, 19, 15, .20);
        --scrim: rgba(30, 19, 15, .45);
    }
}

/* GLOBAL PAGE LOCK
   These assets only load on pages that carry the [agah_auth] shortcode (or
   the cart modal). Killing the default body margin removes the spurious
   vertical scrollbar a bare `min-height: 100vh` element produces, and
   blocking horizontal overflow stops the card/inputs from pushing a
   sideways scroll on small screens. We do NOT hard-clip vertically: the
   wrapper uses min-height so tall content (a small phone with the keyboard
   open) can still grow instead of being cut off. */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Force border-box so width:100% controls (inputs, buttons, the card
   itself) include their own padding instead of adding it on top. Without
   this the controls render wider than their container and spill past the
   card on narrow screens, dragging a horizontal scroll with them. */
.login-main-wrapper,
.login-main-wrapper *,
.login-main-wrapper *::before,
.login-main-wrapper *::after,
.agah-otp-wrapper,
.agah-otp-wrapper *,
.agah-otp-wrapper *::before,
.agah-otp-wrapper *::after {
    box-sizing: border-box !important;
}

/* Body text uses the body face across the whole subtree so the active theme
   cannot override individual elements (labels, inputs, buttons, copyright)
   with its own font. A rule matching each descendant directly beats the
   theme's element rules, which inherited values cannot. Headings override
   this below. */
.login-main-wrapper,
.login-main-wrapper *,
.agah-otp-wrapper,
.agah-otp-wrapper * {
    font-family: var(--font-body) !important;
}

/* Headings take the display face. The two-class selectors outrank the
   single-class `* ` rules above, so only headings change. */
.login-main-wrapper .agah-otp-title,
.agah-otp-wrapper .agah-otp-title {
    font-family: var(--font-display) !important;
}


/* =========================================================================
   PAGE SHELL
   ========================================================================= */

.login-main-wrapper {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--space-6) var(--space-4) var(--space-5) !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--surface-page) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-body) !important;
    line-height: var(--leading-body) !important;
}

/* TOP BRAND */
.login-main-wrapper > div:first-child {
    padding-top: var(--space-3) !important;
    position: relative !important;
    z-index: 2 !important;
}

.login-main-wrapper > div:first-child a {
    text-decoration: none !important;
    color: var(--brand-primary) !important;
}

.login-main-wrapper > div:first-child a > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-main-wrapper > div:first-child img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
}

.login-main-wrapper > div:first-child span {
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-h4) !important;
    font-weight: var(--weight-bold) !important;
    line-height: 1 !important;
}

/* WRAPPER */
.agah-otp-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 2 !important;
    padding: var(--space-8) 0 !important;
}


/* =========================================================================
   CARD
   ========================================================================= */

.agah-otp-container {
    width: 100% !important;
    max-width: 440px !important;
    padding: var(--space-8) !important;
    position: relative !important;
    background: var(--surface-card) !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    /* Elevation, not a border, is what lifts the card off the cream page —
       the design carries no outline on its surfaces. */
    box-shadow: var(--shadow-elevated) !important;
}

/* STEP
   app.js drives step visibility with inline `style.display`, so these rules
   deliberately never touch `display`. */
.agah-otp-form-step {
    position: relative !important;
    z-index: 1 !important;
    animation: agahFadeUp var(--duration-base) var(--ease-standard) both !important;
}


/* =========================================================================
   HEADER
   ========================================================================= */

.agah-otp-header {
    text-align: start !important;
    margin: 0 0 var(--space-5) !important;
}

.agah-otp-title {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-size: var(--text-h3) !important;
    font-weight: var(--weight-bold) !important;
    line-height: var(--leading-h3) !important;
    letter-spacing: normal !important;
}

.agah-otp-subtitle {
    margin: var(--space-1) 0 0 !important;
    max-width: none !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-caption) !important;
    line-height: var(--leading-caption) !important;
    font-weight: var(--weight-regular) !important;
}

/* On the OTP step the design runs the "edit" affordance inline at the end
   of the sentence — "…پیامک شد. ویرایش" — rather than parking it on its own
   row, so the subtitle and the button both go inline there. */
.agah-otp-wrapper [data-step="otp"] .agah-otp-subtitle,
.agah-otp-wrapper [data-step="otp"] .agah-otp-identifier-display,
#agah-otp-step .agah-otp-subtitle,
#agah-otp-step .agah-otp-identifier-display {
    display: inline !important;
}

.agah-otp-identifier-display {
    margin: 0 0 0 var(--space-1) !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--text-link) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    line-height: inherit !important;
    cursor: pointer !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-identifier-display:hover,
.agah-otp-identifier-display:focus-visible {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}


/* =========================================================================
   FIELDS
   ========================================================================= */

.agah-otp-form {
    width: 100% !important;
}

.agah-otp-field {
    margin: 0 0 var(--space-5) !important;
}

.agah-otp-label {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-caption) !important;
}

/* Helper / hint line under a control. */
.agah-otp-helper {
    display: block !important;
    margin: 6px 0 0 !important;
    color: var(--text-muted) !important;
    font-size: var(--text-micro) !important;
    line-height: var(--leading-micro) !important;
}

/* Label kept in the accessibility tree but out of the visual design, for
   controls the design titles from the step heading instead. */
.agah-otp-label-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* INPUTS */
.agah-otp-input {
    width: 100% !important;
    min-height: 48px !important;
    padding: var(--space-3) 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--border-subtle) !important;
    background: var(--surface-card) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    /* Keep at >=16px: iOS Safari auto-zooms a focused input below that. */
    font-size: 16px !important;
    font-weight: var(--weight-regular) !important;
    line-height: 1.5 !important;
    outline: none !important;
    box-shadow: none !important;
    caret-color: var(--brand-primary) !important;
    transition:
            border-color var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

.agah-otp-input:focus {
    border-color: var(--brand-primary) !important;
    background: var(--surface-card) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-tint) !important;
    /* No transform on focus: the scale/translate reads as a "zoom" on touch. */
    transform: none !important;
}

.agah-otp-input[aria-invalid="true"],
.agah-otp-input.has-error {
    border-color: var(--state-error) !important;
}

/* Password reveal toggle sits inside the field's relative wrapper; the
   inline positioning lives in the template, only the skin is here. */
.agah-password-toggle {
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-password-toggle:hover,
.agah-password-toggle:focus-visible {
    color: var(--brand-primary) !important;
}

/* Inline text link (e.g. "ورود با کد یکبار مصرف"). */
.agah-otp-link {
    color: var(--text-link) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    text-decoration: none !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-link:hover,
.agah-otp-link:focus-visible {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}


/* =========================================================================
   BUTTONS
   ========================================================================= */

.agah-otp-button {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 0 !important;
    padding: var(--space-3) 22px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    cursor: pointer !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-body) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    color: var(--text-on-brand) !important;
    background: var(--brand-primary) !important;
    box-shadow: none !important;
    transition:
            background var(--duration-fast) var(--ease-standard),
            border-color var(--duration-fast) var(--ease-standard),
            opacity var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-button:hover:not(:disabled) {
    background: var(--brand-primary-hover) !important;
}

.agah-otp-button:active:not(:disabled) {
    background: var(--brand-primary-active) !important;
}

.agah-otp-button:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.agah-otp-button-text {
    position: relative !important;
    z-index: 2 !important;
}

/* setBusy() toggles these two with inline `display`, which beats any
   display we could set here — so the spinner is centred by positioning it
   against the loader box rather than by making the loader a flex container. */
.agah-otp-button-loader {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
}

/* Centred with inset+margin rather than a translate, because `transform`
   here would carry !important and !important beats an animation in the
   cascade — which would freeze agahRotate below. */
.agah-otp-button-loader > .agah-otp-spinner {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
}

.agah-otp-spinner {
    width: 20px !important;
    height: 20px !important;
    animation: agahRotate 1s linear infinite !important;
}

.agah-otp-spinner .path {
    stroke: var(--text-on-brand) !important;
    stroke-linecap: round !important;
    animation: agahDash 1.4s ease-in-out infinite !important;
}


/* =========================================================================
   OTP DIGITS
   ========================================================================= */

.agah-otp-inputs {
    direction: ltr !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    margin: 0 !important;
    width: 100% !important;
}

/* The design draws fixed 46px boxes. They flex-shrink here so that 6+ boxes
   still fit inside the card on a narrow phone instead of overflowing it —
   46px is the ceiling, not a fixed width. */
.agah-otp-digit {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 46px !important;
    width: auto !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--border-subtle) !important;
    background: var(--surface-card) !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-h4) !important;
    font-weight: var(--weight-semibold) !important;
    outline: none !important;
    box-shadow: none !important;
    caret-color: var(--brand-primary) !important;
    transition:
            border-color var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard),
            background var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-digit:focus {
    /* No scale/translate: it reads as a "zoom" when tapping a digit on mobile. */
    transform: none !important;
    border-color: var(--brand-primary) !important;
    background: var(--surface-card) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-tint) !important;
}

.agah-otp-digit.filled {
    border-color: var(--brand-primary) !important;
    background: var(--surface-card) !important;
    color: var(--text-primary) !important;
}

.agah-otp-digit.error {
    border-color: var(--state-error) !important;
    animation: agahShake .28s var(--ease-standard) !important;
}

/* While a code is being checked the row reads as inert: sunken fill, muted
   digits, hairline border. */
.agah-otp-inputs.is-checking .agah-otp-digit,
.agah-otp-digit:disabled {
    background: var(--surface-sunken) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}


/* =========================================================================
   SUCCESS / HANDOFF
   ========================================================================= */

/* NB: `display` deliberately carries no !important — the step is hidden with
   an inline `display:none` until app.js reveals it, and an !important display
   here would make it permanently visible. showSuccessStep() sets 'flex'. */
.agah-otp-success {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    padding: var(--space-2) 0 !important;
}

/* Centring is stated on every descendant rather than left to inheritance:
   the surrounding theme styles `h2`/`p` directly, and an element rule beats
   an inherited value no matter how specific the ancestor was. This is the
   same reason the rest of this file is written defensively. */
.agah-otp-success,
.agah-otp-success .agah-otp-header,
.agah-otp-success .agah-otp-title,
.agah-otp-success .agah-otp-subtitle,
.agah-otp-success .agah-otp-success-tagline,
.agah-otp-success .agah-otp-success-status {
    text-align: center !important;
}

/* Full width so "centred" means centred in the card, not merely centred
   within a flex item that shrank to its own longest line. */
.agah-otp-success .agah-otp-header,
.agah-otp-success .agah-otp-success-tagline,
.agah-otp-success .agah-otp-success-status {
    width: 100% !important;
}

.agah-otp-success-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 auto !important;
    border-radius: var(--radius-pill) !important;
    background: var(--state-success) !important;
    color: #fff !important;
    animation: agahPopIn var(--duration-base) var(--ease-standard) both !important;
}

/* The shared header rules start-align their text; this step is centred. */
.agah-otp-success .agah-otp-header {
    margin: 0 !important;
    padding: 0 !important;
}

.agah-otp-success-tagline {
    margin: 0 !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-micro) !important;
    line-height: var(--leading-micro) !important;
    color: var(--text-muted) !important;
}

.agah-otp-success-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: var(--text-micro) !important;
    line-height: var(--leading-micro) !important;
    color: var(--text-muted) !important;
}

.agah-otp-success-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
    border: 2px solid var(--text-muted) !important;
    border-top-color: transparent !important;
    border-radius: var(--radius-pill) !important;
    animation: agahRotate .7s linear infinite !important;
}


/* =========================================================================
   RESEND
   ========================================================================= */

.agah-otp-resend {
    margin-top: var(--space-4) !important;
    text-align: center !important;
}

/* A quiet line of text, not a control with a box around it — that is how the
   design presents the countdown. It only reads as a link once it is live. */
.agah-otp-resend-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: var(--space-1) var(--space-2) !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: none !important;
    color: var(--text-link) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-micro) !important;
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-micro) !important;
    cursor: pointer !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-resend-btn:hover:not(:disabled),
.agah-otp-resend-btn:focus-visible:not(:disabled) {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}

.agah-otp-resend-btn:disabled {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    cursor: default !important;
    text-decoration: none !important;
}

.agah-otp-countdown {
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    font-variant-numeric: tabular-nums !important;
}


/* =========================================================================
   PROFILE STEP
   ========================================================================= */

#agah-profile-step .agah-otp-field,
.agah-otp-wrapper [data-step="profile"] .agah-otp-field {
    margin-bottom: var(--space-5) !important;
}

#agah-profile-step .agah-otp-button,
.agah-otp-wrapper [data-step="profile"] .agah-otp-button {
    margin-top: 0 !important;
}

/* Skip control: present, but visibly secondary to the primary action. */
.agah-otp-skip-btn {
    display: block !important;
    width: 100% !important;
    margin-top: var(--space-3) !important;
    padding: var(--space-2) !important;
    background: none !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-regular) !important;
    cursor: pointer !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-skip-btn:hover,
.agah-otp-skip-btn:focus-visible {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}


/* =========================================================================
   FOOTER
   ========================================================================= */

.login-copyright {
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-flow: row !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: var(--space-5) !important;
    padding: var(--space-5) var(--space-6) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--weight-regular) !important;
    font-size: var(--text-caption) !important;
}

.login-copyright a {
    color: var(--text-link) !important;
    text-decoration: none !important;
}

.login-copyright a:hover {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}

.login-copyright .copy-right,
.login-copyright .text-muted {
    color: var(--text-muted) !important;
}


/* =========================================================================
   INLINE MESSAGES
   ========================================================================= */

.agah-otp-error,
.agah-otp-field-error {
    color: var(--state-error) !important;
    font-size: var(--text-micro) !important;
    line-height: var(--leading-micro) !important;
    margin-top: 6px !important;
}

/* The controls carry their own focus treatment (border + tint ring), so the
   UA outline would double up on them. Everything else keeps a visible ring. */
.agah-otp-wrapper .agah-otp-input:focus-visible,
.agah-otp-wrapper .agah-otp-digit:focus-visible {
    outline: none !important;
}

.agah-otp-wrapper *:focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}


/* =========================================================================
   ANIMATIONS
   ========================================================================= */

@keyframes agahFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes agahRotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes agahPopIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes agahDash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes agahShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 640px) {
    .login-main-wrapper {
        padding: var(--space-5) var(--space-3) var(--space-3) !important;
    }

    .login-main-wrapper > div:first-child img {
        width: 40px !important;
        height: 40px !important;
    }

    .agah-otp-wrapper {
        padding: var(--space-6) 0 !important;
    }

    .agah-otp-container {
        max-width: 100% !important;
        padding: var(--space-6) var(--space-5) !important;
    }

    .agah-otp-title {
        font-size: 1.375rem !important;
    }

    .agah-otp-input {
        /* Stay at 16px so iOS does not zoom on focus. */
        font-size: 16px !important;
    }

    .agah-otp-digit {
        max-width: 44px !important;
        height: 52px !important;
    }

    .login-copyright {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-1) !important;
        padding: var(--space-4) var(--space-3) !important;
    }
}

@media (max-width: 380px) {
    .agah-otp-inputs {
        gap: 6px !important;
    }

    .agah-otp-digit {
        max-width: 40px !important;
        height: 48px !important;
        font-size: var(--text-body) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-main-wrapper *,
    .agah-otp-wrapper *,
    .agah-otp-modal * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================================
   FLOW V2 FIELD BEHAVIOUR
   The pre-v2 template targets elements by ID (#agah-mobile-input, …). The v2
   part gives every instance its own IDs so the auth page and the cart modal
   can coexist in one document, so the same rules are restated against the
   data-* hooks. The ID rules further down stay put: they are what the legacy
   template still needs while agah_otp_flow_v2 is off.
   ========================================================================= */

/* `dir=ltr` keeps a phone number or email in correct reading order; the right
   alignment keeps the field visually attached to its RTL label and to the rest
   of the card. Text still flows LTR inside the box — it is the block that sits
   flush to the start edge, not the characters that reverse. */
.agah-otp-wrapper [data-el="identifier-input"] {
    direction: ltr !important;
    text-align: right !important;
    letter-spacing: .01em !important;
}

.agah-otp-wrapper [data-el="password-input"] {
    direction: ltr !important;
    text-align: right !important;
    /* Room for the reveal toggle, which is pinned to the left of the field. */
    padding-left: 44px !important;
}

.agah-otp-wrapper [data-el="username-input"] {
    text-align: right !important;
    direction: rtl !important;
}

/* The new-password field on the profile step gets the same treatment as the
   login one, so a Latin password reads correctly in both places. */
.agah-otp-wrapper [data-el="profile-password-input"] {
    direction: ltr !important;
    text-align: right !important;
}

/* Keep the formatted phone number rendering left-to-right inside the RTL
   card, so its space-separated groups (0910 111 0126) don't visually
   reverse. */
.agah-otp-wrapper [data-el="display-identifier"],
.login-main-wrapper #agah-display-identifier {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}


/* =========================================================================
   LEGACY TEMPLATE (agah_otp_flow_v2 = 0)
   Restyled in the same language so the rollback path does not fall back to
   an unstyled or mismatched form.
   ========================================================================= */

#agah-mobile-input,
#agah-email-input {
    direction: ltr !important;
    text-align: right !important;
}

#agah-username-input,
#agah-displayname-input {
    text-align: right !important;
    direction: rtl !important;
}

.agah-otp-method-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-1) !important;
    margin-bottom: var(--space-5) !important;
    padding: var(--space-1) !important;
    background: var(--surface-sunken) !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

.agah-otp-method-option {
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.agah-otp-method-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.agah-otp-method-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px var(--space-3) !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    transition:
            background var(--duration-fast) var(--ease-standard),
            color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-method-label svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.agah-otp-method-option:hover .agah-otp-method-label {
    color: var(--text-primary) !important;
}

.agah-otp-method-option input[type="radio"]:checked + .agah-otp-method-label {
    background: var(--surface-card) !important;
    color: var(--brand-primary) !important;
    font-weight: var(--weight-semibold) !important;
    box-shadow: var(--shadow-card) !important;
}

.agah-otp-change-mobile {
    margin-top: var(--space-3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-link) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    cursor: pointer !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
}

.agah-otp-change-mobile:hover {
    color: var(--text-link-hover) !important;
    text-decoration: underline !important;
}


/* =========================================================================
   CART MODAL
   ========================================================================= */

/* Shares the mini-cart summary panel's shape — the same 14px radius, the same
   warm-ink popover shadow, the same 12px gutters once the viewport takes over
   — so the two read as one surface family. The width is the design's own
   420px rather than the panel's 340px: a dropdown that lists what you already
   chose can be narrow, but this holds a labelled field, a helper line and a
   six-box code row, and 340px squeezed all three. */
.agah-otp-modal {
    width: min(420px, calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-popover);
    overflow: visible;
}

.agah-otp-modal::backdrop {
    /* Warm, not neutral grey — a cool scrim over a warm page reads as dirty. */
    background: var(--scrim);
}

.agah-otp-modal-inner {
    position: relative;
    max-height: calc(100vh - 48px);
    /* overflow-y:auto alone computes overflow-x to `auto` too, and this box is
       the honeypot's containing block — the honeypot parks itself at
       left:-9999px, which in an RTL scroller counts as inline-end overflow and
       drew a ~10000px horizontal scrollbar across the dialog. Clipping the
       inline axis keeps the honeypot off-screen (it must stay laid out, not
       display:none, or bots skip it) with no scrollbar. */
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-8);
    border-radius: inherit;
}

/* Tightened at phone widths, where the full padding eats into the room the
   six-box code row needs. This lives here rather than in the RESPONSIVE
   section above because the base rule is declared later in the file and would
   otherwise win the tie on equal specificity. */
@media (max-width: 640px) {
    .agah-otp-modal-inner {
        padding: var(--space-6) var(--space-5);
    }
}

.agah-otp-modal-close {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    cursor: pointer;
    transition:
            background var(--duration-fast) var(--ease-standard),
            color var(--duration-fast) var(--ease-standard);
}

.agah-otp-modal-close:hover,
.agah-otp-modal-close:focus-visible {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

/* Keep the heading clear of the close button. */
.agah-otp-modal .agah-otp-header {
    padding-inline-end: var(--space-8) !important;
}

/* ...except on the success step, whose heading sits below the badge and is
   nowhere near the close button. There the clearance is pure asymmetry: it
   shrinks the header's content box by 32px and so lands its centred text
   16px right of the card's true centre. */
.agah-otp-modal .agah-otp-success .agah-otp-header {
    padding-inline-end: 0 !important;
}

/* The dialog is already the card, so the embedded form must not paint a
   second surface on top of it. Both the wrapper and the container have to
   give theirs up — .agah-otp-container is the one that actually paints the
   background, radius and elevation, so resetting only the wrapper is not
   enough. */
.agah-otp-modal .agah-otp-wrapper,
.agah-otp-modal .agah-otp-container {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Body scroll lock. `top` is set inline to the saved scroll offset, which is
   restored on close. */
body.agah-otp-modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Toasts are deliberately NOT parented to the dialog — they belong to the
   screen, not to the box. app.js lifts the toast container into the top layer
   with the popover API instead, which is the only way a normal-layer fixed
   element can paint above an open <dialog>. */