/* ====================================================================
 *  Раздел, открытый в модальном окне (чекбокс «Открывать в окне»)
 *
 *  Разметку окна печатает 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%;
    }
}

/* ====================================================================
 *  СИСТЕМНОЕ ОКНО (window_mode = 'system')
 *
 *  Окно в духе Windows: шапка с названием, свернуть / развернуть /
 *  закрыть, перетаскивание за шапку, края тянет посетитель. Положение и
 *  размер ставит js/section-window.js стилями на .swin-panel.
 *
 *  Фон не затемняется, и страница под окном рабочая: подложка для мыши
 *  прозрачна, мышь ловят только само окно, его ручки и плашка.
 * ==================================================================== */
.swin-overlay.swin-overlay-system {
    background: transparent !important;
    pointer-events: none !important;
}

.swin-mode-system {
    /* До первой расстановки скриптом — по центру. */
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: scale(0.97);
    transition: transform 0.15s ease, opacity 0.15s ease;
    max-width: none;
    max-height: none;
}
.swin-overlay.swin-open .swin-mode-system {
    opacity: 1;
    transform: none;
}

/* Размер по умолчанию. Ширину и высоту из окна стилей (инлайн) это
   правило не перебивает — ими админ и задаёт размер окна. */
.swin-mode-system .swin-inner {
    width: 720px;
    height: 480px;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Скрипт расставил окно — дальше размер держит панель, а окно её
   заполняет. !important — против инлайновых width/height из окна стилей. */
.swin-mode-system.swin-sized .swin-inner {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* ---- Развёрнуто: весь экран, без скруглений и без ручек ---- */
.swin-mode-system.swin-max {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.swin-mode-system.swin-max .swin-inner {
    border-radius: 0 !important;
}
.swin-mode-system.swin-max .swin-rs {
    display: none;
}

/* ---- Свёрнуто: окна не видно, внизу слева плашка ---- */
.swin-mode-system.swin-min {
    visibility: hidden;
    opacity: 0 !important;
}
.swin-mode-system.swin-min * {
    pointer-events: none !important;
}

.swin-taskbar {
    display: none;
    position: fixed;
    left: 12px;
    bottom: 12px;
    max-width: min(280px, calc(100vw - 24px));
    height: 38px;
    padding: 0 14px 0 34px;
    align-items: center;
    border: 1px solid #b9c0ca;
    border-radius: 6px;
    background: #f3f4f6;
    color: #222;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
}
/* значок окна слева от названия */
.swin-taskbar::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    width: 14px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-width: 3px;
    border-radius: 2px;
    box-sizing: border-box;
}
.swin-taskbar:hover {
    background: #e5e7eb;
}
.swin-overlay-system.swin-minimized .swin-taskbar {
    display: flex;
}

/* ---- Шапка ---- */
.swin-titlebar {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: 36px;
    padding-left: 12px;
    background: #f3f4f6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* скругление окна переходит на шапку, иначе её фон торчит из углов */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    color: #222;
    /* за шапку окно таскают — курсор-«рука»; во время перетаскивания —
       «сжатая рука» (html[data-swin-cursor="move"] ниже) */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* иначе на тач-экране палец прокручивает страницу, а не тащит окно */
    touch-action: none;
}
.swin-mode-system.swin-max .swin-titlebar {
    border-radius: 0;
}

.swin-titlebar .swin-title {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}
.swin-taskbar .swin-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.swin-sysbtns {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border-top-right-radius: inherit;
}

.swin-sysbtns .swin-min,
.swin-sysbtns .swin-max,
.swin-sysbtns .swin-close {
    position: relative;
    width: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    cursor: default;
}
.swin-sysbtns .swin-close {
    border-top-right-radius: inherit;
}
.swin-sysbtns .swin-min:hover,
.swin-sysbtns .swin-max:hover {
    background: rgba(0, 0, 0, 0.08);
}
.swin-sysbtns .swin-close:hover {
    background: #e81123;
    color: #fff;
}

/* Значки рисуются рамками, а не символами шрифта: так они одинаковы на
   любом шрифте сайта и не зависят от эмодзи-представления. */
.swin-sysbtns .swin-min::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 10px;
    border-top: 1px solid currentColor;
}
.swin-sysbtns .swin-max::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 13px;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    box-sizing: border-box;
}
/* развёрнуто — «два окна»: кнопка восстанавливает прежний размер */
.swin-mode-system.swin-max .swin-sysbtns .swin-max::before {
    left: 18px;
    top: 15px;
    width: 8px;
    height: 8px;
}
.swin-mode-system.swin-max .swin-sysbtns .swin-max::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    box-sizing: border-box;
}
.swin-sysbtns .swin-close::before,
.swin-sysbtns .swin-close::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 14px;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
}
.swin-sysbtns .swin-close::after {
    transform: rotate(-45deg);
}

/* ⚙ стиля окна в шапке — видна постоянно, как в шапке остальных окон
   (селектор длиннее исходного из style_admin.css ради специфичности). */
.block-style-editable:not(.no-admin) .swin-titlebar .style-edit-btn {
    display: inline-flex !important;
    position: static !important;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    font-size: 14px;
}

/* ---- Ручки краёв и углов: для всех посетителей ---- */
.swin-rs {
    position: absolute;
    z-index: 4;
    pointer-events: auto;
    /* иначе на тач-экране палец прокручивает страницу */
    touch-action: none;
}
.swin-rs-n, .swin-rs-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.swin-rs-e, .swin-rs-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.swin-rs-n { top: -4px; }
.swin-rs-s { bottom: -4px; }
.swin-rs-e { right: -4px; }
.swin-rs-w { left: -4px; }
.swin-rs-ne, .swin-rs-nw, .swin-rs-se, .swin-rs-sw { width: 14px; height: 14px; }
.swin-rs-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.swin-rs-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.swin-rs-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.swin-rs-se { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* Пока тянут окно: текст страницы не выделяется, курсор не мигает при
   выходе мыши за ручку, iframe в содержимом не перехватывает мышь. */
html.swin-dragging,
html.swin-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
html.swin-dragging iframe {
    pointer-events: none !important;
}
html[data-swin-cursor="move"] * { cursor: grabbing !important; }
html[data-swin-cursor="n"] *, html[data-swin-cursor="s"] * { cursor: ns-resize !important; }
html[data-swin-cursor="e"] *, html[data-swin-cursor="w"] * { cursor: ew-resize !important; }
html[data-swin-cursor="ne"] *, html[data-swin-cursor="sw"] * { cursor: nesw-resize !important; }
html[data-swin-cursor="nw"] *, html[data-swin-cursor="se"] * { cursor: nwse-resize !important; }

/* ---- Содержимое системного окна: без обёрток content / page-content ----
   index.php выводит их простыми контейнерами без стиля; содержимое идёт
   на всю ширину окна. Отступы, если нужны, задаются стилем самого окна
   (⚙ в шапке) или секциями внутри. */
.swin-mode-system .swin-content,
.swin-mode-system .swin-content > .sections-wrapper,
.swin-mode-system .page-content-block.swin-bare {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    /* на телефоне окно всегда во весь экран (скрипт ставит .swin-max) —
       кнопка «развернуть» там ничего не делает, и окно не таскается */
    .swin-sysbtns .swin-max {
        display: none;
    }
    .swin-titlebar {
        cursor: default;
    }
}