/**
 * css/confirm-modal.css — окно подтверждения целиком: вид и движение.
 * Пара к js/confirm-modal.js: там поведение, здесь внешний слой.
 *
 * ЧТО БЫЛО. Окно возникало рывком — .modal-overlay переключался с
 * display:none на display:flex, и всё. Для подтверждения разрушающего
 * действия это худший момент для резкого скачка: перекрытие появляется
 * поверх списка, который человек как раз читает, и он на долю секунды теряет,
 * что вообще произошло.
 *
 * ПОЧЕМУ ЗДЕСЬ ЖЕ И САМ ВИД. Блок .modal-* лежал двумя копиями - в
 * css/cart.css и в css/favorites.css - и когда-то они были побайтово
 * одинаковы, но уже разошлись: padding шапки 20px против 18px. Понадобилась
 * третья копия (карточка товара спрашивает подтверждение при отказе от
 * уведомления о поступлении) - и расхождение стало бы тройным. Копии
 * удалены, вид переехал сюда, к движению того же окна.
 *
 * ПОЧЕМУ CSS, А НЕ JS. Переход управляется классом .show, который ставит
 * скрипт, — этого достаточно. Переходы (а не keyframes) взяты сознательно:
 * «Отмена» и повторное открытие идут подряд, а переход умеет развернуться с
 * текущего значения, тогда как keyframes начали бы заново.
 *
 * ДЛИТЕЛЬНОСТИ И КРИВАЯ — из css/tokens.css, свои не заводим.
 * Появление --zd-dur (200 мс), закрытие --zd-dur-fast (120 мс): открытие
 * человек рассматривает, закрытие — это ответ системы на уже принятое
 * решение, и тянуть его незачем.
 *
 * ДОСТУПНОСТЬ. Отдельного блока prefers-reduced-motion здесь нет намеренно:
 * tokens.css уже обнуляет --zd-dur* в этом режиме, то есть окно появляется
 * мгновенно вместе со всей остальной анимацией сайта. Это осознанное решение
 * проекта, и заводить для одного окна исключение из него не стоит.
 */

/* ─────────────── ВИД ─────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-overlay.show { display: flex; }

.modal-content {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--c-border);
}
.modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--c-muted); line-height: 1; }

.modal-body { padding: 24px 20px; text-align: center; }
.modal-icon { font-size: 40px; color: var(--c-brand); margin-bottom: 12px; display: block; }
.modal-body p { margin: 0; color: var(--c-muted); font-size: 15px; }

.modal-footer { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--c-border); }
/* min-height 44px - порог зоны нажатия на телефоне, аудитория сайта 40-65+. */
.modal-btn { flex: 1; min-height: 44px; padding: 11px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-weight: 600; }
.modal-btn-cancel { background: var(--c-bg); color: var(--c-muted); }
.modal-btn-confirm { background: var(--c-brand); color: #fff; }


/* ─────────────── ДВИЖЕНИЕ ─────────────── */

/* Перекрытие: только прозрачность. */
.modal-overlay {
    opacity: 0;
    /*
     * display в списке переходов + allow-discrete — иначе браузер меняет
     * display:none -> flex в том же кадре, и переход прозрачности просто не
     * успевает начаться (на закрытии — наоборот, элемент исчезает до конца
     * анимации). Там, где allow-discrete не поддерживается, правило молча
     * игнорируется и окно ведёт себя как раньше — мгновенно.
     */
    transition: opacity var(--zd-dur-fast) var(--zd-ease-out),
                display var(--zd-dur-fast) allow-discrete;
}

.modal-overlay.show {
    opacity: 1;
    transition: opacity var(--zd-dur) var(--zd-ease-out),
                display var(--zd-dur) allow-discrete;
}

/*
 * Само окно: прозрачность + лёгкий масштаб. Только transform и opacity —
 * они не трогают раскладку и считаются на видеокарте.
 *
 * 0.96, а не 0: из ничего в реальности ничего не появляется, и скачок с нуля
 * читается как дефект. transform-origin оставляем по центру: окно не
 * привязано к кнопке, оно посреди экрана.
 */
.modal-content {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--zd-dur-fast) var(--zd-ease-out),
                transform var(--zd-dur-fast) var(--zd-ease-out);
}

.modal-overlay.show .modal-content {
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--zd-dur) var(--zd-ease-out),
                transform var(--zd-dur) var(--zd-ease-out);
}

/*
 * Стартовое состояние для ПЕРВОГО показа. Без @starting-style браузеру не от
 * чего анимировать элемент, который только что был display:none, — он
 * появился бы сразу в конечном виде.
 */
@starting-style {
    .modal-overlay.show {
        opacity: 0;
    }

    .modal-overlay.show .modal-content {
        opacity: 0;
        transform: scale(0.96);
    }
}