/* ==========================================================================
   Конструктор страниц: режим редактирования для админов + кастомные плашки.

   ВАЖНО: вне режима редактора (.kb-editing) этот файл не влияет на
   раскладку вообще. Колонки несут оригинальные классы страницы
   (.table-container / .table-container1), поэтому ширину, отступы и
   медиа-запросы на всех разрешениях задаёт нетронутый core.css.
   ========================================================================== */

/* ---------- Каркас раскладки ---------- */

/* Имена колонок и признак пустоты — только служебные атрибуты.
   Никаких размеров здесь нет: раскладку задаёт core.css. */

/* Колонка без блоков не оставляет пустой рамки на сайте.
   PHP помечает такие зоны классом kb-zone-empty. */
.kb-zone.kb-zone-empty { display: none; }

/* Кнопка справа снизу: включает и выключает режим редактирования */
.kb-bar-toggle {
    display: none !important;
    position: fixed;
    margin: 0 auto;
    height: max-content;
    width: max-content;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 1px dashed rgba(255, 255, 255, 0.2);
    outline-offset: 0px;
    /* transform: translateY(-50%); */
    /* width: 40px; */
    /* height: 120px; */
    /* transform: rotate(180deg); */
    color: white;
    font-weight: bold;
    font-size: 8px;
    border: none !important;
    padding: 4px 20px;
    /* writing-mode: vertical-rl; */
    /* text-orientation: mixed; */
    /* background: #ffffff2a; */
    backdrop-filter: blur(10px);
    display: flex;
    /* letter-spacing: 2px; */
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.kb-bar-toggle:hover { 
    background: rgba(215, 254, 123, .14); 
}

/* В режиме редактора кнопка залита — видно, что режим включён */
.kb-bar-toggle.kb-on {
    display: none;
    /* background: #d7fe7b; */
    border-color: #d7fe7b;
    color: #0e1505;
}
.kb-bar-toggle.kb-on:hover { background: #c6f065; }

/* Пока тянем блок — подсказываем курсором, что бросок разрешён везде */
body.kb-drag-active, body.kb-drag-active * { cursor: grabbing !important; }

/* ---------- Кастомные плашки (видны всем) ---------- */

.kb-item-custom {
    background: #080808;
    border: 1px solid #303030;
    border-radius: 5px;
    /* padding: 12px 14px; */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Заголовок плашки — как кнопка #toggleFeaturesBtn на главной:
   строка с названием и стрелкой, клик раскрывает содержимое. */
.kb-plate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.kb-plate-head:hover { background: rgba(215, 254, 123, .12); border-color: rgba(215, 254, 123, .45); }
.kb-plate-head.unactive { opacity: .85; }
.kb-plate-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Стрелка-индикатор раскрытия */
.kb-plate-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s;
    margin-top: -3px;
}

.kb-plate-head.unactive .kb-plate-chevron { transform: rotate(-45deg); margin-top: 0; }

/* .kb-plate-content { margin-top: 10px; } */

.kb-custom-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.kb-custom-text { font-size: 13.5px; line-height: 1.6; color: inherit; white-space: normal; }
.kb-custom-img { max-width: 100%; height: auto; border-radius: 8px; display: inline-block; }
.kb-custom-link { display: inline-block; line-height: 0; }
.kb-custom-html { font-size: 13.5px; line-height: 1.6; }
.kb-custom-html img, .kb-custom-html video, .kb-custom-html iframe { max-width: 100%; }
.kb-custom-empty { color: #8b8f98; font-size: 12.5px; font-style: italic; }

/* ---------- Режим редактора ---------- */

/*
 * Ярлык блока (.kb-tag) и бейдж типа существуют в разметке ВСЕГДА,
 * но показываются только в режиме редактора. Вне .kb-editing они
 * полностью убраны — на публичной странице о них ничего не напоминает.
 */
.kb-tag,
.kb-badge {
    display: none;
    position: absolute;
}
.kb-tag{
    display: none !important;
}
.kb-editing .kb-item > .kb-tag { display: flex; }
.kb-editing .kb-item > .kb-badge { display: block; }

/* .kb-editing { 
    padding-bottom: 0px; 
    padding-top: 20px; 
} */

/*
 * Рамка и подпись колонки рисуются только как МАРКЕР редактора.
 * box-sizing и position здесь не трогают ширину колонки: её по-прежнему
 * определяет .table-container / .table-container1 из core.css.
 */
.kb-editing .kb-zone {
    outline: 1px dashed rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
    display: flex;
    gap: 5px;
    flex-direction: column;
}
.kb-editing .kb-zone.kb-zone-empty { display: block; }

.kb-editing .kb-zone::before {
    content: attr(data-zone-title);
    display: block;
    font-size: 11px;
    position: absolute;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(215, 254, 123, .75);
    margin: 0 0 8px 4px;
}
.kb-editing .kb-zone.kb-drop-active {
    outline-color: #d7fe7b;
    outline-style: solid;
    background: rgba(215, 254, 123, .06);
}
.kb-drop-ph {
    height:50px;
    /* border:1px dashed rgba(215,254,123,.7); */
    /* border-radius: 5px; */
    outline: 1px dashed rgb(254, 123, 123);
    color: rgb(254, 123, 123);
    outline-offset: 0px;
    /* margin:10px 0; */
    position: relative;
}
.kb-drop-ph::after{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    content: 'Вставить сюда';
}

.kb-editing .kb-item {
    outline: 1px dashed rgb(215, 254, 123);
    outline-offset: 0px;
    position: relative;
    /* border: 1px solid rgba(215, 254, 123, .28); */
    border-radius: 0px;
    /* padding: 22px 0px 0px; */
    min-height: 20px;
    /* margin: 10px 0; */
    background: rgba(0, 0, 0, .18);
    /* Блок можно тянуть целиком: dragstart разрешён из любого места,
       кроме ссылок и кнопок внутри .kb-body (см. JS). */
    cursor: grab;
}

/* Обрезаем только блоки страницы. Кастомные плашки не режем: их содержимое
   — HTML админа, и overflow:hidden ломал вставленный код (см. конец файла). */
.kb-editing .kb-item:not(.kb-item-custom) { overflow: hidden; }
.kb-editing .kb-item.kb-dragging { opacity: .45; cursor: grabbing; }
.kb-editing .kb-item.kb-locked { border-style: dotted; opacity: .9; cursor: default; }

.kb-editing .kb-item > .kb-tag {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    /* width: 100%; */
    align-items: center;
    gap: 6px;
    max-width: calc(100%);
    padding: 2px 10px;
    background: #1a1a1a;
    color: #b6b6b6;
    font-size: 10.5px;
    font-weight: 700;
    /* border-radius: 9px 0 9px 0; */
    z-index: 6;
    cursor: grab;
    user-select: none;
}
.kb-editing .kb-item.kb-dragging > .kb-tag { cursor: grabbing; }
.kb-editing .kb-item > .kb-tag .kb-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Иконка-подсказка, что блок можно тянуть */
.kb-editing .kb-item > .kb-tag::after {
    content: '⠿';
    font-size: 12px;
    margin-left: 2px;
    opacity: .75;
}

.kb-editing .kb-item > .kb-body {
    position: relative;
}

/* Содержимое блока не должно уводить со страницы кликом по ссылке
   и не должно перехватывать начало перетаскивания: ссылки и кнопки
   внутри блока отключаем, остальному оставляем pointer-events, чтобы
   dragstart срабатывал в любом месте блока. */
.kb-editing .kb-item > .kb-body a,
.kb-editing .kb-item > .kb-body button,
.kb-editing .kb-item > .kb-body input,
.kb-editing .kb-item > .kb-body select,
.kb-editing .kb-item > .kb-body textarea,
.kb-editing .kb-item > .kb-body iframe {
    pointer-events: none !important;
}

/* Кастомная плашка: её заголовок-кнопка должна оставаться кликабельной
   (она раскрывает содержимое), поэтому исключаем её из правила выше. */
.kb-editing .kb-item-custom > .kb-body .kb-plate-head {
    pointer-events: auto !important;
    cursor: pointer;
}

.kb-item:not(.kb-item-custom) .kb-plate-head { display: none; }

.kb-zone-top {
    width: 100%;
    margin-bottom: 5px;
}
.kb-editing .kb-zone-top {
    outline: 1px dashed rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
    display: flex;
    gap: 5px;
    flex-direction: column;
}

/*
 * Выключенный блок (.kb-off).
 *
 * На сайте его гасит CSS из builder_css() (display:none). В редакторе
 * правило снято, поэтому блок виден приглушённым — его можно включить
 * обратно, переставить или отредактировать. Из списка он не пропадает.
 */
.kb-editing .kb-item.kb-off {
    outline: 1px dashed rgba(215, 254, 123, 0.3);
}

/* ============================================================
   kb-editing .kb-item.kb-off::before
   ------------------------------------------------------------
   Без kb-compact  ->  content: '';          display: none;
   С kb-compact    ->  content: attr(...);   display: block;
   ============================================================ */

/* 1. По умолчанию (без kb-compact) — псевдоэлемент скрыт и пуст */
.kb-editing .kb-item.kb-off::before {
    content: '';
}

/* 2. Когда включён kb-compact — показываем подпись из data-kb-label */
html.kb-compact .kb-editing .kb-item.kb-off::before,
.kb-editing.kb-compact .kb-item.kb-off::before,
.product-header.kb-compact .kb-item.kb-off::before {
    content: attr(data-kb-label);
}

.kb-editing .kb-item.kb-off::before {
    position: absolute;
    /* Слева снизу: справа сверху теперь кнопки «Редактировать / Скрыть». */
    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0.7;
    outline-offset: 0px;
    pointer-events: none;
    z-index: 7;
}
.kb-editing .kb-item.kb-off::after {
    content: 'скрыт';
    position: absolute;
    /* Слева снизу: справа сверху теперь кнопки «Редактировать / Скрыть». */
    top: 3px;
    left: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #ff9b9b;
    pointer-events: none;
    z-index: 7;
}

.kb-slot-empty {
    display: none;
    border: 1px dashed rgba(255, 255, 255, .18);
    /* border-radius: 8px; */
    padding: 14px;
    text-align: center;
    color: #8b8f98;
    font-size: 12px;
}
.kb-editing .kb-slot-empty { display: block; }

.kb-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #d7fe7b;
    opacity: .8;
    pointer-events: none;
}

/* ---------- Панель редактора ---------- */

.mascot-container-fixed {
    --mascot-bottom: 10px;   /* ваш текущий отступ */
    /* bottom: var(--mascot-bottom); */
}

.mascot-container-fixed.bottom {
    bottom: calc(var(--mascot-bottom) + var(--kb-bar-h, 0px) );
}

.kb-bar {
    display: flex;
    /* position: fixed; */
    gap: 3px;
    margin: 0 auto;
    /* height: max-content; */
    /* min-height: 50px; */
    width: max-content;
    width: 100%;
    bottom: 0px;
    flex-wrap: wrap;
    /* bottom: 0; */
    right: 0;
    left: 0;
    outline: 1px dashed rgba(255, 255, 255, 0.2);
    outline-offset: -1px;
    /* transform: translateY(-50%); */
    /* width: 40px; */
    /* height: 120px; */
    /* transform: rotate(180deg); */
    /* writing-mode: vertical-rl; */
    /* text-orientation: sideways; */
    background: #00000030;
    backdrop-filter: blur(10px);
    /* color: white; */
    font-weight: bold;
    border-left: none !important;
    font-size: 8px;
    padding: 10px;
    /* text-orientation: mixed; */
    display: flex;
    letter-spacing: 2px;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;


    max-width: 1600px;
    width: 100%;
    /* height: 56px; */
    /* margin: 0 auto; */
    position: sticky;
    bottom: 10px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    /* pointer-events: none; */
    transition: all 0;

}
.kb-bar-status{
    display: none;
}

.kb-bar-title { font-size: 12px; font-weight: 700; color: #d7fe7b; margin-right: 4px; }
.kb-bar-status { font-size: 11.5px; color: #8b8f98; }
.kb-bar-status.kb-ok { color: #8ce99a; }
.kb-bar-status.kb-err { color: #ff9b9b; }

.kb-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: #e8ead9;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.kb-btn:hover { background: rgba(255, 255, 255, .1); }
.kb-btn-primary { background: #d7fe7b; border-color: #d7fe7b; color: #0e1505; }
.kb-btn-primary:hover { background: #c6f065; }
.kb-btn-danger { border-color: rgba(255, 120, 120, .5); color: #ffb3b3; }
.kb-btn-danger:hover { background: rgba(255, 90, 90, .15); }
.kb-btn:disabled { opacity: .5; cursor: default; }

/* ---------- Модальное окно ---------- */

.kb-modal-ov {
    position: fixed;
    inset: 0;
    z-index: 2147483400;
    background: rgba(0, 0, 0, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}
.kb-modal {
    width: max-content;
    max-width: 1400px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #0f1015;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    overflow: hidden;
    color: #e8ead9;
}
.kb-modal.kb-w-2xl { max-width: 1080px; }
.kb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.kb-modal-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.kb-modal-x {
    appearance: none;
    border: 0;
    background: transparent;
    color: #8b8f98;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.kb-modal-x:hover { color: #fff; }
.kb-modal-body { 
    padding: 16px; 
    overflow: auto; 
}
.kb-list-zones {
    display: flex;
    gap: 10px;
}

.kb-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.kb-field { margin-bottom: 12px; }
.kb-field > label { display: block; font-size: 11.5px; color: #8b8f98; margin-bottom: 5px; }
.kb-input {
    width: 100%;
    box-sizing: border-box;
    background: #16181f;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #e8ead9;
    font: inherit;
    font-size: 13px;
    padding: 9px 10px;
}
.kb-input:focus { outline: none; border-color: rgba(215, 254, 123, .6); }
textarea.kb-input { resize: vertical; min-height: 90px; }

.kb-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-kind {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #e8ead9;
    font: inherit;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.kb-kind.active { background: #d7fe7b; border-color: #d7fe7b; color: #0e1505; font-weight: 700; }

.kb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .kb-grid-2, .kb-grid-3 { grid-template-columns: 1fr; } }

.kb-img-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: 8px;
    color: #8b8f98;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, .02);
}
.kb-img-drop.drag { border-color: #d7fe7b; color: #d7fe7b; }
.kb-img-prev { max-height: 110px; max-width: 100%; border-radius: 6px; }
.kb-hint { font-size: 11px; color: #8b8f98; margin-top: 5px; }

/* ---------- Rich-редактор (как в мастерской) ---------- */

.kb-rich {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    overflow: hidden;
    background: #12141a;
}
.kb-rich-tb {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .02);
}
.kb-rich-tb button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #e8ead9;
    font: inherit;
    font-size: 12px;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border-radius: 6px;
    cursor: pointer;
}
.kb-rich-tb button:hover { background: rgba(215, 254, 123, .18); border-color: rgba(215, 254, 123, .5); }
.kb-rich-sep { width: 1px; background: rgba(255, 255, 255, .12); margin: 2px 3px; }
.kb-color-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}
.kb-color-btn input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.kb-color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .4); }
.kb-rich-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 760px) { .kb-rich-split { grid-template-columns: 1fr; } }
.kb-rich-ta {
    width: 100%;
    min-height: 260px;
    box-sizing: border-box;
    border: 0;
    background: #0e1015;
    color: #e8ead9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    padding: 11px;
    resize: vertical;
}
.kb-rich-ta:focus { outline: none; }
.kb-rich-pv {
    border-left: 1px solid rgba(255, 255, 255, .1);
    padding: 11px;
    font-size: 13px;
    line-height: 1.6;
    overflow: auto;
    max-height: 420px;
    color: #d8dae0;
}
.kb-rich-pv img, .kb-rich-pv video, .kb-rich-pv iframe { max-width: 100%; }
.kb-rich-pv blockquote { border-left: 3px solid rgba(215, 254, 123, .6); margin: 8px 0; padding: 4px 12px; color: #a9adb8; }
.kb-rich-pv pre { background: #0a0b0f; padding: 10px; border-radius: 6px; overflow: auto; }

/* ---------- Список элементов в редакторе ---------- */

.kb-list { display: flex; flex-direction: column; gap: 6px; }
.kb-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
}
.kb-list-row .kb-list-title { flex: 1; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-list-row .kb-list-zone { font-size: 10.5px; color: #8b8f98; }

/* Скрытый элемент остаётся в списке: помечаем, но не убираем */
.kb-list-row-off { opacity: .6; }
.kb-list-row .kb-list-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 155, 155, .18);
    color: #ff9b9b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kb-mini {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.2);
    color: #e8ead9;
    font: inherit;
    font-size: 10px;
    padding: 0px 5px;
    border: 1px solid #ffffff20;
    backdrop-filter: blur(5px);
    border-radius: 2px;
    cursor: pointer;
}
.kb-mini:hover { background: rgba(255, 255, 255, .12); }
.kb-mini.danger { color: #ffb3b3; border-color: rgba(255, 120, 120, .4); }


/* ==========================================================================
   Верхняя панель, кнопки элементов, компактный режим, переменные
   ========================================================================== */

/*
 * Верхняя панель — третья группа над двумя колонками. Пустая скрывается
 * на сайте; правила приходят из PHP (builder_base_css) и продублированы
 * здесь, чтобы не было мигания до отрисовки подвала.
 */
.kb-zone.kb-zone-empty { display: none; }
.product-table.kb-cols-empty { display: none; }
.kb-editing .product-table.kb-cols-empty { display: block; }

/* В редакторе пустая зона — цель для броска, поэтому она не «схлопывается». */
/* .kb-editing .kb-zone.kb-zone-empty { min-height: 60px; } */

/*
 * Подпись зоны (.kb-zone::before) позиционируется абсолютно, поэтому зоне
 * нужен собственный контекст: без position:relative название секции уезжало
 * к ближайшему позиционированному предку — то есть к самому верху страницы.
 */
.kb-editing .kb-zone { 
    position: relative; 
    padding-top: 0px; 
}

/* Заглушка вместо пустой раскладки: все элементы скрыты. */
.kb-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 24px;
    text-align: center;
    color: #8b8f98;
    font-size: 14px;
    line-height: 1.5;
}
.kb-stub[hidden] { display: none; }

/*
 * Кнопки «Редактировать / Скрыть / Показать» на каждом элементе.
 * Рисует их JS и только в режиме редактора: вне .kb-editing они скрыты,
 * а на публичной странице их в разметке нет вообще.
 */
.kb-item > .kb-tools { display: none; }
.kb-editing .kb-item > .kb-tools {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 8;
    display: flex;
    gap: 4px;
    align-items: center;
}
.kb-editing .kb-item > .kb-badge { top: auto; bottom: 3px; right: 7px; }
.kb-editing .kb-item > .kb-tag { padding-right: 168px; }

/*
 * Компактный режим: каждый элемент превращается в плашку 80px с названием
 * по центру, пустые зоны — в такую же плашку с названием секции.
 * Нужен, когда элементы длинные: тащить их целиком неудобно.
 */
.kb-editing.kb-compact .kb-item,
.kb-compact .kb-item {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: hidden !important;
    background: rgba(215, 254, 123, .07);
}
.kb-compact .kb-item > .kb-body { display: none !important; }
.kb-compact .kb-item > .kb-tag { display: none !important; }
.kb-compact .kb-item > .kb-badge { display: none !important; }
/* В компактном режиме кнопки уводим вниз: сверху по центру название секции. */
.kb-compact .kb-item > .kb-tools { display: flex !important; top: auto; bottom: 2px; }

/* Название секции по центру заглушки элемента */
.kb-compact .kb-item::before {
    content: attr(data-kb-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 84px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #d7fe7b;
    pointer-events: none;
    overflow: hidden;
}

/* Пустая зона в компактном режиме — тоже плашка 80px с названием секции */
.kb-compact .kb-slot-empty {
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}
.kb-compact .kb-slot-empty::after {
    content: attr(data-zone-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #d7fe7b;
}
.kb-compact .kb-zone.kb-zone-empty {
    min-height: 80px;
}

/* ---------- Окно «Переменные» ---------- */

/* Системные переменные: справочник со значениями (только чтение) */
.kb-sysvars {
    margin: 6px 0 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}
.kb-sysvars-head {
    padding: 6px 10px;
    background: rgba(215, 254, 123, .08);
    color: #d7fe7b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kb-sysvar {
    display: grid;
    grid-template-columns: 160px 200px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 5px 10px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 12px;
}
.kb-sysvar-name { color: #d7fe7b; }
.kb-sysvar-val { color: #e8ead9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-sysvar-val i { color: #8b8f98; }
.kb-sysvar-title { color: #8b8f98; font-size: 11px; }
@media (max-width: 700px) { .kb-sysvar { grid-template-columns: 1fr; gap: 2px; } }

/* Своя переменная с именем системной: она перекрывает системное значение */
.kb-var-row.kb-var-shadow { border-color: rgba(215, 254, 123, .45); }

.kb-vars { display: flex; flex-direction: column; gap: 8px; }
.kb-var-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 8px;
    align-items: start;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}
.kb-var-row textarea.kb-input { min-height: 60px; }
.kb-var-row .kb-var-use { grid-column: 1 / -1; margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 700px) { .kb-var-row { grid-template-columns: 1fr; } }

/* ---------- Список элементов ---------- */

.kb-list-zone-wrap { flex: 1; min-width: 0; }
.kb-list-zone-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(215, 254, 123, .75);
    margin: 0 0 6px 4px;
}
.kb-list-empty {
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #8b8f98;
    font-size: 11.5px;
    text-align: center;
}
.kb-list-dragging { opacity: .5; }
.kb-list-drag { cursor: grab; color: #8b8f98; }
.kb-var-use, .kb-hint .mono, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Неразрешённый токен <!имя> в предпросмотре: браузер сам его не покажет,
   поэтому в редакторе подсвечиваем — видно опечатку или пустое значение. */
.kb-var-bad {
    color: #ff9b9b;
    border-bottom: 1px dashed rgba(255, 120, 120, .7);
    cursor: help;
}