/* ============================================================
   МодульДом — тёмная тема для 3D-конструктора.
   Движок и разметка взяты с «Собери дом» (светлый сайт), поэтому
   здесь задаём его переменные в нашей палитре и гасим белые фоны.

   ПРАВИЛО ФАЙЛА (с 14.08.2026): здесь только ЦВЕТА —
   color / background / border-color. Никакой геометрии:
   ни overflow, ни filter, ни opacity, ни transform, ни width/height,
   ни display/order/grid у .ctor-layout, .scene-wrap, #scene, #pivot,
   #house, .palette. Эти свойства в WebKit (Safari на iPhone) рушат
   контекст transform-style: preserve-3d, и дом разъезжается.
   Раскладка страницы живёт в <style> самой /configurator/index.html.
   Дополнение 14.08.2026 (вечер): в конце файла разрешены ОТСТУПЫ
   (margin/padding) и display:none у блоков ВНЕ сцены — они не создают
   нового контекста и для preserve-3d безопасны. Запрет на overflow,
   filter, opacity<1, transform, clip-path, contain, will-change
   у #scene и всех его предков остаётся в силе.
   ============================================================ */
.cfg-page, .cfg-result {
  --ink: #F5F1E8;
  --ink-soft: #A9A296;
  --line: rgba(255, 255, 255, .12);
  --bg-soft: rgba(255, 255, 255, .05);
  --accent: #D6B46A;
  --graphite: #45494E;
  --font-text: inherit;
  --font-display: inherit;
}

/* Карточки и панели: вместо белого — стекло на тёмном.
   .scene-wrap намеренно НЕ трогаем: у движка это прозрачная обёртка сцены. */
.cfg-page .ctl-card,
.cfg-page .palette,
.cfg-page #part-editor,
.cfg-page .estimate {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #E8E3D8;
}
.cfg-page .pal-head h3,
.cfg-page .ctl-label,
.cfg-page .ctl-group > label { color: #A9A296 !important; }

/* Поля ввода размеров */
.cfg-page input[type="number"],
.cfg-page select {
  background: rgba(0, 0, 0, .35) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #F5F1E8 !important;
}
.cfg-page input[type="number"]:focus,
.cfg-page select:focus { border-color: var(--accent) !important; outline: none; }

/* Сегментные переключатели (тип дома, кровля, направление сайдинга) */
.cfg-page .arch-seg { background: rgba(255, 255, 255, .05) !important; }
.cfg-page .arch-btn,
.cfg-page .roof-btn,
.cfg-page .sdir-btn { color: #B9B4A8 !important; }
.cfg-page .arch-btn.active,
.cfg-page .roof-btn.active,
.cfg-page .sdir-btn.active {
  background: var(--accent) !important;
  color: #12100C !important;
  box-shadow: none !important;
}

/* Счётчики окон и кнопки */
.cfg-page .win-step { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .12) !important; }
.cfg-page .win-step button { background: rgba(255, 255, 255, .08) !important; color: #F5F1E8 !important; border-color: transparent !important; }
.cfg-page .win-step output, .cfg-page .ws-label { color: #E8E3D8 !important; }
.cfg-page .snow-toggle { color: #B9B4A8 !important; }

/* Панель образцов */
.cfg-page #pal-tabs button { background: rgba(255, 255, 255, .05) !important; color: #B9B4A8 !important; border-color: rgba(255, 255, 255, .12) !important; }
.cfg-page #pal-tabs button[aria-selected="true"], .cfg-page #pal-tabs button.active {
  background: var(--accent) !important; color: #12100C !important; border-color: var(--accent) !important;
}
.cfg-page .pal-group-head, .cfg-page .pal-cat { color: #A9A296 !important; }
.cfg-page .sw, .cfg-page .pal-sw { border-color: rgba(255, 255, 255, .16) !important; }
.cfg-page .sw-name, .cfg-page .pal-name { color: #C9C3B6 !important; }

/* Зоны дома / легенда выбранных материалов */
.cfg-page .zones, .cfg-page .zone-row, .cfg-page .legend, .cfg-page .lg-row {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #E8E3D8 !important;
}
.cfg-page .zone-name, .cfg-page .lg-name { color: #F5F1E8 !important; }
.cfg-page .zone-mat, .cfg-page .lg-mat { color: #A9A296 !important; }

/* Подсказки под сценой */
.cfg-page .scene-note, .cfg-page .ctl-note, .cfg-page .scene-tip, .cfg-page #scene-hint { color: #9C958A !important; }

/* Небо в сцене оставляем светлым — это «улица», так дом читается лучше.
   Меняем только цвет рамки, ничего больше. */
.cfg-page #scene { border-color: rgba(255, 255, 255, .12) !important; }

/* Кнопки зума и режима дня/ночи */
.cfg-page .zoom-btn, .cfg-page .mode-btn {
  background: rgba(0, 0, 0, .45) !important;
  color: #F5F1E8 !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
.cfg-page .mode-btn.active { background: var(--accent) !important; color: #12100C !important; }

/* Редактор окна/двери поверх сцены — только цвета */
.cfg-page #part-editor { background: rgba(14, 13, 10, .97) !important; border-color: rgba(214, 180, 106, .45) !important; color: #F5F1E8 !important; }
.cfg-page #part-editor h4 { color: #F5F1E8 !important; }
.cfg-page #part-editor label, .cfg-page #part-editor .pe-label, .cfg-page #part-editor p,
.cfg-page #part-editor span, .cfg-page #pe-hint, .cfg-page #pe-size { color: #C9C3B6 !important; }
.cfg-page #part-editor input, .cfg-page #part-editor select, .cfg-page #pe-product {
  background: rgba(0, 0, 0, .5) !important; color: #F5F1E8 !important; border-color: rgba(255, 255, 255, .2) !important;
}
.cfg-page .pe-seg button, .cfg-page #part-editor .pe-seg button { background: rgba(255, 255, 255, .08) !important; color: #D8D2C6 !important; }
.cfg-page .pe-seg button.active, .cfg-page .pe-seg button[aria-pressed="true"] { background: var(--accent) !important; color: #12100C !important; }
.cfg-page #pe-close { background: rgba(255, 255, 255, .12) !important; color: #F5F1E8 !important; }

/* Прочие светлые блоки движка, которые не попали в первый проход */
.cfg-page .alt-btn, .cfg-page .method, .cfg-page .method-note,
.cfg-page .qty-in, .cfg-page .extra-in, .cfg-page .extra-del, .cfg-page .pal-tab,
.cfg-page .dim-field input {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #F5F1E8 !important;
}

/* Весь текст внутри конструктора — светлый */
.cfg-page .ctor-layout { color: #E8E3D8 !important; }
.cfg-page .ctor-layout h1, .cfg-page .ctor-layout h2, .cfg-page .ctor-layout h3,
.cfg-page .ctor-layout h4, .cfg-page .ctor-layout p, .cfg-page .ctor-layout span,
.cfg-page .ctor-layout b, .cfg-page .ctor-layout strong, .cfg-page .ctor-layout small,
.cfg-page .ctor-layout label, .cfg-page .ctor-layout td, .cfg-page .ctor-layout th,
.cfg-page .ctor-layout li, .cfg-page .ctor-layout output, .cfg-page .ctor-layout summary {
  color: inherit !important;
}
.cfg-page .ctor-layout .lg-name { color: #F5F1E8 !important; }
.cfg-page .ctor-layout .lg-mat { color: #B9B4A8 !important; }
/* Наличие на складе — зелёная метка остаётся акцентом */
.cfg-page .ctor-layout .in-stock, .cfg-page .ctor-layout .stock-ok { color: #6FCF97 !important; }

/* ============================================================
   1. Плотность на телефоне. Между блоком «Проект/Размер» и заголовком
   «ШАГ 3 · Фасад и кровля» было ~200 px пустоты: padding секций
   80 px снизу + 80 px сверху + inline margin-top:34px у #ctor.
   Правим только отступы — геометрии сцены это не касается.
   ============================================================ */
@media (max-width: 720px) {
  .cfg-page > section:first-of-type { padding-top: 8px; padding-bottom: 12px; }
  .cfg-page #ctor { padding-top: 0; margin-top: 12px !important; }
}

/* ============================================================
   2. Свёрнутые группы материалов. Заголовок категории (.pal-cat)
   становится кнопкой, сетка образцов (.pal-grid) прячется классом
   .closed. Поведение навешивает configurator-page.js после sd:ready.
   ============================================================ */
.cfg-page .pal-cat.pal-fold {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  padding: 9px 0;
  margin: 2px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.cfg-page .pal-pane .pal-cat.pal-fold:first-child { border-top: 0; }
.cfg-page .pal-cat.pal-fold em { flex: 0 1 auto; }
.cfg-page .pal-cat .pal-count {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  white-space: nowrap;
  color: #8C8578;
}
.cfg-page .pal-cat .pal-chev {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  color: #D6B46A;
  width: 12px;
  text-align: center;
}
.cfg-page .pal-cat.pal-fold .pal-chev::after { content: '\25BE'; }
.cfg-page .pal-cat.pal-fold.closed .pal-chev::after { content: '\25B8'; }
.cfg-page .pal-cat.pal-fold.closed { color: #A9A296; }
.cfg-page .pal-grid.closed { display: none !important; }

/* На узком экране заголовок группы ломается на две строки:
   «Название … N цветов ▾» и подзаголовок бренда снизу.
   order здесь безопасен: .palette не предок #scene. */
@media (max-width: 980px) { /* pal-fold-wrap */
  .cfg-page .pal-cat.pal-fold { flex-wrap: wrap; row-gap: 2px; }
  .cfg-page .pal-cat.pal-fold > span { flex: 1 1 auto; order: 1; }
  .cfg-page .pal-cat.pal-fold .pal-count { order: 2; }
  .cfg-page .pal-cat.pal-fold .pal-chev { order: 3; }
  .cfg-page .pal-cat.pal-fold > em { flex: 1 1 100%; order: 4; }
}