/*!
 * Turboshop — базовые стили виджетов витрины (skylogic/module-widgets).
 *
 * Каркас, общий для всех виджетов: слой дизайн-токенов, подложка попапа,
 * панель, единая кнопка закрытия, «зона большого пальца» на мобильных и
 * уважение к prefers-reduced-motion (W-NFR-3). Палитра — из темы: пакет
 * берёт `--bs-*` (их задаёт `components/layout/dynamic-colors.blade.php`
 * темы: `--bs-primary`/`--bs-primary-rgb` = цвет магазина из настроек) и
 * своих цветов не навязывает.
 *
 * Префикс `twg-` (Turboshop widgets), а не `tw-`: последний занят Tailwind,
 * и в проекте на Bootstrap 5 читался бы двусмысленно.
 *
 * Доступность модалки (Esc, ловушка фокуса, aria-modal, возврат фокуса) —
 * не в CSS, а в ядре: TurboWidgets.modal(el, {onClose}).
 */

/* ---------------------------------------------------------------------- */
/* Токены. Одни радиусы, тени, отступы и тайминги на все восемь виджетов —  */
/* значения из темы: радиусы 10/12/16px (--bs-border-radius-xl/xxl и        */
/* карточные 15–16px темы), тени — мягкие двухслойные, как у карточек.      */
/* ---------------------------------------------------------------------- */
[data-widget] {
    --twg-gap: 1rem;
    --twg-pad: 1.5rem;

    --twg-radius-lg: 16px;
    --twg-radius: 12px;
    --twg-radius-sm: 10px;
    --twg-radius-pill: 999px;

    --twg-surface: var(--bs-body-bg, #fff);
    --twg-ink: var(--bs-body-color, #212529);
    --twg-muted: var(--bs-secondary-color, #6c757d);
    --twg-line: var(--bs-border-color, #e4e4e7);
    --twg-soft: var(--bs-tertiary-bg, #f5f5f7);
    --twg-tint: rgba(var(--bs-primary-rgb, 13, 110, 253), .08);
    --twg-tint-strong: rgba(var(--bs-primary-rgb, 13, 110, 253), .16);

    --twg-shadow-sm: 0 1px 2px rgba(16, 14, 20, .06), 0 4px 12px rgba(16, 14, 20, .08);
    --twg-shadow: 0 2px 6px rgba(16, 14, 20, .06), 0 14px 34px rgba(16, 14, 20, .13);
    --twg-shadow-lg: 0 4px 10px rgba(16, 14, 20, .07), 0 26px 60px rgba(16, 14, 20, .22);

    --twg-ease: cubic-bezier(.2, .7, .3, 1);
    --twg-dur: .22s;
}

[data-widget][hidden] {
    display: none !important;
}

.twg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--twg-gap);
    background: rgba(16, 14, 20, .55);
    animation: twg-fade var(--twg-dur) var(--twg-ease);
}

/* Показ/приховування попапа — атрибутом `hidden` на самій підкладці, а
   `display: flex` вище сильніший за UA-правило `[hidden]{display:none}`:
   без явного рядка все трималося б на `!important` з reboot Bootstrap. */
.twg-overlay[hidden] {
    display: none;
}

@supports (backdrop-filter: blur(2px)) {
    .twg-overlay {
        backdrop-filter: blur(2px);
    }
}

/* Панель. Одно оркестрованное появление на весь попап: подложка проявляется,
   панель поднимается — без отдельной анимации у каждого элемента внутри. */
.twg-panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - 2 * var(--twg-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Отступ панели — здесь, а не утилитой `p-4` в разметке: утилиты
       Bootstrap идут с `!important`, и на мобильных к нему уже не добавить
       запас под safe-area iOS. */
    padding: var(--twg-pad);
    border-radius: var(--twg-radius-lg);
    background: var(--twg-surface);
    color: var(--twg-ink);
    box-shadow: var(--twg-shadow-lg);
    animation: twg-in var(--twg-dur) var(--twg-ease);
}

.twg-panel h2 {
    /* место под кнопку закрытия — заголовок не подлезает под неё */
    padding-inline-end: 2.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* Если над заголовком есть медальон-иконка, кнопка закрытия уже не на его
   строке — резерв справа не нужен, и длинный заголовок переносится ровно. */
.twg-promo__icon + h2,
.twg-lang__icon + h2 {
    padding-inline-end: 0;
}

/* Единая кнопка закрытия всех попапов: сенсорная цель 44×44 (W-NFR-3),
   видимая форма — тихий круг 34px без рамки, подсветка только на
   hover/фокусе. */
.twg-close {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--twg-muted);
    font-size: .875rem;
    line-height: 1;
    transition: color .15s var(--twg-ease);
}

.twg-close::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    transition: background-color .15s var(--twg-ease);
}

.twg-close > * {
    position: relative;
}

.twg-close:hover,
.twg-close:focus-visible {
    color: var(--twg-ink);
}

.twg-close:hover::before,
.twg-close:focus-visible::before {
    background: var(--twg-soft);
}

.twg-panel:focus-visible,
.twg-close:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.twg-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--twg-gap);
    padding: .5rem 1rem;
    text-align: center;
}

/* Плавающие элементы — в зоне большого пальца, над безопасной областью iOS. */
.twg-float {
    position: fixed;
    z-index: 1040;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 1rem;
}

.twg-float--start {
    inset-inline-end: auto;
    inset-inline-start: 1rem;
}

/* Мобильные: попап — нижний лист в зоне большого пальца, с «ручкой»-подсказкой
   (её же тянут вниз, чтобы закрыть — жест ловит TurboWidgets.modal). */
@media (max-width: 575.98px) {
    [data-widget] {
        --twg-pad: 1.25rem;
    }

    .twg-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .twg-panel {
        max-width: none;
        max-height: 88vh;
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        padding-block-end: calc(var(--twg-pad) + env(safe-area-inset-bottom, 0px));
        animation-name: twg-up;
    }

    .twg-panel::before {
        content: '';
        display: block;
        width: 2.25rem;
        height: .25rem;
        margin: -.5rem auto .875rem;
        border-radius: var(--twg-radius-pill);
        background: var(--twg-line);
    }

    /* Пока лист тянут пальцем — движение ведёт палец, не анимация. */
    .twg-panel[data-twg-dragging] {
        animation: none;
        transition: none;
    }
}

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

@keyframes twg-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes twg-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .twg-overlay,
    .twg-panel {
        animation: none;
    }

    [data-widget] * {
        transition-duration: .001ms !important;
    }
}