/* ==========================================================================
   Oma stiilid — Tailwindi täiendused
   ========================================================================== */

/* ----- Globaalne padding override ----- */
.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

/* ----- Fookuse esiletõstmine (ligipääsetavus) ----- */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----- Kerimisriba peidetud kogu projektis (kerimine jääb tööle) ----- */
html,
body {
    font-family: Poppins, system-ui, sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html.modal-scroll-locked,
html.modal-scroll-locked body {
    overflow: hidden;
    overscroll-behavior: none;
}

html.modal-scroll-locked body {
    position: fixed;
    inset: 0;
    width: 100%;
    top: var(--modal-scroll-y, 0);
}

html.modal-scroll-locked #modal-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Device safe areas (iPhone Dynamic Island / Android cutouts / gesture bars) */
:root {
    /* Kõik funneli teemad on tumedad → iOS värvib klaviatuuri-abiriba
       (valge triip klaviatuuri kohal) lehe color-scheme'i järgi tumedaks. */
    color-scheme: dark;
    /* iOS värvib staatuseriba ala LEHE tausta järgi. Ilma selle reata
       võttis ta värvi lehe ülemisest elemendist — funneli kollasest
       hoiatusribast, mistõttu kogu staatuseriba muutus kollaseks. */
    background: #0b0a1f;
    /* ----- Teemavärvid (default = Candy originaal; teemad: js/themes.js) -----
       NB: -rgb tripletid peavad vastama sama tooni hex-ile — teemavahetusel
       tuletab variants.js need automaatselt. Vt TEMPLATE.md. */
    --c-bg: #0b0a1f;
    --c-bg-rgb: 11, 10, 31;
    --c-surface: #15132e;
    --c-card: #15132e;
    --c-card-rgb: 21, 19, 46;
    --c-border: #2a2747;
    --c-border-rgb: 42, 39, 71;
    --c-primary: #ff3ca6;
    --c-primary-rgb: 255, 60, 166;
    --c-primary-hover: #ff5cb5;
    --c-accent: #b6ff3c;
    --c-text: #fdfdff;
    --c-muted: #9b99b8;
    --c-promo1: #5b1d8a;
    --c-promo2: #b07cff;
    --c-inactive: #6b6889;
    --c-surface-deep: #080718;
    --c-card-selected-ring: #b6ff3c;
    --c-primary-grad-hover-a: #ff4cae;
    --c-primary-grad-hover-b: #ff6fc0;
    --c-primary-grad-active-a: #e8348f;
    --c-primary-grad-active-b: #f254a5;
    --c-voice-grad-a: #2a1545;
    --c-voice-grad-b: #4a1a6e;
    --c-voice-grad-c: #6b2a8e;
    --c-voice-glow-rgb: 176, 124, 255;

    /* Paywall aktsendid (porditud v4/v46 CSS kasutab neid) — Fable roosa */
    --c-pw-accent: #ff3ca6;
    --c-pw-accent-rgb: 255, 60, 166;
    --c-pw-accent-soft: #ff7cc0;
    --c-pw-accent-soft-rgb: 255, 124, 192;
    --c-pw-cta-grad-a: #ff5cb5;
    --c-pw-cta-grad-b: #e8348f;
    --c-pw-pink-bright: #ff3ca6;
    --c-pw-price: #ff6fc0;
    --c-pw-price-rgb: 255, 111, 192;
    --c-pw-highlight: #ff5cb5;
    --c-pw-link: #ff7cc0;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --progress-height: 0.25rem;
}

#app > header {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    background: var(--c-bg);
}

#progress-bar {
    height: var(--progress-height);
}

#step-footer {
    padding-bottom: calc(1rem + var(--safe-bottom));
}

/* iPhone Dynamic Island / notch: reserveeri turvaala kogu appile, mitte ainult progressile. */
html.has-top-safe-area #app {
    padding-top: var(--safe-top);
    box-sizing: border-box;
}

html.has-top-safe-area.summary-fullscreen #app {
    padding-top: 0;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ----- Sammude üleminek (fade + slide) ----- */
.step-enter {
    opacity: 0;
    transform: translateY(20px);
}
.step-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 300ms ease;
}

/* ----- Vältida valikut nuppudel ----- */
button, .btn {
    user-select: none;
}

/* ----- Pildi laadimise placeholder (shimmer animatsioon) ----- */
.img-placeholder {
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-border) 50%, var(--c-surface) 100%);
    background-size: 200% 200%;
    animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ==========================================================================
   VALIKUKAARDI komponent (kasutame kõigis sammudes)
   ========================================================================== */
.option-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    transition: transform 200ms ease, box-shadow 200ms ease;
    background-color: var(--c-card);
    border: 2px solid transparent;
}
.option-card:hover {
    transform: translateY(-2px);
}
.option-card.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.option-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.option-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.option-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity 200ms ease;
}
.option-card.selected .option-card-check {
    opacity: 1;
}

/* Eye-color kaartidel pole nii pikka kuvasuhet */
.option-card.option-card-eye {
    aspect-ratio: 4 / 3;
}
/* Hair-color ja breast on suuremad ribad */
.option-card.option-card-wide {
    aspect-ratio: 4 / 5;
}

/* Hair style — portrait crop, keskosa (nägu), ilma surumata */
.option-card.option-card-hair-style {
    aspect-ratio: 3 / 4;
}
.option-card-hair-style .option-card-image {
    object-fit: cover;
    object-position: center center;
}

/* Breast — portrait (4:5, sama mis option-card-wide) */
.option-card-breast--portrait {
    aspect-ratio: 4 / 5;
}
.option-card-breast--portrait .option-card-image {
    object-fit: cover;
    object-position: center center;
}

@media (min-width: 640px) {
    /* 4 rinna kaarti keskele; laius & vahed nagu body type (1/5, gap-3) */
    .step-section--breast-size > .grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .step-section--breast-size > .grid > .option-card-breast--portrait {
        --breast-card-w: calc((100% - (4 * 0.75rem)) / 5);
        flex: 0 0 var(--breast-card-w);
        max-width: var(--breast-card-w);
        min-width: 0;
    }
}


/* ==========================================================================
   SLIDER (Age sammus)
   ========================================================================== */
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--c-border);
    border-radius: 3px;
    outline: none;
}
.range-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--c-primary) 0%,
        var(--c-primary) var(--slider-progress, 0%),
        var(--c-border) var(--slider-progress, 0%),
        var(--c-border) 100%);
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--c-border);
}
.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   MODAL
   ========================================================================== */
#modal-overlay.visible {
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: modal-overlay-fade-in 320ms ease-out both;
    padding:
        max(1rem, var(--safe-top))
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, var(--safe-bottom))
        max(1rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

@supports not (align-items: safe center) {
    #modal-overlay.visible {
        align-items: flex-start;
        justify-content: center;
    }
}

/* Paywall checkout: keritav sisu; tsentreering päritakse vaikimisi reeglist */
#modal-overlay.modal-closing {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}
#modal-overlay.modal-closing #modal-content {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    transition: opacity 260ms ease, transform 260ms ease;
}

#modal-overlay.visible #modal-content {
    animation: modal-content-fade-in 380ms ease-out both;
}

@keyframes modal-overlay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modal-content-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   PERSONALITY GRID MODAL (reference: mobile9 / pc9)
   ========================================================================== */
/* Personality modal: piklikum aken (+10px võrreldes vana piiriga), sisemist scrolli pole —
   3×3 grid skaleerub proportsionaalselt (nupud + vahed zoomivad koos). */
#modal-content.personality-modal-wrap {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 730px) !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.personality-modal-stack {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.modal-grid-scroll {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.personality-modal-stack .modal-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.personality-modal-stack > h3,
.personality-modal-stack > p {
    flex-shrink: 0;
}

.modal-grid-inner {
    width: 100%;
    box-sizing: border-box;
    transform: scale(var(--personality-grid-scale, 1));
    transform-origin: top center;
}

.modal-grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    aspect-ratio: 4 / 5;
    padding: 0.625rem 0.375rem 0.5rem;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #595959;
    outline: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.09) 0%,
            rgba(255, 255, 255, 0.025) 30%,
            rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(
            180deg,
            #23232e 0%,
            #1a1a24 100%
        );
    background-origin: border-box;
    background-clip: border-box;
    box-shadow: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
    color: #ffffff;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.modal-grid-card > * {
    position: relative;
    z-index: 1;
}
.modal-grid-card:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.03) 30%,
            rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(
            180deg,
            #272733 0%,
            #1c1c26 100%
        );
}
.modal-grid-card:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
.modal-grid-card.selected {
    border-color: #ffffff;
    box-shadow: none;
}
.modal-grid-card .grid-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--c-bg);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}
.modal-grid-card.selected .grid-check {
    opacity: 1;
    transform: scale(1);
}
.modal-grid-card .grid-emoji {
    font-size: 2.5rem;
    line-height: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.modal-grid-card .grid-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@keyframes modalGridShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.modal-grid-card.shake {
    animation: modalGridShake 0.35s ease;
}

.modal-footer-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--c-border);
    background: linear-gradient(to top, var(--c-card) 70%, rgba(var(--c-card-rgb), 0));
}

.modal-cancel {
    flex: 0 0 auto;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--c-border);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 180ms ease, background 180ms ease;
}
.modal-cancel:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

/* Sama visuaalne keel kui #next-button (gradient, glow, press) */
.modal-save {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #ffffff;
    background: linear-gradient(to right, var(--c-primary), var(--c-primary-hover));
    box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.18);
    transition: box-shadow 200ms ease, filter 200ms ease, transform 120ms ease, opacity 200ms ease;
}
.modal-save:hover:not(:disabled) {
    box-shadow: 0 3px 12px rgba(var(--c-primary-rgb), 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    filter: brightness(1.05);
}
.modal-save:active:not(:disabled) {
    box-shadow: 0 1px 4px rgba(var(--c-primary-rgb), 0.25);
    filter: brightness(0.97);
    transform: translateY(1px);
}
.modal-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
    transform: none;
}

/* ==========================================================================
   SAMMU PEALKIRJARIDA (tagasi-nupp + küsimus)
   ========================================================================== */
.step-title-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin: 0 auto 0.25rem;
    padding: 0 3rem;
}
.step-title-row__title {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: normal;
    text-align: center;
}
.step-back-btn {
    position: absolute;
    left: 0.25rem;
    top: 50%;
    /* SAMA MIS ÄPIS (app.css [data-vibe="party"] .back-btn): Permanent
       Marker ←, aktsentvärv, kollane vari, kergelt viltu. */
    transform: translateY(-50%) rotate(-6deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-family: 'Permanent Marker', cursive;
    font-size: 26px;
    line-height: 1;
    color: var(--c-primary);
    text-shadow: 2px 2px 0 #ffe23c; /* sama kollane mis äpi tagasinupul */
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.step-back-btn:hover,
.step-back-btn:focus-visible,
.step-back-btn:active { opacity: .65; }

/* ==========================================================================
   NEXT NUPP (alumine sticky nupp)
   ========================================================================== */
#next-button {
    margin-bottom: 1.5rem;
}

/* Mobiili landscape — väiksem alumine vahe */
@media (max-width: 900px) and (orientation: landscape) {
    #next-button {
        margin-bottom: 1rem;
    }
}

/* Hover-glow — NEXT + kokkuvõtte Sign up (sama reeglid) */
#next-button,
#cta-signup-button,
#signup-submit {
    box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.18);
    transition: box-shadow 200ms ease, filter 200ms ease, background 200ms ease, transform 120ms ease;
}
#next-button:hover:not(:disabled),
#signup-submit:hover {
    box-shadow: 0 3px 12px rgba(var(--c-primary-rgb), 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    filter: brightness(1.05);
}
#cta-signup-button:hover {
    box-shadow: 0 3px 12px rgba(var(--c-primary-rgb), 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    filter: none;
    background: linear-gradient(to right, var(--c-primary-grad-hover-a), var(--c-primary-grad-hover-b));
}
/* Signup modal: ära kasuta filter hover'il — Safari joonistab social SVG-d ümber (~1px hüpe) */
#signup-submit:hover {
    filter: none;
    background: linear-gradient(to right, var(--c-primary-grad-hover-a), var(--c-primary-grad-hover-b));
}
#next-button:active:not(:disabled),
#signup-submit:active {
    box-shadow: 0 1px 4px rgba(var(--c-primary-rgb), 0.25);
    filter: brightness(0.97);
    transform: translateY(1px);
}
#cta-signup-button:active {
    box-shadow: 0 1px 4px rgba(var(--c-primary-rgb), 0.25);
    filter: none;
    background: linear-gradient(to right, var(--c-primary-grad-active-a), var(--c-primary-grad-active-b));
    transform: translateY(1px);
}

/* ==========================================================================
   RANDOMIZE NUPP (Name sammus) — mobile5 / pc5 referents
   ========================================================================== */
.name-input-wrap {
    position: relative;
}

.name-input {
    height: 3.25rem;
    box-sizing: border-box;
    line-height: 1.25rem;
}

/* Ikoon inputi sees paremal, vertikaalselt keskel */
.randomize-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    transition: color 150ms ease, opacity 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.randomize-btn:hover {
    color: #ffffff;
    opacity: 1;
}
.randomize-btn:active {
    opacity: 0.75;
}
.randomize-btn__icon {
    position: absolute;
    left: calc(50% - 0.6875rem);
    top: calc(50% - 0.6875rem);
    width: 1.375rem;
    height: 1.375rem;
}
.randomize-btn__icon-inner {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
}
.randomize-btn__icon-inner svg {
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
}
@media (min-width: 640px) {
    .randomize-btn__icon {
        left: calc(50% - 0.75rem);
        top: calc(50% - 0.75rem);
        width: 1.5rem;
        height: 1.5rem;
    }
}
/* Klõpsuga 360° spin — välimine kast fikseeritud, pöörleb ainult inner (Safari jump fix) */
.randomize-btn.spinning .randomize-btn__icon-inner {
    animation: randomizeSpin 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes randomizeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   ANIMATSIOONID
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 300ms ease;
}
.animate-slide-up {
    animation: slideUp 400ms ease;
}

/* ==========================================================================
   KOKKUVÕTE (referents: desktop + mobile screenshot)
   ========================================================================== */

/* Mobiil: peida päis (progress jääb desktopil) */
@media (max-width: 1023px) {
    html.summary-fullscreen header {
        display: none !important;
    }
    #step-container.summary-step-main {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    #step-container.summary-step-main > div {
        max-width: none;
    }
}

/* Kokkuvõte: mobiil algab ülevalt; desktop ~ülemine kolmandik */
html.summary-fullscreen #app {
    min-height: 100vh;
    min-height: 100dvh;
}
html.summary-fullscreen #step-container.summary-step-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
html.summary-fullscreen #step-container.summary-step-main > div {
    width: 100%;
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    html.summary-fullscreen #step-container.summary-step-main {
        padding-top: clamp(1.25rem, 14dvh, 5.5rem);
        padding-bottom: clamp(1rem, 8dvh, 3rem);
    }
}

.summary-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .summary-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        /* Paneel ei venita hero kõrgust — tekst hero peal ei hüppa */
        align-items: start;
    }
}

.summary-layout__hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.summary-layout__panel {
    padding: 0.75rem 0.875rem 1rem;
}
@media (min-width: 1024px) {
    .summary-layout__panel {
        padding: 0;
    }
}

/* Hero — fikseeritud 3:4 (ethnicity pildid), täispilt + alumine fade taustavärvi */
.companion-hero {
    --companion-hero-bg: var(--c-bg);
    --companion-hero-blur: 4px;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--companion-hero-bg);
}
@media (min-width: 640px) {
    .companion-hero {
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1024px) {
    .companion-hero {
        border-radius: 16px;
    }

    .summary-layout__hero .companion-hero {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        /* Ei veni paneeli kõrguse järgi */
        height: auto;
        min-height: 0;
    }

    /* Desktop: blur alles; alumine tume fade maha (overlay + pildi mask) */
    .summary-layout__hero .companion-hero__bg::after {
        display: none;
    }
    .summary-layout__hero .companion-hero__img {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: 1;
    }
}

.companion-hero__bg {
    position: absolute;
    inset: 0;
    background-color: var(--companion-hero-bg);
    background-image: radial-gradient(ellipse at center, rgba(var(--c-primary-rgb), 0.14) 0%, rgba(var(--c-bg-rgb), 0.92) 72%);
}
/* Tume pehme blur pildi kohal — tekst loetavam */
.companion-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(var(--c-bg-rgb), 0.28);
    backdrop-filter: blur(var(--companion-hero-blur, 0px));
    -webkit-backdrop-filter: blur(var(--companion-hero-blur, 0px));
    pointer-events: none;
}
.companion-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--c-bg-rgb), 0.18) 0%,
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            transparent 48%,
            rgba(var(--c-bg-rgb), 0.35) 68%,
            rgba(var(--c-bg-rgb), 0.78) 82%,
            var(--companion-hero-bg) 100%
        );
    pointer-events: none;
    z-index: 2;
}
.companion-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0.95;
    z-index: 0;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.72) 78%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.72) 78%,
        transparent 100%
    );
}

.companion-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 2rem 1.25rem 1.75rem;
}
@media (min-width: 1024px) {
    .companion-hero__content {
        padding: 2rem 1.5rem;
    }
}

.companion-hero__content h2 {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.15rem;
    background: linear-gradient(to right, var(--c-primary), var(--c-primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.companion-hero__content .companion-hero__subtitle {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.companion-hero__cta.hidden {
    display: none;
}
.companion-hero[data-phase="ready"] .companion-hero__loading {
    display: none;
}

#cta-signup-button {
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    border: none;
    cursor: pointer;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    background: linear-gradient(to right, var(--c-primary), var(--c-primary-hover));
}
#cta-signup-button div {
    font-size: 16px;
    line-height: 1.35;
}

.companion-hero__cta ul {
    max-width: 14rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Tabid — mobiil: alajoone stiil; desktop: pill */
.summary-tabs {
    display: flex;
    width: 100%;
    gap: 0;
    margin-bottom: 0.75rem;
}

.summary-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.65rem 0.5rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--c-inactive);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.summary-tab__svg {
    flex-shrink: 0;
    color: var(--c-inactive); /* SVG stroke=currentColor (js/steps.js) */
}

.summary-tab.is-active .summary-tab__svg {
    color: var(--c-primary);
}
.summary-tab.is-active {
    color: #ffffff;
}
.summary-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #ffffff;
}

@media (min-width: 1024px) {
    .summary-tabs {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .summary-tab {
        flex: 1;
        min-height: 44px;
        padding: 0.55rem 1rem;
        border-radius: 9999px;
        background: var(--c-surface);
        border: 1px solid transparent;
    }
    .summary-tab.is-active {
        background: transparent;
        border-color: var(--c-primary);
        color: #ffffff;
        box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.25);
    }
    .summary-tab.is-active::after {
        display: none;
    }
    .summary-tab:not(.is-active):hover {
        background: #22222c;
    }
}

.summary-voice-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 150ms ease, background 150ms ease;
}
.summary-voice-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: #1f1f2a;
}

.summary-panel h3 {
    font-size: 1.375rem;
    line-height: 1.2;
}
@media (min-width: 1024px) {
    .summary-panel h3 {
        font-size: 1.5rem;
    }
}

.summary-trait-grid {
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .summary-trait-grid {
        gap: 0.625rem;
    }
}

.summary-trait-card {
    position: relative;
    min-height: 5.25rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-border-rgb), 0.8);
    background-color: var(--c-surface);
}
.summary-trait-card--plain {
    background: linear-gradient(145deg, #1e1e28 0%, #14141c 100%);
}
.summary-trait-card--voice {
    background: linear-gradient(135deg, var(--c-voice-grad-a) 0%, var(--c-voice-grad-b) 50%, var(--c-voice-grad-c) 100%);
    border-color: rgba(var(--c-voice-glow-rgb), 0.45);
}

.personality-card--voice {
    background: linear-gradient(135deg, var(--c-voice-grad-a) 0%, var(--c-voice-grad-b) 50%, var(--c-voice-grad-c) 100%);
    border-color: rgba(var(--c-voice-glow-rgb), 0.45);
}

.summary-trait-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.summary-trait-card__scrim {
    position: relative;
    z-index: 1;
    min-height: 5.25rem;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 12, 0.88) 0%,
        rgba(8, 8, 12, 0.42) 42%,
        rgba(8, 8, 12, 0.08) 100%
    );
}
.summary-trait-card--plain .summary-trait-card__scrim,
.summary-trait-card--character .summary-trait-card__scrim {
    background: transparent;
}

.summary-trait-card--character.summary-trait-card--plain {
    background: var(--c-surface);
}

.summary-trait-card__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b8f98;
    margin-bottom: 0.2rem;
}

.summary-trait-card__value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    min-width: 0;
}
.summary-trait-card__value-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    max-width: 100%;
}
.summary-trait-card__value-text {
    min-width: 0;
}
.summary-trait-card__value--truncate .summary-trait-card__value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.summary-trait-card__icon {
    flex-shrink: 0;
    font-size: 0.9375rem;
    line-height: 1;
}

/* ==========================================================================
   SIGNUP MODAL (referents screenshot)
   ========================================================================== */
.signup-modal-wrap {
    position: relative;
    padding: 0 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 16px !important;
    background: var(--c-surface-deep) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Signup: ära kasuta personality-modali overflow reegleid */
#modal-content.signup-modal-wrap {
    max-height: calc(100vh - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.signup-modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.signup-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem;
}

.signup-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;
    padding-right: 0.5rem;
}

.signup-modal__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 150ms ease;
}
.signup-modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
}
.signup-modal__close-icon {
    display: block;
    flex-shrink: 0;
}

.signup-modal__form {
    padding: 0 1.25rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

/* Sign in — email + parool + Log in */
.signin-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 1.25rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
}
.signin-modal__submit {
    margin-top: 0.25rem;
}

.signup-modal__password-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.signup-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    transition: border-color 150ms ease;
}
.signup-field:focus-within {
    border-color: rgba(var(--c-primary-rgb), 0.55);
}

.signup-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    flex-shrink: 0;
    color: var(--c-inactive);
}

.signup-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px; /* iOS Safari: <16px input zoomib fookuse korral */
    padding: 0.75rem 0.75rem 0.75rem 0;
    outline: none;
}
.signup-field input::placeholder {
    color: var(--c-inactive);
}

.signup-field__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--c-inactive);
    cursor: pointer;
    padding: 0;
    margin-right: 0.25rem;
}
.signup-field__toggle:hover {
    color: #ffffff;
}

.signup-modal__hint {
    margin: 4px 7px;
    height: 11px;
    font-size: 0.75rem;
    color: var(--c-inactive);
}

.signup-modal__error {
    font-size: 0.8125rem;
    color: var(--c-primary);
    text-align: center;
}
.signup-modal__error.hidden {
    display: none;
}

.signup-modal__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right, var(--c-primary), var(--c-primary-hover));
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.signup-modal__submit-icon {
    flex-shrink: 0;
}

.signup-modal__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin: 0;
    color: var(--c-inactive);
    font-size: 0.75rem;
}
.signup-modal__divider::before,
.signup-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

.signup-modal__socials {
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

/* Primary + secondary — seadme-spetsiifiline paigutus (Apple / Android / Windows) */
.signup-modal__socials[data-signup-device="desktop"] [data-signup-wallet="google"],
.signup-modal__socials[data-signup-device="android"] [data-signup-wallet="google"] {
    grid-column: 1 / -1;
    grid-row: 1;
}
.signup-modal__socials[data-signup-device="desktop"] [data-signup-wallet="apple"],
.signup-modal__socials[data-signup-device="android"] [data-signup-wallet="apple"] {
    grid-column: 1;
    grid-row: 2;
}
.signup-modal__socials[data-signup-device="desktop"] [data-signup-wallet="x"],
.signup-modal__socials[data-signup-device="android"] [data-signup-wallet="x"] {
    grid-column: 2;
    grid-row: 2;
}
.signup-modal__socials[data-signup-device="apple"] [data-signup-wallet="apple"] {
    grid-column: 1 / -1;
    grid-row: 1;
}
.signup-modal__socials[data-signup-device="apple"] [data-signup-wallet="google"] {
    grid-column: 1;
    grid-row: 2;
}
.signup-modal__socials[data-signup-device="apple"] [data-signup-wallet="x"] {
    grid-column: 2;
    grid-row: 2;
}

.signup-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 1rem;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-family: Poppins, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
    transition: box-shadow 150ms ease, opacity 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.signup-social:not(.signup-social--apple-hig):not(.signup-social--google-hig):not(.signup-social--x-hig):hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Logo + tekst üks tervik — gap, mitte margin (Apple SVG viewBox jättis varem tühja ruumi) */
.signup-social__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.275rem;
    min-width: 0;
}

.signup-social__img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}
/* Sign up with Google — branding guidelines (tume taust → Light theme) */
.signup-social--google-hig {
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #747775;
    box-shadow: none;
    font-family: Roboto, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
}
.signup-social--google-hig:hover {
    background: #f8f9fa;
    border-color: #747775;
    box-shadow: none;
}

.signup-social__google-hig {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-width: 0;
    line-height: 0;
}
.signup-social__google-hig-logo {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    display: block;
}
.signup-social__google-hig-label {
    line-height: 20px;
    white-space: nowrap;
}

/* Sign up with Apple — HIG katsetus (tume taust → white + border, data-type sign-up) */
.signup-social--apple-hig {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.signup-social--apple-hig:hover {
    background: #f5f5f7;
    border-color: #000000;
    box-shadow: none;
}

.signup-social__apple-hig {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    line-height: 0;
}
.signup-social__apple-hig--primary {
    gap: 0.3125rem;
}
.signup-social__apple-hig-logo {
    width: 1.3125rem;
    height: 1.3125rem;
    flex-shrink: 0;
    display: block;
    color: #000000;
}
.signup-social__apple-hig--primary .signup-social__apple-hig-logo {
    width: 1.375rem;
    height: 1.375rem;
}
.signup-social__apple-hig-label {
    line-height: 1.2;
    white-space: nowrap;
}

.signup-modal__socials[data-signup-device="apple"] [data-signup-wallet="apple"] .signup-social__apple-hig--primary {
    display: inline-flex;
}
.signup-modal__socials[data-signup-device="desktop"] [data-signup-wallet="apple"] .signup-social__apple-hig--compact,
.signup-modal__socials[data-signup-device="android"] [data-signup-wallet="apple"] .signup-social__apple-hig--compact {
    display: inline-flex;
}

.signup-modal__socials[data-signup-device="desktop"] [data-signup-wallet="google"] .signup-social__google-hig--primary,
.signup-modal__socials[data-signup-device="android"] [data-signup-wallet="google"] .signup-social__google-hig--primary {
    display: inline-flex;
}
.signup-modal__socials[data-signup-device="apple"] [data-signup-wallet="google"] .signup-social__google-hig--compact {
    display: inline-flex;
}

/* Continue with X — brand toolkit (tume taust → Light theme, X.com social auth) */
.signup-social--x-hig {
    background: #ffffff;
    color: #0f1419;
    border: 1px solid #cfd9de;
    box-shadow: none;
    line-height: 0;
    letter-spacing: 0;
}
.signup-social--x-hig:hover {
    background: #eff3f4;
    border-color: #cfd9de;
    box-shadow: none;
}

.signup-social--x-hig .signup-social__x-hig-logo {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    display: block;
    color: #0f1419;
}

.signup-modal__terms {
    margin: 0.625rem 0 14px;
    padding: 0 1.25rem;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--c-inactive);
}
.signup-modal__link {
    text-decoration: underline;
    color: var(--c-muted);
}
.signup-modal__link:hover {
    color: #ffffff;
}

/* Terms of Service popup */
.legal-modal-wrap {
    padding: 0 !important;
    border-radius: 16px !important;
    background: var(--c-surface-deep) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.legal-modal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.legal-modal__sticky {
    flex-shrink: 0;
    background: var(--c-surface-deep);
    border-bottom: 1px solid var(--c-border);
}

.legal-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.35rem;
}

.legal-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    padding-right: 2.5rem;
}

.legal-modal__updated {
    margin: 0;
    padding: 0 1.25rem 0.875rem;
    font-size: 0.75rem;
    color: var(--c-inactive);
}

.legal-modal__scroll {
    flex: 1;
    min-height: 0;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.legal-modal__section + .legal-modal__section {
    margin-top: 1rem;
}

.legal-modal__heading {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e5e7eb;
}

.legal-modal__body {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--c-muted);
}

.signup-modal__footer {
    margin-top: 0;
    padding: 1rem 1.25rem 1.125rem;
    border-top: 1px solid var(--c-border);
    background: #0e0e14;
    text-align: center;
    font-size: 0.875rem;
    color: var(--c-muted);
}
.signup-modal__footer p {
    margin: 0;
}
.signup-modal__signin {
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
}
.signup-modal__signin:hover {
    color: var(--c-primary-hover);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   FABLE LAYER — emoji cards, buddy widget, chat teaser, paywall, drunk theme
   ========================================================================== */

/* ----- Emoji option cards ----- */
.option-card--emoji {
    position: relative;
    aspect-ratio: auto;
    min-height: 132px;
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
@media (max-width: 640px) {
    .option-card--emoji {
        height: 152px;
        min-height: 0;
    }
    .option-card__emoji {
        font-size: 36px;
    }
    .option-card__emoji-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.option-card--emoji:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
}
.option-card--emoji.selected {
    border-color: var(--c-card-selected-ring);
    box-shadow: 0 0 0 2px var(--c-card-selected-ring);
}
.option-card__emoji {
    font-size: 44px;
    line-height: 1;
}
.option-card__emoji-label {
    font-weight: 700;
    font-size: 15px;
    color: var(--c-text);
}
.option-card__emoji-desc {
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.35;
}
.option-card--emoji .option-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ----- Buddy widget (live reaction sidekick) ----- */
#buddy-widget {
    position: fixed;
    right: 14px;
    /* Tõuseb klaviatuuri kohale, muidu jääb selle taha (kasutaja soov). */
    bottom: calc(96px + var(--kb, 0px));
    transition: bottom .4s cubic-bezier(.17, .59, .4, 1);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    max-width: min(320px, calc(100vw - 28px));
}
/* Klaviatuur lahti (html[data-kb], vt steps.js teaserKeyboard) → smaili
   HÕLJUB üles paremasse nurka, "Say hi" pealkirja kõrvale — seal on ruumi
   ja all jääb kogu koht vestlusele.
   TOP, EI bottom: kasutaja tähelepanek — smaili jäi klaviatuurist "veidi
   kõrgemale, saatmisnupu peale", mitte täiesti üles. Põhjus: fikseeritud
   elemendi "bottom" käib selle vaateava PÕHJAST, mille suurust brauser
   klaviatuuri animatsiooni ajal ise valib (mõnel iOS-i versioonil jääb see
   TÄISKÕRGUSEKS, isegi kui --tvh juba kahanenud on) — bottom-arvestus läheb
   siis vale (suurema) kõrguse pealt. LEHE ÜLASERV EI LIIGU kunagi, kui
   klaviatuur katab vaid alaosa — "top" on seega ALATI õige, olenemata
   sellest, millist vaateava brauser bottom'i jaoks kasutab. */
html[data-kb="1"] #buddy-widget {
    top: max(12px, env(safe-area-inset-top, 0px));
    bottom: auto;
}
html[data-kb="1"] .buddy-bubble {
    opacity: 0;
    transition: opacity .2s;
}
.buddy-avatar {
    width: 54px;
    height: 54px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-promo2), var(--c-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 18px rgba(var(--c-primary-rgb), .45);
    animation: buddyFloat 4s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter .15s ease;
}
.buddy-avatar:hover { filter: brightness(1.12); }
.buddy-avatar:active { filter: brightness(.92); transform: scale(.9); }
@keyframes buddyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.buddy-avatar--bounce {
    animation: buddyBounce .45s ease;
}
@keyframes buddyBounce {
    0% { transform: scale(1); }
    35% { transform: scale(1.22) rotate(-6deg); }
    70% { transform: scale(.94) rotate(4deg); }
    100% { transform: scale(1); }
}
.buddy-bubble {
    position: relative;
    cursor: pointer; /* terve mull sulgeb (vt js/buddy.js) */
    background: var(--c-card);
    border: 1px solid var(--c-primary);
    color: var(--c-text);
    border-radius: 14px 14px 4px 14px;
    padding: 10px 26px 14px 13px;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    max-width: 100%;
    pointer-events: auto;
}
.buddy-bubble__close {
    position: absolute;
    right: 4px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .15s ease, background .15s ease;
}
.buddy-bubble__close:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, .1);
}
.buddy-bubble--pop {
    animation: buddyPop .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes buddyPop {
    0% { opacity: 0; transform: translateY(8px) scale(.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
    /* NB: bottom PEAB jätma --kb arvesse — fikseeritud 104px matab
       klaviatuuri-tõste just telefonis, kus seda kõige rohkem vaja. */
    #buddy-widget { bottom: calc(104px + var(--kb, 0px)); right: 10px; max-width: calc(100vw - 20px); }
    .buddy-avatar { width: 46px; height: 46px; font-size: 24px; }
    .buddy-bubble { font-size: 12.5px; }
}

/* ----- Chat teaser ----- */
.teaser-chat {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.teaser-chat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-deep);
}
.teaser-chat__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-promo2), var(--c-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: none;
}
.teaser-chat__meta { flex: 1; min-width: 0; }
.teaser-chat__name {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teaser-chat__status {
    font-size: 11px;
    color: var(--c-accent);
    margin-top: 1px;
}
.teaser-chat__counter {
    font-size: 11px;
    color: var(--c-muted);
    white-space: nowrap;
}
/* --tvh = visualViewport.height, --kb = klaviatuuri kõrgus (js/steps.js).
   Klaviatuur lahti → sõnumikast kahaneb, et KOGU kaart (sõnumid + väli)
   mahuks klaviatuuri kohale. Ilma selleta jäi vestlusest paar rida näha. */
.teaser-chat__messages {
    height: min(320px, max(150px, calc(var(--tvh, 100vh) - 320px)));
    /* Kaitseks: kui JS kirjutab --tvh natiivsest kahandusest veidi hiljem
       (kaadri võrra), ei jookse kõrgus hüppega, vaid libiseb sujuvalt. */
    transition: height .2s ease;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overscroll-behavior: contain;
}
.teaser-msg { display: flex; }
.teaser-msg--user { justify-content: flex-end; }
.teaser-msg--bot { justify-content: flex-start; }
.teaser-msg__bubble {
    max-width: 82%;
    padding: 9px 13px;
    font-size: 16px;
    line-height: 1.45;
    border-radius: 15px 15px 4px 15px;
    background: linear-gradient(120deg, var(--c-primary), var(--c-promo2));
    color: #fff;
    word-wrap: break-word;
}
.teaser-msg--bot .teaser-msg__bubble {
    border-radius: 15px 15px 15px 4px;
    background: rgba(255, 255, 255, .08);
    color: var(--c-text);
}
.teaser-msg__bubble--typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 13px 15px;
}
.teaser-msg__bubble--typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: teaserBlink 1s steps(1) infinite;
}
.teaser-msg__bubble--typing span:nth-child(2) { animation-delay: .2s; }
.teaser-msg__bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes teaserBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: .25; }
}
.teaser-chat__lock {
    margin: 0 12px 12px;
    padding: 12px 14px;
    border: 1px dashed var(--c-accent);
    border-radius: 12px;
    background: rgba(182, 255, 60, .07);
}
.teaser-chat__lock-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--c-accent);
}
.teaser-chat__lock-text {
    font-size: 12.5px;
    color: var(--c-muted);
    margin-top: 4px;
    line-height: 1.45;
}
.teaser-chat__inputrow {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-deep);
}
.teaser-chat__input {
    flex: 1;
    min-width: 0;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 16px;
    color: var(--c-text);
    outline: none;
}
.teaser-chat__input:focus { border-color: var(--c-primary); }
.teaser-chat__input:disabled { opacity: .5; }
.teaser-chat__send {
    flex: none;
    background: var(--c-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    transition: filter .15s;
}
.teaser-chat__send:hover:not(:disabled) { filter: brightness(1.1); }
.teaser-chat__send:disabled { opacity: .4; cursor: not-allowed; }

/* ----- Paywall boot (loading ring enne plaanide avanemist) ----- */
.paywall-boot {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.paywall-loading {
    text-align: center;
    padding: 24px 4px;
}
.paywall-loading__title {
    margin-top: 24px;
    font-size: 22px;
    font-weight: 800;
}
.paywall-loading__name { color: var(--c-primary); }
.paywall-loading__status {
    margin-top: 10px;
    font-size: 14px;
    color: var(--c-muted);
    min-height: 20px;
}

/* ----- Paywall v4 Fable lisad ----- */
.paywall-v4__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--c-primary-rgb), .12);
    color: var(--c-primary);
    border: 1px solid rgba(var(--c-primary-rgb), .35);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 12px;
}
.paywall-v4-plan__tagline {
    margin: 2px 0 10px;
    font-size: 12.5px;
    color: var(--c-muted);
}

/* ----- Registreerimismodaal (paywall-lehe konto-samm) ----- */
.fable-register__subtitle {
    margin: -6px 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-muted);
    text-align: center;
}
.fable-register__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.fable-register__input {
    width: 100%;
    background: var(--c-surface-deep);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 16px; /* iOS Safari: <16px input zoomib fookuse korral */
    color: var(--c-text);
    outline: none;
    text-align: center;
}
.fable-register__input:focus { border-color: var(--c-primary); }
.fable-register__error {
    font-size: 12.5px;
    color: #ff6b6b;
    text-align: center;
}
.fable-register__submit {
    width: 100%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    padding: 14px 0;
    cursor: pointer;
    transition: filter .15s;
}
.fable-register__submit:hover { filter: brightness(1.08); }
.fable-register__submit:disabled { opacity: .6; cursor: default; }

/* Klaviatuur lahti (chat-teaser) → kleepuv CTA peidus. Vt js/steps.js
   focusin/focusout: iOS-is hõljuks fixed-jalus muidu vestluse keskel. */
html.keyboard-open #step-footer { display: none !important; }
/* "already have an account?" — tekstinupp, mitte teine CTA */
.fable-register__mode {
    background: none;
    border: none;
    color: var(--c-text-muted, #9a97b8);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 0 0;
}
.fable-register__mode:hover { color: var(--c-text); }

/* ==========================================================================
   DRUNK THEME — GeoCities chaos layer (?theme=drunk)
   Everything scoped under html.theme-drunk. Premium stays untouched.
   ========================================================================== */

html.theme-drunk body,
html.theme-drunk .font-sans {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive !important;
}

html.theme-drunk body {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(176, 124, 255, .18), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(60, 239, 255, .12), transparent 42%);
}

/* Marquee warning bar injected via CSS pseudo-element on the header */
html.theme-drunk #app > header::before {
    content: '⚠ i built this funnel MYSELF. three beers deep. do NOT email me about the bugs i ALREADY KNOW ⚠ best viewed at 3am ⚠ no i will not get a designer ⚠ this is FINE ⚠';
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background: #ffe23c;
    color: #0b0a1f;
    border-bottom: 3px solid #0b0a1f;
    padding: 6px 0;
    font: 700 13px 'Comic Neue', 'Comic Sans MS', cursive;
    animation: drunkMarquee 30s linear infinite;
}
@keyframes drunkMarquee {
    0% { text-indent: 100vw; }
    100% { text-indent: -180vw; }
}

html.theme-drunk .step-title-row__title {
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    color: #b6ff3c;
    text-shadow: 3px 3px 0 #ff3ca6;
    transform: rotate(-1.5deg);
}

html.theme-drunk .option-card--emoji {
    border: 3px solid #0b0a1f;
    outline: 2px solid var(--c-border);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .55);
    border-radius: 12px;
}
html.theme-drunk .option-card--emoji:nth-child(odd) { transform: rotate(-1.6deg); }
html.theme-drunk .option-card--emoji:nth-child(even) { transform: rotate(1.3deg); }
html.theme-drunk .option-card--emoji:hover { transform: rotate(0deg) scale(1.03); }
html.theme-drunk .option-card--emoji.selected {
    box-shadow: 5px 5px 0 #ffe23c, 0 0 0 2px #ffe23c;
}
html.theme-drunk .option-card__emoji-desc {
    font-family: 'Gloria Hallelujah', cursive;
}

html.theme-drunk #next-button {
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    font-size: 19px;
    border: 3px solid #0b0a1f;
    box-shadow: 6px 6px 0 #3cefff;
    border-radius: 12px;
    animation: drunkWobble 2.6s ease-in-out infinite;
}
@keyframes drunkWobble {
    0%, 100% { transform: rotate(-1deg) scale(1); }
    50% { transform: rotate(1deg) scale(1.02); }
}
html.theme-drunk #next-button:disabled { animation: none; }

html.theme-drunk .bg-brand-card,
html.theme-drunk .teaser-chat,
html.theme-drunk .paywall-v4-plan,
html.theme-drunk .personality-card {
    border-width: 3px;
    border-style: solid;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .5);
}
html.theme-drunk .paywall-v4-plan-slide:nth-child(1) .paywall-v4-plan { transform: rotate(.8deg); }
html.theme-drunk .paywall-v4-plan-slide:nth-child(2) .paywall-v4-plan { transform: rotate(-1.4deg); border-color: #b6ff3c; }
html.theme-drunk .paywall-v4-plan-slide:nth-child(3) .paywall-v4-plan { transform: rotate(1.6deg); border-color: #3cefff; }
html.theme-drunk .paywall-v4-plan:hover { transform: rotate(0) translateY(-3px); }

html.theme-drunk .paywall-v4__title {
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    color: #b6ff3c;
    text-shadow: 4px 4px 0 #ff3ca6;
    transform: rotate(-1.5deg);
}
html.theme-drunk .paywall-v4__trust,
html.theme-drunk .paywall-v4-legal__company,
html.theme-drunk .paywall-loading__status {
    font-family: 'Gloria Hallelujah', cursive;
}

/* Under construction stripe above the plans */
html.theme-drunk .paywall-v4-plans-wrap::before {
    content: '🚧 premium stuff below (this is not a lie) 🚧';
    display: block;
    margin: 0 0 14px;
    text-align: center;
    background: repeating-linear-gradient(45deg, #ffe23c 0 14px, #0b0a1f 14px 28px);
    border-radius: 10px;
    padding: 3px;
    font: 400 15px 'Permanent Marker', cursive;
    color: #ffe23c;
    -webkit-text-stroke: 4px transparent;
    text-shadow: 0 0 6px #0b0a1f, 0 0 2px #0b0a1f, 0 0 2px #0b0a1f;
}

html.theme-drunk .buddy-bubble {
    background: #fff8b0;
    color: #0b0a1f;
    border: 2px solid #0b0a1f;
    border-radius: 4px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
    font-family: 'Gloria Hallelujah', cursive;
    transform: rotate(-1.2deg);
}
html.theme-drunk .buddy-bubble__close {
    color: rgba(11, 10, 31, .55);
}
html.theme-drunk .buddy-bubble__close:hover {
    color: #0b0a1f;
    background: rgba(11, 10, 31, .1);
}
html.theme-drunk .buddy-avatar {
    border: 3px solid #0b0a1f;
    box-shadow: 4px 4px 0 rgba(255, 60, 166, .6);
}

html.theme-drunk .teaser-chat__name {
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    color: #b6ff3c;
}

html.theme-drunk .range-slider {
    filter: hue-rotate(15deg) saturate(1.3);
}

/* ==========================================================================
   PAYWALL — porditud Candy Publish v1-st (paywall.html jaoks)
   Aktsendivärvid: --c-pw-* tokenid (Fable väärtused :root-is)
   ========================================================================== */
/* ==========================================================================
   PAYWALL (eraldi leht)
   ========================================================================== */
.paywall-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 1rem;
    font-family: Poppins, sans-serif;
}

.paywall-page__header {
    position: relative;
    z-index: 20;
    padding: 0.75rem 1rem;
    background: var(--c-bg);
}

/* Checkout compliance (T&Cs, trust, payment methods) */
.paywall-checkout-compliance {
    margin: 0 0 1rem;
    width: 100%;
}
.paywall-checkout-terms {
    margin-bottom: 0.75rem;
}
.paywall-checkout-terms__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.6875rem;
    color: #d1d5db;
}
.paywall-checkout-terms__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.paywall-checkout-terms__box {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    border-radius: 4px;
    border: 2px solid #4b5563;
    background: var(--c-surface-deep);
    transition: border-color 150ms ease, background 150ms ease;
}
.paywall-checkout-terms__input:checked + .paywall-checkout-terms__box {
    border-color: var(--c-primary);
    background: var(--c-primary);
    box-shadow: inset 0 0 0 2px var(--c-surface-deep);
}
.paywall-checkout-terms__note {
    margin: 0.5rem 0 0;
    font-size: 0.5625rem;
    line-height: 1.4;
    color: var(--c-inactive);
}

/* ==========================================================================
   PAYWALL v4 — Candy.ai subscriptions stiilis
   ========================================================================== */

.paywall-page--v4,
.paywall-page--v45 {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    background: var(--c-bg);
    padding-bottom: 2.5rem;
}

.paywall-page--v4 .paywall-page__footer,
.paywall-page--v45 .paywall-page__footer {
    opacity: 0.35;
    margin-top: 0.5rem;
}

.paywall-v4__glow-mobile,
.paywall-v4__glow-desktop {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    z-index: 0;
}

.paywall-v4__glow-mobile {
    display: block;
    background: radial-gradient(
        70% 45% at 50% -6%,
        #ec4a7d99 0%,
        #b1375e73 25%,
        #76253f4d 50%,
        #3b121f26 75%,
        #0000 100%
    );
}

.paywall-v4__glow-desktop {
    display: none;
    background: radial-gradient(
        40% 45% at 50% -10%,
        #ec4a7d85 0%,
        #b1375e63 25%,
        #76253f42 50%,
        #3b121f21 75%,
        #0000 100%
    );
}

@media (min-width: 780px) {
    .paywall-v4__glow-mobile {
        display: none;
    }

    .paywall-v4__glow-desktop {
        display: block;
    }
}

.paywall-v4 {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem 1.5rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 780px) {
    .paywall-v4 {
        padding: 3rem 0 1.5rem;
    }
}

.paywall-v4__glow {
    display: none;
}

.paywall-v4__main {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
}

.paywall-v4__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 34px;
    letter-spacing: 0;
    color: #fff;
}

@media (min-width: 780px) {
    .paywall-v4__title {
        font-size: 32px;
    }
}

.paywall-v4__trust {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #8b8b8b;
    text-align: center;
    line-height: 1.45;
}

.paywall-v4__header {
    margin-bottom: 32px;
    text-align: center;
}

.paywall-v4-plans-wrap {
    margin-bottom: 0;
}

@media (min-width: 780px) {
    .paywall-v4-plans-wrap {
        margin-bottom: 40px;
    }
}

.paywall-v4-plans {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    align-items: stretch;
}

.paywall-v4-plan {
    position: relative;
    width: 220px;
    min-height: 250px;
    flex-shrink: 0;
    padding: 15px 18px 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    border: none;
    border-left: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border);
    background: radial-gradient(at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%);
    transition: background 0.3s ease;
}

@media (hover: hover) {
    .paywall-v4-plan:not(.paywall-v4-plan--featured):hover {
        background: radial-gradient(at -13% -47%, rgba(var(--c-border-rgb), 0.7) 0%, rgba(var(--c-card-rgb), 0.7) 100%);
    }

    .paywall-v4-plan--featured:hover .paywall-v4-plan__bg {
        opacity: 1;
    }

    .paywall-v4-plan--featured:hover .paywall-v4-plan__glow-default {
        opacity: 0;
    }

    .paywall-v4-plan--featured:hover .paywall-v4-plan__glow-hover {
        opacity: 1;
    }

    .paywall-v4-plan--featured:hover .paywall-v4-plan__cta {
        opacity: 1;
    }

    .paywall-v4-plan:not(.paywall-v4-plan--featured):hover .paywall-v4-plan__cta--secondary {
        background: #35354a;
    }
}

.paywall-v4-plan--featured {
    background: transparent;
    box-shadow: none;
}

.paywall-v4-plan__bg,
.paywall-v4-plan__glow-default,
.paywall-v4-plan__glow-hover {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.paywall-v4-plan__bg {
    opacity: 0.5;
    background: radial-gradient(at -13% -47%, var(--c-border) 0%, var(--c-card) 100%);
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.paywall-v4-plan__glow-default {
    transform: scaleY(-1);
    background: radial-gradient(269.17% 50% at 50% -1.69%, #ec4a7dab 0%, #0000 100%);
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.paywall-v4-plan__glow-hover {
    transform: scaleY(-1);
    opacity: 0;
    background: radial-gradient(
        269.17% 125% at 50% -1.69%,
        #ec4a7dab 0%,
        #b1375e80 25%,
        #76253f57 50%,
        #3b121f2b 75%,
        #0000 100%
    );
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.paywall-v4-plan--featured::after {
    display: none;
}

.paywall-v4-plan__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 8px;
}

.paywall-v4-plan__term {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 25px;
    white-space: nowrap;
}

.paywall-v4-plan__discount {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 25px;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.24px;
    line-height: 15px;
    background: linear-gradient(151deg, #d4a041 6%, #fbe67b 36%, #fbe67b 56%, #f7d14e 77%, #d4a041 99%);
    color: var(--c-bg);
    white-space: nowrap;
    text-transform: uppercase;
}

.paywall-v4-plan__badge {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-pw-link);
    white-space: nowrap;
    line-height: normal;
}

.paywall-v4-plan__pricing {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 0 12px;
}

.paywall-v4-plan__price-line {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    line-height: 1;
}

.paywall-v4-plan__price {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -1.92px;
    line-height: 42px;
}

.paywall-v4-plan__per {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0;
    line-height: 24px;
}

.paywall-v4-plan__was {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: line-through;
    letter-spacing: -0.32px;
    line-height: 24px;
}

.paywall-v4-plan__features {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
}
.paywall-v4-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.paywall-v4-plan__features li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--c-pw-accent, var(--c-primary));
    font-weight: 700;
}
.paywall-v4-plan__features-header {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    margin-top: 2px;
}
.paywall-v4-plan__features-header::before {
    content: none;
}

.paywall-v4-plan__cta {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: auto;
    padding: 0;
    height: 48px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(5px);
    background: linear-gradient(215deg, var(--c-pw-cta-grad-a) 5%, var(--c-pw-cta-grad-b) 67%);
    opacity: 0.9;
    box-shadow: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paywall-v4-plan__cta:active {
    transform: scale(0.985);
}

.paywall-v4-plan__cta--secondary {
    background: rgba(var(--c-border-rgb), 0.5);
    color: #fff;
    border: none;
    box-shadow: none;
    opacity: 1;
    backdrop-filter: blur(5px);
}

.paywall-v4-carousel-dots {
    display: none;
    justify-content: center;
    gap: 0.4375rem;
    margin-top: 1.125rem;
}

.paywall-v4-carousel-dots__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-border);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

.paywall-v4-carousel-dots__dot--active {
    background: var(--c-pw-pink-bright);
    transform: scale(1.2);
}

.paywall-v4-benefits {
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.paywall-v4-benefits__title {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #a4a4a4;
    text-align: left;
}

.paywall-v4-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.paywall-v4-benefits__item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    min-width: 0;
}

@media (min-width: 780px) {
    .paywall-v4-benefits__title {
        margin-bottom: 15px;
    }

    .paywall-v4-benefits__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 19px;
        row-gap: 16px;
    }

    .paywall-v4-benefits__item {
        height: 48px;
        padding: 0 10px;
        border-radius: 12px;
        background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%);
        border: 1px solid var(--c-border);
    }
}

.paywall-v4-benefits__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    line-height: 32px;
    text-align: center;
}

.paywall-v4-benefits__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.paywall-v4-legal {
    margin-top: 32px;
    padding-top: 0;
    min-width: 0;
    max-width: 100%;
}

.paywall-v4-trust-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 780px) {
    .paywall-v4-trust-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 54px;
    }
}

.paywall-v4-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.paywall-v4-trust-item__label {
    display: block;
    max-width: calc(100% - 42px);
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: #787878;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (min-width: 780px) {
    .paywall-v4-trust-item__label {
        max-width: none;
        font-size: 14px;
        line-height: 16px;
    }

    .paywall-v4-trust-item {
        width: auto;
    }
}

.paywall-v4-trust-item__icon {
    flex-shrink: 0;
    line-height: 0;
}

.paywall-v4-trust-item__icon svg,
.paywall-v4-trust-item__icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.paywall-v4-legal__company {
    margin: 32px 0 0;
    padding-bottom: 32px;
    max-width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: rgba(164, 164, 164, 0.4);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* FAQ — paywall checkout */
.paywall-faq {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 1.5rem 0 0;
    box-sizing: border-box;
}
.paywall-faq__title {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #a4a4a4;
    text-align: left;
}
.paywall-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.paywall-faq__item {
    border-radius: 12px;
    background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%);
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.paywall-faq__item.is-open {
    border-color: #35354a;
}
.paywall-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    line-height: 1.4;
}
.paywall-faq__question-text {
    flex: 1;
    min-width: 0;
}
.paywall-faq__icon {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    position: relative;
    color: var(--c-muted);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms ease;
}
.paywall-faq__icon::before,
.paywall-faq__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.paywall-faq__icon::before {
    width: 0.875rem;
    height: 2px;
    transition: opacity 200ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.paywall-faq__icon::after {
    width: 2px;
    height: 0.875rem;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.paywall-faq__item.is-open .paywall-faq__icon {
    color: var(--c-primary);
    transform: rotate(90deg);
}
.paywall-faq__item.is-open .paywall-faq__icon::after {
    transform: translate(-50%, -50%);
}
.paywall-faq__item.is-open .paywall-faq__icon::before {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
}
.paywall-faq__answer-wrap[hidden] {
    display: none;
}
.paywall-faq__answer {
    margin: 0;
    padding: 0 1rem 0.875rem;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-muted);
}

@media (min-width: 780px) {
    .paywall-faq {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Payment modal (v4) */
.paywall-v4-payment-modal__title {
    margin: 0 0 1rem;
    padding-right: 2rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.paywall-v4-payment-modal .paywall-checkout-compliance {
    margin-top: 0;
}

@media (max-width: 779px) {
    .paywall-v4 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 2rem 1rem 1.25rem;
        box-sizing: border-box;
    }

    .paywall-v4__main,
    .paywall-v4__header,
    .paywall-v4-benefits,
    .paywall-faq,
    .paywall-v4-legal {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Ainult paketid on horisontaalselt skrollitavad */
    .paywall-v4-plans-wrap {
        margin-bottom: 0;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .paywall-v4-plans {
        justify-content: flex-start;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding: 0;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        /* pan-x pan-y: brauser haldab puutel MÕLEMAT telge natiivselt ja
           valib suuna žesti järgi — horisontaalne swipe kerib pakette
           (scroll-snap), vertikaalne kerib lehte. Ei "jookse kokku".
           JS pointer-drag (initCarouselDrag) jääb AINULT hiirele. */
        touch-action: pan-x pan-y;
        user-select: none;
    }

    .paywall-v4-plans.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

    .paywall-v4-plans.is-dragging .paywall-v4-plan {
        pointer-events: none;
    }

    .paywall-v4-plans::after {
        content: '';
        flex: 0 0 1rem;
        scroll-snap-align: none;
    }

    .paywall-v4-plans::-webkit-scrollbar {
        display: none;
    }

    .paywall-v4-plan-slide {
        flex: 0 0 auto;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .paywall-v4-plan-slide:first-child {
        scroll-snap-align: start;
    }

    .paywall-v4-plan-slide:last-child {
        scroll-snap-align: end;
    }

    .paywall-v4-plan {
        flex: 0 0 220px;
        width: 220px;
    }

    .paywall-page--v4 .paywall-page__footer,
    .paywall-page--v45 .paywall-page__footer {
        display: none;
    }

    .paywall-v4-carousel-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 24px 0;
    }

    .paywall-v4-carousel-dots__dot {
        width: 8px;
        height: 8px;
        background: #fff;
        opacity: 0.3;
    }

    .paywall-v4-carousel-dots__dot--active {
        background: #fff;
        opacity: 1;
        transform: none;
    }

    .paywall-v4-benefits {
        padding: 19px;
        border-radius: 12px;
        border: 1px solid var(--c-border);
        background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%);
        overflow: hidden;
    }

    .paywall-v4-benefits__title {
        margin-bottom: 27px;
    }

    .paywall-v4-benefits__item {
        min-width: 0;
        align-items: flex-start;
    }

    .paywall-v4-benefits__label {
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.35;
    }

    .paywall-faq {
        padding: 19px;
        border-radius: 12px;
        border: 1px solid var(--c-border);
        background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%);
        overflow: hidden;
    }

    .paywall-faq__title {
        margin-bottom: 27px;
    }

    .paywall-faq__list {
        gap: 0;
    }

    .paywall-faq__item {
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--c-border);
    }

    .paywall-faq__item:last-child {
        border-bottom: none;
    }

    .paywall-faq__item.is-open {
        border-bottom-color: var(--c-border);
    }

    .paywall-page--v45 .paywall-v4 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .paywall-page--v45 .paywall-v4-plans-wrap {
        align-items: stretch;
    }

    .paywall-page--v45 .paywall-v4-plans {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   PAYWALL v4.5 — eraldi leht (inherits .paywall-v4 components, own page shell)
   ========================================================================== */

.paywall-page--v45 .paywall-v4 {
    width: 100%;
    max-width: 700px;
    min-width: 0;
    padding-inline: 1rem;
    box-sizing: border-box;
}

@media (min-width: 780px) {
    .paywall-page--v45 .paywall-v4 {
        padding-inline: 0;
    }
}

.paywall-page--v45 .paywall-v4-plans-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 780px) {
    .paywall-page--v45 .paywall-v4-plans-wrap {
        align-items: center;
    }
}

@media (min-width: 780px) {
    .paywall-page--v45 .paywall-v4-plans {
        gap: 1.25rem;
        width: 100%;
        max-width: 700px;
        justify-content: center;
    }
}

.paywall-page--v45 .paywall-v4-plan {
    flex: 0 0 220px;
    width: 220px;
    min-height: 250px;
    box-sizing: border-box;
}

/* Waitlist modal (interest capture) */
#modal-content.paywall-v45-modal-wrap {
    position: relative;
    border: 1px solid var(--c-border) !important;
    border-radius: 16px !important;
    background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}

.paywall-v45-waitlist-modal {
    position: static;
    text-align: center;
}

/* X sama kohas nagu teistel modalidel */
#modal-content.paywall-v46-modal-wrap > .paywall-v45-waitlist-modal > .signup-modal__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
}

.paywall-v45-waitlist-modal__icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-pw-price);
    background: radial-gradient(
        circle at 35% 30%,
        rgba(var(--c-pw-price-rgb), 0.28),
        rgba(var(--c-pw-accent-rgb), 0.08) 55%,
        rgba(var(--c-bg-rgb), 0.9) 100%
    );
    border: 2px solid rgba(var(--c-pw-price-rgb), 0.75);
    box-shadow: 0 8px 24px rgba(var(--c-pw-accent-rgb), 0.12);
}

.paywall-v45-waitlist-modal__icon-svg {
    display: block;
    width: 36px;
    height: 36px;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__title {
    text-align: center;
    padding: 0;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__text {
    text-align: center;
}

.paywall-v45-waitlist-modal__title {
    margin: 0 0 var(--paywall-modal-gap-sm);
    padding: 0 1.5rem 0 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    text-align: left;
}

.paywall-v45-waitlist-modal__text {
    margin: 0 0 var(--paywall-modal-gap-sm);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #a4a4a4;
    text-align: left;
}

.paywall-v45-waitlist-modal__plan {
    margin: 0 0 var(--paywall-modal-gap);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    font-size: 0.875rem;
    color: #787878;
    text-align: left;
}

.paywall-v45-waitlist-modal__plan strong {
    color: #fff;
    font-weight: 600;
}

.paywall-v45-waitlist-modal__form {
    margin-top: 0;
    text-align: left;
}

.paywall-v45-waitlist-modal__field {
    display: block;
    margin-bottom: var(--paywall-modal-gap-sm);
}

.paywall-v45-waitlist-modal__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: #fff;
    font-size: 16px; /* iOS Safari: <16px input zoomib fookuse korral */
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.paywall-v45-waitlist-modal__input::placeholder {
    color: #666;
}

.paywall-v45-waitlist-modal__input:focus {
    border-color: rgba(var(--c-pw-accent-rgb), 0.55);
}

.paywall-v45-waitlist-modal__error {
    margin: 0 0 var(--paywall-modal-gap-sm);
    font-size: 0.8125rem;
    color: var(--c-pw-highlight);
}

.paywall-v45-waitlist-modal__error.hidden {
    display: none;
}

.paywall-v45-waitlist-modal__submit {
    display: block;
    width: 100%;
    margin-bottom: 0.625rem;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--c-pw-accent) 0%, var(--c-pw-accent-soft) 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.paywall-v45-waitlist-modal__submit:hover {
    opacity: 0.92;
}

.paywall-v45-waitlist-modal__dismiss {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #787878;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.paywall-v45-waitlist-modal__dismiss:hover {
    color: #a4a4a4;
}

.paywall-v45-waitlist-modal--success {
    padding: 0;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__title {
    margin: 0 0 var(--paywall-modal-gap-sm);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__text {
    margin: 0 auto var(--paywall-modal-gap);
    padding: 0 0.25rem;
    max-width: 18rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #a4a4a4;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__submit {
    margin-bottom: 0;
    border-radius: 12px;
}

.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__title,
.paywall-v45-waitlist-modal--success .paywall-v45-waitlist-modal__text {
    text-align: center;
    padding-right: 0;
}

/* ==========================================================================
   v4.6 — premium checkout modal (Gemini UX/CRO audit)
   ========================================================================== */

#modal-content.paywall-v46-modal-wrap {
    position: relative;
    --paywall-modal-gap: 1rem;
    --paywall-modal-gap-sm: 0.75rem;
    max-width: 28rem !important;
    width: 100%;
    max-height: min(
        calc(100dvh - max(1rem, var(--safe-top)) - max(1rem, var(--safe-bottom))),
        calc(100svh - max(1rem, var(--safe-top)) - max(1rem, var(--safe-bottom)))
    ) !important;
    padding: 1.5rem !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 16px !important;
    background: radial-gradient(ellipse at -13% -47%, rgba(var(--c-border-rgb), 0.5) 0%, rgba(var(--c-card-rgb), 0.5) 100%) !important;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.58);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.paywall-v46-payment-modal {
    position: static;
}

/* X sama kohas nagu signup/legal modalil (modal-wrap'i nurk, mitte sisemine padding) */
#modal-content.paywall-v46-modal-wrap > .paywall-v46-payment-modal > .signup-modal__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
}

.paywall-v46-payment-modal .paywall-v4-payment-modal__title {
    margin: 0 0 27px;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
}

.paywall-v46-express {
    margin-bottom: var(--paywall-modal-gap);
}

.paywall-v46-express__label {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #7a7a7a;
    text-align: center;
}

/* Sama struktuur mis signup-modal__socials: primary üleval, kaks secondary kõrvuti all */
.paywall-v46-express__layout {
    display: flex;
    flex-direction: column;
    gap: var(--paywall-modal-gap-sm);
    width: 100%;
    box-sizing: border-box;
}

.paywall-v46-express__primary {
    width: 100%;
}

.paywall-v46-express__secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--paywall-modal-gap-sm);
    width: 100%;
}

.paywall-v46-express-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    max-height: 3rem;
    padding: 0 0.625rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.paywall-v46-express-btn--primary {
    min-height: 3rem;
    max-height: 3rem;
}

/* Dark theme — must nupp, valge logo (Apple / Google Pay) */
.paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--paypal {
    background: #ffc439;
    border: 1px solid var(--c-border);
}
.paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--apple {
    background: #000;
    border: 1px solid var(--c-border);
}

/* GPay — Google brand: light button on dark checkout (pay type) */
.paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--google {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0 0.75rem;
}

/* Light theme — valge nupp, tumedad markid */
.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn--paypal,
.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn--apple,
.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn--google {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.paywall-v46-express-btn__mark {
    display: block;
    width: auto;
    height: 1.5rem;
    max-width: 90%;
    max-height: 100%;
    flex-shrink: 0;
    object-fit: contain;
    pointer-events: none;
}

.paywall-v46-express__primary .paywall-v46-express-btn--apple .paywall-v46-express-btn__mark {
    height: 1.45rem;
    max-width: min(11rem, 88%);
}

.paywall-v46-express__secondary .paywall-v46-express-btn--apple .paywall-v46-express-btn__mark {
    height: 1.2rem;
    max-width: 94%;
}

.paywall-v46-express-btn--google .paywall-v46-express-btn__mark {
    height: 1.35rem;
    max-width: none;
}

.paywall-v46-express__primary .paywall-v46-express-btn--paypal .paywall-v46-express-btn__mark {
    height: 1.625rem;
    max-width: min(10rem, 88%);
}

.paywall-v46-express__secondary .paywall-v46-express-btn--paypal .paywall-v46-express-btn__mark {
    height: 1.25rem;
    max-width: 94%;
}

.paywall-v46-express-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn:not(:disabled):hover {
    transform: none;
    box-shadow: none;
}

/* Safari: translateY hover in flex modal shifts content below — shadow only */
.paywall-v46-payment-modal .paywall-v46-express-btn:not(:disabled):hover,
.paywall-v46-payment-modal .paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn:not(:disabled):hover {
    transform: none;
}

.paywall-v46-payment-modal .paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn:not(:disabled):hover {
    transform: none;
    box-shadow: none;
}

.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn:not(:disabled):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.paywall-v46-express-btn--disabled,
.paywall-v46-express-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.paywall-v46-payment-modal__or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: var(--paywall-modal-gap) 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-muted);
    text-align: center;
}

.paywall-v46-payment-modal__or::before,
.paywall-v46-payment-modal__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.paywall-v46-card-pay {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: var(--paywall-modal-gap);
    padding: 0.9375rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.paywall-v46-card-pay:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.paywall-v46-card-pay.is-selected {
    border-color: rgba(var(--c-pw-accent-rgb), 0.6);
    background: rgba(var(--c-pw-accent-rgb), 0.06);
}

.paywall-v46-card-pay__radio {
    position: relative;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: border-color 0.2s ease;
}

.paywall-v46-card-pay.is-selected .paywall-v46-card-pay__radio {
    border-color: var(--c-pw-accent);
}

.paywall-v46-card-pay.is-selected .paywall-v46-card-pay__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-pw-accent);
    transform: translate(-50%, -50%);
}

.paywall-v46-card-pay__label {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f0f0f0;
}

.paywall-v46-card-pay__brands {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.paywall-v46-card-pay__brand-img {
    display: block;
    height: 1.25rem;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
}

.paywall-v46-payment-modal__checkout {
    margin-top: 0;
}

.paywall-v46-payment-modal__billing {
    margin: 0 0 var(--paywall-modal-gap-sm);
    font-size: 0.75rem;
    line-height: 1.5;
    color: #7a7a7a;
    text-align: left;
}

.paywall-v46-payment-modal__pay-btn {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 0 0 var(--paywall-modal-gap-sm);
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--c-pw-accent) 0%, var(--c-pw-accent-soft) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--c-pw-accent-rgb), 0.28);
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.paywall-v46-payment-modal__pay-btn:not(:disabled):hover {
    box-shadow: 0 10px 28px rgba(var(--c-pw-accent-rgb), 0.38);
}

.paywall-v46-payment-modal__pay-btn:not(:disabled):active {
    box-shadow: 0 4px 14px rgba(var(--c-pw-accent-rgb), 0.32);
}

.paywall-v46-payment-modal__pay-btn--disabled,
.paywall-v46-payment-modal__pay-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: linear-gradient(90deg, rgba(var(--c-pw-accent-rgb), 0.55) 0%, rgba(var(--c-pw-accent-soft-rgb), 0.45) 100%);
}

.paywall-v46-payment-modal__compliance {
    padding-top: 0;
    margin-bottom: 0;
}

.paywall-v46-payment-modal .paywall-checkout-terms {
    margin-bottom: var(--paywall-modal-gap-sm);
}

.paywall-v46-payment-modal .paywall-checkout-terms__check {
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: #c8c8d0;
}

.paywall-v46-payment-modal .paywall-checkout-terms__box {
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.paywall-v46-payment-modal .paywall-checkout-terms__input:checked + .paywall-checkout-terms__box {
    border-color: var(--c-pw-accent);
    background: rgba(var(--c-pw-accent-rgb), 0.1);
    box-shadow: none;
}

.paywall-v46-payment-modal .paywall-checkout-terms__input:checked + .paywall-checkout-terms__box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 0.25rem;
    height: 0.5rem;
    border: solid var(--c-pw-accent);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.paywall-v46-payment-modal .paywall-checkout-terms__note {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #6b6b6b;
    text-align: left;
}

.paywall-v46-payment-modal .paywall-checkout-terms__agree a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.paywall-v46-payment-modal .paywall-checkout-terms__agree a:hover {
    color: var(--c-pw-accent);
}

.paywall-v46-trust-v1 {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: var(--paywall-modal-gap-sm) 0 0;
    padding-top: var(--paywall-modal-gap-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.paywall-v46-trust-v1__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 500;
    color: #b8bcc6;
}

.paywall-v46-trust-v1__icon {
    flex-shrink: 0;
}

/* Linnukese värvid CSS-is, et teema saaks üle kirjutada (SVG: js/paywall.js) */
.paywall-v46-trust-v1__icon circle {
    fill: rgba(var(--c-pw-accent-rgb), 0.12);
    stroke: rgba(var(--c-pw-accent-rgb), 0.45);
}

.paywall-v46-trust-v1__icon path {
    stroke: var(--c-pw-accent);
}

/* ===== Payment modal V1.1 — CTA-first checkout flow ===================== */

.paywall-v46-plan-summary-v11 {
    margin-bottom: var(--paywall-modal-gap);
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
}

.paywall-v46-plan-summary-v11__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.paywall-v46-plan-summary-v11__label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f3f4f6;
}

.paywall-v46-plan-summary-v11__price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.paywall-v46-plan-summary-v11__billed {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--c-muted);
}

.paywall-v46-payment-modal__checkout--v11 {
    margin-top: 0;
}

.paywall-v46-payment-modal__pay-btn--v11 {
    margin-bottom: 0.625rem;
}

.paywall-v46-payment-modal__billing--v11 {
    margin: 0 0 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #7a7a7a;
    text-align: left;
}

.paywall-v46-payment-modal__compliance--v11 .paywall-checkout-terms {
    margin-bottom: 0.625rem;
}

.paywall-v46-trust-v1--v11 {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.paywall-v46-payment-modal--v11 .paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--apple,
.paywall-v46-payment-modal--v11 .paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--google,
.paywall-v46-payment-modal--v11 .paywall-v46-express[data-v46-theme="dark"] .paywall-v46-express-btn--paypal {
    background: #000;
    border: 1px solid var(--c-border);
    padding: 0 0.625rem;
}

.paywall-v46-express-btn--labeled {
    gap: 0.375rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111;
}

.paywall-v46-express-btn__pay-with {
    white-space: nowrap;
}

.paywall-v46-express-btn--apple-official {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 3rem;
    max-height: 3rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--primary {
    min-height: 3rem;
    max-height: 3rem;
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-dark {
    background: #000;
    border: 1px solid var(--c-border);
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-light {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.paywall-v46-express-btn--apple-official::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-dark::before {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-light::before {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-light:not(:disabled):hover::before {
    opacity: 1;
}

.paywall-v46-express-btn--apple-official.paywall-v46-express-btn--surface-dark:not(:disabled):hover::before {
    opacity: 0;
}

.paywall-v46-express-btn--apple-official:not(:disabled):hover.paywall-v46-express-btn--surface-light {
    border-color: rgba(0, 0, 0, 0.18);
}

.paywall-v46-express-btn--google-official {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 3rem;
    max-height: 3rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paywall-v46-express-btn--google-official.paywall-v46-express-btn--primary {
    min-height: 3rem;
    max-height: 3rem;
}

.paywall-v46-express-btn--google-official.paywall-v46-express-btn--surface-light {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.paywall-v46-express-btn--google-official::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.paywall-v46-express-btn--google-official.paywall-v46-express-btn--surface-light::before {
    background: rgba(0, 0, 0, 0.04);
}

.paywall-v46-express-btn--google-official.paywall-v46-express-btn--surface-light:not(:disabled):hover::before {
    opacity: 1;
}

.paywall-v46-express-btn--google-official:not(:disabled):hover.paywall-v46-express-btn--surface-light {
    border-color: rgba(0, 0, 0, 0.18);
}

.paywall-v46-express-btn__google-pay-host {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    pointer-events: none;
}

.paywall-v46-express-btn__google-pay-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
}

.paywall-v46-express-btn__google-pay-inner--pay {
    gap: 0.375rem;
}

.paywall-v46-express-btn__google-pay-inner--plain {
    gap: 0;
}

.paywall-v46-express-btn__google-pay-inner .paywall-v46-express-btn__pay-with {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.024em;
    line-height: 1;
    color: #000;
    white-space: nowrap;
}

.paywall-v46-express-btn__google-pay-inner .paywall-v46-express-btn__mark {
    display: block;
    width: auto;
    height: 1.35rem;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
}

.paywall-v46-express-btn__google-pay-inner--pay .paywall-v46-express-btn__mark {
    height: 1.4125rem;
}

.paywall-v46-express-btn__google-pay-inner--plain .paywall-v46-express-btn__mark {
    height: 1.45rem;
}

.paywall-v46-express-btn__apple-pay-host {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    pointer-events: none;
}

.paywall-v46-express-btn__apple-pay-host apple-pay-button {
    display: block;
    width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    flex-shrink: 0;
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 2.5rem;
    --apple-pay-button-border-radius: 12px;
    --apple-pay-button-padding: 0 0.5rem;
    --apple-pay-button-box-sizing: border-box;
}

/* Legacy hover rules — full-button overlay handled via ::before above */

.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn--labeled {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.paywall-v46-express[data-v46-theme="light"] .paywall-v46-express-btn--labeled:not(:disabled):hover {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   FABLE v2 — look-fotokaardid, näidissõnumi kaardid, valiku-pop
   ========================================================================== */

/* Foto (look-samm): kui pilt laadib, kaart muutub pildikaardiks */
.option-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 0;
}
.option-card__emoji-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.option-card--has-photo {
    aspect-ratio: 3 / 4;
    height: auto !important;
    min-height: 0;
    padding: 0;
    justify-content: flex-end;
}
.option-card--has-photo .option-card__emoji,
.option-card--has-photo .option-card__sample {
    display: none;
}
.option-card--has-photo .option-card__emoji-body {
    justify-content: flex-end;
    padding: 40px 10px 12px;
    background: linear-gradient(to top, rgba(var(--c-bg-rgb), .92), rgba(var(--c-bg-rgb), .55) 55%, transparent);
    border-radius: 0 0 16px 16px;
}

/* Näidissõnumi kaart (textingStyle) — valik NÄEB välja nagu päris sõnum */
.option-card__sample {
    background: linear-gradient(120deg, var(--c-primary), var(--c-promo2));
    color: #fff;
    border-radius: 14px 14px 4px 14px;
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
    text-align: left;
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .3);
}

/* Valikul väike rõõmupauk (ettevalmistus interaktiivsetele piltidele) */
.option-card--emoji.selected .option-card__emoji,
.option-card--emoji.selected .option-card__sample {
    animation: fablePickPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes fablePickPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25) rotate(-4deg); }
    100% { transform: scale(1); }
}

html.theme-drunk .option-card__sample {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    border: 2px solid #0b0a1f;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}

/* ----- Drunk-o-meetri ikoonirida (numbri asemel joogi-emojid) ----- */
.slider-icons {
    font-size: 30px;
    line-height: 1.2;
    min-height: 40px;
    letter-spacing: 3px;
    user-select: none;
}
.slider-icons--pop {
    animation: sliderIconsPop .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sliderIconsPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@media (max-width: 640px) {
    .slider-icons { font-size: 24px; letter-spacing: 2px; }
}

/* ----- Kompaktsed multi-valiku kaardid (nt obsessioonid, 3-veeruline) ----- */
.option-card--compact {
    min-height: 96px;
    padding: 12px 8px 10px;
    gap: 4px;
}
.option-card--compact .option-card__emoji {
    font-size: 28px;
}
.option-card--compact .option-card__emoji-label {
    font-size: 12px;
    line-height: 1.25;
}
@media (max-width: 640px) {
    .option-card--compact {
        height: auto;
        min-height: 92px;
    }
}

/* Multi-valiku max-limiit: raputus (sama tunnetus mis modaali gridis) */
.option-card.shake {
    animation: optionCardShake .3s ease;
}
@keyframes optionCardShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ----- Registreerimismodaal: email + nupp sama laiad kui sotsiaalnupud ----- */
.fable-register__subtitle {
    padding: 0 1.25rem;
}
.fable-register__form {
    padding: 0 1.25rem;
}

/* ----- Kaardivideo (valitud kaardil mängib, muidu poster-pilt) ----- */
.option-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 0;
    display: none;
}
.option-card__video--playing {
    display: block;
}
/* Video ajal jääb nimi/label loetavaks sama scrim-i abil (emoji-body on z-index 1) */

/* ----- Drunk teema: viltused plaanikaardid ei tohi carouselis ära lõigata.
   Track (overflow-scroll konteiner) lõikab padding-servast — anname pöörde-
   nurkadele + kõvadele varjudele ruumi padding'uga (mõlemal teljel). ----- */
html.theme-drunk .paywall-v4-plans {
    padding: 12px 14px 20px;
}
html.theme-drunk .paywall-v4-plans-wrap {
    margin-left: -14px;
    margin-right: -14px;
}
@media (min-width: 780px) {
    html.theme-drunk .paywall-v4-plans-wrap {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   YOUTH-PEREKOND — yneon / yacid / ycyber (+ youth = yneon alias)
   Üks baaskiht, värvid per-teema muutujatest --y-glow-a/b/c ja --y-pop.
   KÕIK siin on skoobitud html.theme-y* alla — teisi teemasid ei puuduta.
   ========================================================================== */

/* ----- Per-teema glow-värvid ----- */
html.theme-yneon, html.theme-youth {
    --y-glow-a: #ff2d78;   /* kuum roosa */
    --y-glow-b: #ff7a2e;   /* oranž */
    --y-glow-c: #8b2dba;   /* violett */
    --y-pop:    #c8ff00;   /* laim */
}
html.theme-yacid {
    --y-glow-a: #c8ff00;   /* volt */
    --y-glow-b: #7a2eff;   /* elektri-lilla */
    --y-glow-c: #3aff8a;   /* mürkroheline */
    --y-pop:    #c8ff00;
}
html.theme-ycyber {
    --y-glow-a: #00e5ff;   /* tsüaan */
    --y-glow-b: #ff3ce8;   /* magenta */
    --y-glow-c: #7c3aed;   /* lilla */
    --y-pop:    #00e5ff;
}

/* ----- Animeeritud taust: hõljuvad neoon-lämbid ----- */
html.theme-yneon body, html.theme-youth body,
html.theme-yacid body, html.theme-ycyber body {
    background-image:
        radial-gradient(600px 600px at 15% 20%, color-mix(in srgb, var(--y-glow-a) 22%, transparent), transparent 70%),
        radial-gradient(700px 700px at 85% 10%, color-mix(in srgb, var(--y-glow-b) 16%, transparent), transparent 70%),
        radial-gradient(800px 800px at 50% 95%, color-mix(in srgb, var(--y-glow-c) 20%, transparent), transparent 70%);
    background-attachment: fixed;
    animation: yBgDrift 16s ease-in-out infinite alternate;
}
@keyframes yBgDrift {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 6% 10%, -8% 6%, 4% -8%; }
}

/* ----- Pealkirjad: Unbounded + gradient-tekst ----- */
html.theme-yneon .step-title-row__title, html.theme-youth .step-title-row__title,
html.theme-yacid .step-title-row__title, html.theme-ycyber .step-title-row__title {
    font-family: 'Unbounded', Poppins, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(100deg, var(--c-text) 30%, var(--y-glow-a) 65%, var(--y-glow-b) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----- Look-kaardid: glow + hover-tilt + valitud gradient-ääris ----- */
html.theme-yneon .option-card--emoji, html.theme-youth .option-card--emoji,
html.theme-yacid .option-card--emoji, html.theme-ycyber .option-card--emoji {
    border-radius: 22px;
    border-color: color-mix(in srgb, var(--y-glow-a) 35%, var(--c-border));
    box-shadow: 0 6px 30px color-mix(in srgb, var(--y-glow-a) 18%, transparent);
    transition: border-color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
html.theme-yneon .option-card--emoji:hover, html.theme-youth .option-card--emoji:hover,
html.theme-yacid .option-card--emoji:hover, html.theme-ycyber .option-card--emoji:hover {
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 0 12px 44px color-mix(in srgb, var(--y-glow-a) 34%, transparent);
}
html.theme-yneon .option-card--emoji.selected, html.theme-youth .option-card--emoji.selected,
html.theme-yacid .option-card--emoji.selected, html.theme-ycyber .option-card--emoji.selected {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--y-pop), 0 14px 54px color-mix(in srgb, var(--y-pop) 38%, transparent);
    animation: ySelectedPulse 2.2s ease-in-out infinite;
}
@keyframes ySelectedPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--y-pop), 0 14px 54px color-mix(in srgb, var(--y-pop) 38%, transparent); }
    50%      { box-shadow: 0 0 0 3px var(--y-pop), 0 14px 70px color-mix(in srgb, var(--y-pop) 60%, transparent); }
}

/* ----- Vibe-tag kleeps (opt.tag) ----- */
.option-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--c-bg);
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    transform: rotate(-3deg);
    pointer-events: none;
}
html.theme-yneon .option-card__tag, html.theme-youth .option-card__tag,
html.theme-yacid .option-card__tag, html.theme-ycyber .option-card__tag {
    background: var(--y-pop);
    color: #101010;
    border: none;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--y-pop) 45%, transparent);
    font-weight: 800;
    letter-spacing: .01em;
}

/* ----- CTA-nupp: pulss + glow ----- */
html.theme-yneon #next-button:not(:disabled), html.theme-youth #next-button:not(:disabled),
html.theme-yacid #next-button:not(:disabled), html.theme-ycyber #next-button:not(:disabled) {
    font-family: 'Unbounded', Poppins, sans-serif;
    font-weight: 800;
    border-radius: 16px;
    animation: yCtaPulse 2.4s ease-in-out infinite;
}
@keyframes yCtaPulse {
    0%, 100% { box-shadow: 0 6px 26px color-mix(in srgb, var(--c-primary) 40%, transparent); transform: scale(1); }
    50%      { box-shadow: 0 10px 44px color-mix(in srgb, var(--c-primary) 65%, transparent); transform: scale(1.015); }
}

/* ----- Progress-riba: liikuv gradient ----- */
html.theme-yneon #progress-fill, html.theme-youth #progress-fill,
html.theme-yacid #progress-fill, html.theme-ycyber #progress-fill {
    background: linear-gradient(90deg, var(--y-glow-a), var(--y-glow-b), var(--y-pop), var(--y-glow-a));
    background-size: 300% 100%;
    animation: yProgressFlow 3s linear infinite;
}
@keyframes yProgressFlow {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ----- Buddy: glow-ring ----- */
html.theme-yneon .buddy-avatar, html.theme-youth .buddy-avatar,
html.theme-yacid .buddy-avatar, html.theme-ycyber .buddy-avatar {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--y-pop) 70%, transparent),
                0 6px 26px color-mix(in srgb, var(--y-glow-a) 55%, transparent);
}

/* ----- Emoji-konfetiplahvatus (Steps.burstEmojis) ----- */
.y-burst {
    position: fixed;
    z-index: 200;
    font-size: 22px;
    pointer-events: none;
    animation: yBurst .8s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes yBurst {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(.5) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.25) rotate(var(--br)); }
}