/* Тема «Указатель»: цвета и подача дорожных знаков. Подключается после style.css */
@font-face{font-family:"Golos Text Variable";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-cyrillic-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Golos Text Variable";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:"Golos Text Variable";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos Text Variable";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--color-primary:#0F5B45;--color-primary-soft:#DCEBE4;--color-accent:#F5C400;--color-bg:#EEF1EF;--color-text:#1B1F23;--color-muted:#5B6660;--color-line:#D5DCD8;
--font-family-sans:"Golos Text Variable",system-ui,"Segoe UI",sans-serif;--font-family-heading:"Golos Text Variable",system-ui,"Segoe UI",sans-serif}
.fade-in-up{animation:none!important;opacity:1!important;transform:none!important}
.btn-primary:hover{background:#DDB000}
.card{border-radius:.5rem}.card:hover{box-shadow:0 14px 40px -16px #0f5b4540}
.to-\[\#1E40AF\],.via-\[\#1E40AF\]{--tw-gradient-to:#0A3F30;--tw-gradient-via:#0A3F30}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}

/* ---- первый экран ---- */
.hero{background:#1B1F23;color:#fff;padding:4rem 0 4.5rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:start}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700;line-height:1.08;margin:0 0 1.1rem;max-width:16ch}
.hero-lead{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.65;max-width:34rem;margin:0 0 1.75rem}
.board{background:var(--color-primary);border-radius:.75rem;padding:.55rem;max-width:36rem}
.board-in{border:3px solid #fff;border-radius:.5rem;padding:1rem 1.15rem .6rem}
.board-title{font-size:.9rem;color:rgba(255,255,255,.8);margin:0 0 .35rem}
.rrow{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(255,255,255,.22);color:#fff;padding:.7rem .4rem;cursor:pointer;font:inherit}
.rrow:first-of-type{border-top:0}
.rrow:hover,.rrow:focus-visible{background:rgba(255,255,255,.1)}
.rcity{font-weight:600;font-size:1.05rem}
.rcity i{font-style:normal;opacity:.7;margin:0 .45rem}
.rprice{font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.rmeta{grid-column:1;font-size:.8rem;color:rgba(255,255,255,.7)}
.board-hint{font-size:.78rem;color:rgba(255,255,255,.7);margin:.5rem .4rem .35rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:1.75rem 0 0;padding:0;list-style:none;font-size:.95rem;color:rgba(255,255,255,.85)}
.hero-facts li{border-left:3px solid var(--color-accent);padding-left:.6rem}
@media(max-width:1023px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero{padding:2.5rem 0 3rem}}

/* ---- популярные маршруты ---- */
.routes-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin-top:2.25rem}
.routes-board .rrow{color:var(--color-text);border-top:1px solid var(--color-line);padding:.9rem .4rem}
.routes-board .rrow:first-of-type{border-top:1px solid var(--color-line)}
.routes-board .rrow:hover{background:var(--color-primary-soft)}
.routes-board .rmeta{color:var(--color-muted)}
.routes-board .rprice{color:var(--color-primary)}
.routes-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;color:var(--color-muted)}
@media(max-width:767px){.routes-board{grid-template-columns:1fr}}

/* ---- шаги: настоящая последовательность, поэтому по линии маршрута ---- */
.route-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;counter-reset:s;list-style:none;padding:0;margin:2.5rem 0 0}
.route-steps li{position:relative;padding-top:2.6rem;counter-increment:s}
.route-steps li::before{content:counter(s);position:absolute;top:0;left:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;z-index:1}
.route-steps li::after{content:"";position:absolute;top:.85rem;left:2.1rem;right:-1.4rem;border-top:3px dashed #B8C4BE}
.route-steps li:last-child::after{display:none}
.route-steps b{display:block;font-size:1.1rem;margin-bottom:.4rem}
.route-steps span{color:var(--color-muted);line-height:1.6;font-size:.95rem}
@media(max-width:767px){.route-steps{grid-template-columns:1fr;gap:1.25rem}.route-steps li{padding:0 0 0 3rem}.route-steps li::after{top:2rem;bottom:-1.25rem;left:.85rem;right:auto;border-top:0;border-left:3px dashed #B8C4BE}}

/* ---- преимущества: список, а не карточки ---- */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin:2.25rem 0 0}
.why-grid div{border-top:2px solid var(--color-text);padding:1rem 0 1.5rem}
.why-grid dt{font-weight:700;font-size:1.1rem;margin-bottom:.35rem}
.why-grid dd{margin:0;color:var(--color-muted);line-height:1.65;max-width:34rem}
@media(max-width:767px){.why-grid{grid-template-columns:1fr}}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;margin:0 0 .6rem}
.sec-head p{color:var(--color-muted);max-width:40rem;margin:0;line-height:1.65}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.hero-grid>*{min-width:0}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border:2px solid var(--color-primary);border-radius:.625rem;color:var(--color-primary);background:transparent;font-weight:600;transition:background .2s}
.btn-outline:hover{background:var(--color-primary-soft)}
.btn-outline svg{width:1rem;height:1rem;flex:none}
@media(max-width:479px){.rcity{font-size:.98rem}.board-in{padding:.85rem .8rem .5rem}}

/* ---- фото авто в карточках тарифов ---- */
.car-photo-wrap{background:var(--color-primary-soft)}
.car-photo{object-fit:contain;mix-blend-mode:multiply}

/* ---- кнопки после расчёта (WhatsApp/Telegram/Позвонить) — новый класс вместо инлайн-стиля из calculator.js. Цвета темы вместо синего — на всех ширинах (блок появляется только после отправки формы, на вид страницы по умолчанию не влияет) ---- */
.result-cta-btn{display:inline-block;margin:8px 8px 0 0;padding:8px 14px;border-radius:8px;background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);font-weight:600;text-decoration:none;font-size:13px}
.result-cta-btn-primary{background:var(--color-primary);color:#fff}

/* ---- область нажатия ссылок «политика»/«публичная оферта» в согласии — крупнее без изменения внешнего вида (все ширины) ---- */
.consent-link{display:inline-block;padding:.5rem .25rem;margin:-.5rem -.25rem}

/* mobile */
@media(max-width:767px){
  /* форма заявки: поля и кнопки не меньше 44px, текст не меньше 16px (чтобы iOS не зумил страницу) */
  #calc-root input:not([type="checkbox"]),#calc-root select{font-size:16px;line-height:1.3;min-height:44px}
  #calc-root button[type="submit"]{min-height:48px;font-size:16px}

  /* Откуда/Куда — друг под другом на всю ширину, иначе текст обрезается */
  .route-fields{grid-template-columns:1fr}

  /* результат расчёта и кнопки связи — крупно и в столбик */
  .result-cta{display:flex;flex-direction:column;gap:10px;margin-top:10px}
  .result-cta-btn{margin:0;padding:14px 18px;font-size:15px;text-align:center;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center}

  /* тап-зоны шапки и подвала не меньше 44px */
  header a[aria-label="Межгород24 — на главную"]{min-height:44px;padding:2px 0}
  header a[href^="tel:"]{min-height:44px}
  header a.btn-primary{min-height:44px;padding:.75rem 1rem;display:inline-flex;align-items:center;justify-content:center}
  footer ul li>a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem 0}

  /* закреплённая панель "Позвонить" / "Рассчитать" */
  body.has-mobile-bar{padding-bottom:76px}
  body.has-mobile-bar.mobile-bar-hidden{padding-bottom:0}
  .mobile-action-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--color-line);box-shadow:0 -6px 20px -10px rgba(0,0,0,.2);transition:transform .25s ease}
  .mobile-bar-hidden .mobile-action-bar{transform:translateY(110%)}
  .mobile-action-btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:.625rem;font-weight:700;font-size:15px;text-decoration:none}
  .mobile-action-call{background:var(--color-primary-soft);color:var(--color-primary)}
  .mobile-action-calc{background:var(--color-accent);color:#1F2937}
}
@media(min-width:768px){.mobile-action-bar{display:none}}

/* узкие экраны (~360px): табло маршрутов немного шире контейнера — поджимаем без изменения структуры */
@media(max-width:479px){
  .rprice{font-size:1rem}
  .rrow{padding:.6rem .3rem;gap:.05rem .5rem}
}

/* длинные слова в заголовках и grid-колонки без явного minmax(0,1fr) могут растягивать блок шире экрана на узких телефонах */
@media(max-width:767px){
  h1,h2,h3{overflow-wrap:break-word;word-break:break-word}
  .grid.md\:grid-cols-3{grid-template-columns:minmax(0,1fr)}
}

/* маршрут в строке табло не должен выпирать за рамку: после стрелки разрешён перенос ("Екатеринбург →" / "Тюмень"), колонка названия может сужаться */
@media(max-width:479px){
  .rrow{grid-template-columns:minmax(0,1fr) auto}
  .rcity i::after{content:"\200B"}
}

/* тарифы: пять карточек (добавлен «Круиз») — на ≥1024px в один ряд из пяти */
@media(min-width:1024px){
  .grid.lg\:grid-cols-4{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
  .grid.lg\:grid-cols-4 .card .p-6{padding:1.25rem}
}
@media(min-width:1024px){
  .grid.lg\:grid-cols-4 .card{display:flex;flex-direction:column}
  .grid.lg\:grid-cols-4 .card .p-6{flex:1;display:flex;flex-direction:column}
  .grid.lg\:grid-cols-4 .card .p-6>ul{margin-bottom:1.25rem}
  .grid.lg\:grid-cols-4 .card .btn-secondary{margin-top:auto}
}

/* ---- двухшаговая форма: расчёт → заказ ---- */
#calc-result[hidden],#order-form[hidden],#order-msg[hidden],#new-calc[hidden]{display:none!important}
#calc-result,#order-form{scroll-margin-top:90px}
#calc-root input:disabled{background:#F4F6F5;color:var(--color-muted);cursor:not-allowed}
@media(max-width:767px){
  #calc-root .btn-primary,#calc-root .btn-outline{min-height:48px;font-size:16px;justify-content:center}
}

/* шапка на самых узких экранах (≤359px, 320px): логотип и кнопка не помещались в одну строку */
@media(max-width:359px){
  header .container-x{gap:.5rem}
  header a[aria-label="Межгород24 — на главную"] .text-lg{font-size:1rem}
  header a.btn-primary{padding:.75rem .85rem}
  header a.btn-primary svg{display:none}
}