/* Калькулятор расстояний (/raschet-rasstoyanij/).
   Палитра и радиусы взяты из company-catalog.css, чтобы страница читалась
   как часть общего оформления, а не отдельный виджет. */

/* Заголовок страницы — тот же паттерн «эйброу + h1 + лид», что и у
   .sampa24-orders-heading в css/home.css (страницы поиска заказов и
   главной), значения взяты оттуда один в один. Правила свои, потому что
   там класс завязан на родителя .block_home_last_orders--*, а здесь его нет. */
.sampa24-dist__page-head { max-width: 760px; margin: 0 0 26px; }
.sampa24-dist__page-eyebrow { display: block; margin-bottom: 8px; color: #F85112; font-size: 12px; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.sampa24-dist__page-head h1 { margin: 0; color: #152D45; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.08; }
.sampa24-dist__page-head p { margin: 10px 0 0; color: #6B86A4; font-size: 16px; line-height: 1.45; }

.sampa24-dist { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; }

.sampa24-dist__card { padding: 22px; border: 1px solid #d4e8ff; border-radius: 18px; background: #f1f8ff; }
.sampa24-dist__eyebrow { margin: 0 0 6px; color: #ff4d12; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sampa24-dist__title { margin: 0 0 16px; color: #173e68; font-size: 22px; line-height: 1.2; }

.sampa24-dist__form { display: grid; gap: 12px; }

.sampa24-dist__points { display: grid; gap: 10px; }
.sampa24-dist__field { display: grid; gap: 6px; position: relative; }
.sampa24-dist__field label { color: #244766; font-size: 12px; font-weight: 700; }
.sampa24-dist__field input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d4e8ff; border-radius: 9px; background: #fff; color: #102f51; font: inherit; font-size: 14px; }
.sampa24-dist__field input:focus { border-color: #ff4d12; outline: none; }

.sampa24-dist__field--small input { height: 40px; font-size: 13px; }

.sampa24-dist__field[data-point-role="via"] input { padding-right: 36px; }
.sampa24-dist__remove-point { position: absolute; top: 27px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #a8bacd; font-size: 15px; line-height: 1; cursor: pointer; }
.sampa24-dist__remove-point:hover { background: #fff2ee; color: #c53a1a; }

.sampa24-dist__form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sampa24-dist__add-point { padding: 0; border: 0; background: none; color: #1d5a91; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; }
.sampa24-dist__add-point:hover { color: #ff4d12; }

.sampa24-dist__swap { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #d4e8ff; border-radius: 50%; background: #fff; color: #1d5a91; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.sampa24-dist__swap:hover { border-color: #f85112; color: #f85112; transform: rotate(180deg); }
.sampa24-dist__swap svg { width: 18px; height: 18px; }

.sampa24-dist__fuel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; border-top: 1px dashed #d4e8ff; }

.sampa24-dist__submit { margin-top: 4px; width: 100%; height: 46px; border: 0; cursor: pointer; }
.sampa24-dist__submit:disabled { opacity: .6; cursor: default; }

.sampa24-dist__error { margin: 14px 0 0; padding: 10px 13px; border-radius: 9px; background: #fff2ee; color: #c53a1a; font-size: 13px; }

.sampa24-dist__result { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid #bfe9ce; border-radius: 14px; background: linear-gradient(135deg, #f2fbf5 0%, #fff 60%); }
.sampa24-dist__result[hidden] { display: none; }
.sampa24-dist__result-item { display: grid; gap: 2px; }
.sampa24-dist__result-label { color: #168b45; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sampa24-dist__result-value { color: #102f51; font-size: 28px; font-weight: 800; line-height: 1.3; }
.sampa24-dist__result-value--sm { font-size: 17px; font-weight: 700; }

.sampa24-dist__map-wrap { position: relative; min-height: 420px; border: 1px solid #d4e8ff; border-radius: 18px; overflow: hidden; background: #eef4fa; }
.sampa24-dist__map { position: absolute; inset: 0; }
.sampa24-dist__map-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #7189a3; font-size: 13px; background: #eef4fa; }

/* --- CTA между калькулятором и плитками ---------------------------------
   Тот же визуальный язык, что у .sampa24-transport-cta в shipment-type-page.css
   (тёмная карточка, оранжевый эйброу, круглая кнопка), но свой неймспейс —
   каждая посадочная страница держит стили в своём файле. */

.sampa24-dist-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; padding: 30px 32px; border-radius: 22px; background: linear-gradient(120deg, #183b5c 0%, #0f2b45 100%); color: #fff; }
.sampa24-dist-cta__eyebrow { display: block; margin: 0 0 8px; color: #ff8f5c; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sampa24-dist-cta__title { margin: 0; max-width: 520px; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.3; }
.sampa24-dist-cta a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 40px; background: #ff4d12; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease, transform .2s ease; }
.sampa24-dist-cta a:hover { background: #e6430c; color: #fff; transform: translateY(-2px); }

/* --- информационные плитки под калькулятором --------------------------- */

.sampa24-dist-tiles { margin-top: 36px; }
.sampa24-dist-tiles__group + .sampa24-dist-tiles__group { margin-top: 30px; }
.sampa24-dist-tiles__heading { margin: 0 0 16px; color: #173e68; font-size: 20px; line-height: 1.2; }
.sampa24-dist-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sampa24-dist-tiles__item { padding: 20px; border: 1px solid #d4e8ff; border-radius: 14px; background: #fff; }
.sampa24-dist-tiles__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 10px; background: #f1f8ff; font-size: 19px; }
.sampa24-dist-tiles__item h3 { margin: 0 0 6px; color: #173e68; font-size: 15px; line-height: 1.3; }
.sampa24-dist-tiles__item p { margin: 0; color: #7189a3; font-size: 13px; line-height: 1.5; }

@media (max-width: 860px) {
	.sampa24-dist { grid-template-columns: 1fr; }
	.sampa24-dist__map-wrap { min-height: 320px; }
	.sampa24-dist-tiles__grid { grid-template-columns: 1fr; }
	.sampa24-dist-cta { padding: 24px; }
	.sampa24-dist-cta a { width: 100%; justify-content: center; }
}