/* =========================================================================
   Glass 2026 — слой оформления поверх существующих стилей.
   Не меняет разметку и логику: только типографика, палитра и стекло.
   Отключается удалением <link> в index.html.
   ========================================================================= */

/* ---------- шрифты ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/unbounded-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/unbounded-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}

:root{
  --g-blue:#155eef;
  --g-blue-deep:#0b3b91;
  --g-ink:#111827;
  --g-muted:#5b6f88;
  --g-line:#c7d4e6;
}

/* ---------- типографика ---------- */
body,
body button,
body input,
body select,
body textarea{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important}

/* Unbounded шире Manrope — размеры пересчитаны, иначе строки разъезжаются */
body .hero-copy h1{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(32px,3.9vw,54px) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em !important;
}
html body .service-page .content-section h2,
html body .service-page .process-section .section-head h2,
html body .service-page .prep-copy h2,
html body .service-page .final-cta h2,
html body .main-band.service-page h2{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(24px,2.4vw,34px) !important;
  line-height:1.2 !important;
  letter-spacing:-.03em !important;
}
/* баннер: заголовок был зажат в 560px и ломался на три строки */
html body .service-page .final-cta h2{max-width:none !important}
html body .booking-panel h2{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(17px,1.4vw,20px) !important;
  line-height:1.28 !important;
  letter-spacing:-.025em !important;
}
html body .service-page .content-section h3,
html body .service-page .info-card h3,
html body .service-page .prep-copy h3{
  font-family:Inter,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
}
html body .service-page .section-kicker{
  font-size:11px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:#7089a5 !important;
  font-weight:500 !important;
}
body .hero-lead{font-weight:400 !important;line-height:1.62 !important}

/* ---------- первый экран ---------- */
body .hero{
  background:
    linear-gradient(90deg, rgba(6,15,31,.60) 0%, rgba(6,15,31,.44) 36%, rgba(6,15,31,.18) 70%, rgba(6,15,31,.05) 100%),
    url("/design-previews/service-checkout-final/assets/hero-station-2026.jpg") center top / cover no-repeat !important;
  background-color:#0a1220 !important;
}
@media (min-width:761px){
  body .hero{
    background-attachment:scroll, fixed !important;
    background-position:center top, center center !important;
    background-size:auto, cover !important;
  }
}

/* ---------- панель записи ---------- */
body .booking-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 52%, rgba(255,255,255,.66) 100%) !important;
  backdrop-filter:blur(22px) saturate(185%);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.92) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 26px 60px rgba(9,17,32,.42), inset 0 1px 0 rgba(255,255,255,1), inset 0 -18px 34px rgba(255,255,255,.3) !important;
}
body .stepper{
  background:rgba(234,241,248,.46) !important;
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
  overflow:hidden;
}
body .stepper .step{font-weight:500 !important;color:#5b6f88 !important}
body .stepper .step.active{color:var(--g-blue) !important}

/* поля и триггеры списков */
body .city-combobox-trigger,
body .category-combobox-trigger,
body .station-combobox-trigger,
body .date-combobox-trigger,
body .booking-panel input,
body .booking-panel select,
body .booking-panel textarea{
  background:rgba(255,255,255,.97) !important;
  border:1px solid var(--g-line) !important;
  border-radius:var(--r-md) !important;
  font-weight:500 !important;
  color:var(--g-ink) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}
body .city-combobox-trigger:hover,
body .category-combobox-trigger:hover,
body .station-combobox-trigger:hover,
body .date-combobox-trigger:hover,
body .booking-panel input:hover{border-color:#93c5fd !important}
body .booking-panel input:focus,
body .city-combobox-trigger:focus,
body .category-combobox-trigger:focus,
body .station-combobox-trigger:focus,
body .date-combobox-trigger:focus{
  border-color:var(--g-blue) !important;
  box-shadow:0 0 0 3px rgba(21,94,239,.14) !important;
  outline:none !important;
}
body .city-combobox-menu,
body .category-combobox-menu,
body .station-combobox-menu,
body .date-combobox-menu{
  border-radius:var(--r-lg) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 100%) !important;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 18px 44px rgba(9,17,32,.32), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* слоты времени */
body .slot-grid button{
  border-radius:var(--r-md) !important;
  font-size:14.5px !important;
  font-weight:500 !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--g-line) !important;
  color:#243043 !important;
}
body .slot-grid button:hover{border-color:#93c5fd !important;background:#fff !important}
body .slot-grid button.active,
body .slot-grid button.selected,
body .slot-grid button[aria-pressed="true"]{
  background:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  border-color:transparent !important;color:#fff !important;
  box-shadow:0 8px 18px rgba(21,94,239,.34), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* кнопки */
body .primary,
body .primary-btn,
body .wizard-actions .primary{
  background:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  border:0 !important;border-radius:12px !important;color:#fff !important;font-weight:500 !important;
  box-shadow:0 10px 26px rgba(21,94,239,.4), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition:transform .16s, box-shadow .16s !important;
}
body .primary:hover,body .primary-btn:hover{transform:translateY(-1px)}
body .secondary,
body .secondary-btn{
  border-radius:12px !important;font-weight:500 !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid var(--g-line) !important;color:var(--g-blue-deep) !important;
}
body .secondary:hover,body .secondary-btn:hover{background:#fff !important;border-color:#93c5fd !important}

body .summary{
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.68) 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 18px 44px rgba(9,17,32,.3), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ---------- фоны секций ---------- */
html body .service-page .process-section,
html body .service-page .audience-section,
html body .service-page .articles-section{background:transparent !important}
html body .service-page .preparation-section,
html body .service-page .faq-section{background:transparent !important}

/* ---------- карточки шагов: .process-list > div (без классов) ---------- */
html body .service-page .process-list > div{
  padding:24px !important;
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 10px 30px rgba(15,32,62,.08), inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:transform .18s, box-shadow .18s !important;
}
html body .service-page .process-list > div:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,32,62,.14), inset 0 1px 0 rgba(255,255,255,1) !important;
}
html body .service-page .process-list > div > span{
  display:grid !important;place-items:center !important;
  width:38px !important;height:38px !important;border-radius:12px !important;
  margin-bottom:14px !important;
  font-family:Unbounded,Inter,sans-serif !important;font-size:15px !important;font-weight:400 !important;
  color:#fff !important;
  background:linear-gradient(160deg,#4f8fff,var(--g-blue)) !important;
  box-shadow:0 8px 18px rgba(21,94,239,.3), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html body .service-page .process-list strong{
  display:block !important;font-size:16px !important;font-weight:500 !important;
  letter-spacing:-.015em !important;margin-bottom:8px !important;color:var(--g-ink) !important;
}
html body .service-page .process-list p{font-size:14px !important;line-height:1.6 !important;color:var(--g-muted) !important;margin:0 !important}

/* ---------- вопросы: .faq-list > details (без классов) ---------- */
html body .service-page .faq-list details{
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 8px 22px rgba(15,32,62,.07) !important;
  overflow:hidden !important;
  margin-bottom:10px !important;
}
html body .service-page .faq-list details summary{
  padding:18px 22px !important;font-size:15.5px !important;font-weight:500 !important;
  cursor:pointer !important;color:var(--g-ink) !important;list-style:none !important;
}
body .faq-list > details > summary::-webkit-details-marker{display:none}
html body .service-page .faq-list p{
  padding:0 22px 20px !important;margin:0 !important;
  font-size:14.5px !important;line-height:1.66 !important;color:var(--g-muted) !important;
}

/* ---------- подготовка: .prep-copy article ---------- */
html body .service-page .prep-copy article{
  padding:18px 20px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 8px 24px rgba(15,32,62,.07), inset 0 1px 0 rgba(255,255,255,1) !important;
  margin-bottom:12px !important;
  transition:transform .18s, box-shadow .18s !important;
}
html body .service-page .prep-copy article:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,32,62,.12) !important}
html body .service-page .inspection-visual-card{
  border-radius:var(--r-lg) !important;overflow:hidden !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:0 18px 46px rgba(15,32,62,.16) !important;
}
html body .service-page .inspection-visual-card img{display:block !important;width:100% !important}

/* ---------- карточки (аудитория, статьи) ---------- */
html body .service-page .info-card{
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 10px 30px rgba(15,32,62,.08), inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:transform .18s, box-shadow .18s !important;
}
html body .service-page .info-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,32,62,.14), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* гасим старые декоративные слои карточек */
html body .service-page .process-list > div::before,
html body .service-page .process-list > div::after,
html body .service-page .info-card::before,
html body .service-page .info-card::after{display:none !important}

/* ---------- обёртка контента: фон не трогаем ---------- */
html body .main-band.service-page{background:transparent !important}

/* ---------- баннер «Запишитесь сейчас» = .final-cta ---------- */
html body .service-page .final-cta{
  position:relative !important;
  padding:38px !important;
  border-radius:var(--r-lg) !important;
  overflow:hidden !important;
  background:#0b1524 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 24px 60px rgba(2,8,20,.45) !important;
}
html body .service-page .final-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 20% 10%, rgba(21,94,239,.45) 0%, rgba(21,94,239,0) 60%),
    radial-gradient(50% 100% at 85% 90%, rgba(79,143,255,.32) 0%, rgba(79,143,255,0) 60%);
}
html body .service-page .final-cta > *{position:relative}
html body .service-page .final-cta h2{color:#fff !important}
html body .service-page .final-cta p{color:#c3d3e6 !important}

/* ---------- блок «Уже были у нас?» на первом экране ---------- */
html body .hero .dk-quick-check{
  border-radius:16px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body .hero .dk-check-label,
html body .hero .dk-quick-check label{color:#dbe6f5 !important;font-weight:500 !important}
html body .hero .dk-quick-check input{
  background:#fff !important;border:1px solid rgba(255,255,255,.5) !important;
  border-radius:10px !important;color:var(--g-ink) !important;font-weight:500 !important;
}

/* ---------- сводка записи (перебиваем боевые правила) ---------- */
html body .hero .summary,
html body .service-page .summary,
html body .summary{
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.70) 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 18px 44px rgba(9,17,32,.3), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ---------- правый сайдбар: единая стеклянная панель ---------- */
html body .hero .side-panel,
html body .side-panel{
  border-radius:var(--r-lg) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.66) 100%) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 24px 56px rgba(9,17,32,.36), inset 0 1px 0 rgba(255,255,255,1), inset 0 -16px 30px rgba(255,255,255,.28) !important;
  overflow:hidden !important;
}
/* внутренние блоки — прозрачные, разделены тонкой линией */
html body .side-panel .summary,
html body .side-panel .navigator,
html body .side-panel .support{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body .side-panel .navigator,
html body .side-panel .support{
  border-top:1px solid rgba(148,175,205,.28) !important;
}
html body .side-panel .summary h2,
html body .side-panel .navigator h2,
html body .side-panel .support h2,
html body .side-panel .navigator h3,
html body .side-panel .support h3{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
  font-size:17px !important;
}

/* ---------- табы шагов: Inter в uppercase шире Manrope, ужимаем ---------- */
html body .booking-panel .stepper .step{
  font-size:13.5px !important;
  gap:6px !important;
  padding-left:6px !important;
  padding-right:6px !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}
html body .booking-panel .stepper .step > span{
  margin-left:4px !important;
  font-size:13.5px !important;
}
@media (max-width:900px){
  html body .booking-panel .stepper .step{font-size:11px !important;gap:4px !important}
  html body .booking-panel .stepper .step > span{font-size:11px !important}
}

/* ---------- панель карты: текст был белым на белом ---------- */
html body .station-map-panel strong,
html body .station-map-panel .station-map-head strong{color:var(--g-ink) !important}
html body .station-map-panel #stationMapMeta,
html body .station-map-panel .station-map-status,
html body .station-map-panel span{color:#5b6f88 !important}
html body .station-map-panel .station-map-empty{
  color:#3f5067 !important;
  background:#f4f8fd !important;
  border-left-color:#3b82f6 !important;
}
html body .station-map-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:16px !important;
}
html body .station-map-panel .station-map-close,
html body .station-map-panel .station-map-expand{
  color:var(--g-blue-deep) !important;
  background:rgba(255,255,255,.85) !important;
  border:1px solid var(--g-line) !important;
  border-radius:10px !important;
  font-weight:500 !important;
}
html body .station-map-panel .station-map-expand{
  background:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  color:#fff !important;border-color:transparent !important;
}

/* ---------- карта на узких экранах: кнопки не помещались ---------- */
@media (max-width:700px){
  html body .station-map-head{flex-wrap:wrap !important;gap:10px !important}
  html body .station-map-actions{flex-wrap:wrap !important;width:100% !important;gap:8px !important}
  html body .station-map-actions button{flex:1 1 auto !important;font-size:12.5px !important;padding:10px 12px !important;white-space:nowrap !important}
  /* на телефоне карта и так почти во весь экран — разворот не нужен */
  html body .station-map-expand{display:none !important}
}

/* =========================================================================
   Первый экран — приводим к утверждённому макету
   ========================================================================= */

/* ---------- верхнее меню: стеклянная плашка ---------- */
html body .topbar{padding:14px 0 0 !important;background:transparent !important}
html body .topbar .topbar-inner{
  padding:12px 18px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important;
}
html body .topbar .nav a{font-weight:500 !important;font-size:13.5px !important}
html body .topbar .support-chat-button{
  border-radius:12px !important;font-weight:600 !important;font-size:13.5px !important;
  background:#fff !important;
  border:1px solid rgba(255,255,255,.9) !important;
  color:#0b3b91 !important;
  box-shadow:0 8px 22px rgba(6,20,52,.28) !important;
  min-height:44px !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html body .topbar .support-chat-button:hover{background:#eef4ff !important;box-shadow:0 12px 28px rgba(6,20,52,.34) !important}

/* ---------- преимущества: три отдельные карточки вместо общей плашки ---------- */
html body .hero .hero-proof{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  gap:12px !important;
}
html body .hero .hero-proof .proof-item{
  padding:15px 16px !important;
  border-radius:var(--r-lg) !important;
  background:rgba(12,20,36,.44) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
}
html body .hero .hero-proof .proof-item strong,
html body .hero .hero-proof .proof-item b{font-weight:500 !important;font-size:13.5px !important;color:#eaf1f8 !important}
html body .hero .hero-proof .proof-item p,
html body .hero .hero-proof .proof-item span{font-size:12.5px !important;line-height:1.5 !important;color:#b9c8da !important}

/* ---------- «Уже были у нас?» — одной строкой ---------- */
html body .hero .dk-quick-check{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  padding:14px 16px !important;
}
html body .hero .dk-check-label{
  margin:0 !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#dbe6f5 !important;
  flex:0 0 auto !important;
}
html body .hero .dk-check-form{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:1 1 260px !important;
  margin:0 !important;
}
html body .hero .dk-check-form input{flex:1 1 auto !important;min-width:0 !important}
html body .hero .dk-check-form button{
  flex:0 0 auto !important;
  border-radius:var(--r-md) !important;
  font-weight:500 !important;
  background:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  color:#fff !important;border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important;
}
@media (max-width:700px){
  html body .hero .dk-quick-check{flex-direction:column !important;align-items:stretch !important}
  html body .hero .dk-check-label{white-space:normal !important}
}

/* =========================================================================
   Сверка с утверждённым макетом: детали первого экрана
   ========================================================================= */

/* ссылка «Что подготовить» — в макете белая, а не синяя кнопка */
html body .hero .hero-actions .secondary-btn,
html body .hero .secondary-btn{
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid rgba(255,255,255,.4) !important;
  border-radius:0 !important;
  padding:0 0 2px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:500 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body .hero .hero-actions .secondary-btn:hover,
html body .hero .secondary-btn:hover{
  background:transparent !important;
  border-bottom-color:rgba(255,255,255,.85) !important;
  color:#fff !important;
}

/* бейдж цены в панели: значение — Unbounded, как в макете */
html body .booking-panel .price-box{
  border-radius:12px !important;
  background:rgba(239,246,255,.85) !important;
  border:1px solid rgba(191,219,254,.9) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
}
html body .booking-panel .price-box strong,
html body .booking-panel .price-box b,
html body .booking-panel .price-box > *:last-child{
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:17px !important;
  letter-spacing:-.02em !important;
  color:var(--g-blue-deep) !important;
}
html body .booking-panel .price-box > *:first-child{
  font-size:10.5px !important;
  font-weight:500 !important;
  color:#4a6a8f !important;
}

/* строки сводки: разделители и раскладка как в макете */
html body .summary dl > div{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:7px 0 !important;
  border-bottom:1px solid rgba(199,212,230,.5) !important;
  font-size:13.5px !important;
}
html body .summary dl > div:last-child{border-bottom:0 !important}
html body .summary dl dt{color:#64748b !important;font-weight:500 !important;margin:0 !important}
html body .summary dl dd{font-weight:500 !important;margin:0 !important;text-align:right !important;color:var(--g-ink) !important}

/* =========================================================================
   Полная сверка с референсом: приводим размеры и веса к макету
   ========================================================================= */

/* подзаголовок первого экрана */
html body .hero .hero-lead{font-size:16.5px !important;line-height:1.62 !important;font-weight:400 !important}

/* подписи полей в панели */
html body .booking-panel label,
html body .booking-panel .field-label,
html body .booking-panel .field > span:first-child{
  font-size:12px !important;
  font-weight:500 !important;
  color:#5b6f88 !important;
  letter-spacing:0 !important;
}

/* значения в полях выбора */
html body .city-combobox-trigger,
html body .category-combobox-trigger,
html body .station-combobox-trigger,
html body .date-combobox-trigger,
html body .booking-panel input{
  font-size:14px !important;
}

/* кнопка «Открыть карту» — в макете лёгкая, не жирная */
html body .booking-panel .station-map-toggle,
html body .station-map-toggle{
  font-size:13.5px !important;
  font-weight:500 !important;
  border-radius:var(--r-md) !important;
  color:var(--g-blue-deep) !important;
  background:rgba(255,255,255,.85) !important;
  border:1px solid var(--g-line) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}
html body .station-map-toggle:hover{background:#fff !important;border-color:#93c5fd !important}

/* карточки преимуществ: размеры текста по макету */
html body .hero .proof-item strong,
html body .hero .proof-item > *:first-child{font-size:13.5px !important;font-weight:500 !important;color:#eaf1f8 !important}
html body .hero .proof-item p,
html body .hero .proof-item > *:last-child{font-size:12.5px !important;line-height:1.5 !important;color:#b9c8da !important;font-weight:400 !important}

/* табы без скруглений — как в макете */

/* подчёркивание активного шага убрано — заменено пилюлей ниже */

/* заголовок сводки — 15px как в референсе */
html body .side-panel .summary h2,
html body .hero .summary h2,
html body .summary h2{font-size:15px !important}

/* ---------- сводка: компактность как в референсе ---------- */
html body .side-panel .summary,
html body .summary{padding:18px 20px !important}
html body .summary dl{
  gap:0 !important;
  margin:12px 0 0 !important;
  display:block !important;
}
html body .summary dl > div{
  padding:7px 0 !important;
  font-size:13.5px !important;
  gap:16px !important;
}
html body .summary dl dd{font-weight:500 !important;font-size:13.5px !important}
html body .summary dl dt{font-size:13px !important;font-weight:500 !important;color:#64748b !important}

/* блоки маршрута и поддержки — те же отступы, заголовки ровнее */
html body .side-panel .navigator,
html body .side-panel .support{padding:18px 20px !important}
html body .side-panel .navigator h2,
html body .side-panel .support h2,
html body .side-panel .navigator h3,
html body .side-panel .support h3{font-size:15px !important;margin:0 0 8px !important}
html body .side-panel .navigator p,
html body .side-panel .support p{font-size:13px !important;line-height:1.55 !important;color:#5b6f88 !important;margin:0 0 6px !important}

/* ---------- сводка: высота строки и вес значений ---------- */
html body .side-panel .summary dl > div,
html body .hero .summary dl > div{
  line-height:1.35 !important;
  padding:6px 0 !important;
  align-items:center !important;
}
html body .side-panel .summary dl dd,
html body .hero .summary dl dd,
html body .summary dl > div > dd,
html body .summary dl > div > *:last-child{
  font-weight:500 !important;
  line-height:1.35 !important;
}
html body .side-panel .summary dl dt,
html body .hero .summary dl dt,
html body .summary dl > div > *:first-child{line-height:1.35 !important}

/* =========================================================================
   Мобильная версия: поле проверки, согласие, кнопка подтверждения
   ========================================================================= */
@media (max-width:760px){
  /* поле «Уже были у нас» разъезжалось на всю высоту */
  html body .hero .dk-quick-check{padding:14px !important;gap:10px !important}
  html body .hero .dk-check-form{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }
  html body .hero .dk-check-form input{
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    flex:0 0 48px !important;
    padding:0 14px !important;
    font-size:15px !important;
    line-height:48px !important;
    box-sizing:border-box !important;
  }
  html body .hero .dk-check-form button{
    height:48px !important;
    min-height:48px !important;
    flex:0 0 48px !important;
    width:100% !important;
    font-size:15px !important;
  }
  html body .hero .dk-check-label{font-size:13px !important;line-height:1.4 !important}

  /* стекло на мобильных — панель и карточки */
  html body .booking-panel{
    border-radius:16px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 100%) !important;
    backdrop-filter:blur(18px) saturate(170%);
    -webkit-backdrop-filter:blur(18px) saturate(170%);
  }
  html body .hero .proof-item{border-radius:var(--r-lg) !important}
  html body .side-panel{border-radius:16px !important}

  /* согласие занимало пол-экрана */
  html body .consent-check,
  html body .booking-panel .consent-check{
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.45 !important;
    gap:10px !important;
  }
  html body .consent-check a{font-size:12px !important}

  /* кнопка подтверждения — крупная и первой в паре */
  html body .booking-panel .wizard-actions,
  html body .booking-panel .actions{
    display:flex !important;
    flex-direction:column-reverse !important;
    gap:10px !important;
  }
  html body .booking-panel .wizard-actions .primary,
  html body .booking-panel .actions .primary{
    width:100% !important;
    height:52px !important;
    font-size:16px !important;
    font-weight:500 !important;
  }
  html body .booking-panel .wizard-actions .secondary,
  html body .booking-panel .actions .secondary{width:100% !important;height:44px !important}
}

/* подсказка в результате проверки карты */
html body .dk-check-result .dk-status-hint{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.5;
  color:#c3d3e6;
}

/* =========================================================================
   Правки по мобильному тесту
   ========================================================================= */

/* блок проверки карты: убираем лишнюю высоту */
html body .hero .dk-check-result:empty{display:none !important}
html body .hero .dk-check-result{padding:0 !important;margin:0 !important}
@media (max-width:760px){
  /* flex-basis 260px в колонке превращался в высоту 260px */
  html body .hero .dk-check-form{flex:0 0 auto !important;height:auto !important}
  html body .hero .dk-quick-check{height:auto !important;min-height:0 !important}
  html body .hero .dk-check-result{margin-top:8px !important}
}

/* шаг «Проверка»: порядок задаётся перестановкой в DOM (см. app.js),
   display НЕ трогаем — иначе ломается скрытие неактивных шагов */
html body #paymentScreen .consent-check{margin-top:12px !important}
html body #paymentScreen .actions{margin-top:12px !important}
html body #paymentScreen .payment-assurance{margin-top:16px !important}

/* сводка прилипала к панели записи — в макете между ними воздух */
html body .booking-shell .side-panel,
html body .side-panel{margin-top:14px !important}
@media (max-width:760px){
  html body .side-panel{margin-top:12px !important}
}

/* ---------- шаг «Статус»: новая компоновка ---------- */
html body #resultScreen .result{text-align:left !important;display:flex !important;align-items:center !important;gap:12px !important;margin-bottom:6px !important}
html body #resultScreen .result-mark{
  width:38px !important;height:38px !important;border-radius:50% !important;
  display:grid !important;place-items:center !important;flex:0 0 auto !important;
  background:#0f9d58 !important;color:#fff !important;font-size:14px !important;font-weight:600 !important;
}
html body #resultScreen #resultTitle{margin:0 !important;font-size:20px !important}
html body #resultScreen #resultSummary{margin:0 0 16px 50px !important;font-size:13.5px !important;color:var(--g-muted) !important;line-height:1.5 !important}

html body #resultScreen .booking-status-card{
  border-radius:var(--r-lg) !important;
  border:1px solid var(--g-line) !important;
  background:rgba(255,255,255,.9) !important;
  padding:16px 18px !important;
  margin-bottom:14px !important;
}
html body #resultScreen #bookingStatusText{font-size:15px !important;font-weight:500 !important;display:block !important;margin-bottom:6px !important}
html body #resultScreen #bookingStatusDescription{font-size:13px !important;line-height:1.55 !important;color:var(--g-muted) !important;margin:0 0 10px !important}
html body #resultScreen .client-instruction{
  font-size:13px !important;line-height:1.6 !important;color:var(--g-muted) !important;
  border-top:1px solid rgba(199,212,230,.5) !important;padding-top:10px !important;margin:0 !important;
}

/* главное действие — широкое и заметное */
html body #resultScreen .actions{display:flex !important;flex-wrap:wrap !important;gap:10px !important;margin-bottom:14px !important}
html body #resultScreen .result-actions{display:flex !important;flex-wrap:wrap !important;gap:10px !important;flex:1 1 100% !important}
html body #resultScreen .result-actions .primary{flex:1 1 100% !important;padding:14px !important;font-size:15.5px !important}
html body #resultScreen .result-actions .secondary,
html body #resultScreen .actions > .secondary{flex:1 1 auto !important}

/* проверка другой записи — спойлером */
html body #resultScreen .status-check-more{margin-top:12px !important;border-top:1px solid rgba(199,212,230,.5) !important;padding-top:12px !important}
html body #resultScreen .status-check-more summary{
  cursor:pointer !important;font-size:13px !important;font-weight:500 !important;
  color:var(--g-blue-deep) !important;list-style:none !important;
}
html body #resultScreen .status-check-more summary::-webkit-details-marker{display:none}
html body #resultScreen .status-check-more .status-check{display:flex !important;gap:8px !important;margin-top:10px !important;align-items:center !important}
html body #resultScreen .status-check-more .status-check input{flex:1 1 auto !important;min-width:0 !important}

/* данные записи строками — как в согласованном макете */
html body #resultScreen .result-facts{margin:0 !important;display:block !important}
html body #resultScreen .result-facts > div{
  display:flex !important;justify-content:space-between !important;align-items:baseline !important;
  gap:16px !important;padding:10px 0 !important;
  border-bottom:1px solid rgba(199,212,230,.5) !important;font-size:13.5px !important;
}
html body #resultScreen .result-facts > div:last-child{border-bottom:0 !important}
html body #resultScreen .result-facts dt{color:#64748b !important;margin:0 !important;font-weight:500 !important}
html body #resultScreen .result-facts dd{margin:0 !important;font-weight:500 !important;text-align:right !important;color:var(--g-ink) !important}
html body #resultScreen .client-instruction{border-top:0 !important;padding-top:0 !important}
html body #resultScreen #bookingStatusText,
html body #resultScreen #bookingStatusDescription{display:none !important}

/* пояснение под главной кнопкой */
html body #resultScreen .result-cta-hint{
  margin:-4px 0 14px !important;font-size:12.5px !important;line-height:1.5 !important;
  color:var(--g-muted) !important;text-align:center !important;
}

/* порядок кнопок: главное действие первым, «Новая запись» под ним */
html body #resultScreen .actions.split{display:flex !important;flex-wrap:wrap !important;gap:10px !important}
html body #resultScreen .actions.split .result-actions{order:-1 !important;flex:1 1 100% !important}
html body #resultScreen .actions.split > .secondary{flex:1 1 auto !important}

/* главная кнопка статуса: правило .link-button перебивало градиент */
html body #resultScreen .result-actions a.primary,
html body #resultScreen a.primary.link-button,
html body #resultScreen .actions .primary{
  background:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  background-image:linear-gradient(180deg,#3b82f6,var(--g-blue)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  font-weight:500 !important;
  box-shadow:0 10px 26px rgba(21,94,239,.4), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
html body #resultScreen .result-actions a.primary:hover,
html body #resultScreen a.primary.link-button:hover{
  background-image:linear-gradient(180deg,#4f8fff,#1a68f5) !important;
  color:#fff !important;
}

/* «Новая запись» — объёмнее, не прилипает */
html body #resultScreen .actions > .secondary,
html body #resultScreen #newBooking{
  padding:14px 18px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.95) !important;
  border:1px solid var(--g-line) !important;
  box-shadow:0 6px 16px rgba(15,32,62,.10) !important;
  font-weight:500 !important;
  transition:transform .16s, box-shadow .16s !important;
}
html body #resultScreen .actions > .secondary:hover,
html body #resultScreen #newBooking:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(15,32,62,.16) !important;
  border-color:#93c5fd !important;
}
html body #resultScreen .actions.split{gap:12px !important}

/* =========================================================================
   Единый отступ подписей над полями (были 0–30px вразнобой)
   ========================================================================= */
html body .booking-panel label,
html body .booking-panel .field-label,
html body .booking-panel .field > span:first-child{
  display:block !important;
  margin:0 0 8px !important;
  padding:0 !important;
  line-height:1.3 !important;
}
/* обёртки полей не должны добавлять свой отступ сверху */
html body .booking-panel .field,
html body .booking-panel .station-select-row > label,
html body .booking-panel .date-time-row > label,
html body .booking-panel .station-step-grid > label{
  margin-top:0 !important;
}
/* блок «Свободное время» выравниваем с остальными */
html body .booking-panel .slot-section > .field-label,
html body .booking-panel .slot-section label{margin:0 0 8px !important}
html body .booking-panel .slot-section{margin-top:14px !important}
html body .booking-panel #slotGrid{margin-top:0 !important}

/* «Пункт техосмотра»: строка с полем и кнопкой карты добавляла лишние 16px сверху */
html body .booking-panel .station-field .station-pick-row,
html body .booking-panel .station-pick-row{margin-top:0 !important}

/* =========================================================================
   Подсказки и сообщения: стекло вместо плотного голубого блока
   ========================================================================= */
html body .booking-panel .notice,
html body .booking-panel .notice.compact,
html body .booking-panel .form-note,
html body .booking-panel #slotGrid.slot-grid > .notice,
html body .booking-panel #slotGrid.slot-grid > .notice.compact,
html body .booking-panel #slotGrid > .notice.compact,
html body .booking-panel #vehicleMessage,
html body .booking-panel #paymentMessage,
html body .booking-panel #availabilityMessage,
html body #vehicleMessage,
html body #paymentMessage,
html body #availabilityMessage{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  padding:13px 14px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.55) !important;
  background-image:none !important;
  border:1px solid rgba(199,212,230,.7) !important;
  border-left:1px solid rgba(199,212,230,.7) !important;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
  color:#475569 !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  grid-column:1 / -1 !important;
}

/* значок подсказки вместо точки: точка 7px читалась как отмеченный радио-пункт,
   особенно в блоке «Свободное время», где человек как раз ждёт выбора */
html body .booking-panel .notice::before,
html body .booking-panel .notice.compact::before,
html body .booking-panel .form-note::before,
html body #vehicleMessage::before,
html body #paymentMessage::before,
html body #availabilityMessage::before{
  content:"i" !important;
  flex:0 0 auto !important;
  width:17px !important;
  height:17px !important;
  margin-top:1px !important;
  border-radius:5px !important;
  background:rgba(219,230,247,.95) !important;
  color:#2a5fae !important;
  box-shadow:none !important;
  position:static !important;
  display:grid !important;
  place-items:center !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:1 !important;
}

/* ошибки — тот же стиль, но красный акцент */
html body .booking-panel .notice.error,
html body .booking-panel .form-note.error,
html body #vehicleMessage.error,
html body #paymentMessage.error,
html body #availabilityMessage.error{
  background:rgba(254,242,242,.75) !important;
  border-color:rgba(248,180,180,.85) !important;
  color:#9f2f2f !important;
}
html body .booking-panel .notice.error::before,
html body .booking-panel .form-note.error::before,
html body #vehicleMessage.error::before,
html body #paymentMessage.error::before,
html body #availabilityMessage.error::before{
  content:"!" !important;
  background:rgba(250,214,214,.95) !important;
  color:#a92f2f !important;
  box-shadow:none !important;
}

/* пустые сообщения не должны занимать место и показывать одинокую точку */
html body .booking-panel .notice:empty,
html body .booking-panel .form-note:empty,
html body #vehicleMessage:empty,
html body #paymentMessage:empty,
html body #availabilityMessage:empty{display:none !important}


/* ── Мобильные исправления 19.08.2026 ─────────────────────────────────
   1. Safari на iOS принудительно зумит страницу при фокусе на поле
      с font-size < 16px и обратно не отматывает. Ломало всю воронку
      на iPhone: город, категория, имя, телефон, поиск станции.
   2. Слово «диагностическая» в H1 не переносилось и распирало сетку
      до 332px при контейнере 296px — на 320px обрезало первый экран. */
@media (max-width: 767px) {
  html body input,
  html body select,
  html body textarea,
  html body .combobox-search,
  html body #dkCheckInput,
  html body #cityComboboxSearch,
  html body #stationComboboxSearch,
  html body input[type="search"] {
    font-size: 16px !important;
  }

  html body .hero-copy h1,
  html body .hero-copy .hero-lead {
    overflow-wrap: anywhere;
  }
}


/* =========================================================================
   Мобильная главная: короткий путь до формы (19.08.2026)

   Было: до кнопки «Продолжить запись» почти три экрана прокрутки.
   Убираем с первого экрана всё, что на телефоне только отдаляет форму,
   и прячем меню под иконку вместо ленты, которая занимала высоту
   и обрезалась по краям.
   ========================================================================= */

/* ---------- меню иконкой ---------- */

/* кнопка меню скрыта на широких экранах — там меню видно строкой */
html body .nav-toggle{display:none}

@media (max-width:1120px){
  html body .topbar-inner{
    position:relative;
    flex-wrap:nowrap !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  html body .nav-toggle{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:42px;
    height:42px;
    padding:0 11px;
    margin-left:auto;
    flex:0 0 auto;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.28);
    border-radius:var(--r-md);
    cursor:pointer;
  }
  html body .nav-toggle i{display:block;height:2px;background:#fff;border-radius:2px}
  html body .nav-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

  html body .nav{
    display:none !important;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:0;
    flex-direction:column;
    gap:2px;
    padding:8px !important;
    margin:0 !important;
    background:rgba(12,20,32,.97);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);
    box-shadow:0 20px 46px rgba(4,9,18,.5);
    z-index:60;
  }
  html body .topbar-inner.nav-open .nav{display:flex !important}

  html body .nav a{
    padding:12px 14px !important;
    border-radius:9px !important;
    background:transparent !important;
    border:0 !important;
    color:#fff !important;
    font-size:15px !important;
    text-decoration:none !important;
  }

  /* «Запись» не показываем: форма и так на первом экране */
  html body .nav a[href="#bookingFormStart"],
  html body .nav a[href="/#bookingFormStart"]{display:none !important}
}

/* ---------- короткий первый экран ---------- */
@media (max-width:767px){
  /* сводка дублирует шаг «Проверка», а на телефоне стоит под формой */
  html body .side-panel{display:none !important}

  /* плашка повторяет то, что сказано в короткой строке под заголовком */
  html body .hero-copy .eyebrow{display:none !important}

  /* «Выбрать время визита» прокручивает к форме, до которой один экран;
     «Что подготовить» доступно из меню */
  html body .hero-actions{display:none !important}

  html body .hero-copy h1{margin-top:0 !important;margin-bottom:8px !important}
  html body .hero-lead{font-size:14px !important;line-height:1.5 !important;margin-bottom:14px !important}

  /* блок для вернувшихся клиентов переезжает под форму скриптом в index.html */
  html body .dk-quick-check{margin-top:18px !important}
}


/* =========================================================================
   Мелкие заголовки — Inter вместо Unbounded (19.08.2026)
   Unbounded дисплейный: на 15-17px его широкие формы, особенно «В»,
   читаются как дефект. Оставляем его только крупным заголовкам,
   а цифрам шагов — как декоративной нумерации, там кириллицы нет.
   ========================================================================= */
html body .screen-head h2,
html body .side-panel .summary h2,
html body .side-panel h2{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
  font-weight:600 !important;
}


/* =========================================================================
   ТИПОГРАФИКА: единая система (19.08.2026)

   Было: 31 комбинация размера и насыщенности на главной, 19 на статьях.
   Один кегль жил с четырьмя весами сразу, Unbounded встречался и в 400,
   и в 700 — отсюда ощущение, что шрифты везде разные.

   Правила системы:
     • семейства два — Unbounded для крупных заголовков, Inter для всего;
     • Unbounded только веса 400 и только от 20px;
     • веса Inter только 400 / 500 / 600, вес 700 не используется;
     • шкала кеглей: 32 · 24 · 19 · 17 · 16 · 15 · 13.
   ========================================================================= */

/* ---------- крупные заголовки: Unbounded, всегда 400 ---------- */
html body h1,
html body h2.section-title,
html body .content-section > h2,
html body .article-head h1,
html body .knowledge-hero h1,
html body .location-hero h1{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
}

/* ---------- средние и мелкие заголовки: Inter 600 ---------- */
html body h3,
html body h4,
html body .screen-head h2,
html body .side-panel h2,
html body .article-related h2,
html body .article-faq h2,
html body .knowledge-card h2,
html body .location-card h2{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
  font-weight:600 !important;
}

/* ---------- вес 700 не используется нигде ---------- */
html body b,
html body strong,
html body th,
html body .brand span,
html body .primary-btn,
html body .secondary-btn,
html body button{
  font-weight:600 !important;
}

/* ---------- текст и элементы интерфейса: Inter ---------- */
html body p,
html body li,
html body label,
html body input,
html body select,
html body textarea,
html body small,
html body span,
html body a,
html body td,
html body summary,
html body figcaption{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
}

/* ---------- выбросы кегля приводим к шкале ---------- */
html body .article-head h1{font-size:clamp(26px,3.2vw,32px) !important}
html body .article-content h2,
html body .content-section > h2{font-size:clamp(21px,2.2vw,24px) !important}
html body .article-related h2,
html body .article-faq h2{font-size:19px !important}
html body .brand span{font-size:17px !important}

/* добор: элементы, которые перебивали систему более узкими селекторами */
html body .brand,
html body .support-chat-button,
html body .breadcrumbs a,
html body .breadcrumbs span,
html body .floating-booking-cta span,
html body .nav a{font-weight:600 !important}

html body .final-cta h2{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(21px,2.4vw,26px) !important;
}

/* финальный добор насыщенности: компоненты с собственными правилами */
html body .support-chat-dialog .section-kicker,
html body .support-chat-dialog h2,
html body .hero-copy .eyebrow,
html body .side-panel .navigator strong,
html body .side-panel .support strong,
html body .trust-strip strong,
html body .prep-copy article span,
html body .site-footer span,
html body .section-kicker,
html body .content-section strong{font-weight:600 !important}

html body .support-chat-dialog h2{font-size:24px !important}
html body .side-panel .navigator strong,
html body .side-panel .support strong{font-size:17px !important}

/* последние два места: структура оказалась глубже, чем ловили селекторы */
html body .trust-strip > div strong,
html body .trust-strip .reveal strong,
html body .preparation-section article span,
html body .prep-copy span{font-weight:600 !important}


/* =========================================================================
   СИСТЕМА: цвет, радиусы, кнопки (19.08.2026)

   Замер показал: 5 почти одинаковых серых на вторичном тексте (между двумя
   разница в 1 единицу), 10 радиусов скругления и 9 видов кнопок.
   Плюс остатки прежнего тёмного дизайна — янтарный rgba(255,189,46).
   ========================================================================= */

/* ---------- один серый вместо пяти ---------- */
:root{
  --c-ink:#111827;        /* основной текст */
  --c-muted:#5b6f88;      /* вторичный текст — единственный серый */
  --c-blue:#155eef;
  --c-blue-deep:#0b3b91;
  --r-sm:10px;            /* мелкие элементы */
  --r-md:12px;            /* кнопки и поля */
  --r-lg:16px;            /* карточки и панели */
}

html body .form-note,
html body .field-hint,
html body .note,
html body .muted,
html body small,
html body .side-panel dt,
html body .summary dt,
html body label,
html body .section-kicker,
html body figcaption{color:var(--c-muted) !important}

/* ---------- радиусы: три ступени вместо десяти ---------- */
html body .primary-btn,
html body .secondary-btn,
html body button,
html body input,
html body select,
html body textarea,
html body .combobox-trigger,
html body .station-combobox-trigger,
html body .date-combobox-trigger{border-radius:var(--r-md) !important}

html body .booking-panel,
html body .side-panel,
html body .knowledge-card > a,
html body .location-card > a,
html body .article-head,
html body .article-content,
html body .article-faq,
html body .trust-strip > div,
html body .process-list > div,
html body .prep-copy article{border-radius:var(--r-lg) !important}

html body .chip,
html body .tag,
html body .slot,
html body .price-box{border-radius:var(--r-sm) !important}

/* ---------- кнопки: один вид вместо девяти ---------- */
html body .primary-btn,
html body .secondary-btn,
html body .booking-panel button:not(.nav-toggle):not(.combobox-clear):not(.step),
html body .dk-check-form button,
html body form button[type="submit"]{
  min-height:48px !important;
  padding:0 20px !important;
  font-size:15px !important;
  font-weight:600 !important;
  border-radius:var(--r-md) !important;
}

/* ---------- «Задать вопрос»: была почти прозрачной ---------- */
html body .support-chat-button{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.9) !important;
  color:var(--c-blue-deep) !important;
  font-weight:600 !important;
  box-shadow:0 8px 22px rgba(6,20,52,.28) !important;
  min-height:44px !important;
  border-radius:var(--r-md) !important;
}
@media (hover:hover){
  html body .support-chat-button:hover{
    background:#eef4ff !important;
    box-shadow:0 12px 28px rgba(6,20,52,.34) !important;
  }
}

/* ---------- янтарный от прежнего дизайна — на синий ---------- */
html body,
html body .combobox-panel,
html body .combobox-list,
html body .station-combobox-list,
html body .city-combobox-list,
html body #slotGrid,
html body [role="listbox"],
html body select,
html body .scrollable{
  scrollbar-color:rgba(21,94,239,.55) rgba(15,23,42,.08) !important;
  scrollbar-width:thin !important;
}
html body ::-webkit-scrollbar-thumb{
  background:rgba(21,94,239,.55) !important;
  border-radius:999px;
}
html body ::-webkit-scrollbar-track{background:rgba(15,23,42,.06) !important}
html body ::-webkit-scrollbar{width:8px;height:8px}

html body .hero{border-color:rgba(21,94,239,.22) !important}
html body summary{background:transparent !important}
html body :focus-visible{outline-color:var(--c-blue) !important}

/* добор системы: точные классы, найденные замером на живой странице */

/* серый — один на весь вторичный текст */
html body .microcopy,
html body .is-placeholder,
html body .combobox-trigger.is-placeholder,
html body .station-combobox-trigger.is-placeholder,
html body .date-combobox-trigger.is-placeholder,
html body .hint,
html body .caption,
html body .summary dd,
html body .side-panel p{color:#5b6f88 !important}

/* радиусы — три ступени */
html body .stepper,
html body .side-panel,
html body .dk-quick-check,
html body details,
html body .faq-item{border-radius:16px !important}

html body .trust-strip span,
html body .chip,
html body .badge,
html body .step-num{border-radius:10px !important}

/* секции без подложки: серый прямоугольник за блоками читался как лишний слой */
html body .content-section{background:none !important}
html body summary{background:transparent !important}


/* =========================================================================
   Полоса шагов: последовательность вместо вкладок (19.08.2026)

   Разметка своя: цифра лежит текстовым узлом без тега, название в <span>,
   класса «пройден» нет — помечается только активный шаг. Поэтому:
     • цифру прячем через font-size:0 и рисуем счётчиком в ::before;
     • пройденные шаги вычисляем через :has() по позиции активного.
   ========================================================================= */
html body .booking-panel .stepper{
  counter-reset:pto-step;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:4px !important;
  padding:7px !important;
  background:rgba(226,235,247,.5) !important;
  border-bottom:1px solid rgba(255,255,255,.7) !important;
  border-radius:16px 16px 0 0 !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

html body .booking-panel .stepper .step{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px !important;
  padding:9px 4px !important;
  border:0 !important;
  border-radius:var(--r-md) !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#5b6f88 !important;
  font-size:0 !important;              /* прячет цифру-текстовый узел */
  letter-spacing:0 !important;
  transition:background .18s ease;
}

html body .booking-panel .stepper .step > span{
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

html body .booking-panel .stepper .step::before{
  counter-increment:pto-step;
  content:counter(pto-step);
  width:21px;height:21px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:5px;
  font-size:11px;font-weight:600;
  background:rgba(91,111,136,.16);
  color:#5b6f88;
}

/* активный — белая пилюля с залитым кружком */
html body .booking-panel .stepper .step.active{
  background:#fff !important;
  color:#0b3b91 !important;
  box-shadow:0 4px 14px rgba(9,17,32,.14), inset 0 1px 0 #fff !important;
}
html body .booking-panel .stepper .step.active > span{font-weight:600 !important}
html body .booking-panel .stepper .step.active::before{
  background:linear-gradient(180deg,#3b82f6,#155eef);
  color:#fff;
  box-shadow:0 3px 8px rgba(21,94,239,.4);
}

/* пройденные: галочка вместо цифры, синяя подпись */
html body .booking-panel .stepper:has(.step:nth-child(2).active) .step:nth-child(1),
html body .booking-panel .stepper:has(.step:nth-child(3).active) .step:nth-child(1),
html body .booking-panel .stepper:has(.step:nth-child(3).active) .step:nth-child(2),
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(1),
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(2),
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(3){
  color:#0b3b91 !important;
}
html body .booking-panel .stepper:has(.step:nth-child(2).active) .step:nth-child(1)::before,
html body .booking-panel .stepper:has(.step:nth-child(3).active) .step:nth-child(1)::before,
html body .booking-panel .stepper:has(.step:nth-child(3).active) .step:nth-child(2)::before,
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(1)::before,
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(2)::before,
html body .booking-panel .stepper:has(.step:nth-child(4).active) .step:nth-child(3)::before{
  content:"\2713";
  background:rgba(21,94,239,.14);
  color:#155eef;
  font-size:12px;
}

/* JS marks completed steps explicitly. Keep this final square treatment
   stronger than the legacy circular indicator from main-redesign.css. */
html body .booking-panel .stepper .step.completed{
  color:#0b3b91 !important;
}
html body .booking-panel .stepper .step.completed::before{
  --pto-completed-step-size:21px;
  content:"\2713" !important;
  inline-size:var(--pto-completed-step-size) !important;
  block-size:var(--pto-completed-step-size) !important;
  min-inline-size:var(--pto-completed-step-size) !important;
  min-block-size:var(--pto-completed-step-size) !important;
  width:var(--pto-completed-step-size) !important;
  height:var(--pto-completed-step-size) !important;
  flex:0 0 var(--pto-completed-step-size) !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:5px !important;
  background:#155eef !important;
  color:#fff !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

/* ---------- телефон: кружок над подписью ----------
   В строку «кружок + Проверка» не помещается в колонку 75px,
   поэтому на узких экранах ставим их друг под другом. */
@media (max-width:767px){
  html body .booking-panel .stepper{gap:2px !important;padding:5px !important}
  html body .booking-panel .stepper .step{
    flex-direction:column !important;
    gap:4px !important;
    padding:8px 2px !important;
  }
  html body .booking-panel .stepper .step > span{font-size:10.5px !important;line-height:1.2 !important}
  html body .booking-panel .stepper .step::before{width:20px;height:20px;font-size:10.5px}
  html body .booking-panel .stepper .step.completed::before{
    --pto-completed-step-size:20px;
    font-size:10.5px !important;
  }
}

/* совсем узкие экраны: подпись только у активного шага */
@media (max-width:340px){
  html body .booking-panel .stepper .step > span{display:none !important}
  html body .booking-panel .stepper .step.active > span{display:inline !important}
}

/* ── Цена и мобильная форма 21.08.2026 ───────────────────────────────
   1. Цена уходит из угла шапки в полосу во всю ширину: раньше число делило
      строку с заголовком и было того же кегля, что он, поэтому главное на
      экране не читалось. Ниже 767px плашка и так растянута — теперь раскладка
      одна и та же везде.
   2. Капс с кнопок воронки (правило .primary из старого дизайна).
   3. Активная кнопка залита цветом: разница с неактивной была в одном оттенке.
   4. «Открыть карту» перестаёт выглядеть полем ввода.
   ------------------------------------------------------------------ */

html body .booking-panel .screen-head{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:start !important;
}

html body .booking-panel .price-box{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:"lb num" "note num" !important;
  align-items:center !important;
  column-gap:14px !important;
  row-gap:1px !important;
  width:100% !important;
  padding:11px 16px !important;
  text-align:left !important;
}
html body .booking-panel .price-box > span:first-child{
  grid-area:lb !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#1c3f74 !important;
  margin:0 !important;
}
html body .booking-panel .price-box > small{
  grid-area:note !important;
  min-width:0 !important;
  max-width:34ch !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  color:#4a6a8f !important;
}

html body #summaryDutyText{
  display:block;
  margin-top:4px;
  color:#4a6a8f;
  font-size:11px;
  line-height:1.4;
}

html body #summaryDutyText.hidden{
  display:none !important;
}
html body .booking-panel .price-box > strong,
html body .booking-panel .price-box #stationPaymentLabel{
  grid-area:num !important;
  justify-self:end !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:30px !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
  line-height:1.05 !important;
  color:var(--g-blue-deep) !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
}
/* пока ТС не выбрано, в поле стоит текст-подсказка — её нельзя рисовать кеглем цены */
html body .booking-panel .price-box #stationPaymentLabel.is-hint{
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:normal !important;
  color:#4a6a8f !important;
}
/* и пояснение про госпошлину прячем, пока пояснять нечего */
html body .booking-panel .price-box:has(#stationPaymentLabel.is-hint) > small{
  display:none !important;
}

/* ---------- кнопки воронки ---------- */
html body .booking-panel .primary,
html body .booking-panel button.primary{
  text-transform:none !important;
  letter-spacing:normal !important;
}
html body .booking-panel .primary:not(:disabled):not([disabled]){
  background:linear-gradient(180deg,#3b82f6,#155eef) !important;
  border-color:#1550cc !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(21,94,239,.32) !important;
}
html body .booking-panel .primary:not(:disabled):not([disabled]):hover{
  background:linear-gradient(180deg,#5b9bff,#1d6bf5) !important;
  border-color:#1a5ae0 !important;
  box-shadow:0 8px 20px rgba(21,94,239,.4) !important;
}
html body .booking-panel .primary:not(:disabled):not([disabled]):active{
  transform:translateY(1px) !important;
  box-shadow:0 3px 10px rgba(21,94,239,.34) !important;
}

/* ---------- «Открыть карту»: второстепенное действие, не поле ----------
   Фон этой кнопке задаёт групповое правило по идентификаторам
   (main-redesign.css: #stationMapToggle, #dkButton, #directionButton и др.),
   поэтому классами его не перебить — нужен такой же идентификатор.
   Правило намеренно точечное: остальные кнопки той группы («Открыть
   направление», «Скачать карту») — целевые действия, им белая заливка идёт. */
html body .booking-panel #stationMapToggle,
html body .booking-panel button#stationMapToggle{
  min-height:44px !important;
  height:44px !important;
  background:transparent !important;
  border:1px dashed rgba(140,170,210,.8) !important;
  box-shadow:none !important;
  color:#1c58c9 !important;
  font-size:14px !important;
  font-weight:500 !important;
  border-radius:var(--r-md) !important;
}
html body .booking-panel #stationMapToggle:hover,
html body .booking-panel button#stationMapToggle:hover{
  background:rgba(233,241,253,.7) !important;
  border-color:rgba(110,150,200,.95) !important;
}

/* ---------- телефон: цена крупная, но не во весь экран ---------- */
@media (max-width:767px){
  html body .booking-panel .price-box{padding:10px 14px !important}
  html body .booking-panel .price-box > strong,
  html body .booking-panel .price-box #stationPaymentLabel{font-size:27px !important}
}

/* ---------- подзаголовок на фотографии ----------
   .hero-lead лежит поверх снимка станции, а не на белом блоке, поэтому серый
   цвет вторичного текста (#5b6f88) на нём сливается — особенно на светлых
   участках фото. Даём светлый тон и такую же тень, как у заголовка. */
html body .hero .hero-lead,
html body .hero-copy .hero-lead{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 2px 14px rgba(6,15,31,.75), 0 1px 3px rgba(6,15,31,.6) !important;
}

/* ---------- радиусы: добиваем до трёх ступеней ----------
   Замер на живой странице показывал десять значений: 8, 10, 11, 12, 14, 15, 16, 18,
   20, 22. Разницу в пару точек глаз читает не как «другой элемент», а как небрежность.
   Ступени: мелочь 10px, всё нажимаемое и поля 12px, карточки и панели 16px.
   Поля ввода держали 8px из старого набора — их правило сильнее общего, поэтому
   перечисляем адресно. */
html body input[type="text"],
html body input[type="tel"],
html body input[type="email"],
html body input[type="search"],
html body input[type="number"],
html body input:not([type]),
html body .booking-panel input,
html body .dk-check-form input,
html body .support-chat-form input,
html body form input{border-radius:var(--r-md) !important}

html body .booking-panel .step,
html body .booking-panel button.step,
html body .support-chat-thread,
html body .support-chat-button,
html body .nav-toggle,
html body .floating-booking-cta{border-radius:var(--r-md) !important}

html body .hero .proof-item,
html body .service-page .faq-list details,
html body .service-page .info-card,
html body .service-page .final-cta,
html body .service-page .inspection-visual-card,
html body .service-page .process-list > div,
html body .booking-status-card,
html body .date-combobox-menu,
html body .station-combobox-menu,
html body .city-combobox-menu,
html body .nav{border-radius:var(--r-lg) !important}

/* поле и кнопка проверки диагностической карты — это ввод и действие,
   им средняя ступень, а не мелкая */
html body .hero .dk-check-form input,
html body .hero .dk-check-form button,
html body #dkCheckInput{border-radius:var(--r-md) !important}