/* ============================================================
   ПОТОЛКИ42 — дизайн-система (светлая тема)
   base.css: токены, reset, типографика, кнопки, формы, утилиты
   ============================================================ */

:root {
  /* Палитра — светлые тона. Редактируется в админке (/api/admin →
     «Цветовая гамма сайта») → сохраняется в config.json → сайт применяет
     через GET /api/theme (js/theme.js). RGB-триплеты нужны для rgba()
     теней/подсветок, чтобы они следовали за выбранными цветами. */
  --bg: #F4F8F7;
  --bg-2: #ECF4F2;
  --bg-3: #E2EEEB;
  --surface: #FFFFFF;
  --surface-2: #FBFDFC;
  /* RGB-триплеты светлых фонов: полупрозрачные подложки шапки и
     мобильного меню следуют гамме (rgba(var(--bg-rgb), …)) */
  --bg-rgb: 244, 248, 247;
  --surface-rgb: 255, 255, 255;

  --ink: #0D2B2E;
  --ink-2: #33504F;
  --muted: #64807F;
  --faint: #8AA3A1;
  --ink-rgb: 13, 43, 46;

  --brand: #0FA48C;
  --brand-deep: #0B7E6C;
  --brand-ink: #085F52;
  --brand-soft: #DFF3EE;
  --cyan: #0FA5C9;
  --cyan-soft: #E0F3F8;
  --brand-rgb: 15, 164, 140;

  --accent: #F5A524;
  --accent-deep: #DE8F0A;
  --accent-soft: #FDF1DC;
  --accent-rgb: 245, 165, 36;

  --coral: #F0704A;

  --line: #DEE9E6;
  --line-2: #CFE0DC;

  /* Градиенты выводятся из основных цветов — при смене темы меняются вместе с ней.
     --ink-grad-end — тёмная секция (подвал, смета, бегущая строка): подмешивает
     брендовый цвет, вычисляется в js/theme.js из ink+brand. */
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--cyan) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--coral) 100%);
  --grad-ink: linear-gradient(160deg, var(--ink) 0%, var(--ink-grad-end, #14454A) 100%);

  /* Производные тона для тёмных секций и мягких фонов. Значения ниже —
     стандартная палитра; при кастомной гамме js/theme.js пересчитывает их
     из основных цветов, поэтому тёмные блоки следуют за темой. */
  --ink-grad-end: #14454A;
  --hero-tint: #EAF6F3;
  --on-dark: #7FE0C8;          /* яркий акцент на тёмном (иконки, ссылки) */
  --on-dark-2: #9FE8D8;
  --on-dark-rgb: 127, 224, 200;
  --on-dark-text: #E9F5F1;     /* основной текст на тёмном */
  --on-dark-text-dim: #CFE8E2; /* приглушённый текст на тёмном */
  --accent-on-dark: #FFD58A;   /* тёплый акцент на тёмном (цены) */
  --on-dark-error: #FFB4A1;    /* ошибка на тёмном */
  --cyan-ink: #0B7C99;         /* тёмный циан для текста на cyan-soft */

  /* Тени */
  --sh-sm: 0 2px 10px rgba(var(--ink-rgb), .06);
  --sh-md: 0 10px 30px -8px rgba(var(--ink-rgb), .12);
  --sh-lg: 0 24px 60px -16px rgba(var(--ink-rgb), .18);
  --sh-brand: 0 12px 28px -10px rgba(var(--brand-rgb), .45);
  --sh-accent: 0 12px 28px -10px rgba(var(--accent-rgb), .5);

  /* Радиусы */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Шрифты */
  --f-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Сетка */
  --container: 1200px;
  --gutter: 20px;
  --mbar-h: 62px;   /* высота мобильной нижней панели (для оффсетов cookie/to-top) */
  --sec-pad: clamp(64px, 9vw, 112px);

  --tr: .25s cubic-bezier(.4, 0, .2, 1);
  --tr-slow: .5s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Жёсткое клипование горизонтального overflow: 'clip' не создаёт
     скролл-контейнер, работает в Chrome/Firefox/Safari.
     Fallback для старых браузеров — hidden. */
  overflow-x: clip;
  overflow-y: visible;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-y: visible;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.18; text-wrap: balance; }
::selection { background: rgba(var(--brand-rgb), .22); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2, #B9CFCA); border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--faint, #9DBBB5); }

:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Утилиты ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Grid-колонки не должны расширяться контентом (картинки, nowrap-строки):
   автоматический min-width: auto заменяем на 0 у всех прямых детей сеток */
.hero__grid > *, .viz__grid > *, .estimate__grid > *, .calc__grid > *,
.contact__grid > *, .check-strip > *, .branches > *, .footer__main > *,
.vs > * { min-width: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-accent { color: var(--accent-deep); }
.nowrap { white-space: nowrap; }

.section { padding-block: var(--sec-pad); position: relative; }
.section--tint { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.section--white { background: var(--surface); }

/* Заголовок секции */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-soft);
  padding: 8px 16px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.eyebrow svg { width: 15px; height: 15px; }
.section-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.section-sub { margin-top: 14px; color: var(--muted); font-size: 18px; }

/* ---------- Кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; line-height: 1;
  padding: 17px 28px; border-radius: var(--r-pill);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr);
  overflow: hidden; user-select: none; white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  color: #fff;
  background: var(--grad-brand);
  background-size: 150% 150%;
  box-shadow: var(--sh-brand);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(var(--brand-rgb), .55); }

.btn--accent {
  color: #3A2503;
  background: var(--grad-accent);
  box-shadow: var(--sh-accent);
}
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(var(--accent-rgb), .6); }

.btn--ghost {
  color: var(--brand-ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--sh-sm);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand), var(--sh-md); transform: translateY(-2px); }

.btn--dark { color: #fff; background: var(--grad-ink); }
.btn--dark:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

.btn--lg { padding: 20px 34px; font-size: 17px; }
.btn--sm { padding: 12px 20px; font-size: 14.5px; }

/* Эффект «блика» при наведении */
.btn--shine::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn--shine:hover::after { left: 130%; }

.btn[disabled] { opacity: .65; pointer-events: none; }
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading svg:not(.btn__spinner) { opacity: 0; }
.btn .btn__spinner {
  position: absolute; width: 22px; height: 22px; opacity: 0; pointer-events: none;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Чипы и бейджи ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 9px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-sm);
}
.chip svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
/* .chip--ok: галочка следует гамме (var(--brand) от .chip svg) —
   жёсткий зелёный #16A34A убран: он не перекрашивался пресетами */

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.field__label .req { color: var(--coral); }
.input, .textarea, .select {
  width: 100%; background: var(--surface);
  border: 1.5px solid var(--line-2); border-radius: 14px;
  padding: 14px 18px; font-size: 16px; color: var(--ink);
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
  appearance: none;
}
.textarea { min-height: 104px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14);
}
.field.is-error .input, .field.is-error .textarea { border-color: var(--coral); }
.field__error { font-size: 13px; color: var(--coral); font-weight: 600; display: none; }
.field.is-error .field__error { display: block; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* Внутри кастомного селекта свой SVG-шеврон — старый не нужен */
.select-wrap.has-p42sel::after { display: none; }

.checkbox { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.checkbox input {
  appearance: none; flex: none; width: 21px; height: 21px; margin-top: 1px;
  border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--surface);
  transition: background var(--tr), border-color var(--tr), box-shadow var(--tr); cursor: pointer;
}
/* SVG-галочка вместо clip-path — чёткая на любом масштабе */
.checkbox input:checked {
  background: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.checkbox input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .18); border-color: var(--brand); }
.checkbox:hover input:not(:checked) { border-color: var(--brand); }

/* ---------- Кастомный селект (p42sel) ----------
   Нативный select скрыт внутри .p42sel и синхронизируется:
   value + событие change работают как раньше. */
.p42sel { position: relative; }
.p42sel__native {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0;
}
.p42sel__trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px;
  padding: 14px 18px; font-size: 16px; color: var(--ink); font-family: inherit;
  cursor: pointer; text-align: left; transition: border-color var(--tr), box-shadow var(--tr);
}
.p42sel__trigger:hover { border-color: var(--brand); }
.p42sel__trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14); }
.p42sel.is-open .p42sel__trigger { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14); }
.p42sel__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p42sel__value.is-placeholder { color: var(--faint); }
.p42sel__chevron { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform var(--tr); }
.p42sel.is-open .p42sel__chevron { transform: rotate(180deg); color: var(--brand); }

.p42sel__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 80;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
  padding: 6px; margin: 0; max-height: 280px; overflow-y: auto;
  animation: p42sel-in .16s ease;
  overscroll-behavior: contain;
  /* Список не уже триггера, но и не зажат его шириной: растёт по контенту,
     чтобы опции не сворачивались в столбик в узких колонках */
  min-width: 100%; width: max-content; max-width: min(440px, calc(100vw - 20px));
  scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .22) transparent;
}
.p42sel__list::-webkit-scrollbar { width: 9px; }
.p42sel__list::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 8px; border: 2px solid #fff; }
.p42sel__list::-webkit-scrollbar-track { background: transparent; }
/* --up: только направление анимации — координаты ставит select.js (fixed-портал) */
.p42sel__list--up { animation-name: p42sel-in-up; }
@keyframes p42sel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes p42sel-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.p42sel__opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 11px;
  padding: 11px 13px; font-size: 15.5px; font-family: inherit; color: var(--ink);
  cursor: pointer; text-align: left; transition: background var(--tr);
}
.p42sel__opt span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p42sel__opt:hover, .p42sel__opt.is-active { background: rgba(var(--brand-rgb), .09); }
.p42sel__opt.is-selected { color: var(--brand-deep); font-weight: 700; background: rgba(var(--brand-rgb), .1); }
.p42sel__check { flex: none; width: 17px; height: 17px; color: var(--brand); opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.p42sel__opt.is-selected .p42sel__check { opacity: 1; transform: scale(1); }

@media (max-width: 640px) {
  .p42sel__list { max-height: min(56vh, 340px); border-radius: 14px; }
  .p42sel__opt { padding: 13px 14px; font-size: 16px; } /* крупнее — под палец */
}

/* ---------- Согласие / мелкий текст ---------- */
.fineprint { font-size: 13px; color: var(--faint); line-height: 1.5; }

/* ---------- Анимация успеха (галочка) ---------- */
.success-check { width: 74px; height: 74px; margin-inline: auto; }
.success-check circle {
  fill: none; stroke: var(--brand); stroke-width: 3;
  stroke-dasharray: 214; stroke-dashoffset: 214;
  animation: check-draw .7s ease forwards;
}
.success-check path {
  fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: check-draw .45s ease .45s forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }

.form-success { text-align: center; padding: 30px 10px; animation: popIn .35s ease; }
.form-success__title { font-family: var(--f-display); font-size: 21px; margin-top: 18px; }
.form-success__text { color: var(--muted); margin-top: 10px; font-size: 15.5px; }
@keyframes popIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---------- Адаптив базовый ---------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .section-sub { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .btn { width: 100%; }
  .btn--sm { width: auto; }
}
@media (max-width: 480px) {
  .result__total { font-size: 22px; }
  .result__row span { overflow-wrap: anywhere; }
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* На телефонах контентная колонка прижата к краям экрана: отступ 8px
   вместо 20px (просьба владельца) — контент крупнее, вёрстка не «гуляет» */
@media (max-width: 640px) {
  :root { --gutter: 8px; }
}