/* ============================================================================
 * Стили блоков страницы услуги (tpl-usluga). Грузится УСЛОВНО (functions.php).
 * glavnaya.css скоупит .okna-wrap под .glavnaya-v4 → на услуге его нет, поэтому
 * контейнер .okna-wrap задаём здесь сами. Цвета — только токены design.css.
 * Неймспейс блока B2B-автопарков: .okna-fc (fleet-contract).
 * ========================================================================== */

/* контент в колонке услуги (1080) — единообразно с соседними блоками (на услуге .glavnaya-v4 нет → правило локально) */
.okna-fc .okna-wrap{ max-width:calc(var(--okna-cw) + 80px); margin:0 auto; padding:0 40px; }

.okna-fc{ padding:72px 0; background:var(--ink); border-radius:0; }   /* фирменный тёмно-синий, во всю ширину (см. breakout) */
/* FULL-BLEED: вырыв синей секции из колонки .okna-usluga(1080) на всю ширину вьюпорта — как gv-dark на главной.
   Защищённый вариант (как .okna-uhero, design.css): width:auto + ПАРНЫЕ отрицательные margin (без 100vw → верт.
   скроллбар не добавляет ширины, нет гор.скролла). body{overflow-x:clip} (design.css:80) — общий guard.
   Специфичность (0,3,2) scoped на tpl-usluga — перебить style.css `.okna-usluga section{margin:34px 0}` (0,1,1),
   иначе margin-left обнуляется. Вертикальные margin (34px) от style.css не трогаем — задаём только left/right. */
body.page-template-tpl-usluga .okna-usluga > section.okna-fc{
  width:auto; max-width:none;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  /* верхний воздух: style.css:19 `.okna-usluga section{padding-top:8px}` (0,1,1) перебивал .okna-fc{padding:72px 0}
     → сверху было всего 8px. Задаём здесь (0,3,2) — заголовок дышит, низ оставляем 72px. */
  padding-top:72px; padding-bottom:72px;   /* верх = низ (симметрично) */
}
.okna-fc__ic{ width:22px; height:22px; display:block; }

/* заголовок + красная декор-чёрточка (НЕ кнопка) + лид */
.okna-fc__title{ margin:0; color:#fff; font-size:38px; font-weight:800; line-height:1.15; letter-spacing:-.01em; text-transform:none; }
.okna-fc__accent{ display:block; width:58px; height:3px; margin-top:14px; background:var(--red); border-radius:999px; }
.okna-fc__lead{ max-width:920px; margin-top:22px; color:var(--muted-d); font-size:18px; line-height:1.55; }   /* приглушённый на тёмном */

/* основной грид: оффер (~58%) + форматы (~42%) */
.okna-fc__main{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:24px; margin-top:34px; align-items:start; }
/* карточки — светлые поверх синего фона: рамка прозрачная, отрыв тенью */
.okna-fc__card{ border:1px solid transparent; border-radius:20px; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.okna-fc__card-title{ margin:0 0 10px; color:var(--ink); font-size:21px; font-weight:800; line-height:1.25; }
.okna-fc__card-txt{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }

/* оффер: лёгкий градиент + полупрозрачный декор-фон справа-снизу (под текстом) */
.okna-fc__offer{ padding:34px; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--blue-soft) 0%,#fff 100%); }
.okna-fc__offer-body{ position:relative; z-index:1; }
.okna-fc__offer::after{ content:""; position:absolute; right:18px; bottom:14px; width:330px; height:186px;
  background:url("img/sections/fleet-contract-bg.webp") center/contain no-repeat; opacity:.20; pointer-events:none; }
.okna-fc__checklist{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.okna-fc__checklist li{ display:flex; align-items:flex-start; gap:10px; color:var(--ink); font-size:15px; font-weight:600; line-height:1.35; }
.okna-fc__check{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); }
.okna-fc__check .okna-fc__ic{ width:16px; height:16px; }

/* форматы работы — строки иконка+текст с разделителями */
.okna-fc__formats{ padding:28px; }
.okna-fc__formats-list{ list-style:none; margin:18px 0 0; padding:0; }
.okna-fc__format{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.okna-fc__format:first-child{ border-top:0; padding-top:0; }
.okna-fc__format-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); }
.okna-fc__format-title{ margin:0 0 4px; color:var(--ink); font-size:16px; font-weight:800; line-height:1.25; }
.okna-fc__format-txt{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* 6 преимуществ (3×2): иконка+заголовок в ряд, текст под ними */
.okna-fc__benefits{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.okna-fc__benefit{ display:flex; flex-direction:column; gap:10px; padding:22px; border:1px solid transparent; border-radius:16px; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
/* шапка карточки: иконка СЛЕВА + заголовок в одну строку (центр по вертикали); описание — ниже на всю ширину */
.okna-fc__benefit-head{ display:flex; align-items:center; gap:12px; }
.okna-fc__benefit-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); }
.okna-fc__benefit-title{ margin:0; color:var(--ink); font-size:16px; font-weight:800; line-height:1.25; }
.okna-fc__benefit-txt{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* нижняя CTA-плашка — светло-голубая карточка поверх синего: текст тёмный, кнопки (синяя + белый аутлайн)
   контрастны фону плашки (var(--blue-soft) ≠ синяя кнопка ≠ белая аутлайн-кнопка) */
.okna-fc__cta{ margin-top:24px; padding:28px 34px; border:1px solid transparent; border-radius:18px;
  background:var(--blue-soft); box-shadow:0 18px 40px rgba(0,0,0,.18); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.okna-fc__cta-title{ margin:0 0 8px; color:var(--ink); font-size:22px; font-weight:800; line-height:1.25; }
.okna-fc__cta-txt{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; max-width:640px; }
.okna-fc__cta-actions{ display:flex; flex-direction:column; gap:12px; }

/* кнопки — геометрия (обе СИНИЕ, правило одного красного CTA: красный только в hero).
   ЦВЕТ кнопок задаёт единая система design.css по классам .okna-btn (заливка) / .okna-btn.secondary (аутлайн):
   её правила button.okna-btn:not(.secondary) имеют специфичность (0,3,1) с !important и перебивают локальный фон,
   поэтому вторичную кнопку делаем штатным классом .secondary, а тут оставляем только геометрию. */
.okna-fc .fc__btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; }

/* поле «автопарк» в модалке (textarea формы автопарка) — на услуге базовые правила модалки глобальны */
.okna-modal__box .wpcf7 textarea{ width:100%; margin-top:6px; min-height:64px; resize:vertical; font-family:inherit; }
/* сабмит модалки автопарка — СИНИЙ (правило одного красного CTA на услуге: красный только в hero).
   design.css ".wpcf7 input[type=submit]"=(0,2,1)!important → перебиваем (0,3,1): добавляем предка .okna-modal__box. */
.okna-modal__box .wpcf7 input[type=submit],
.okna-modal__box .wpcf7-submit{ background:var(--blue) !important; border:1px solid var(--blue) !important; color:#fff !important; border-radius:10px !important; }
.okna-modal__box .wpcf7 input[type=submit]:hover,
.okna-modal__box .wpcf7-submit:hover{ background:#1448aa !important; border-color:#1448aa !important; }
/* попап picker (консультация/расчёт): показ одной формы по data-intent; базовые стили .okna-modal — глобальны */
.okna-pm__pane[hidden]{ display:none; }
.okna-pm .okna-pm__title{ margin:0 0 6px; }
.okna-pm .okna-pm__sub{ margin:0 0 14px; }
.okna-pm .wpcf7 p{ margin:0 0 12px; }

/* picker на услуге — тёмно-синий баннер: обе кнопки читаемы, БЕЗ красного (красный CTA только в hero).
   Цвета .okna-pick__btn--red/--ghost заданы в glavnaya.css под .glavnaya-v4 → на услуге не действуют;
   задаём для контекста tpl-usluga (0,2,1)+!important — перебить glavnaya/ТТ1. Открытие попапов не трогаем.
   Иконки — stroke:currentColor → наследуют белый цвет текста. */
body.page-template-tpl-usluga .okna-pick__btn--red{ background:var(--blue,#1c5bd6) !important; color:#fff !important; border-color:var(--blue,#1c5bd6) !important; }
body.page-template-tpl-usluga .okna-pick__btn--red:hover,
body.page-template-tpl-usluga .okna-pick__btn--red:focus{ background:#1448aa !important; border-color:#1448aa !important; color:#fff !important; }
body.page-template-tpl-usluga .okna-pick__btn--ghost{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.75) !important; }
body.page-template-tpl-usluga .okna-pick__btn--ghost:hover,
body.page-template-tpl-usluga .okna-pick__btn--ghost:focus{ background:rgba(255,255,255,.14) !important; color:#fff !important; border-color:#fff !important; }

@media (max-width:1024px){
  .okna-fc__main{ grid-template-columns:1fr; }
  .okna-fc__benefits{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .okna-fc__cta{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .okna-fc{ padding:48px 0; }
  /* мобайл: верхний воздух меньше десктопного, но заголовок не липнет к краю (спец. 0,3,2 бьёт style.css 8px и десктоп-правило) */
  body.page-template-tpl-usluga .okna-usluga > section.okna-fc{ padding-top:48px; padding-bottom:48px; }
  .okna-fc .okna-wrap{ padding:0 20px; }
  .okna-fc__title{ font-size:30px; }
  .okna-fc__lead{ font-size:16px; }
  .okna-fc__offer,.okna-fc__formats,.okna-fc__cta{ padding:22px; }
  .okna-fc__benefits{ grid-template-columns:1fr; }
  .okna-fc__offer::after{ display:none; }            /* фон-декор на мобиле скрыть */
  .okna-fc__cta .fc__btn{ width:100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ★ 2026-08-05 · МАКЕТ 15 — ДОВОДКА ПОД ЭТАЛОН «15 Услуга (Замена лобового).dc.html»
   (десктоп 1440). Снят запрет владельца на услуги. Перебиваем старые значения
   специфичностью: все правила здесь scoped под body.page-template-tpl-usluga.
   ============================================================================ */

/* --- PICKER: красная кнопка (макет 15: «Получить консультацию» = #e0223a, r8) --- */
body.page-template-tpl-usluga .okna-pick__btn--red{
  background:var(--red,#e0223a) !important;
  color:#fff !important;
  border-color:var(--red,#e0223a) !important;
}
body.page-template-tpl-usluga .okna-pick__btn--red:hover,
body.page-template-tpl-usluga .okna-pick__btn--red:focus{ background:#c81a30 !important; border-color:#c81a30 !important; color:#fff !important; }
body.page-template-tpl-usluga .okna-pick__btn--ghost{ border-color:rgba(255,255,255,.5) !important; }

/* --- B2B: градиент фона, красные CTA, белый оффер с фото автобуса --- */
body.page-template-tpl-usluga .okna-usluga > section.okna-fc{
  background:linear-gradient(165deg,#16386e 0%,#0f2a54 100%);
}
html body.page-template-tpl-usluga .okna-usluga .okna-fc__title{ font-size:34px !important; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc__accent{ width:44px; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc__lead{ font-size:16.5px; color:#c2cfe6; }

/* оффер: белая карточка + фото автобуса справа-снизу (макет: podbor-bus-bg, scaleX(-1)) */
html body.page-template-tpl-usluga .okna-usluga .okna-fc__offer{
  background:#fff;
  padding:28px 32px;
}
html body.page-template-tpl-usluga .okna-usluga .okna-fc__offer::after{
  background:url("img/cta/picker-cta-bus-bg.webp") center/contain no-repeat;
  opacity:.9; transform:scaleX(-1); right:-24px; bottom:0; width:56%; height:100%;
}
html body.page-template-tpl-usluga .okna-usluga .okna-fc__card-title{ font-size:19px; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc__card-txt{ font-size:14.5px; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc__format-ic{ width:44px; height:44px; border-radius:12px; }

/* CTA-карта: полупрозрачная на тёмном, красная + ghost кнопки h50 r8 */
html body.page-template-tpl-usluga .okna-usluga .okna-fc__cta{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px !important;
  padding:32px 36px;
}
html body.page-template-tpl-usluga .okna-usluga .okna-fc__cta-title{ color:#fff; font-size:22px; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc__cta-txt{ color:#c2cfe6; font-size:15px; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc .fc__btn{
  height:50px; min-height:50px; border-radius:8px !important; font-size:15.5px; padding:0 28px;
}
html body.page-template-tpl-usluga .okna-usluga .okna-fc .fc__btn:first-child{ background:var(--red,#e0223a) !important; border-color:var(--red,#e0223a) !important; color:#fff !important; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc .fc__btn:first-child:hover{ background:#c81a30 !important; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc .fc__btn.fc__btn--ghost,
html body.page-template-tpl-usluga .okna-usluga .okna-fc button.secondary.fc__btn{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.55) !important; }
html body.page-template-tpl-usluga .okna-usluga .okna-fc .fc__btn.fc__btn--ghost:hover,
html body.page-template-tpl-usluga .okna-usluga .okna-fc button.secondary.fc__btn:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; color:#fff !important; }

/* мобильный B2B — тёмная карточка #12161f (макет мобайл): скрыть подблоки десктопа, 3 красные галочки */
html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-wrap{ display:none; }
@media (max-width:768px){
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__main,
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__benefits,
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__cta{ display:none; }
  html body.page-template-tpl-usluga .okna-usluga section.okna-fc .okna-wrap{ display:block; }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__title{ font-size:20px; color:#fff; }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__accent{ width:40px; background:var(--red); }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__lead{ display:none; }
  /* мобильный набор: 3 пункта с красными галочками + кнопка (разметку добавляет блок, классы .okna-fc__m-list/.okna-fc__m-btn) */
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-wrap{
    background:#12161f; border-radius:16px; padding:22px 18px;
  }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-list{
    list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px;
  }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-list li{
    display:flex; gap:10px; align-items:flex-start; color:#dbe2ee; font-size:13.5px; line-height:1.4;
  }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-list li svg{ flex:0 0 auto; margin-top:1px; }
  html body.page-template-tpl-usluga .okna-usluga .okna-fc__m-btn{
    width:100%; min-height:48px; border-radius:4px; background:var(--red,#e0223a) !important;
    border:none !important; color:#fff !important; font-size:15px; font-weight:700; cursor:pointer;
  }
}