/* ---------- OVERLAY ---------- */
.wof-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
    font-family: 'Montserrat', -apple-system, Arial, sans-serif;
    --wof-accent: #e8a0a0;
    --wof-accent-hover: #e08f8f;
    --wof-highlight: #dde06e;
    --wof-btn-text: #fff;
    --wof-prize-title: #2a2a2a;
    --wof-success-prize: #e05a5a;
    --wof-success-desc: #555;
    --wof-success-bg: #2aabee;
    --wof-success-text: #fff;
}
.wof-overlay * { box-sizing: border-box; }

/* ---------- BODY (desktop) ---------- */
.wof-body {
    position: relative;
    width: 1020px; max-width: 100%;
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 20px;
    align-items: center;
    padding: 28px 28px 28px 32px;
    background: #fff center/cover no-repeat;
    border-radius: 24px;
    overflow: visible !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}

.wof-body-overlay {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    border-radius: inherit;
}
.wof-body > *:not(.wof-body-overlay):not(.wof-close) {
    position: relative;
    z-index: 1;
}

/* ---------- CLOSE ---------- */
.wof-body .wof-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #e8382c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: transform .2s, background-color .2s;
    line-height: 1;
    font-family: inherit;
}
.wof-body .wof-close:hover { transform: scale(1.08); background: #fff5f5; }
.wof-body .wof-close:focus-visible { outline: 2px solid #e8382c; outline-offset: 2px; }
.wof-body .wof-close svg { display: block; }

/* ---------- LEFT (desktop) ---------- */
.wof-main {
    width: 100%;
    min-width: 0;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wof-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wof-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.wof-badge-date { background: rgba(255,255,255,.55); color: #333; }
.wof-badge-date-label { font-weight: 500; }
.wof-badge-date-value { background: #ffd0d0; color: #2a2a2a; font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 999px; }
.wof-badge-stock { background: #fff; color: #333; padding: 5px 12px; }
.wof-badge-stock img { width: 26px; height: 26px; object-fit: contain; }
.wof-badge-stock-text { font-size: 11px; line-height: 1.15; }
.wof-badge-stock-text b { font-size: 12px; }

.wof-headline { font-size: 22px; line-height: 1.18; font-weight: 800; color: #1a1a1a; margin: 0 0 12px; }
.wof-headline mark { background: var(--wof-highlight); color: inherit; padding: 0 4px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wof-subheadline { font-size: 15px; font-weight: 800; text-transform: uppercase; color: #1a1a1a; margin: 0 0 16px; letter-spacing: .3px; }

.wof-phone-label { font-size: 13px; color: #333; margin: 0 0 8px; }

[data-wof-wheel] .wof-main input.wof-input[type="tel"] {
    width: 100%; height: 50px; padding: 0 22px;
    border: 1px solid #d9d9d9; border-radius: 999px;
    font-size: 16px; background-color: #fff; outline: none;
    margin-bottom: 10px;
    transition: border-color .2s, color .2s;
    font-family: inherit;
}
[data-wof-wheel] .wof-main input.wof-input[type="tel"]:focus { border-color: var(--wof-accent); color: #000; }
[data-wof-wheel] .wof-main input.wof-input[type="tel"]::placeholder { color: #b7b7b7; opacity: 1; }
[data-wof-wheel] .wof-main input.wof-input[type="tel"]::-webkit-input-placeholder { color: #b7b7b7; opacity: 1; }
[data-wof-wheel] .wof-main input.wof-input[type="tel"]::-moz-placeholder { color: #b7b7b7; opacity: 1; }
.wof-input.error { border-color: #e91e63; animation: wof-shake .3s; color: #e91e63; }
@keyframes wof-shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.wof-btn {
    display: block; width: 100%; height: 56px;
    border: none; border-radius: 999px;
    font-family: inherit; font-size: 15px; font-weight: 700;
    text-transform: uppercase; text-align: center; text-decoration: none;
    letter-spacing: .5px; cursor: pointer; line-height: 56px;
    transition: transform .2s, background-color .2s, box-shadow .2s;
    padding: 0 20px;
}
.wof-btn:hover { transform: translateY(-2px); }
.wof-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.wof-btn-spin { background: var(--wof-accent); color: var(--wof-btn-text); box-shadow: 0 10px 22px rgba(232,160,160,.5); }
.wof-btn-spin:hover { background: var(--wof-accent-hover); }
.wof-btn-success { background: var(--wof-success-bg); color: var(--wof-success-text) !important; box-shadow: 0 10px 22px rgba(42,171,238,.35); }

.wof-trigger {
    display: inline-block; padding: 14px 30px;
    border: none; border-radius: 999px;
    background: var(--wof-accent, #e8a0a0); color: #fff;
    font-size: 15px; font-weight: 700; font-family: 'Montserrat', sans-serif;
    text-transform: uppercase; cursor: pointer;
    transition: transform .2s, box-shadow .2s, background-color .2s;
    box-shadow: 0 8px 20px rgba(226,131,131,.4);
}
.wof-trigger:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(226,131,131,.55); }
.wof-trigger-outline { background: transparent; color: var(--wof-accent, #e8a0a0); border: 2px solid var(--wof-accent, #e8a0a0); box-shadow: none; }

/* ---------- AGREE ---------- */
.wof-agree-block { margin-top: 12px; }
.wof-agree-row { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.4; color: #555; margin-bottom: 6px; }
.wof-agree-row input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; cursor: pointer; }
.wof-agree-row span { cursor: pointer; }
.wof-agree-row a { color: #555; text-decoration: underline; }
.wof-agree-sub { padding-left: 22px; }

.wof-past, .wof-rules { font-size: 11px; color: #444; margin: 8px 0 0; }
.wof-past a, .wof-rules a { color: #444; text-decoration: underline; }
.wof-past a b, .wof-rules a { color: #e05a5a; text-decoration: none; }

/* ---------- WHEEL (desktop) ---------- */
.wof-wheel-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
    justify-self: center;
    align-self: center;
    overflow: visible !important;
}

.wof-wheel-disc {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.wof-wheel-disc.wof-wheel-svg svg {
    display: block;
    width: 100%; height: 100%;
    overflow: visible;
}

.wof-wheel-frame-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% calc((1 - var(--wof-frame-ring-ratio, 1) / 2) * 100%);
    transform: rotate(0deg);
    transform-box: border-box;
    will-change: transform;
    backface-visibility: hidden;
    overflow: visible !important;
}

.wof-wheel-frame-img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
    border: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.wof-wheel-frame-wrap-svg > svg {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
    pointer-events: none;
}

.wof-wheel-stage svg,
.wof-wheel-stage img { max-width: none !important; max-height: none !important; }

/* ---------- SUCCESS ---------- */
.wof-success-title { font-size: 24px; font-weight: 800; margin: 0 0 12px; color: #1a1a1a; line-height: 1.2; }
.wof-success-prize { font-size: 22px; font-weight: 800; color: var(--wof-success-prize); margin: 0 0 6px; line-height: 1.25; }
.wof-success-prize-desc { font-size: 13px; font-weight: 500; color: var(--wof-success-desc); margin: 0 0 22px; line-height: 1.45; }

.wof-thanks {
    margin-top: 12px; padding: 14px 18px;
    background: #e8f5e9; color: #1b5e20;
    border: 1px solid #a5d6a7; border-radius: 12px;
    font-size: 13px; font-weight: 600; text-align: center;
}

/* ---------- LIMIT ---------- */
.wof-limit-message {
    padding: 18px 22px;
    background: #fff3cd; border: 1px solid #ffeeba; color: #856404;
    border-radius: 12px; font-size: 14px; line-height: 1.45;
    font-weight: 600; text-align: center;
}

/* =========================================================
 *  MOBILE
 *
 *  Логика:
 *  1) Попап центрируется по вертикали через margin: auto внутри
 *     flex-контейнера overlay. Если места хватает — попап ровно
 *     по центру. Если не хватает — прижимается к верху и
 *     скроллится весь overlay.
 *
 *  2) Одинаковая высота обоих окон — за счёт min-height: 380px
 *     у всех .wof-step (форма / успех / лимит). Родитель .wof-body
 *     растёт по самому высокому шагу, поэтому при переключении
 *     между ними высота попапа НЕ меняется.
 *
 *  3) Колесо — первый элемент flex-колонки, фиксированной высоты.
 *     Его положение зависит только от верхнего края попапа,
 *     а верх попапа не меняется → колесо не двигается.
 * ========================================================= */
@media (max-width: 991px) {

    .wof-overlay {
        align-items: flex-start;      /* нужно для margin: auto */
        justify-content: center;
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
        overflow-y: auto;             /* если попап не влез — скроллится */
    }

    .wof-overlay .wof-body {
        /* Размер колеса — через переменную, меняется в медиа ниже */
        --wof-mobile-wheel: 320px;

        display: flex;
        flex-direction: column;
        width: 400px;
        max-width: 100%;
        /* Ключевое: центрирует попап по вертикали, но не даёт
           ему обрезаться при переполнении */
        margin: auto;
        padding: 20px 18px;
        gap: 16px;
        border-radius: 20px;
        overflow: visible !important;
        box-shadow: 0 20px 50px rgba(0,0,0,.32);
    }

    /* Колесо: первый элемент, фиксированный размер */
    .wof-overlay .wof-body .wof-wheel-stage {
        order: -1;
        flex: 0 0 auto;
        width: var(--wof-mobile-wheel);
        height: var(--wof-mobile-wheel);
        max-width: 100%;
        max-height: var(--wof-mobile-wheel);
        margin: 0 auto;
        align-self: center;
        overflow: visible !important;
    }

    /* Левая колонка: flex-item, растёт по контенту */
    .wof-overlay .wof-body .wof-main {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        width: 100%;
        overflow: visible;
        display: block;
        padding-right: 2px;
    }

    /* ВАЖНО: одинаковая минимальная высота у всех трёх «шагов» —
       форма, успех и лимит. Из-за этого попап не меняет размер
       при переключении между экранами. */
    .wof-overlay .wof-body .wof-step {
        min-height: 380px;
        display: flex;
        flex-direction: column;
    }
    .wof-overlay .wof-body .wof-step-form,
    .wof-overlay .wof-body .wof-step-success { justify-content: center; }
    .wof-overlay .wof-body .wof-step-limit { justify-content: center; }

    .wof-overlay .wof-body .wof-close {
        top: 10px;
        right: 10px;
        z-index: 10;
    }

    /* Типографика и контролы */
    .wof-headline { font-size: 19px; }
    .wof-subheadline { font-size: 13px; }
    .wof-badge { font-size: 11px; padding: 5px 12px; }
    .wof-badge-date-value { font-size: 13px; padding: 2px 8px; }
    .wof-input { height: 44px; font-size: 14px; padding: 0 18px; }
    .wof-btn { height: 48px; font-size: 14px; line-height: 48px; }
    .wof-success-title { font-size: 20px; }
    .wof-success-prize { font-size: 19px; }
    .wof-success-prize-desc { font-size: 12px; }
    .wof-thanks { font-size: 12px; padding: 12px 14px; border-radius: 10px; }
    .wof-limit-message { font-size: 13px; padding: 14px 16px; border-radius: 10px; }
}

/* Средние экраны — уменьшаем колесо */
@media (max-width: 380px) {
    .wof-overlay .wof-body {
        --wof-mobile-wheel: 280px;
    }
}

/* Узкие — ещё меньше */
@media (max-width: 340px) {
    .wof-overlay .wof-body {
        --wof-mobile-wheel: 240px;
    }
}