/**
 * StartPort Tickets — стили модуля.
 * Всё скоупится в .spt, чтобы плагин не конфликтовал с темой сайта.
 */

.spt {
	/* Палитра боевого startport.ru. #009cff — единственный акцент;
	   tailwind-овские blue-* намеренно не используются. */
	--spt-primary: #009cff;
	--spt-primary-deep: #0060ff;
	--spt-primary-wash: #e6f5ff;

	--spt-ink: #171717;
	--spt-ink-soft: #475569;   /* slate-600 */
	--spt-muted: #64748b;      /* slate-500 */

	--spt-line: rgba(229, 231, 235, .7);   /* gray-200/70 */
	--spt-line-soft: rgba(229, 231, 235, .55);

	--spt-surface: #fff;
	--spt-sky: #f0f9ff;                    /* sky-50: плашки цены и времени */
	--spt-sunk: rgba(248, 250, 252, .6);   /* slate-50/60: колонка действия */
	--spt-sunk-solid: #f8fafc;

	--spt-ok: #17803d;
	--spt-ok-wash: #dcfce7;
	--spt-warn: #a16207;
	--spt-warn-wash: #fef9c3;
	--spt-stop: #b91c1c;
	--spt-stop-wash: #fee2e2;

	/* Радиусы по ролям, а не «везде одинаково»:
	   8px — карточки и блоки, 12px — внутренние плашки,
	   999px — только круглые кнопки-иконки и счётчики. */
	--spt-radius: 8px;
	--spt-plaque: 12px;
	--spt-pill: 999px;
	--spt-field-h: 56px;
	--spt-shadow: 0 1px 2px rgba(23,23,23,.04), 0 10px 30px -18px rgba(23,23,23,.35);

	color: var(--spt-ink);
	font-size: 16px;
	line-height: 1.6;
}

.spt *,
.spt *::before,
.spt *::after { box-sizing: border-box; }

.spt h2 { font-size: 1.45rem; margin: 0 0 14px; }
.spt h3 { font-size: 1.12rem; margin: 26px 0 10px; }
.spt p { margin: 0 0 12px; }
.spt ul { margin: 0 0 12px; padding-left: 20px; }
.spt .spt-muted { color: var(--spt-muted); font-size: .93rem; }
.spt .spt-error { color: var(--spt-stop); font-weight: 600; }
.spt .spt-saved { color: var(--spt-ok); font-weight: 600; }
.spt .spt-footnote { margin-top: 12px; }

/* ── Кнопки ──────────────────────────────────────────── */
.spt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 0 22px; min-height: 44px; border: 1px solid var(--spt-line);
	background: var(--spt-surface); color: var(--spt-ink); border-radius: var(--spt-radius);
	font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
	transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.spt-btn:hover { border-color: var(--spt-primary); color: var(--spt-primary-deep); }
.spt-btn--primary { background: var(--spt-primary); border-color: var(--spt-primary); color: #fff; }
.spt-btn--primary:hover { background: var(--spt-primary-deep); border-color: var(--spt-primary-deep); color: #fff; }
.spt-btn--ghost { background: transparent; }
.spt-btn[disabled] { opacity: .5; cursor: not-allowed; }
.spt-btn[disabled]:hover { border-color: var(--spt-line); color: var(--spt-ink); }

/* ── Вкладки видов транспорта ────────────────────────── */
/* Лента прокручивается на узких экранах, полоса прокрутки скрыта. */
.spt-tabs {
	display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto;
	border-bottom: 1px solid var(--spt-line); scrollbar-width: none;
	-ms-overflow-style: none;
}
.spt-tabs::-webkit-scrollbar { display: none; }
.spt-tab {
	border: 0; background: none; font: inherit; cursor: pointer; white-space: nowrap;
	padding: 11px 14px; color: var(--spt-muted); font-weight: 600;
	border-bottom: 2px solid transparent; margin-bottom: -1px; flex: 0 0 auto;
}
.spt-tab:hover { color: var(--spt-primary-deep); }
.spt-tab.is-active { color: var(--spt-ink); border-bottom-color: var(--spt-primary); }

.spt-panel { display: none; }
.spt-panel.is-active { display: block; }

.spt-stub {
	padding: 34px; text-align: center; color: var(--spt-muted);
	background: var(--spt-sunk); border: 1px dashed var(--spt-line); border-radius: var(--spt-radius);
}
.spt-info { background: var(--spt-sunk); border: 1px solid var(--spt-line); border-radius: var(--spt-radius); padding: 22px 24px; }
.spt-info h3 { margin-top: 0; }

/* ── Форма поиска ────────────────────────────────────── */
/* Единая панель: сегменты разделены линиями, а не пять отдельных
   боксов с собственными рамками. Так поля выровнены по одной сетке,
   высота общая, а круглая кнопка обмена садится прямо на разделитель. */
.spt-form {
	background: var(--spt-surface); border: 1px solid var(--spt-line);
	border-radius: 14px; box-shadow: var(--spt-shadow);
}

.spt-form__row { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) {
	.spt-form__row { grid-template-columns: 2.4fr 1.05fr 1.05fr .8fr auto; }
}

.spt-pair { display: grid; grid-template-columns: 1fr; position: relative; min-width: 0; }
@media (min-width: 1024px) { .spt-pair { grid-template-columns: 1fr 1fr; } }

/* Сегмент: подпись сверху мелкими прописными, значение под ней. */
.spt-field {
	position: relative; min-width: 0; padding: 12px 18px;
	border-bottom: 1px solid var(--spt-line); transition: background .15s;
}
.spt-form__row > .spt-field:last-of-type,
.spt-pair > .spt-field:last-child { border-bottom: 1px solid var(--spt-line); }

@media (min-width: 1024px) {
	.spt-field { border-bottom: 0; border-right: 1px solid var(--spt-line); }
	.spt-form__row > .spt-field:last-of-type { border-right: 0; }
	.spt-pair > .spt-field:last-child { border-bottom: 0; border-right: 0; }

	/* Разводим текст с кнопкой обмена: она сидит на разделителе,
	   и без запаса круг наезжает на подпись и плейсхолдер. */
	.spt-pair > .spt-field:first-child { padding-right: 36px; }
	.spt-pair > .spt-field:last-child { padding-left: 36px; }
}

.spt-field:focus-within { background: #fbfdff; }

.spt-field label {
	display: block; font-size: .7rem; font-weight: 600; letter-spacing: .07em;
	text-transform: uppercase; color: var(--spt-muted); margin-bottom: 3px;
}

.spt-input-wrap { position: relative; }

/* Поля без собственных рамок: рамку несёт панель. */
.spt-field input,
.spt-field select {
	width: 100%; height: 32px; padding: 0 24px 0 0; font: inherit;
	font-size: 1.02rem; font-weight: 600; color: var(--spt-ink);
	border: 0; background: transparent; border-radius: 0;
}
.spt-field select { padding-right: 4px; }
.spt-field input::placeholder { font-weight: 400; color: #9aa8b6; }
.spt-field input:focus,
.spt-field select:focus { outline: none; box-shadow: none; }

/* Поля вне панели поиска (контакты, профиль, пассажиры) — обычные. */
.spt-form__row--contacts,
.spt-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.spt-form__row--contacts { grid-template-columns: 1fr 1fr; }
}
.spt-form__row--contacts .spt-field,
.spt-grid .spt-field,
.spt-support-form .spt-field,
.spt-profile-form .spt-field { padding: 0; border: 0; background: none; }

.spt-form__row--contacts .spt-field label,
.spt-grid .spt-field label,
.spt-support-form .spt-field label,
.spt-profile-form .spt-field label {
	font-size: .8rem; letter-spacing: 0; text-transform: none; margin-bottom: 6px;
}

.spt-form__row--contacts .spt-field input,
.spt-form__row--contacts .spt-field select,
.spt-grid .spt-field input,
.spt-grid .spt-field select,
.spt-grid .spt-field textarea,
.spt-support-form .spt-field input,
.spt-support-form .spt-field textarea,
.spt-profile-form .spt-field input {
	height: 48px; padding: 0 14px; font-size: 1rem; font-weight: 400;
	border: 1px solid var(--spt-line); border-radius: var(--spt-radius); background: var(--spt-surface);
	transition: border-color .15s, box-shadow .15s;
}
.spt-grid .spt-field textarea,
.spt-support-form .spt-field textarea { height: auto; padding: 12px 14px; resize: vertical; }

.spt-form__row--contacts .spt-field input:focus,
.spt-grid .spt-field input:focus,
.spt-grid .spt-field select:focus,
.spt-grid .spt-field textarea:focus,
.spt-support-form .spt-field input:focus,
.spt-support-form .spt-field textarea:focus,
.spt-profile-form .spt-field input:focus {
	outline: none; border-color: var(--spt-primary); box-shadow: 0 0 0 3px var(--spt-primary-wash);
}

/* Фокус виден всегда. На боевом он погашен глобально через
   outline:none !important — кабинет из-за этого не проходится
   с клавиатуры. Здесь фокус переопределён, а не убран. */
.spt :focus-visible { outline: 2px solid var(--spt-primary); outline-offset: 2px; }
.spt-field.is-invalid { background: #fff7f7; }
.spt-field.is-invalid input { color: var(--spt-stop); }

.spt-clear {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	border: 0; background: none; font-size: 17px; line-height: 1; color: var(--spt-muted);
	cursor: pointer; padding: 0; display: none; width: 22px; height: 22px;
	border-radius: var(--spt-pill);
}
.spt-clear.is-visible { display: grid; place-items: center; }
.spt-clear:hover { color: var(--spt-stop); background: var(--spt-sunk-solid); }

/* Круглая кнопка обмена сидит на разделителе между «Откуда» и «Куда». */
.spt-swap {
	border: 1px solid var(--spt-line); background: var(--spt-surface);
	border-radius: var(--spt-pill); width: 38px; height: 38px; cursor: pointer;
	color: var(--spt-primary-deep); display: grid; place-items: center;
	position: absolute; z-index: 3; left: 50%; top: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
	box-shadow: 0 1px 3px rgba(23, 23, 23, .1);
}
@media (min-width: 1024px) {
	.spt-swap { transform: translate(-50%, -50%); }
}
.spt-swap:hover { border-color: var(--spt-primary); background: var(--spt-primary-wash); }

.spt-hint {
	color: var(--spt-stop); font-size: .76rem; margin: 2px 0 0;
	position: absolute; bottom: 2px; left: 18px;
}

/* Кнопка поиска — отдельный сегмент, отбита от рамки полем. */
.spt-submit {
	height: auto; min-height: 0; align-self: stretch; margin: 10px;
	border-radius: 10px; white-space: nowrap; padding: 0 26px; font-size: 1rem;
}

.spt-suggest {
	position: absolute; z-index: 20; top: calc(100% - 4px); left: 10px; right: 10px;
	margin: 0; padding: 6px; list-style: none;
	background: var(--spt-surface); border: 1px solid var(--spt-line);
	border-radius: var(--spt-radius); box-shadow: 0 12px 32px -12px rgba(23, 23, 23, .3);
	max-height: 280px; overflow-y: auto;
}
.spt-suggest li { margin: 0; }
.spt-suggest button {
	display: block; width: 100%; text-align: left; border: 0; background: none;
	font: inherit; padding: 10px 12px; border-radius: 6px; cursor: pointer; color: var(--spt-ink);
}
.spt-suggest button:hover,
.spt-suggest button.is-cursor { background: var(--spt-primary-wash); color: var(--spt-primary-deep); }
.spt-suggest__note { display: block; padding: 10px 12px; color: var(--spt-muted); font-size: .93rem; }

/* ── Фильтр по времени отправления ───────────────────── */
.spt-timefilter {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	padding: 12px 14px; margin: 22px 0 14px;
	background: var(--spt-surface); border: 1px solid var(--spt-line); border-radius: 8px;
}
.spt-timefilter__label { font-size: .82rem; font-weight: 600; color: var(--spt-muted); margin-right: 4px; }
.spt-time {
	font-variant-numeric: tabular-nums; font: inherit; font-size: .92rem;
	padding: 6px 13px; border: 1px solid var(--spt-line); border-radius: 6px;
	background: var(--spt-surface); color: var(--spt-ink-soft); cursor: pointer;
}
.spt-time:hover { border-color: var(--spt-primary); }
.spt-time.is-on { background: var(--spt-primary); border-color: var(--spt-primary); color: #fff; }

/* ── Карточка рейса ──────────────────────────────────── */
.spt-results__title { margin: 34px 0 14px; font-size: 1.25rem; }

.spt-card {
	background: var(--spt-surface); border: 1px solid var(--spt-line);
	border-radius: var(--spt-radius); margin-bottom: 14px; overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.spt-card:hover { box-shadow: var(--spt-shadow); }
.spt-card.is-picked { border-color: var(--spt-primary); box-shadow: 0 0 0 2px var(--spt-primary-wash); }
.spt-card.is-off { opacity: .7; }

/* Стопка на мобильном, три фиксированные колонки от 768px. */
.spt-card__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.spt-card__grid { grid-template-columns: 112px minmax(0, 1fr) 232px; }
}

/* Левая колонка: цена и время в двух плашках. */
.spt-card__aside {
	display: flex; flex-direction: column; gap: 8px; justify-content: center;
	padding: 16px; border-bottom: 1px solid var(--spt-line);
}
@media (min-width: 768px) {
	.spt-card__aside { border-bottom: 0; border-right: 1px solid var(--spt-line); }
}
.spt-plaque {
	background: var(--spt-sky); border-radius: var(--spt-plaque);
	padding: 9px 10px; text-align: center; line-height: 1.25;
}
.spt-plaque b { display: block; font-size: .98rem; font-variant-numeric: tabular-nums; }
.spt-plaque span { display: block; font-size: .72rem; color: var(--spt-muted); }

/* Средняя колонка: маршрут. */
.spt-card__main { padding: 16px 18px; min-width: 0; }
.spt-card__route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 640px) { .spt-card__route { gap: 16px; } }
.spt-card__point { min-width: 0; }
.spt-card__point b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.spt-card__point span { font-size: .88rem; color: var(--spt-muted); overflow-wrap: anywhere; }
.spt-card__dur {
	flex: 1 1 90px; min-width: 80px; text-align: center;
	font-size: .78rem; color: var(--spt-muted); position: relative; padding-top: 10px;
}
.spt-card__dur::before {
	content: ""; position: absolute; left: 0; right: 0; top: 4px;
	border-top: 1px solid var(--spt-line);
}
.spt-card__meta {
	margin-top: 12px; font-size: .88rem; color: var(--spt-ink-soft);
	display: flex; flex-wrap: wrap; gap: 4px 14px;
}

/* Удобства — иконки без подписей, не более шести. */
.spt-amenities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: var(--spt-muted); }
@media (min-width: 640px) { .spt-amenities { gap: 10px; } }
.spt-amenity { display: inline-flex; cursor: help; }
.spt-amenity svg { display: block; }

/* Правая колонка: счётчик НАД кнопкой. */
.spt-card__act {
	display: flex; flex-direction: column; gap: 10px; justify-content: center;
	padding: 16px; background: var(--spt-sunk); border-top: 1px solid var(--spt-line);
}
@media (min-width: 768px) {
	.spt-card__act { border-top: 0; border-left: 1px solid var(--spt-line); }
}
.spt-counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spt-counter button {
	width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--spt-line);
	background: var(--spt-surface); border-radius: var(--spt-pill);
	font-size: 17px; line-height: 1; cursor: pointer; color: var(--spt-ink);
}
.spt-counter button:hover:not([disabled]) { border-color: var(--spt-primary); color: var(--spt-primary-deep); }
.spt-counter button[disabled] { opacity: .4; cursor: not-allowed; }
.spt-counter b { font-variant-numeric: tabular-nums; }
.spt-card__sum { font-size: .88rem; color: var(--spt-ink-soft); text-align: center; }

.spt-status {
	display: inline-block; font-size: .78rem; padding: 3px 10px;
	border-radius: var(--spt-pill); text-align: center;
}
.spt-status--ok { background: var(--spt-ok-wash); color: var(--spt-ok); }
.spt-status--stop { background: var(--spt-stop-wash); color: var(--spt-stop); }
.spt-status--warn { background: var(--spt-warn-wash); color: var(--spt-warn); }
.spt-status--neutral { background: var(--spt-sunk-solid); color: var(--spt-muted); }

/* Раскрывающиеся блоки — во всю ширину под колонками. */
.spt-card__more { border-top: 1px solid var(--spt-line); padding: 4px 18px 8px; }
.spt-disc { border-bottom: 1px solid var(--spt-line-soft); }
.spt-disc:last-child { border-bottom: 0; }
.spt-disc__btn {
	width: 100%; text-align: left; border: 0; background: none; font: inherit; font-weight: 600;
	padding: 11px 0; cursor: pointer; color: var(--spt-primary-deep);
	display: flex; justify-content: space-between; gap: 10px;
}
.spt-disc__btn::after { content: "▾"; transition: transform .15s; }
.spt-disc.is-open .spt-disc__btn::after { transform: rotate(180deg); }
.spt-disc__body { display: none; padding: 0 0 14px; font-size: .93rem; color: var(--spt-ink-soft); }
.spt-disc.is-open .spt-disc__body { display: block; }

.spt-stops { list-style: none; padding: 0; margin: 0; }
.spt-stops li { display: flex; gap: 14px; padding: 5px 0; }
.spt-stops time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 72px; }

.spt-rules { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 10px; }
.spt-rules th, .spt-rules td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--spt-line-soft); }
.spt-rules th { color: var(--spt-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── Пустые состояния ────────────────────────────────── */
.spt-empty {
	padding: 34px; text-align: center; background: var(--spt-sunk);
	border: 1px dashed var(--spt-line); border-radius: var(--spt-radius); margin: 20px 0;
}
.spt-loading { padding: 26px; text-align: center; color: var(--spt-muted); }

/* ── Оформление ──────────────────────────────────────── */
.spt-timer {
	display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
	background: var(--spt-warn-wash); color: var(--spt-warn);
	border: 1px solid rgba(151,96,11,.25); border-radius: var(--spt-radius);
	padding: 13px 18px; margin-bottom: 22px; font-size: .95rem;
}
.spt-timer b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.spt-block { margin-bottom: 30px; }
.spt-trip-summary { background: var(--spt-sunk); border: 1px solid var(--spt-line); border-radius: var(--spt-radius); padding: 18px; }
.spt-trip-summary + .spt-trip-summary { margin-top: 12px; }
.spt-trip-summary h4 { margin: 0 0 6px; font-size: 1.02rem; }

.spt-pax {
	border: 1px solid var(--spt-line); border-radius: var(--spt-radius);
	margin-bottom: 12px; background: var(--spt-surface); overflow: hidden;
}
.spt-pax__head {
	width: 100%; text-align: left; border: 0; background: var(--spt-sunk); font: inherit; font-weight: 600;
	padding: 13px 18px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.spt-pax__head::after { content: "▾"; transition: transform .15s; }
.spt-pax.is-open .spt-pax__head::after { transform: rotate(180deg); }
.spt-pax__body { display: none; padding: 18px; }
.spt-pax.is-open .spt-pax__body { display: block; }
.spt-pax__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.spt-pax__free { color: var(--spt-ok); font-weight: 600; }

@media (min-width: 768px) {
	.spt-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.spt-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.spt-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Галочка под полем: прижата влево и по базовой линии, иначе inline-input
   наследует width:100% от полей формы и уезжает в центр. */
.spt-check {
	display: flex; align-items: center; justify-content: flex-start;
	gap: 8px; font-size: .9rem; margin: 8px 0 0; cursor: pointer; color: var(--spt-ink-soft);
}
.spt-check input[type="checkbox"] {
	width: 16px; height: 16px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0;
}

.spt-total {
	background: var(--spt-sunk); border: 1px solid var(--spt-line);
	border-radius: var(--spt-radius); padding: 18px 20px;
}
.spt-total__row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: .95rem; }
.spt-total__row--grand { border-top: 1px solid var(--spt-line); margin-top: 8px; padding-top: 12px; font-size: 1.15rem; font-weight: 700; }

.spt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

/* ── Модальные окна ──────────────────────────────────── */
.spt-modal {
	position: fixed; inset: 0; z-index: 9999; background: rgba(14,23,32,.55);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.spt-modal[hidden] { display: none; }
.spt-modal__box {
	background: var(--spt-surface); border-radius: 12px; max-width: 560px; width: 100%;
	max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.spt-modal__head, .spt-modal__foot {
	padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.spt-modal__head { border-bottom: 1px solid var(--spt-line); }
.spt-modal__foot { border-top: 1px solid var(--spt-line); justify-content: flex-end; }
.spt-modal__head h3 { margin: 0; }
.spt-modal__close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--spt-muted); }
.spt-modal__body { padding: 20px; overflow-y: auto; }

/* Схема салона */
.spt-seatmap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.spt-seatrow { display: grid; grid-template-columns: repeat(2, 34px) 26px repeat(2, 34px); gap: 8px; }
.spt-seat {
	width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--spt-line);
	background: var(--spt-surface); font-size: .8rem; cursor: pointer; display: inline-grid; place-items: center;
	font-variant-numeric: tabular-nums; padding: 0; color: var(--spt-ink);
}
.spt-seat--aisle { border: 0; background: none; cursor: default; }
.spt-seat--free:hover { border-color: var(--spt-primary); }
.spt-seat--busy { background: var(--spt-line); color: var(--spt-muted); cursor: not-allowed; }
.spt-seat--picked { background: var(--spt-primary); border-color: var(--spt-primary); color: #fff; }
.spt-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: .87rem; color: var(--spt-muted); }
.spt-legend span { display: flex; align-items: center; gap: 7px; }
.spt-legend .spt-seat { width: 18px; height: 18px; cursor: default; }

/* ── Оплата ──────────────────────────────────────────── */
.spt-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.spt-method {
	display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px;
	border: 1px solid var(--spt-line); border-radius: var(--spt-radius); cursor: pointer; background: var(--spt-surface);
}
.spt-method:has(input:checked) { border-color: var(--spt-primary); background: var(--spt-primary-wash); }
.spt-method input { margin-top: 5px; }
.spt-method b { display: block; }
.spt-method small { color: var(--spt-muted); }

.spt-payment__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 16px 18px; background: var(--spt-sunk); border-radius: var(--spt-radius); border: 1px solid var(--spt-line);
}
.spt-payment__total b { font-size: 1.35rem; }

.spt-qr { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.spt-qr__code {
	width: 208px; height: 208px; background: #fff; border: 1px solid var(--spt-line);
	border-radius: 8px; display: grid; place-items: center; padding: 10px;
}
.spt-qr__code svg { width: 100%; height: 100%; }
.spt-qr__side { flex: 1; min-width: 220px; }
.spt-qr__status { font-weight: 600; color: var(--spt-primary-deep); }

.spt-spinner {
	width: 26px; height: 26px; border: 3px solid var(--spt-line);
	border-top-color: var(--spt-primary); border-radius: 50%; animation: spt-spin .9s linear infinite;
}
@keyframes spt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spt-spinner { animation: none; } }

.spt-result { padding: 30px; border-radius: var(--spt-radius); border: 1px solid var(--spt-line); background: var(--spt-surface); }
.spt-result--ok { border-color: rgba(31,122,77,.4); background: var(--spt-ok-wash); }
.spt-result--fail { border-color: rgba(165,47,54,.4); background: var(--spt-stop-wash); }
.spt-result__list { margin: 16px 0; }
.spt-result__list div { display: flex; gap: 12px; padding: 5px 0; }
.spt-result__list dt { color: var(--spt-muted); min-width: 150px; }
.spt-result__list dd { margin: 0; font-weight: 600; }

/* ── Личный кабинет ──────────────────────────────────── */
/* Меню слева одной колонкой из четырёх; ниже 1024px превращается
   в горизонтальную прокручиваемую ленту над содержимым. */
/* База объявляется до переопределений: медиа-запрос не повышает
   специфичность, поэтому при равных селекторах побеждает тот, что ниже
   по файлу. Порядок «база → медиа» — единственное, что удерживает
   переопределения работающими. */
.spt-account__layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.spt-account__toggle { display: none; }
.spt-account__nav { display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 1024px) {
	.spt-account__layout { grid-template-columns: repeat(4, 1fr); gap: 32px; }
	.spt-account__nav { grid-column: span 1; position: sticky; top: 88px; }
	.spt-account__body { grid-column: span 3; min-width: 0; }
}

.spt-account__link {
	text-align: left; border: 0; background: none; font: inherit; padding: 10px 14px;
	border-radius: var(--spt-radius); cursor: pointer; color: var(--spt-ink-soft);
	border-left: 2px solid transparent;
}
.spt-account__link:hover { background: var(--spt-sunk-solid); color: var(--spt-primary-deep); }
.spt-account__link.is-active {
	background: var(--spt-primary-wash); color: var(--spt-primary-deep);
	font-weight: 600; border-left-color: var(--spt-primary);
}

@media (max-width: 1023px) {
	.spt-account__nav {
		flex-direction: row; gap: 8px; overflow-x: auto;
		scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
	}
	.spt-account__nav::-webkit-scrollbar { display: none; }
	.spt-account__link {
		white-space: nowrap; flex: 0 0 auto; border: 1px solid var(--spt-line);
		border-radius: var(--spt-pill); border-left-width: 1px;
	}
	/* Вертикальная полоска слева осмысленна в колонке, но на горизонтальной
	   ленте читается как случайная чёрточка перед текстом — гасим. */
	.spt-account__link { border-left-width: 1px; }
	.spt-account__link.is-active { border-color: var(--spt-primary); border-left-color: var(--spt-primary); }
}

.spt-account__pane { display: none; }
.spt-account__pane.is-active { display: block; }

.spt-subtabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.spt-subtabs::-webkit-scrollbar { display: none; }
.spt-subtab {
	border: 1px solid var(--spt-line); background: var(--spt-surface); font: inherit;
	padding: 8px 16px; border-radius: var(--spt-pill); cursor: pointer;
	font-size: .92rem; color: var(--spt-ink-soft); white-space: nowrap; flex: 0 0 auto;
}
.spt-subtab:hover { border-color: var(--spt-primary); }
.spt-subtab.is-active { background: var(--spt-primary); border-color: var(--spt-primary); color: #fff; }

.spt-group { margin-bottom: 28px; }
.spt-group h3 { margin-top: 0; }

/* Билет — элемент аккордеона, не строка таблицы и не карточка с рамкой. */
.spt-ticket { border: 1px solid var(--spt-line); border-radius: var(--spt-radius); margin-bottom: 10px; background: var(--spt-surface); overflow: hidden; }
.spt-ticket__head {
	width: 100%; text-align: left; border: 0; background: none; font: inherit; cursor: pointer;
	padding: 15px 18px; display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center;
}
@media (min-width: 640px) { .spt-ticket__head { grid-template-columns: auto 1fr auto; } }
.spt-ticket__head:hover { background: var(--spt-sunk-solid); }
.spt-ticket__icon { display: inline-flex; flex: 0 0 auto; }
.spt-ticket__route { font-weight: 600; display: block; }
.spt-ticket__when { font-size: .88rem; color: var(--spt-muted); }
.spt-ticket__body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--spt-line-soft); }
.spt-ticket.is-open .spt-ticket__body { display: block; }
.spt-ticket__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.spt-ticket__grid b { display: block; font-size: .78rem; color: var(--spt-muted); font-weight: 600; }

.spt-plist { list-style: none; padding: 0; margin: 0 0 14px; }
.spt-plist li { padding: 11px 0; border-bottom: 1px solid var(--spt-line-soft); }
.spt-plist li:last-child { border-bottom: 0; }
.spt-plist .spt-muted { display: block; }

.spt-row {
	display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
	padding: 15px 18px; border: 1px solid var(--spt-line); border-radius: var(--spt-radius);
	margin-bottom: 10px; background: var(--spt-surface);
}
@media (min-width: 640px) { .spt-row { grid-template-columns: 1fr auto; } }
.spt-row__meta { font-size: .88rem; color: var(--spt-muted); }

.spt-thread { border: 1px solid var(--spt-line); border-radius: var(--spt-radius); margin-bottom: 10px; background: var(--spt-surface); overflow: hidden; }
.spt-thread__head { width: 100%; text-align: left; border: 0; background: none; font: inherit; cursor: pointer; padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.spt-thread__head:hover { background: var(--spt-sunk-solid); }
.spt-thread__body { display: none; padding: 0 18px 18px; }
.spt-thread.is-open .spt-thread__body { display: block; }
.spt-msg { padding: 12px 14px; border-radius: var(--spt-plaque); background: var(--spt-sunk-solid); margin-bottom: 10px; }
.spt-msg--support { background: var(--spt-primary-wash); }
.spt-msg__who { font-size: .78rem; color: var(--spt-muted); margin-bottom: 4px; }

.spt-support-form, .spt-profile-form { max-width: 640px; }
.spt-support-form .spt-field, .spt-profile-form .spt-field { margin-bottom: 14px; }

/* ── Плашка демо-режима ──────────────────────────────── */
.spt-demo-badge {
	margin-top: 30px; padding: 12px 16px; font-size: .87rem; color: var(--spt-muted);
	background: var(--spt-sunk); border: 1px dashed var(--spt-line); border-radius: 8px;
}

/* ── Адаптив ─────────────────────────────────────────── */
/* Сетки объявлены mobile-first выше: широкие раскладки включаются
   на min-width 768 и 1024. Здесь остаются только точечные правки. */

@media (max-width: 767px) {
	.spt { font-size: 15px; }

	/* Ленты прокручиваются, а не переносятся: шесть вкладок транспорта
	   в три ряда и фильтр времени на пол-экрана отжимают выдачу под сгиб. */
	.spt-timefilter {
		flex-wrap: nowrap; overflow-x: auto;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.spt-timefilter::-webkit-scrollbar { display: none; }
	.spt-time { flex: 0 0 auto; }
	.spt-timefilter__label { flex: 0 0 auto; }

	/* Тач-цели до 44px: столько же, сколько на боевом. */
	.spt-counter button { width: 44px; height: 44px; font-size: 20px; }
	.spt-clear { width: 40px; height: 40px; display: none; place-items: center; }
	.spt-clear.is-visible { display: grid; }
	.spt-seatrow { grid-template-columns: repeat(2, 44px) 26px repeat(2, 44px); gap: 6px; }
	.spt-seat { width: 44px; height: 44px; }
	.spt-legend .spt-seat { width: 18px; height: 18px; }

	/* Кнопка обмена стоит на стыке полей — разводим её с подписью «Куда». */
	.spt-pair > .spt-field:first-child { padding-bottom: 26px; }
	.spt-pair > .spt-field:last-child { padding-top: 26px; }

	/* Плашки цены и времени — в ряд, а не столбиком. */
	.spt-card__aside { flex-direction: row; }
	.spt-plaque { flex: 1 1 0; }

	/* Главное действие карточки занимает всю ширину. */
	.spt-card__act .spt-btn { width: 100%; }
	.spt-actions .spt-btn { width: 100%; }
	.spt-modal { padding: 12px; align-items: flex-end; }
	.spt-modal__box { max-height: 88vh; }
	.spt-qr { justify-content: center; }
	.spt-payment__total { flex-wrap: wrap; }
}