/* Калькулятор маршрутов — редизайн (см. design_handoff_route_calculator).
   Отдельный файл от style.css: тот общий для cabinet.html, и совместные
   классы вроде .field-input там значат другое — пересекаться не должны. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #0a0a0a;
}

/* Тариф — только для залогиненных: пока tariff.js не подтвердит сессию
   (или до редиректа на логин), контент скрыт — без мигания формы. */
body.auth-gate-pending .app {
  display: none;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #2a2320; border-radius: 3px; }

a { color: #E85232; text-decoration: none; }
a:hover { color: #ff7a5c; }

.maplibregl-ctrl-attrib { background: rgba(10,10,10,.7) !important; color: #6b625e !important; font-size: 9px !important; }
.maplibregl-ctrl-attrib a { color: #6b625e !important; }

.maplibregl-popup-content {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding: 10px 28px 10px 14px;
  border-radius: 8px;
  background: #110e0d;
  color: #d6d0cb;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.popup-title { font-weight: 700; color: #f2efec; margin-bottom: 4px; }
.popup-meta { font-size: 11.5px; color: #9a908a; font-variant-numeric: tabular-nums; }
.maplibregl-popup-close-button { color: #8a807b; font-size: 16px; padding: 2px 6px; }
.maplibregl-popup-close-button:hover { color: #E85232; background: none; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #110e0d; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #110e0d; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #110e0d; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #110e0d; }

/* ── App shell ── */
.app {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0a0a0a;
  color: #f2efec;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
}

/* ── Левый рейл ── */
.rail {
  width: 64px;
  flex: none;
  border-right: 1px solid #191512;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.rail__logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #E85232;
  color: #0a0a0a;
  font: 700 18px/34px Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
  letter-spacing: -0.5px;
}

.rail__divider {
  width: 22px;
  height: 1px;
  background: #211b18;
  margin: 4px 0;
}

.rail__icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rail__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #1e1917;
  background: transparent;
  color: #8a807b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  transition: border-color .15s, color .15s;
}

.rail__icon--active {
  border-color: #E85232;
  background: rgba(232,82,50,.12);
  color: #E85232;
  cursor: default;
}

.rail__spacer { flex: 1; }

.rail__pill {
  width: 38px;
  height: 52px;
  border-radius: 19px;
  background: #E85232;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.rail__pill:hover { background: #ff6440; color: #0a0a0a; }

/* ── Main column ── */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Шапка ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border-bottom: 1px solid #191512;
  flex-wrap: wrap;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #141010;
  border: 1px solid #201a17;
  border-radius: 999px;
}

.chip--brand {
  padding: 6px 14px 6px 8px;
  font: 600 12px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chip__badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E85232;
  color: #0a0a0a;
  font: 700 11px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
}

.chip--clock {
  padding: 7px 14px;
  font: 500 11.5px/1 ui-monospace, Menlo, monospace;
  color: #9a908a;
}
.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E85232;
  flex: none;
}

.topbar__tabs {
  display: flex;
  gap: 4px;
  background: #141010;
  border: 1px solid #201a17;
  border-radius: 999px;
  padding: 3px;
}
.tab-link {
  padding: 6px 16px;
  border-radius: 999px;
  font: 600 11px/1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a807b;
  transition: background .15s, color .15s;
}
.tab-link:hover { color: #f2efec; }
.tab-link--active {
  background: #E85232;
  color: #0a0a0a;
}
.tab-link--active:hover { color: #0a0a0a; }

.topbar__spacer { flex: 1; }

.topbar__divider {
  width: 1px;
  height: 20px;
  background: #201a17;
}

.topbar__account {
  font: 500 11px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  color: #8a807b;
  text-transform: uppercase;
  transition: color .15s;
}
.topbar__account:hover { color: #E85232; }

/* ── Строка поиска ── */
.searchbar {
  padding: 22px 28px 18px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.field {
  flex: 1;
  min-width: 230px;
  position: relative;
}

.field__label {
  display: block;
  font: 500 10px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .2em;
  color: #6b625e;
  margin-bottom: 8px;
}

.field__box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #141010;
  border: 1px solid #241d19;
  border-radius: 999px;
  padding: 0 16px;
  height: 48px;
  transition: border-color .2s;
}
.field__box:focus-within { border-color: #E85232; }

.field__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.field__marker--from { background: #E85232; }
.field__marker--to { border: 2px solid #E85232; box-sizing: border-box; }

.field__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f2efec;
  font: 400 14px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
}
.field__input::placeholder { color: #6b625e; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #141010;
  border: 1px solid #241d19;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
}
.dropdown:empty { display: none; }
.dropdown-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid #1e1815;
  transition: background .15s, color .15s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.is-focused { background: rgba(232,82,50,.12); color: #E85232; }
.dropdown-loading { padding: 10px 14px; font-size: 13px; color: #6b625e; }

.swap-btn {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #241d19;
  background: #141010;
  color: #8a807b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}
.swap-btn:hover { border-color: #E85232; color: #E85232; }

.build-btn {
  height: 48px;
  flex: none;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #E85232;
  color: #0a0a0a;
  font: 700 12px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, opacity .2s;
}
.build-btn:hover { background: #ff6440; }
.build-btn:disabled { opacity: .6; cursor: not-allowed; }

.build-btn__loader {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(10,10,10,.35);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-error {
  padding: 0 28px 14px;
  font-size: 12px;
  color: #E85232;
}

/* ── Форма тарифа (несколько рядов вместо одной строки поиска) ── */
.tariff-form {
  padding: 22px 28px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.form-row--submit {
  padding-top: 2px;
}
.form-row--submit .build-btn {
  width: 100%;
  justify-content: center;
}

.field__select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f2efec;
  font: 400 14px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.field__select option, .field__select optgroup {
  background: #141010;
  color: #f2efec;
}

.field__input[type="number"] { -moz-appearance: textfield; }
.field__input[type="number"]::-webkit-outer-spin-button,
.field__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field__hint {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.hint-badge {
  font: 600 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #241d19;
  color: #6b625e;
}
.hint-badge--flag { border-color: #E85232; color: #E85232; }

/* ── Карта ── */
.map-frame {
  padding: 0 10%;
}

.map-card {
  position: relative;
  border: 1px solid #1e1815;
  border-radius: 20px;
  overflow: hidden;
  background: #0d0b0a;
}

#map {
  height: 520px;
  width: 100%;
}

.map-badge {
  position: absolute;
  background: rgba(12,10,9,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid #241d19;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-badge--summary {
  left: 16px;
  bottom: 16px;
  padding: 9px 16px;
  font: 500 11px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #9a908a;
}
.map-badge--summary #summary-distance {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 600;
  color: #E85232;
}
.map-badge__sep {
  width: 1px;
  height: 12px;
  background: #2b2320;
}

/* ── Markers ── */
.marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1.6px solid #E85232;
  cursor: pointer;
}
.marker--endpoint {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E85232;
  color: #0a0a0a;
  font: 700 13px/30px Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 5px rgba(232,82,50,.18);
  border: none;
  cursor: pointer;
}

/* ── Результат ── */
.results {
  padding: 26px 10% 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: #110e0d;
  border: 1px solid #1e1815;
  border-radius: 18px;
  padding: 22px 26px;
}

.card__label {
  font: 500 10px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .2em;
  color: #6b625e;
  text-transform: uppercase;
}

.cards-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.card--distance {
  flex: 1.4;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card--distance .card__label { margin-bottom: 12px; }

.card__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 52px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
  color: #E85232;
}
.card__unit { font: 500 16px/1 Helvetica Neue, Helvetica, Arial, sans-serif; color: #8a807b; }
.card__value--plain { font: 700 30px/1 Helvetica Neue, Helvetica, Arial, sans-serif; color: #f2efec; margin-top: 10px; }

.card--stations {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.spark {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 22px;
}
.spark__bar {
  width: 4px;
  border-radius: 1px;
  background: #2b2320;
}
.spark__bar--hi { background: #E85232; }

.card--route {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.route-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.route-line__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.route-line__dot--from { background: #E85232; }
.route-line__dot--to { border: 2px solid #E85232; box-sizing: border-box; }
.route-line__name { flex: 1; min-width: 0; font: 400 13px/1.3 Helvetica Neue, Helvetica, Arial, sans-serif; }
.route-line__connector { width: 1px; height: 14px; background: #2b2320; margin-left: 3.5px; }

.stations-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.toggle-btn {
  border: 1px solid #241d19;
  background: transparent;
  border-radius: 999px;
  padding: 9px 18px;
  color: #E85232;
  font: 600 11px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s;
}
.toggle-btn:hover { border-color: #E85232; }

.station-list {
  list-style: none;
  column-count: 2;
  column-gap: 36px;
}

.station-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #171311;
  break-inside: avoid;
}
.station-list__num {
  font: 500 10px/1 ui-monospace, Menlo, monospace;
  color: #4d4643;
  width: 22px;
  flex: none;
}
.station-list__dot { width: 6px; height: 6px; border-radius: 50%; background: #3a302b; flex: none; }
.station-list__dot--endpoint { background: #E85232; }
.station-list__name {
  flex: 1;
  min-width: 0;
  font: 400 13px/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #d6d0cb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.station-list__km {
  font: 500 11px/1 ui-monospace, Menlo, monospace;
  color: #6b625e;
  flex: none;
}

.actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.action-btn {
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid #241d19;
  background: transparent;
  color: #f2efec;
  font: 600 11.5px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.action-btn:hover { border-color: #E85232; color: #E85232; }
.action-btn:disabled { opacity: .6; cursor: not-allowed; }

.action-btn--muted { color: #8a807b; }
.action-btn--muted:hover { border-color: #3a302b; color: #f2efec; }

.save-route-msg {
  font-size: 12px;
  color: #8a807b;
}
.save-route-msg a { color: #E85232; font-weight: 600; }

.card__sub {
  margin-top: 8px;
  font: 500 12px/1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #8a807b;
}
.card__sub b { color: #d6d0cb; font-weight: 600; }

/* ── Разбивка тарифа по участкам ── */
.tariff-breakdown {
  list-style: none;
  margin-top: 14px;
}
.tariff-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #171311;
}
.tariff-breakdown__row:last-child { border-bottom: none; }
.tariff-breakdown__country {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 13px/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #d6d0cb;
  min-width: 0;
}
.tariff-breakdown__tag {
  flex: none;
  font: 500 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b625e;
  border: 1px solid #241d19;
  border-radius: 999px;
  padding: 3px 8px;
}
.tariff-breakdown__sum {
  flex: none;
  font: 600 14px/1 ui-monospace, Menlo, monospace;
  color: #E85232;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  /* Страховка: страница не должна скроллиться вбок, что бы ни случилось
     с шириной содержимого ниже. */
  body { overflow-x: hidden; }

  .rail { display: none; }

  .topbar { padding: 14px 16px; }

  .searchbar { padding: 16px 16px 14px; }
  .field { min-width: 100%; order: 1; }
  .field:last-of-type { order: 3; }
  .swap-btn { display: none; }
  .build-btn { order: 4; width: 100%; justify-content: center; }

  .tariff-form { padding: 16px 16px 4px; }

  /* 16px не даёт iOS Safari зумить страницу при фокусе на поле */
  .field__input { font-size: 16px; }

  .form-error { padding: 0 16px 14px; }

  .map-frame { padding: 0 16px; }
  #map { height: 340px; }
  /* На мобильном те же данные (маршрут, км) уже есть в карточках под
     картой — плашка поверх и без того невысокой карты только мешает. */
  .map-badge--summary {
    display: none;
  }

  .results { padding: 20px 16px 40px; }
  .card { padding: 18px 20px; min-width: 0; }
  .cards-row { flex-direction: column; }

  .station-list { column-count: 1; }

  .actions-row .action-btn { flex: 1; min-width: 0; }
}