/* ====================================================================
 *  Раздел, открытый в модальном окне (чекбокс «Открывать в окне»)
 *
 *  Разметку окна печатает index.php (buildSectionWindowHtml), показывает
 *  js/section-window.js. Здесь только раскладка: как окно стоит на
 *  экране и как выглядит по умолчанию.
 *
 *  ПОЧЕМУ !important НА РАСКЛАДКЕ. Подложка (.swin-overlay) и панель
 *  (.swin-inner) — обычные стилевые блоки: их оформление админ правит
 *  окном стилей, а оно кладёт настройки ИНЛАЙНОМ и при каждом
 *  сохранении перезаписывает style целиком (cssText в updateBlock,
 *  js/modal-style.js), дописывая position:relative. Без !important
 *  первое же сохранение стиля «роняло» бы окно в поток страницы.
 *  Поэтому !important стоит ровно на том, что держит окно на экране
 *  (position, inset, z-index, overflow), и НЕ стоит на оформлении
 *  (фон, рамка, отступы, скругления, размеры) — иначе настройки из
 *  окна стилей были бы не видны.
 * ==================================================================== */

/* ---- Подложка: стилевой блок window-overlay ---- */
.swin-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    /* Ниже bootstrap-модалок (1055): окно стилей и окно редактирования
       раздела админ открывает ПОВЕРХ окна раздела. */
    z-index: 1040 !important;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.swin-overlay.swin-open {
    opacity: 1;
}

/* ---- Панель: держит положение, сама не оформляется ---- */
.swin-panel {
    position: absolute !important;
    display: flex;
    /* Клик мимо окна должен попадать в подложку (она закрывает окно),
       а панель растянута на всю подложку у положений «по центру».
       Поэтому панель для мыши прозрачна, а её содержимое — нет. */
    pointer-events: none;
    transition: transform 0.25s ease;
    max-width: 100%;
    max-height: 100%;
}

/* ---- Содержимое: стилевой блок window-<положение> ----
   Сам блок НЕ прокручивается: overflow висит на вложенном .swin-scroll.
   Иначе край окна занят полосой прокрутки, а ручки размера (они рисуются
   на 8px снаружи блока) просто срезаются — приходилось втягивать их
   внутрь, где они вставали ровно на границу зоны паддинга и путались с
   жёлтыми ручками отступов. */
.swin-inner {
    position: relative;
    pointer-events: auto;
    box-sizing: border-box !important;
    overflow: visible !important;
    /* Колонка нужна, чтобы .swin-scroll занял всю оставшуюся высоту:
       у окна высота ограничена max-height, а процентную высоту от неё
       ребёнок не посчитает. !important — потому что предпросмотр стилей
       перезаписывает style блока целиком. */
    display: flex !important;
    flex-direction: column !important;
    background: #fff;
    /* Нулевой — как и в сидах install.php: внутри окна лежит блок content
       со своими отступами, и два паддинга подряд давали вокруг
       содержимого двойную полосу пустого места. */
    padding: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.swin-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
}

/* Полоса прокрутки тонкая: она идёт по краю содержимого, рядом с ручкой
   отступа и под шапкой окна, и обычные 15px там всем мешают. */
.swin-scroll { scrollbar-width: thin; }
.swin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.swin-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
.swin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Кнопки окна — в панели, а не внутри .swin-inner: тот скроллится
   вместе с содержимым, и у высокого раздела крестик уезжал бы вверх. */
.swin-toolbar {
    position: absolute;
    top: 8px;
    /* Мимо полосы прокрутки: она идёт по правому краю .swin-scroll, то
       есть внутри паддинга окна (24px) и шириной 8px. Крестик у самого
       края на неё наезжал. */
    right: 36px;
    z-index: 3;
    display: flex;
    gap: 6px;
    pointer-events: auto;
}

/* Крестик белым кружком с тенью: он стоит на границе окна и тёмного
   поля вокруг, и «полупрозрачный чёрный на чёрном» на подложке просто
   пропадал из виду. */
.swin-toolbar .swin-close {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 30px;
    font-size: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: #fff;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease;
}

.swin-toolbar .swin-close:hover {
    background: #f0f0f0;
}

/* Кнопка ⚙ затемнения — обычная, по наведению на тёмное поле. Штатные
   -15px увели бы её за край экрана: подложка занимает его целиком. */
.block-style-editable:not(.no-admin).swin-overlay > .style-edit-btn {
    top: 12px !important;
    left: 12px !important;
}

/* Ручки размера (js/block-resize.js) висят на 8px СНАРУЖИ блока — у окна
   это тёмное поле вокруг, там им и место: синяя ручка на границе окна,
   жёлтая на границе паддинга, и они больше не путаются. Втягивать их
   внутрь, как было, пришлось только из-за overflow на самом окне — его
   больше нет (см. .swin-scroll выше), так что правил здесь не нужно. */

/* Кнопка ⚙ обычного блока показывается только при наведении на блок
   (css/style_admin.css). В окне наводить не на что — оно и так открыто,
   поэтому кнопки шапки видны постоянно. Селектор длиннее исходного
   (.block-style-editable:not(.no-admin) .style-edit-btn) намеренно: у
   того тоже !important, и решает специфичность. */
.block-style-editable:not(.no-admin) .swin-toolbar .style-edit-btn {
    display: inline-flex !important;
    position: static !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
}

/* ---- Положения окна ---- */
.swin-mode-left,
.swin-mode-right {
    top: 0;
    bottom: 0;
}
.swin-mode-left { left: 0; }
.swin-mode-right { right: 0; }
.swin-mode-left .swin-inner,
.swin-mode-right .swin-inner {
    width: 420px;
    max-width: 92vw;
    height: 100%;
}

.swin-mode-top,
.swin-mode-bottom {
    left: 0;
    right: 0;
}
.swin-mode-top { top: 0; }
.swin-mode-bottom { bottom: 0; }
.swin-mode-top .swin-inner,
.swin-mode-bottom .swin-inner {
    width: 100%;
    max-height: 80vh;
}

/* Панель по центру обнимает окно, а НЕ растянута на весь экран.
   Растянутая (inset:0 + flex-центрирование) уводила крестик и ⚙ в
   верхний правый угол ЭКРАНА — от окна далеко, а на тёмном фоне ещё и
   незаметно. Отсюда же и центрирование через translate, а не flex. */
.swin-mode-center {
    top: 50%;
    left: 50%;
}
.swin-mode-center .swin-inner {
    width: 820px;
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
}

/* ---- Появление ----
   У окна по центру transform занят самим центрированием, поэтому сдвиг
   и масштаб пишутся вместе с ним — иначе окно уехало бы левее и выше на
   половину своего размера. */
.swin-mode-left  { transform: translateX(-100%); }
.swin-mode-right { transform: translateX(100%); }
.swin-mode-top   { transform: translateY(-100%); }
.swin-mode-bottom{ transform: translateY(100%); }
.swin-mode-center{ transform: translate(-50%, -50%) scale(0.96); }

.swin-overlay.swin-open .swin-panel {
    transform: none;
}
.swin-overlay.swin-open .swin-mode-center {
    transform: translate(-50%, -50%);
}

/* ---- Загрузка ---- */
.swin-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: #666;
}

.swin-loading::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    animation: swin-spin 0.8s linear infinite;
}

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

/* Страница под окном не должна прокручиваться колесом «сквозь» окно. */
body.swin-locked {
    overflow: hidden;
}

@media (max-width: 576px) {
    .swin-mode-left .swin-inner,
    .swin-mode-right .swin-inner,
    .swin-mode-center .swin-inner {
        width: 100%;
        max-width: 100%;
    }
}