/**
 * Override-фиксы для модалки оплаты #dk-event-pay-modal.
 *
 * Проблема: payment-modal.css был написан под другой контекст (webinar-package)
 * и использует `.promo-code-input-state { display: block }`, `.promo-code-applied { display: block }`,
 * `.payment-iframe-loading { display: flex }` без учёта HTML-атрибута `hidden`.
 * Из-за этого все блоки видны одновременно, спиннер блокирует кликабельность.
 *
 * Решение: высокоспецифичный селектор `#dk-event-pay-modal [hidden]` с !important,
 * чтобы любой потомок модалки с атрибутом hidden был действительно невидим.
 *
 * Также:
 *  - оверлей `.payment-modal-overlay` по дефолту НЕ показывается (opacity:0, visibility:hidden),
 *    но при hidden=true вообще убираем из layout (display:none) — чтобы не перехватывать клики
 *    за пределами модалки на странице события.
 */

/* Самое главное — заставить [hidden] работать внутри нашей модалки. */
#dk-event-pay-modal [hidden],
#dk-event-pay-modal[hidden] {
    display: none !important;
}

/* Дополнительная защита: если модалка скрыта через hidden атрибут — никаких pointer-events,
   на случай браузеров где display:none анимируется. */
#dk-event-pay-modal[hidden] {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Когда модалка показана (нет hidden), но JS ещё не успел добавить .active —
   на всякий случай помогаем перейти из 0 → 1. */
#dk-event-pay-modal:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

/* Спиннер «Формируем заказ» должен жить ВНУТРИ карточки event-info,
   не поверх всей модалки (иначе перекрывает кнопку «Перейти к оплате»).
   Сбрасываем абсолютное позиционирование. */
#dk-event-pay-modal [data-pay-loading] {
    position: relative;
    margin-top: 16px;
    background: transparent;
    min-height: 60px;
    padding: 12px;
    border-radius: 12px;
}

#dk-event-pay-modal [data-pay-loading] .payment-loading-spinner {
    margin: 0 auto 8px;
}

/* Кнопка «Перейти к оплате» — гарантируем, что она не перекрыта. */
#dk-event-pay-modal [data-pay-proceed] {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 20px;
}

/* Когда finalize в процессе — даём пользователю явный визуальный сигнал. */
#dk-event-pay-modal [data-pay-proceed]:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Применяем эту же логику к promo-apply (когда disabled во время запроса). */
#dk-event-pay-modal [data-promo-apply]:disabled {
    opacity: 0.6;
    cursor: wait;
}