/* Модалка баннера: всегда по центру экрана, на любой ширине. Один fixed-слой на весь экран
   (backdrop-filter покрывает всю страницу, включая хедер), карточка внутри центрируется flex-ом.
   Макеты: mobile 5188:46533, tablet 5195:55642, desktop 5197:63162 (карточка 959×918, ref 959).
   Размеры внутри карточки заданы в cqw (1cqw = 1% ширины карточки): на десктопе px / 959 * 100,
   на mobile/tablet подобраны под ширину карточки.
   Брейкпоинты модалки: 0 / 600 / 1024. */

:root {
    --bm-backdrop-bg: rgba(0, 0, 0, 0.25);
    --bm-backdrop-blur: 7.25px;
}

.banner-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--bm-pad) var(--divider-wrapper-px);
    background: var(--bm-backdrop-bg);
    -webkit-backdrop-filter: blur(var(--bm-backdrop-blur));
    backdrop-filter: blur(var(--bm-backdrop-blur));
    animation: bm-fade 0.18s ease-out;
}

.banner-modal[hidden] {
    display: none;
}

.banner-modal__card {
    container-type: inline-size;
    position: relative;
    max-height: calc(100dvh - 2 * var(--bm-pad));
    overflow-y: auto;
    overscroll-behavior: contain;
    width: var(--bm-card-w);
    max-width: 100%;
    border-radius: var(--bm-radius);
    background: #ffffff;
    box-shadow: 0 4px 14.8px 7px rgba(0, 0, 0, 0.25);
    font-family: 'Montserrat', 'Inter', sans-serif;
    color: #000000;
    animation: bm-rise 0.22s ease-out;
}

.banner-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--bm-pt) 0 var(--bm-pb);
}

.banner-modal__close,
.banner-modal__share {
    position: absolute;
    top: var(--bm-close-top);
    display: grid;
    place-items: center;
    width: var(--bm-close);
    height: var(--bm-close);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.banner-modal__close {
    right: var(--bm-close-right);
}

/* «Поделиться» — в левом верхнем углу, зеркально крестику */
.banner-modal__share {
    left: var(--bm-close-right);
}

.banner-modal__share svg {
    display: block;
    width: 65%; /* тот же размер, что у крестика (.banner-modal__close img) */
    height: 65%;
}

.banner-modal__close img {
    display: block;
    width: 65%;
    height: 65%;
    transition: transform 0.2s ease;
}

.banner-modal__close:hover,
.banner-modal__share:hover {
    background: rgba(0, 0, 0, 0.06);
}

.banner-modal__close:hover img {
    transform: rotate(90deg);
}

.banner-modal__close:active,
.banner-modal__share:active {
    background: rgba(0, 0, 0, 0.14);
    transform: scale(0.86);
}

.banner-modal__close:focus-visible,
.banner-modal__share:focus-visible,
.banner-modal__round-btn:focus-visible {
    outline: 3px solid #ffbc00;
    outline-offset: 3px;
}

.banner-modal__title {
    width: 78cqw;
    margin: 0;
    font-size: var(--bm-title-fs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}

/* Обёртка задаёт единственный источник размера (ширина + фиксированный aspect-ratio) — сами картинки внутри
   абсолютно спозиционированы и никогда не влияют на размер блока, поэтому смена превью не схлопывает
   и не растягивает попап, даже на миг */
.banner-modal__image-wrap {
    position: relative;
    width: var(--bm-img);
    aspect-ratio: 1 / 1;
    margin-top: var(--bm-title-gap);
    border-radius: var(--bm-img-radius);
    overflow: hidden;
    background: #111;
}

.banner-modal__image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Настоящий кроссфейд: верхний слой (уже с загруженной новой картинкой) проявляется, остальные погашены —
   класс переставляется JS-ом между двумя <img> в setPreviewImage() */
.banner-modal__image--top {
    opacity: 1;
}

.banner-modal__card-title {
    max-width: 84cqw;
    margin: var(--bm-desc-gap) 0 0;
    font-size: calc(var(--bm-desc-fs) * 1.2);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* короткая оранжевая линия между названием и описанием (цвет как у подсвеченных иконок фильтра) */
.banner-modal__divider {
    display: block;
    width: calc(var(--bm-desc-fs) * 3);
    height: max(2px, calc(var(--bm-desc-fs) * 0.16));
    margin-top: calc(var(--bm-desc-gap) * 0.7);
    border-radius: 999px;
    background: #FFA500;
}

.banner-modal__desc {
    max-width: 84cqw;
    margin: var(--bm-desc-gap) 0 0;
    font-size: var(--bm-desc-fs);
    font-weight: 400;
    color: #6b6b66;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    /* описание может быть длинным — всегда одна строка, лишнее обрезается многоточием (переносы строк схлопываются в пробелы) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-modal__divider + .banner-modal__desc {
    margin-top: calc(var(--bm-desc-gap) * 0.7);
}

.banner-modal__desc:empty {
    display: none;
}

/* По референсу дизайнера (Figma) input не центрирован сам по себе — центрируется весь блок «input + кнопки» как
   единое целое (ширина --bm-form-w), input прижат к левому краю блока, кнопки — к правому. Ширина кнопки уже
   заложена в это резервирование, поэтому появление/исчезновение «Скачать» ничего не сдвигает. */
.banner-modal__form {
    display: flex;
    align-items: center;
    gap: var(--bm-form-gap);
    width: var(--bm-form-w);
    margin-top: var(--bm-form-gap-top);
}

/* Инпут: в макете — светло-серая «вдавленная» пилюля. Состояния (hover / focus / error) добавлены отдельно. */
.banner-modal__input {
    flex: 1;
    min-width: 0;
    height: var(--bm-input-h);
    padding: 0 var(--bm-input-px);
    border: none;
    border-radius: 999px;
    background: #ededed;
    box-shadow: inset 0 3px 4.4px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    font-size: var(--bm-input-fs);
    font-weight: 400;
    letter-spacing: 0.38px;
    color: #1a1a1a;
    outline: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.banner-modal__input::placeholder {
    color: #cfcfcf;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.banner-modal__input:hover {
    background: #e4e4e4;
    box-shadow: inset 0 3px 5.5px rgba(0, 0, 0, 0.3);
}

.banner-modal__input:focus,
.banner-modal__input:active {
    background: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 188, 0, 0.75);
}

/* focus — placeholder скрывается, при потере фокуса с пустым полем появляется снова */
.banner-modal__input:focus::placeholder {
    opacity: 0;
}

.banner-modal__input[aria-invalid="true"] {
    box-shadow: inset 0 3px 4.4px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(229, 72, 77, 0.8);
}

/* Кнопки «Сгенерировать» и «Скачать»: общий тёмный круг (ассет из макета), разная иконка внутри */
.banner-modal__round-btn {
    position: relative;
    flex: none;
    width: var(--bm-btn);
    height: var(--bm-btn);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    transition: transform 0.12s ease, filter 0.12s ease;
}

.banner-modal__round-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)) brightness(1.2);
}

.banner-modal__round-btn:hover:not(:disabled) .banner-modal__download-icon,
.banner-modal__round-btn:hover:not(:disabled) .banner-modal__round-btn-icon {
    transform: translate(-50%, calc(-50% + 2px));
}

.banner-modal__round-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.95);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) brightness(0.9);
}

.banner-modal__round-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* «Скачать» видна и disabled с самого начала (по макету — серое кольцо), не гасим общим затемнением :disabled —
   переход неактивный ⇄ активный виден по кроссфейду фонов и по иконке (ниже), а не по общей прозрачности кнопки */
.banner-modal__round-btn.banner-modal__download:disabled {
    opacity: 1;
    cursor: not-allowed;
}

/* Кроссфейд между неактивным (серое кольцо) и активным (тёмный круг) фоном — оба слоя наложены друг на друга */
.banner-modal__round-btn-bg--active {
    opacity: 0;
}

.banner-modal__round-btn-bg--disabled {
    opacity: 1;
}

.banner-modal__download:not(:disabled) .banner-modal__round-btn-bg--active {
    opacity: 1;
}

.banner-modal__download:not(:disabled) .banner-modal__round-btn-bg--disabled {
    opacity: 0;
}

/* Иконка «Скачать»: еле видна на неактивном фоне (0.16, как в макете), проявляется до полной непрозрачности вместе с активным фоном */
.banner-modal__download:disabled .banner-modal__download-icon {
    opacity: 0.16;
}

/* Лоудер во время генерации/скачивания: спиннер поверх иконки, сама иконка прячется */
.banner-modal__round-btn.is-loading {
    opacity: 1; /* не гасим отдельным :disabled-затемнением — состояние уже видно по спиннеру */
    cursor: progress;
}

.banner-modal__round-btn.is-loading .banner-modal__round-btn-icon,
.banner-modal__round-btn.is-loading .banner-modal__download-icon {
    opacity: 0;
}

.banner-modal__round-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--bm-btn) * 0.34);
    height: calc(var(--bm-btn) * 0.34);
    margin: calc(var(--bm-btn) * -0.17) 0 0 calc(var(--bm-btn) * -0.17);
    border: max(2px, calc(var(--bm-btn) * 0.045)) solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.banner-modal__round-btn.is-loading .banner-modal__round-btn-spinner {
    opacity: 1;
    animation: bm-spin 0.75s linear infinite;
}

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

.banner-modal__round-btn-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

/* Иконка «Сгенерировать» — одна искра по центру, без подчёркивания (в отличие от «Скачать») */
.banner-modal__round-btn-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--bm-btn) * 0.36);
    height: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.banner-modal__download-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--bm-btn) * 0.09);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* стрелка в ассете смотрит вправо — поворачиваем на 90° внутри коробки нужного размера */
.banner-modal__download-arrow {
    position: relative;
    width: calc(var(--bm-btn) * 0.31);
    height: calc(var(--bm-btn) * 0.43);
}

.banner-modal__download-arrow img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--bm-btn) * 0.43);
    height: auto;
    transform: translate(-50%, -50%) rotate(90deg);
}

.banner-modal__download-line {
    display: block;
    width: calc(var(--bm-btn) * 0.36);
    height: auto;
}

/* Высота и отступ зарезервированы всегда (даже когда текста нет) — иначе появление/исчезновение статуса
   («Готовим картинку...» на время генерации) меняет высоту карточки, а так как попап центрируется по вертикали,
   это сдвигает всю модалку и ощущается как скачок картинки, хотя дело не в ней */
.banner-modal__status {
    min-height: 1.2em;
    margin: 1.2cqw 0 0;
    font-size: var(--bm-status-fs);
    font-weight: 500;
    text-align: center;
    color: #6b6b66;
}

.banner-modal__status--error {
    color: #d23c41;
}

/* Пока модалка открыта, фон не прокручивается */
body.banner-modal-open {
    overflow: hidden;
}

@keyframes bm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bm-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes bm-sink {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* закрытие: карточка уходит вниз и гаснет вместе с backdrop */
.banner-modal--closing {
    pointer-events: none;
    animation: bm-fade-out 0.18s ease-in forwards;
}

.banner-modal--closing .banner-modal__card {
    animation: bm-sink 0.18s ease-in forwards;
}

@keyframes bm-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .banner-modal,
    .banner-modal__card {
        animation: none;
    }

    .banner-modal__input::placeholder {
        transition: none;
    }
}

/* mobile */
@media (min-width: 0px) {
    .banner-modal {
        --bm-pad: 16px;
        --bm-card-w: 100%;
        --bm-radius: 20px;
        --bm-pt: 8cqw;
        --bm-pb: 6cqw;
        --bm-title-fs: 5.4cqw;
        --bm-title-gap: 4cqw;
        --bm-img: 76cqw;
        --bm-img-radius: 3cqw;
        --bm-desc-fs: 3.4cqw;
        --bm-desc-gap: 3cqw;
        --bm-form-w: 92.6cqw;
        --bm-form-gap: 2.5cqw;
        --bm-form-gap-top: 4.5cqw;
        --bm-input-h: 12.5cqw;
        --bm-input-fs: 5cqw;
        --bm-input-px: 5cqw;
        --bm-btn: 13.5cqw;
        --bm-close: 9cqw;
        --bm-close-top: 1.5cqw;
        --bm-close-right: 2cqw;
        --bm-status-fs: 3.2cqw;
    }
}

/* tablet */
@media (min-width: 600px) {
    .banner-modal {
        --bm-pad: 16px;
        --bm-pt: 5cqw;
        --bm-pb: 4cqw;
        --bm-title-fs: 4.2cqw;
        --bm-title-gap: 3cqw;
        --bm-img: 60cqw;
        --bm-img-radius: 2cqw;
        --bm-desc-fs: 2.5cqw;
        --bm-desc-gap: 2cqw;
        --bm-form-w: 74cqw;
        --bm-form-gap: 1cqw;
        --bm-form-gap-top: 3.5cqw;
        --bm-input-h: 9.6cqw;
        --bm-input-fs: 3.9cqw;
        --bm-input-px: 3.65cqw;
        --bm-btn: 10.4cqw;
        --bm-close: 6.5cqw;
        --bm-close-top: 1.6cqw;
        --bm-close-right: 3cqw;
        --bm-status-fs: 2cqw;
    }
}

/* desktop (реф. 959): заголовок 36, картинка 537, описание 20, инпут 571×86, кнопка ~95 */
@media (min-width: 1024px) {
    .banner-modal {
        --bm-pad: 16px;
        --bm-card-w: clamp(600px, 37.5vw, 959px);
        --bm-radius: clamp(28px, 1.72vw, 44px);
        --bm-pt: 3.44cqw;
        --bm-pb: 3.75cqw;
        --bm-title-fs: 3.75cqw;
        --bm-title-gap: 2.8cqw;
        --bm-img: 56cqw;
        --bm-img-radius: 1.67cqw;
        --bm-desc-fs: 2.09cqw;
        --bm-desc-gap: 1.67cqw;
        --bm-form-w: 70.4cqw;
        --bm-form-gap: 0.94cqw;
        --bm-form-gap-top: 2.6cqw;
        --bm-input-h: 8.97cqw;
        --bm-input-fs: 3.75cqw;
        --bm-input-px: 3.65cqw;
        --bm-btn: 9.9cqw;
        --bm-close: 5.2cqw;
        --bm-close-top: 2.71cqw;
        --bm-close-right: 3.44cqw;
        --bm-status-fs: 1.6cqw;
    }
}