/* =================================================================
 * Marketing popup — common + per-variant overrides.
 * Fonts (Playfair Display + Esenin Script Two) and helper classes
 * (.add, .add-block) are loaded globally by ranx-landing template.
 * ================================================================= */

.mk-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
    color: #fff;
    /* font-family НЕ задаём — описание, кнопки и т.д. наследуют сайтовый body-font.
       Playfair применяется явно только к .mk-popup__title ниже. */
}
.mk-popup[hidden] { display: none !important; }
.mk-popup.is-open  { display: flex; }
.mk-popup.is-visible { opacity: 1; }

.mk-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 24, 28, 0.55);
    cursor: pointer;
}

.mk-popup__card {
    position: relative;
    background: #2f3d3e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    width: min(92vw, 1240px);
    max-height: 92vh;
    display: flex;
    align-items: stretch;
}

/* Close button — always above content */
.mk-popup__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.mk-popup__close:hover { background: rgba(255,255,255,0.26); transform: scale(1.05); }
.mk-popup__close:focus { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }

/* Background image layer */
.mk-popup__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Content layer */
.mk-popup__content {
    position: relative;
    z-index: 2;
    padding: 148px 64px 56px;   /* top 148px по дизайну, низ/бока без изменений */
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

/* Title / Description typography */
.mk-popup__title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 110%;
    color: #fff;
    margin: 0;
}
.mk-popup__desc {
    /* шрифт наследуется от body */
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255,255,255,0.78);
    margin: 0;
    max-width: 60ch;
}

/* Countdown timer */
.mk-popup__countdown {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    color: rgba(255,255,255,0.85);
    /* шрифт наследуется */
    margin-top: -4px;
}
.mk-popup__cd-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
}
.mk-popup__cd-num {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mk-popup__cd-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin-top: 2px;
}

/* Buttons — выглядят как сайтовые .btn-primary / .btn-transparent.
   Здесь только лэйаут-обёртка и небольшой layout-hook .mk-popup__btn —
   ни background/color/border/font не переопределяем. */
.mk-popup__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}
.mk-popup__btn {
    /* Переопределяем только отступы — цвет/шрифт/радиус берём от сайтовых
       .btn .btn-primary / .btn-white. */
    padding: 16px 32px;
}
/* Сайтовый .btn-white:hover ставит color:#fff (баг темы — текст исчезает
   на белом фоне). В попапе перебиваем: фон чуть темнеет, текст остаётся
   тёмным, бордер совпадает с фоном. */
.mk-popup__btn.btn-white {
    color: #2f3d3e;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mk-popup__btn.btn-white:hover,
.mk-popup__btn.btn-white:focus,
.mk-popup__btn.btn-white:active {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #2f3d3e;
}

/* ============================================================ */
/* Variants for BIG popup                                       */
/* ============================================================ */

/* A: картинка фоном на всю карточку, контент поверх неё.
   Поверх картинки — градиент-маска #252525 → #666666 слева направо,
   общая прозрачность 44%, для приглушения и подложки под текст. */
.mk-popup--big.mk-popup--variant-a .mk-popup__card {
    aspect-ratio: 1240 / 520;
    width: min(92vw, 1240px);
}
.mk-popup--big.mk-popup--variant-a .mk-popup__bg {
    inset: 0;                           /* картинка на всю площадь */
}
.mk-popup--big.mk-popup--variant-a .mk-popup__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(37, 37, 37, 0.44) 0%,
        rgba(102, 102, 102, 0.44) 100%);
    pointer-events: none;
}
.mk-popup--big.mk-popup--variant-a .mk-popup__content {
    background: transparent;
    z-index: 2;
    max-width: 60%;                     /* текст не растягивается на всё окно */
}

/* B: текст на серой плашке слева, картинка справа */
.mk-popup--big.mk-popup--variant-b .mk-popup__card {
    aspect-ratio: 1240 / 520;
    width: min(92vw, 1240px);
}
.mk-popup--big.mk-popup--variant-b .mk-popup__bg {
    left: 58%;                        /* картинка занимает правые ~42% */
}
.mk-popup--big.mk-popup--variant-b .mk-popup__content {
    flex: 0 0 58%;                    /* серая плашка крупнее картинки */
    max-width: 58%;
    background: #3a4244;              /* видимый серый, отличный от тёмно-зелёного card-а варианта A */
    align-self: stretch;
    z-index: 2;
}

/* ============================================================ */
/* SMALL popup — split в компактных пропорциях                  */
/* ============================================================ */

.mk-popup--small .mk-popup__card {
    aspect-ratio: 555 / 455;
    width: min(94vw, 555px);
}
.mk-popup--small .mk-popup__bg {
    left: 50%;
}
.mk-popup--small .mk-popup__content {
    max-width: 50%;
    background: #2f3d3e;
    padding: 36px 32px;
    z-index: 2;
    gap: 14px;
}
.mk-popup--small .mk-popup__title { font-size: 30px; }
.mk-popup--small .mk-popup__desc  { font-size: 14px; }
.mk-popup--small .mk-popup__btn   { padding: 12px 18px; min-width: 0; font-size: 14px; }
.mk-popup--small .mk-popup__buttons { flex-direction: column; align-items: stretch; gap: 10px; }
.mk-popup--small .mk-popup__buttons .mk-popup__btn { width: 100%; }
.mk-popup--small .mk-popup__countdown { gap: 8px; }
.mk-popup--small .mk-popup__cd-num { font-size: 18px; }
.mk-popup--small .mk-popup__cd-block { min-width: 40px; }

/* ============================================================ */
/* Tablet — 721px..1024px                                       */
/* Десктопный 1240/520 при сужении делает карточку слишком     */
/* плоской — даём более «квадратную» пропорцию и ужимаем     */
/* типографику + верхний отступ.                                */
/* ============================================================ */

@media (min-width: 721px) and (max-width: 1024px) {
    .mk-popup--big.mk-popup--variant-a .mk-popup__card,
    .mk-popup--big.mk-popup--variant-b .mk-popup__card {
        aspect-ratio: 4 / 3;          /* было 1240/520 ≈ 2.38, ставим 1.33 */
        width: min(92vw, 960px);
    }
    .mk-popup__content {
        padding: 88px 40px 40px;       /* десктоп 148/64/56 → таблет 88/40/40 */
        gap: 16px;
    }
    .mk-popup__title { font-size: 36px; }
    .mk-popup__desc  { font-size: 15px; }
    /* Курсивные .add / .add-block в таблете ужимаем,
       чтобы не пробивать карточку. */
    .mk-popup__title :is(span.add, span.add-block) {
        font-size: 60px !important;
        line-height: 110% !important;
    }
    /* Вариант B: серая плашка остаётся преобладающей,
       но не настолько узкой как 58% при ширине 736px. */
    .mk-popup--big.mk-popup--variant-b .mk-popup__bg {
        left: 50%;
    }
    .mk-popup--big.mk-popup--variant-b .mk-popup__content {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* Малый попап: тоже компактнее. */
    .mk-popup--small .mk-popup__card {
        width: min(86vw, 480px);
    }
    .mk-popup--small .mk-popup__title { font-size: 26px; }
    .mk-popup--small .mk-popup__content { padding: 32px 28px; }
}

/* ============================================================ */
/* Mobile — единая вёрстка для всех типов                       */
/* ============================================================ */

@media (max-width: 720px) {
    /* На мобиле — одна единая вёрстка для всех вариантов и типов:
       картинка фоном на всю карточку, контент поверх неё, тёмный градиент
       для читаемости текста. Высота карточки определяется контентом. */
    .mk-popup__card,
    .mk-popup--big.mk-popup--variant-a .mk-popup__card,
    .mk-popup--big.mk-popup--variant-b .mk-popup__card,
    .mk-popup--small .mk-popup__card {
        flex-direction: column;
        aspect-ratio: auto !important;
        width: min(94vw, 360px);
        height: 440px;                /* фиксированная высота мобильной карточки */
        max-height: 88vh;
        background: #2f3d3e;
        justify-content: stretch;
    }
    /* Картинка покрывает всю карточку (как в desktop-варианте A). */
    .mk-popup__bg,
    .mk-popup--big.mk-popup--variant-a .mk-popup__bg,
    .mk-popup--big.mk-popup--variant-b .mk-popup__bg,
    .mk-popup--small .mk-popup__bg {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        aspect-ratio: auto !important;
        flex: initial !important;
        z-index: 0;
    }
    /* Тёмный градиент-оверлей для читаемости текста на картинке. */
    .mk-popup__card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(13,24,28,0.78) 0%,
            rgba(13,24,28,0.4) 50%,
            rgba(13,24,28,0.78) 100%);
    }
    .mk-popup__content,
    .mk-popup--big.mk-popup--variant-a .mk-popup__content,
    .mk-popup--big.mk-popup--variant-b .mk-popup__content,
    .mk-popup--small .mk-popup__content {
        background: transparent !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding: 40px 22px;
        gap: 14px;
    }
    .mk-popup__title { font-size: 30px !important; }
    /* На мобиле курсивные .add / .add-block внутри заголовка ужимаются до 60px,
       чтобы не пробивать карточку гигантским Esenin-курсивом, и переносятся
       на отдельную строку (display:block ломает inline-поток).
       Отрицательный margin-top подтягивает курсив к основному тексту —
       у Esenin Script Two большой внутренний верхний отступ метрики. */
    .mk-popup__title :is(span.add, span.add-block) {
        font-size: 60px !important;
        line-height: 110% !important;
        display: block !important;
        margin-top: -22px !important;
    }
    .mk-popup__desc  { font-size: 14px !important; }
    .mk-popup__buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: auto;             /* кнопки прижаты к низу карточки */
    }
    .mk-popup__btn { width: 100%; min-width: 0; }
    .mk-popup__close {
        top: 12px; right: 12px;
        width: 34px; height: 34px;
    }
}

/* Lock body scroll while popup is open. */
body.mk-popup-open { overflow: hidden; }