/* ============================================================================
   FORKPOS auth shell — login, signup, checkout, password and verification.

   A full-bleed brand atmosphere (the logo's aubergine purple and amber light)
   carries the page; everything a customer types sits on plain white so it stays
   easy to read and fill. Full width, arranged vertically: header, content,
   footer. Seasonal themes (css/custom/account/themes/*.css) only re-point the
   tokens and the decorative geometry — the structure never changes.

   Typography is Poppins, the family the Console already loads.
   ========================================================================= */

/* The shell keeps its own type scale: the app shrinks the root font size on narrow screens,
   which would quietly shrink every size below. */
html:has(.auth) {
    font-size: 16px;
}

/* The shared stylesheet lays body out as a flex container; the auth shell needs the page to scroll
   normally instead, so it grows with its content and only the decoration is clipped. */
body:has(.auth) {
    display: block;
    height: auto;
    min-height: 100%;
    overflow-y: visible;
}

/* Tokens live at the root so dialogs that must sit outside the shell's stacking
   context (the OTP dialog is moved to the body) still resolve them. */
:root {
    /* Permanent identity */
    --deep: #150620;
    --mid: #3d0f55;
    --brand: #6c2b84;
    --brand-lift: #8b3da6;
    --glow: rgb(139 61 166 / 0.55);
    --amber: #f9c449;
    --amber-soft: #ffe0a0;
    --paper: #ffffff;
    --ink: #1e1426;
    --ink-soft: #574a62;
    --muted: #7c6f88;
    --line: #e7dfec;
    --line-strong: #cdbfd6;
    --on-dark: #ffffff;
    --on-dark-soft: rgb(255 255 255 / 0.74);
    --glass: rgb(255 255 255 / 0.10);
    --glass-line: rgb(255 255 255 / 0.20);
    --success: #1f7a52;
    --danger: #c0392b;
    --radius-lg: 18px;
    --radius: 16px;
    --radius-sm: 11px;
}

.auth [hidden] {
    display: none !important;
}

/* The shell sizes itself rather than relying on the host stylesheet's reset. */
.auth,
.auth *,
.auth *::before,
.auth *::after {
    box-sizing: border-box;
}

.auth {
    position: relative;
    /* Contains the decorative layer only; dialogs are moved out of this subtree. */
    isolation: isolate;
    width: 100%;
    flex: 1 1 auto;
    min-height: 100vh;
    /* Decoration never widens the page; vertical scrolling is untouched. */
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    /* The lit gradient lives on the fixed layer; this is the ground beneath it. */
    background: var(--deep);
    color: var(--on-dark);
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* ---- Atmosphere -----------------------------------------------------------
   One fixed layer behind everything: it covers the viewport, stays put while
   the page scrolls, and never takes pointer events, so dropdowns, dialogs and
   scrolling behave exactly as they would without it. */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% -20%, var(--mid) 0%, var(--deep) 62%, #0c0413 100%);
}

/* Soft lighting spread across the whole background rather than pooled in a corner. */
.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
}

.auth-orb-a {
    width: 75vmax;
    height: 75vmax;
    inset-block-start: -28vmax;
    inset-inline-start: -22vmax;
    background: radial-gradient(circle at 40% 40%, var(--brand-lift), transparent 66%);
    animation: auth-float-a 11s ease-in-out infinite alternate;
}

.auth-orb-b {
    width: 60vmax;
    height: 60vmax;
    inset-block-start: 8vmax;
    inset-inline-end: -24vmax;
    background: radial-gradient(circle at 50% 50%, rgb(249 196 73 / 0.5), transparent 68%);
    animation: auth-float-b 13s ease-in-out infinite alternate;
}

.auth-orb-c {
    width: 85vmax;
    height: 85vmax;
    inset-block-end: -46vmax;
    inset-inline-start: 6vmax;
    background: radial-gradient(circle at 50% 50%, rgb(108 43 132 / 0.8), transparent 70%);
    animation: auth-float-a 15s ease-in-out infinite alternate-reverse;
}

/* A seamless tile drifting diagonally: full-screen movement with no edges. */
.auth-pattern {
    position: absolute;
    inset: -20%;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.2'%3E%3Cpath d='M60 0 L120 60 L60 120 L0 60 Z'/%3E%3Cpath d='M0 0 L120 120M120 0 L0 120' stroke-opacity='0.05'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='2' fill='%23f9c449' fill-opacity='0.16'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: auth-drift 22s linear infinite;
}

.auth-grain {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes auth-float-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(9%, 11%, 0) scale(1.14); }
}

@keyframes auth-float-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to { transform: translate3d(-11%, 13%, 0) scale(0.9); }
}

/* One tile of travel, so the loop never shows a seam. */
@keyframes auth-drift {
    from { background-position: 0 0; }
    to { background-position: 120px 120px; }
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ---- Header --------------------------------------------------------------- */
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(18px, 5vw, 56px);
}

.auth-logo img {
    height: 34px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.auth-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-lang,
.auth-link {
    font: inherit;
    font-size: 0.9rem;
    color: var(--on-dark-soft);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color 160ms ease, color 160ms ease;
}

.auth-lang:hover,
.auth-link:hover,
.auth-lang:focus-visible,
.auth-link:focus-visible {
    background: var(--glass);
    color: var(--on-dark);
}

.auth-link.is-cta {
    border: 1px solid var(--glass-line);
    color: var(--on-dark);
    font-weight: 500;
}

.auth-lang img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

/* ---- Content column ------------------------------------------------------- */
.auth-main {
    flex: 1;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(18px, 5vw, 56px);
    padding-block: clamp(14px, 3vw, 34px) 44px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
}

.auth-main.is-narrow {
    max-width: 520px;
    justify-content: center;
    padding-block: clamp(20px, 6vw, 60px);
}

/* Staggered entrance, each block arriving from a visible resting position. */
.auth-main > * {
    animation: auth-rise 520ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.auth-main > *:nth-child(2) { animation-delay: 70ms; }
.auth-main > *:nth-child(3) { animation-delay: 140ms; }
.auth-main > *:nth-child(4) { animation-delay: 190ms; }
.auth-main > *:nth-child(5) { animation-delay: 240ms; }
.auth-main > *:nth-child(6) { animation-delay: 290ms; }

@keyframes auth-rise {
    from { transform: translateY(12px); }
    to { transform: none; }
}

/* ---- Hero ----------------------------------------------------------------- */
.auth-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber-soft);
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgb(249 196 73 / 0.32);
    background: rgb(249 196 73 / 0.08);
}

.auth-hero h1 {
    margin: 0;
    font-size: clamp(2.1rem, 6.4vw, 4.1rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-wrap: balance;
    background: linear-gradient(180deg, #fff 30%, #e8d3f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-hero h1 .accent {
    background: linear-gradient(180deg, var(--amber) 10%, #f0a93b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-hero p {
    margin: 0;
    color: var(--on-dark-soft);
    font-size: clamp(0.98rem, 1.6vw, 1.18rem);
    max-width: 54ch;
}

[dir="rtl"] .auth-eyebrow { letter-spacing: 0; }

[dir="rtl"] .auth-hero h1 {
    letter-spacing: 0;
    line-height: 1.25;
}

/* ---- Offer hero -----------------------------------------------------------
   When an offer is running it becomes the page: the occasion heading, then the
   offer itself as the largest thing on screen, then what it means and when it
   ends. The permanent welcome hero takes over when there is no offer. */
.auth-hero-offer {
    position: relative;
    gap: 10px;
    padding-block: clamp(18px, 4vw, 48px) clamp(10px, 2vw, 22px);
}

/* A focused glow, and a soft scrim so the drifting pattern stays quiet behind the words. */
.auth-hero-offer::before {
    content: "";
    position: absolute;
    /* Kept inside the column: horizontal bleed would widen the page. */
    inset: -14% 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 52% at 50% 46%, var(--glow), transparent 72%),
        radial-gradient(72% 82% at 50% 50%, rgb(3 12 7 / 0.72), rgb(3 12 7 / 0.35) 55%, transparent 78%);
    filter: blur(18px);
}

.auth-hero .auth-campaign-heading {
    margin: 0;
    font-size: clamp(24px, 3.6vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.auth-hero h1.auth-offer-title {
    margin: 0;
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.32em;
}

.auth-hero .auth-offer-lead,
.auth-hero .auth-offer-accent {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
}

.auth-hero .auth-offer-lead {
    background: linear-gradient(180deg, #fff 30%, #ecdcf5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-hero .auth-offer-accent {
    background: linear-gradient(180deg, var(--amber) 8%, #f0a93b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-hero p.auth-offer-sub {
    margin: 2px 0 0;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.5;
    color: rgb(255 255 255 / 0.95);
    max-width: 46ch;
}

.auth-hero p.auth-offer-ends {
    margin: 0;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 600;
    color: #f2d489;
    font-variant-numeric: tabular-nums;
}

.auth-hero p.auth-offer-trial {
    margin: 6px 0 0;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.75;
    color: rgb(255 255 255 / 0.92);
    max-width: 54ch;
}

[dir="rtl"] .auth-hero h1.auth-offer-title,
[dir="rtl"] .auth-hero .auth-campaign-heading {
    margin: 0;
    font-size: clamp(24px, 3.6vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}
/* ---- Section heads -------------------------------------------------------- */
.auth-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.auth-section-head h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-dark);
}

.auth-section-head span {
    font-size: 0.9rem;
    color: var(--on-dark-soft);
}

/* ---- Plan cards ----------------------------------------------------------- */
.auth-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

@media (max-width: 1180px) {
    .auth-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .auth-plans { grid-template-columns: minmax(0, 1fr); }
}

.auth-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    text-align: start;
    padding: 20px 18px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 10px 26px -20px rgb(9 3 14 / 0.8);
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 200ms ease, border-color 160ms ease;
}

.auth-plan:hover { transform: translateY(-3px); border-color: var(--line-strong); }

.auth-plan:has(input:focus-visible) {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

.auth-plan:has(input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), 0 14px 30px -20px rgb(9 3 14 / 0.85);
    transform: translateY(-3px);
}

.auth-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The trial stays warm, so it never reads as the quiet option. */
.auth-plan.is-trial { background: linear-gradient(180deg, #fffdf6, #ffffff 46%); }

.auth-plan-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.auth-plan-name {
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.auth-plan-term {
    font-size: 0.86rem;
    color: var(--muted);
}

.auth-plan-tick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    display: grid;
    place-items: center;
    flex: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.auth-plan-tick svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.auth-plan:has(input:checked) .auth-plan-tick {
    background: var(--brand);
    border-color: var(--brand);
    transform: scale(1.06);
}

.auth-plan:has(input:checked) .auth-plan-tick svg {
    opacity: 1;
    transform: none;
}

.auth-plan-price {
    min-height: 44px;
    align-content: center;
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.auth-plan-price b {
    font-size: clamp(1.9rem, 2.8vw, 2.35rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    background: linear-gradient(170deg, var(--brand-lift), var(--brand) 60%, #3d0f55);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-plan.is-trial .auth-plan-price b {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    background: linear-gradient(170deg, #e9a92e, #b06b12);
    -webkit-background-clip: text;
    background-clip: text;
}

.auth-plan-price .was {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.95rem;
}

.auth-plan-price small {
    color: var(--muted);
    font-size: 0.82rem;
}

.auth-plan-flag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgb(108 43 132 / 0.12), rgb(249 196 73 / 0.22));
    color: var(--brand);
}

.auth-plan.is-trial .auth-plan-flag { color: #8a5a06; }

.auth-plan-note {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.auth-plan-features {
    margin-block-start: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.89rem;
    color: var(--ink-soft);
}

.auth-plan-features li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.auth-plan-features svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 4px;
    color: var(--success);
}

.auth-plan details {
    margin-block-start: auto;
    padding-block-start: 4px;
}

.auth-plan details summary {
    font-size: 0.85rem;
    color: var(--brand);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-plan details summary::-webkit-details-marker { display: none; }

.auth-plan details summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 180ms ease;
}

.auth-plan details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }

.auth-plan details ul {
    margin: 9px 0 0;
    padding-inline-start: 18px;
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ---- White panel: every form lives here ----------------------------------- */
.auth-panel {
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(9 3 14 / 0.35), 0 30px 60px -34px rgb(9 3 14 / 0.95);
    padding: clamp(20px, 3.4vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-panel-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-panel-head h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.auth-panel-head p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.auth-consent {
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: rgb(108 43 132 / 0.06);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0;
}

/* ---- Fields --------------------------------------------------------------- */
.auth-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.auth-fields.is-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 820px) {
    .auth-fields { grid-template-columns: minmax(0, 1fr); }
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.auth-field > label {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.auth-input {
    display: flex;
    align-items: center;
    background: #faf8fb;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.auth-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgb(108 43 132 / 0.13);
    background: var(--paper);
}

/* Inputs keep their Metronic classes for validation, but drop its chrome. */
.auth-input .form-control,
.auth-input .form-select,
.auth-input input,
.auth-input select {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    color: var(--ink);
    padding: 12px 14px;
    outline: none;
    height: auto;
}

.auth-input .prefix {
    padding-inline: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    border-inline-end: 1px solid var(--line);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.auth-input .auth-reveal {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 9px 13px;
    font: inherit;
    font-size: 0.8rem;
}

.auth-input .auth-reveal:hover,
.auth-input .auth-reveal:focus-visible { color: var(--brand); }

.auth-hint {
    font-size: 0.79rem;
    color: var(--muted);
}

/* FormValidation marks the .auth-field wrapper; the message renders under it. */
.auth-field.fv-has-error .auth-input,
.auth-field .is-invalid ~ .auth-input {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgb(192 57 43 / 0.1);
}

.auth-field .fv-plugins-message-container {
    font-size: 0.8rem;
    color: var(--danger);
}

.auth-field .fv-plugins-message-container div { color: var(--danger); }

/* Select2 (country picker) inside a field */
.auth-input .select2-container { flex: 1; min-width: 0; }

.auth-input .select2-container--bootstrap5 .select2-selection {
    border: 0;
    background: transparent;
    min-height: 44px;
    padding-inline: 4px;
}

/* ---- Summary and actions -------------------------------------------------- */
.auth-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: linear-gradient(110deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.05));
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(8px);
}

.auth-summary-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.auth-summary-lines strong {
    font-weight: 600;
    font-size: 1.08rem;
}

.auth-summary-lines span {
    font-size: 0.87rem;
    color: var(--on-dark-soft);
}

.auth-summary-total {
    font-variant-numeric: tabular-nums;
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.auth-summary-total b {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.auth-summary-total span {
    font-size: 0.76rem;
    color: var(--on-dark-soft);
}

/* The primary action, overriding Metronic's .btn-primary inside the shell.
   The OTP dialog is moved out of .auth at runtime, so .auth-modal carries the same
   styles: without it the submit button falls back to unstyled text. */
.auth .btn-auth,
.auth .btn.btn-auth,
.auth-modal .btn-auth,
.auth-modal .btn.btn-auth {
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 14px 26px;
    cursor: pointer;
    color: #1b0d24;
    background: linear-gradient(120deg, var(--amber), #ffd978 60%, #f0a93b);
    box-shadow: 0 10px 30px -12px rgb(249 196 73 / 0.75);
    transition: transform 140ms ease, box-shadow 200ms ease, filter 160ms ease;
    white-space: nowrap;
}

.auth .btn-auth:hover,
.auth-modal .btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -14px rgb(249 196 73 / 0.9);
    filter: saturate(1.06);
    color: #1b0d24;
}

.auth .btn-auth:active,
.auth-modal .btn-auth:active { transform: translateY(0); }

.auth .btn-auth:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* On the dialog's white paper a white ring would be invisible. */
.auth-modal .btn-auth:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.auth .btn-auth.is-block,
.auth .btn-auth.w-100,
.auth-modal .btn-auth.w-100 { width: 100%; }

.auth .btn-auth[disabled],
.auth-modal .btn-auth[disabled] { opacity: 0.65; cursor: not-allowed; }

/* Sending: Metronic swaps the label, this holds the button still while it does. */
.auth-modal .btn-auth[data-kt-indicator="on"] {
    transform: none;
    filter: saturate(0.9);
    cursor: progress;
}

/* Secondary action on the dark ground */
.auth .btn-auth-ghost {
    font: inherit;
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 13px 22px;
    border: 1px solid var(--glass-line);
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
}

.auth .btn-auth-ghost:hover { background: var(--glass); color: var(--on-dark); }

.auth-footnote {
    font-size: 0.86rem;
    color: var(--on-dark-soft);
    text-align: center;
    margin: 0;
}

.auth-alt {
    text-align: center;
    font-size: 0.92rem;
    color: var(--on-dark-soft);
    margin: 0;
}

.auth-alt a {
    color: var(--amber-soft);
    font-weight: 500;
    text-decoration: none;
}

.auth-alt a:hover { text-decoration: underline; }

.auth-inline-link {
    align-self: flex-end;
    font-size: 0.84rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

[dir="rtl"] .auth-inline-link { align-self: flex-start; }

/* ---- Footer --------------------------------------------------------------- */
.auth-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px clamp(18px, 5vw, 56px) 24px;
    font-size: 0.8rem;
    color: rgb(255 255 255 / 0.55);
}

/* ---- OTP dialog and account setup, on the same ground ---------------------
   The dialog lives at <body> level (auth.js moves it there so it clears the
   backdrop), so it is styled on .auth-modal alone and inherits nothing from the
   shell but the root tokens. */
.auth-modal,
.auth-modal * { box-sizing: border-box; }

.auth-modal [hidden] { display: none !important; }

.auth-modal .modal-dialog {
    max-width: 500px;
    margin-inline: auto;
    padding-inline: 12px;
}

.auth-modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -30px rgb(9 3 14 / 0.9);
    font-family: Poppins, system-ui, sans-serif;
    color: var(--ink);
}

/* The heading lives in the body; the header carries only the close control. */
.auth-modal .modal-header {
    border: 0;
    padding: 14px 16px 0;
    min-height: 0;
    justify-content: flex-end;
}

.auth-modal .modal-body { padding: 4px 28px 26px; }

.auth-modal .auth-modal-close {
    color: var(--muted);
    background: transparent;
}

.auth-modal .auth-modal-close:hover { color: var(--ink); }

.auth-otp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.auth-otp-icon { line-height: 0; }

.auth-otp-icon img {
    max-height: 92px;
    width: auto;
}

.auth-otp-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Heading, its sub-line and the destination read as one block. */
.auth-otp-title + .auth-otp-sub { margin-top: -10px; }

.auth-otp-sub {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.auth-otp-dest {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
    margin-top: -8px;
}

/* The label sits over the inputs, sharing their width and edge. */
.auth-otp-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.auth-otp-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.auth-otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 340px;
}

.auth-modal .otp-input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 8 / 9;
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #faf8fb;
}

.auth-modal .otp-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgb(108 43 132 / 0.13);
    outline: none;
    background: #fff;
}

.auth-otp-recaptcha { display: flex; justify-content: center; }

/* Only ever seen with a message in it. */
.auth-otp-error {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(192 57 43 / 0.28);
    background: rgb(192 57 43 / 0.08);
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 500;
    text-align: center;
}

.auth-otp-note {
    margin-top: 14px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
}

.auth-otp-resend {
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    margin-inline-start: 4px;
}

.auth-otp-resend:hover { text-decoration: underline; }

@media (max-width: 420px) {
    .auth-modal .modal-body { padding: 4px 16px 20px; }
    .auth-otp { gap: 13px; }
    .auth-otp-icon img { max-height: 70px; }
    .auth-otp-title { font-size: 1.3rem; }
    .auth-otp-inputs { gap: 6px; }
    .auth-modal .otp-input { font-size: 1.15rem; }
}

/* With the on-screen keyboard open the viewport is short, not narrow: let the
   dialog scroll inside itself rather than pushing the inputs off-screen. */
@media (max-height: 640px) {
    .auth-modal .modal-dialog { margin-block: 12px; }
    .auth-modal .modal-content { max-height: calc(100dvh - 24px); }
    .auth-modal .modal-body { overflow-y: auto; }
    .auth-otp-icon { display: none; }
}

/* Account setup overlay */
.auth-setup {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #fff;
    background: radial-gradient(120% 100% at 50% -20%, var(--mid) 0%, var(--deep) 62%, #0c0413 100%);
}

.auth-setup.is-open { display: flex; }

.auth-setup-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 560px;
}

.auth-setup-ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px solid rgb(255 255 255 / 0.18);
    border-top-color: var(--amber);
    animation: auth-spin 1.1s linear infinite;
}

.auth-setup .message {
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 320ms ease, transform 320ms ease;
}

.auth-setup .message.active { opacity: 1; transform: none; }
.auth-setup .message.exiting { opacity: 0; transform: translateY(-10px); }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-orb,
    .auth-pattern,
    .auth-main > *,
    .auth-setup-ring {
        animation: none !important;
    }

    .auth-plan,
    .auth-plan-tick,
    .auth-plan-tick svg,
    .auth .btn-auth,
    .auth-setup .message {
        transition: none;
    }
}

/* ---- Placeholder shown only when the catalog could not be read ------------ */
.auth-hero-loading {
    gap: 16px;
    padding-block: clamp(18px, 4vw, 48px) clamp(10px, 2vw, 22px);
}

.auth-skeleton {
    display: block;
    border-radius: 10px;
    background: linear-gradient(100deg, rgb(255 255 255 / 0.06) 30%, rgb(255 255 255 / 0.14) 50%, rgb(255 255 255 / 0.06) 70%);
    background-size: 220% 100%;
    animation: auth-shimmer 1.6s linear infinite;
}

.auth-skeleton-eyebrow { width: 190px; height: 20px; }
.auth-skeleton-title { width: min(620px, 90%); height: clamp(34px, 6vw, 58px); }
.auth-skeleton-sub { width: min(420px, 80%); height: 22px; }

.auth-plan.is-loading {
    min-height: 260px;
    background: rgb(255 255 255 / 0.06);
    border-color: var(--glass-line);
    box-shadow: none;
    cursor: default;
}

.auth-skeleton-card { width: 100%; height: 100%; min-height: 220px; border-radius: 12px; }

@keyframes auth-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-skeleton { animation: none; }
}
/* ---- Nothing to choose from ----------------------------------------------- */
.auth-hero-unavailable {
    gap: 14px;
    padding-block: clamp(24px, 5vw, 56px);
}

.auth-hero-unavailable h1.auth-offer-title {
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -0.02em;
}

.auth-hero-unavailable .auth-offer-sub {
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--on-dark-soft);
}

.auth-hero-unavailable .btn-auth {
    margin-block-start: 4px;
}