/*
 * Horizon Transfers skin for the booking wizard.
 *
 * Layered over booking.css. Every rule is scoped to .kv-root.kv-horizon so it
 * wins over the base rules without !important and never leaks into the theme.
 * Colours, sizes and fonts still come from the design settings (CSS variables).
 */

.kv-root.kv-horizon {
	--kv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hz-hair: rgba(242, 236, 223, 0.08);
	--hz-hair-2: rgba(242, 236, 223, 0.14);
	--hz-gold-12: rgba(201, 164, 92, 0.12);
	--hz-gold-40: rgba(201, 164, 92, 0.4);
	--hz-gold-grad: linear-gradient(120deg, #b18b43, #d9b878 45%, #c9a45c 60%, #a8853f);
	--hz-gold-text: linear-gradient(105deg, #a8853f 0%, #e9d2a2 38%, #c9a45c 55%, #f4e3bb 78%, #a8853f 100%);
	--hz-field-bg: #0d0d12;
	background: transparent;
	color: var(--kv-ink);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- layout */

.kv-root.kv-horizon .kv-panel,
.kv-root.kv-horizon .kv-stepper {
	max-width: none;
}

.kv-root.kv-horizon .kv-shell {
	align-items: start;
}

/* ------------------------------------------------------------ headings */

.kv-root.kv-horizon .kv-heading,
.kv-root.kv-horizon h2.kv-heading {
	font-family: var(--kv-font-heading);
	font-size: var(--kv-h2-size);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0;
	color: var(--kv-ink);
	margin-top: 22px;
}

/* Ornamented label: hairline + diamond + text, as in the section headings. */
.kv-root.kv-horizon .kv-eyebrow-beam {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.42em;
	color: var(--kv-beam);
	text-transform: uppercase;
}

.kv-root.kv-horizon .kv-eyebrow-beam::before {
	content: "";
	width: 32px;
	height: 1px;
	background: rgba(201, 164, 92, 0.6);
	flex: none;
}

.kv-root.kv-horizon .kv-eyebrow-beam::after {
	content: "";
	order: -1;
	display: none;
}

.kv-root.kv-horizon .kv-hero-rule {
	display: block;
	width: 64px;
	height: 1px;
	margin: 24px 0 0;
	background: linear-gradient(90deg, var(--kv-beam), transparent);
}

.kv-root.kv-horizon .kv-lede,
.kv-root.kv-horizon .kv-intro {
	color: var(--kv-ink-soft);
	font-size: var(--kv-lede-size);
	font-weight: 300;
	line-height: 1.625;
	max-width: 36em;
}

.kv-root.kv-horizon .kv-step-body {
	margin-top: 36px;
}

/* ------------------------------------------------------------- stepper */

.kv-root.kv-horizon .kv-stepper {
	margin-bottom: 48px;
}

.kv-root.kv-horizon .kv-step {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba(242, 236, 223, 0.4);
}

.kv-root.kv-horizon .kv-step.kv-is-past {
	color: rgba(242, 236, 223, 0.7);
}

.kv-root.kv-horizon .kv-step.kv-is-past:hover,
.kv-root.kv-horizon .kv-step.kv-is-current {
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-step-dot {
	width: 26px;
	height: 26px;
	border: 1px solid var(--hz-hair-2);
	background: transparent;
	font-family: var(--kv-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
	color: rgba(242, 236, 223, 0.55);
}

.kv-root.kv-horizon .kv-is-past .kv-step-dot {
	border-color: var(--hz-gold-40);
	background: rgba(201, 164, 92, 0.08);
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-is-current .kv-step-dot {
	border-color: transparent;
	background: var(--hz-gold-grad);
	color: #14100a;
}

.kv-root.kv-horizon .kv-step-sep {
	background: var(--hz-hair-2);
}

.kv-root.kv-horizon .kv-progress {
	height: 1px;
	background: var(--hz-hair);
	margin-top: 24px;
}

/* --------------------------------------------------------------- cards */

.kv-root.kv-horizon .kv-card {
	background: var(--kv-surface);
	border: 1px solid var(--hz-hair);
	border-radius: 16px;
	box-shadow: none;
	transition: border-color 0.5s ease, transform 0.5s var(--kv-ease), background-color 0.4s ease, box-shadow 0.5s ease;
}

.kv-root.kv-horizon .kv-card-lift:hover {
	transform: translateY(-8px);
	border-color: var(--hz-gold-40);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.kv-root.kv-horizon .kv-card-rule::before {
	background: var(--hz-gold-grad);
	height: 2px;
}

/* ------------------------------------------------------------ services */

.kv-root.kv-horizon .kv-service-grid {
	gap: 20px;
}

.kv-root.kv-horizon .kv-service-media {
	aspect-ratio: 4 / 3;
	background: var(--kv-ground);
}

.kv-root.kv-horizon .kv-service-media::after {
	background: linear-gradient(to top, rgba(18, 18, 26, 1) 0%, rgba(9, 9, 12, 0.25) 45%, transparent 75%);
}

.kv-root.kv-horizon .kv-service-index {
	top: 18px;
	left: 18px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--hz-gold-40);
	background: rgba(9, 9, 12, 0.7);
	color: var(--kv-beam);
	font-family: var(--kv-font-body);
	font-size: 11px;
	font-weight: 700;
}

.kv-root.kv-horizon .kv-service-cta {
	right: 18px;
	bottom: 16px;
	color: var(--kv-beam);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.26em;
}

.kv-root.kv-horizon .kv-service-body {
	padding: 4px 26px 28px;
	gap: 8px;
}

.kv-root.kv-horizon .kv-service-name {
	font-family: var(--kv-font-heading);
	font-size: var(--kv-h3-size);
	font-weight: 500;
	line-height: 1.15;
	color: var(--kv-ink);
}

.kv-root.kv-horizon .kv-service-body,
.kv-root.kv-horizon .kv-service-name,
.kv-root.kv-horizon .kv-service-detail {
	white-space: normal;
	overflow-wrap: anywhere;
	min-width: 0;
}

.kv-root.kv-horizon .kv-service-detail {
	color: var(--kv-ink-soft);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.55;
}

.kv-root.kv-horizon .kv-service.kv-is-on,
.kv-root.kv-horizon .kv-service[aria-pressed="true"] {
	border-color: var(--kv-beam);
}

/* --------------------------------------------------------------- towns */

.kv-root.kv-horizon .kv-towns {
	gap: 14px;
}

.kv-root.kv-horizon .kv-town {
	padding: 22px 24px;
	border-radius: 14px;
}

.kv-root.kv-horizon .kv-town:hover {
	border-color: var(--hz-gold-40);
}

.kv-root.kv-horizon .kv-town.kv-is-on {
	border-color: var(--kv-beam);
	background: linear-gradient(180deg, rgba(201, 164, 92, 0.1), rgba(201, 164, 92, 0.03));
}

.kv-root.kv-horizon .kv-town-name {
	font-size: 24px;
	font-weight: 500;
}

/* ----------------------------------------------------- journeys & fields */

.kv-root.kv-horizon .kv-journey {
	padding: 28px;
	border-radius: 16px;
	border-color: var(--hz-gold-12);
}

.kv-root.kv-horizon .kv-journey-title {
	font-family: var(--kv-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba(242, 236, 223, 0.5);
	margin-bottom: 10px;
}

.kv-root.kv-horizon .kv-field,
.kv-root.kv-horizon .kv-select-btn,
.kv-root.kv-horizon .kv-place-input {
	background: var(--hz-field-bg);
	border: 1px solid var(--hz-hair-2);
	border-radius: 12px;
	color: var(--kv-ink);
	font-family: var(--kv-font-body);
	font-size: var(--kv-field-size);
	font-weight: 400;
	min-height: 52px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.kv-root.kv-horizon .kv-field:hover,
.kv-root.kv-horizon .kv-select-btn:hover,
.kv-root.kv-horizon .kv-place-input:hover {
	border-color: rgba(201, 164, 92, 0.35);
}

.kv-root.kv-horizon .kv-field:focus,
.kv-root.kv-horizon .kv-select-btn:focus,
.kv-root.kv-horizon .kv-place-input:focus {
	border-color: var(--kv-beam);
	box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.14);
	outline: none;
}

.kv-root.kv-horizon ::placeholder {
	color: rgba(242, 236, 223, 0.32);
}

.kv-root.kv-horizon .kv-field-note,
.kv-root.kv-horizon .kv-picker-note,
.kv-root.kv-horizon .kv-note {
	color: rgba(242, 236, 223, 0.45);
	font-size: 12.5px;
}

.kv-root.kv-horizon .kv-pop {
	background: var(--kv-raised);
	border: 1px solid var(--hz-gold-12);
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}

.kv-root.kv-horizon .kv-option.kv-is-active,
.kv-root.kv-horizon .kv-option:hover {
	background: rgba(201, 164, 92, 0.1);
}

.kv-root.kv-horizon .kv-option.kv-is-selected {
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-add-journey {
	width: auto;
	align-self: flex-start;
	justify-self: start;
	border: 1px solid var(--hz-gold-40);
	color: var(--kv-beam);
	border-radius: 999px;
	padding: 14px 26px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	background: transparent;
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--kv-ease);
}

.kv-root.kv-horizon .kv-add-journey:hover {
	border-color: var(--kv-beam);
	background: rgba(201, 164, 92, 0.06);
	transform: translateY(-2px);
}

/* ------------------------------------------------------ calendar & slots */

.kv-root.kv-horizon .kv-picker {
	background: var(--kv-surface);
	border: 1px solid var(--hz-hair);
	border-radius: 16px;
}

.kv-root.kv-horizon .kv-picker-title {
	font-size: 22px;
	font-weight: 500;
}

.kv-root.kv-horizon .kv-picker-nav {
	border-color: var(--hz-gold-40);
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-cal-dow {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: rgba(242, 236, 223, 0.4);
}

.kv-root.kv-horizon .kv-cal-day {
	border-radius: 10px;
	color: var(--kv-ink);
	font-weight: 400;
}

.kv-root.kv-horizon .kv-cal-day:hover:not(:disabled) {
	background: rgba(201, 164, 92, 0.1);
	color: var(--kv-beam);
}

.kv-root.kv-horizon .kv-cal-day:disabled {
	color: rgba(242, 236, 223, 0.18);
}

.kv-root.kv-horizon .kv-cal-day.kv-is-on,
.kv-root.kv-horizon .kv-slot.kv-is-on {
	background: var(--hz-gold-grad);
	color: #14100a;
	border-color: transparent;
	font-weight: 600;
}

.kv-root.kv-horizon .kv-slot {
	background: var(--hz-field-bg);
	border-color: var(--hz-hair);
	border-radius: 10px;
	font-size: 14px;
}

.kv-root.kv-horizon .kv-slot:hover {
	border-color: var(--hz-gold-40);
	color: var(--kv-beam);
}

/* -------------------------------------------------------------- buttons */

.kv-root.kv-horizon .kv-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 999px;
	font-family: var(--kv-font-body);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	gap: 12px;
}

.kv-root.kv-horizon .kv-btn-primary {
	background: var(--hz-gold-grad);
	border: 0;
	color: #14100a;
	font-weight: 700;
	padding: 19px 38px;
	box-shadow: 0 0 0 rgba(201, 164, 92, 0);
}

.kv-root.kv-horizon .kv-btn-primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 18px 44px -14px rgba(201, 164, 92, 0.55);
}

.kv-root.kv-horizon .kv-btn-primary::after {
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	width: 55%;
	transform: translateX(-160%) skewX(-22deg);
	transition: transform 0.7s var(--kv-ease);
}

.kv-root.kv-horizon .kv-btn-primary:hover::after {
	transform: translateX(260%) skewX(-22deg);
}

.kv-root.kv-horizon .kv-btn-primary:disabled {
	opacity: 1;
	background: rgba(242, 236, 223, 0.06);
	color: rgba(242, 236, 223, 0.35);
}

.kv-root.kv-horizon .kv-btn-outline {
	border: 1px solid rgba(242, 236, 223, 0.22);
	color: var(--kv-ink);
	font-weight: 600;
	padding: 18px 32px;
	transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s var(--kv-ease), color 0.4s ease;
}

.kv-root.kv-horizon .kv-btn-outline:hover:not(:disabled) {
	border-color: rgba(201, 164, 92, 0.7);
	background: rgba(201, 164, 92, 0.06);
	color: var(--kv-ink);
	transform: translateY(-2px);
}

.kv-root.kv-horizon .kv-nav {
	border-top-color: var(--hz-hair);
	margin-top: 48px;
	padding-top: 36px;
}

/* ------------------------------------------------------------- summary */

.kv-root.kv-horizon .kv-summary {
	background: var(--kv-surface);
	border: 1px solid var(--hz-gold-12);
	border-radius: 16px;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}

.kv-root.kv-horizon .kv-summary-bar {
	height: 2px;
	background: var(--hz-gold-grad);
}

.kv-root.kv-horizon .kv-summary-inner {
	padding: 30px;
}

.kv-root.kv-horizon .kv-summary-title {
	font-family: var(--kv-font-heading);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
}

.kv-root.kv-horizon .kv-summary-vehicle {
	color: var(--kv-beam);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	margin-top: 8px;
}

.kv-root.kv-horizon .kv-summary-empty {
	color: var(--kv-ink-soft);
	font-size: 14px;
}

.kv-root.kv-horizon .kv-summary-row {
	border-color: var(--hz-hair);
	min-width: 0;
}

/* Long routes wrap inside the card instead of running past its edge. */
.kv-root.kv-horizon .kv-summary-val {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.kv-root.kv-horizon .kv-summary-edit {
	display: inline;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.kv-root.kv-horizon .kv-summary,
.kv-root.kv-horizon .kv-summary-inner,
.kv-root.kv-horizon .kv-fare,
.kv-root.kv-horizon .kv-fare-line dd {
	min-width: 0;
	overflow-wrap: anywhere;
}

.kv-root.kv-horizon .kv-fare-line {
	gap: 16px;
}

.kv-root.kv-horizon .kv-fare-line dt {
	flex: none;
}

/* Belt and braces: no theme hover fill on any wizard control. */
.kv-root.kv-horizon .kv-step:hover,
.kv-root.kv-horizon .kv-step:focus,
.kv-root.kv-horizon .kv-summary-edit:hover,
.kv-root.kv-horizon .kv-summary-edit:focus,
.kv-root.kv-horizon .kv-remove:hover,
.kv-root.kv-horizon .kv-remove:focus,
.kv-root.kv-horizon .kv-cal-day:focus,
.kv-root.kv-horizon .kv-option:focus {
	background-color: transparent;
}

.kv-root.kv-horizon .kv-town:hover,
.kv-root.kv-horizon .kv-town:focus,
.kv-root.kv-horizon .kv-service:hover,
.kv-root.kv-horizon .kv-service:focus {
	background-color: var(--kv-surface);
	color: var(--kv-ink);
}

.kv-root.kv-horizon .kv-town.kv-is-on:hover,
.kv-root.kv-horizon .kv-town.kv-is-on:focus {
	background-color: transparent;
}

.kv-root.kv-horizon .kv-select-btn:focus,
.kv-root.kv-horizon .kv-slot:focus {
	background-color: var(--hz-field-bg);
}

.kv-root.kv-horizon .kv-summary-key {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba(242, 236, 223, 0.45);
}

.kv-root.kv-horizon .kv-summary-val {
	color: var(--kv-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* The value itself is the edit button: it jumps back to that step. */
.kv-root.kv-horizon .kv-summary-edit {
	color: var(--kv-ink);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-align: end;
	line-height: 1.5;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.kv-root.kv-horizon .kv-summary-edit:hover {
	color: var(--kv-beam);
	border-bottom-color: rgba(201, 164, 92, 0.5);
}

.kv-root.kv-horizon .kv-summary-total {
	border-color: var(--hz-gold-12);
}

.kv-root.kv-horizon .kv-summary-price,
.kv-root.kv-horizon .kv-fare-price,
.kv-root.kv-horizon .kv-declined-price {
	font-family: var(--kv-font-heading);
	font-weight: 500;
	background: var(--hz-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.kv-root.kv-horizon .kv-summary-pending {
	color: var(--kv-ink-soft);
	font-size: 14px;
	font-style: italic;
	font-family: var(--kv-font-heading);
	font-size: 19px;
}

.kv-root.kv-horizon .kv-fare-line dt {
	color: rgba(242, 236, 223, 0.45);
}

.kv-root.kv-horizon .kv-fare-line dd {
	color: var(--kv-ink);
}

/* ------------------------------------------------- payment & terms */

.kv-root.kv-horizon .kv-payment {
	padding: 24px 26px;
}

.kv-root.kv-horizon .kv-payment.kv-is-on {
	border-color: var(--kv-beam);
	background: linear-gradient(180deg, rgba(201, 164, 92, 0.08), rgba(201, 164, 92, 0.02));
}

.kv-root.kv-horizon .kv-payment-label {
	font-size: 22px;
	font-weight: 500;
}

/* Custom radio and checkbox: the base reset strips the native controls. */
.kv-root.kv-horizon input[type='radio'],
.kv-root.kv-horizon input[type='checkbox'] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1px solid rgba(201, 164, 92, 0.55);
	background: var(--hz-field-bg);
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.kv-root.kv-horizon input[type='radio'] {
	border-radius: 999px;
}

.kv-root.kv-horizon input[type='checkbox'] {
	border-radius: 6px;
}

.kv-root.kv-horizon input[type='radio']::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--hz-gold-grad);
	transform: scale(0);
	transition: transform 0.3s var(--kv-ease);
}

.kv-root.kv-horizon input[type='checkbox']::before {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid #14100a;
	border-bottom: 2px solid #14100a;
	transform: translateY(-1px) rotate(-45deg) scale(0);
	transition: transform 0.3s var(--kv-ease);
}

.kv-root.kv-horizon input[type='radio']:checked::before {
	transform: scale(1);
}

.kv-root.kv-horizon input[type='checkbox']:checked {
	background: var(--hz-gold-grad);
	border-color: transparent;
}

.kv-root.kv-horizon input[type='checkbox']:checked::before {
	transform: translateY(-1px) rotate(-45deg) scale(1);
}

.kv-root.kv-horizon input[type='radio']:focus-visible,
.kv-root.kv-horizon input[type='checkbox']:focus-visible {
	box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.2);
	outline: none;
}

.kv-root.kv-horizon .kv-payment-top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kv-root.kv-horizon .kv-payment-desc {
	display: block;
	margin-top: 10px;
	color: var(--kv-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

.kv-root.kv-horizon .kv-terms {
	gap: 16px;
	padding: 24px 26px;
	background: var(--kv-surface);
	border: 1px solid var(--hz-hair);
	font-size: 15px;
	transition: border-color 0.3s ease;
}

.kv-root.kv-horizon .kv-terms:hover {
	border-color: var(--hz-gold-40);
}

.kv-root.kv-horizon .kv-terms .kv-payment-desc {
	margin-top: 6px;
}

/* Vertical rhythm between the blocks of a step. */
.kv-root.kv-horizon .kv-step-body > * + * {
	margin-top: 32px;
}

.kv-root.kv-horizon .kv-step-body > .kv-nav {
	margin-top: 48px;
}

.kv-root.kv-horizon .kv-step-body > .kv-label {
	margin-top: 40px;
	margin-bottom: 12px;
}

.kv-root.kv-horizon .kv-step-body > .kv-label + * {
	margin-top: 0;
}

.kv-root.kv-horizon .kv-grid-2,
.kv-root.kv-horizon .kv-grid-3 {
	gap: 26px 22px;
	align-items: start;
}

.kv-root.kv-horizon .kv-country-row > div:first-child {
	width: 150px;
}

.kv-root.kv-horizon .kv-country-row > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.kv-root.kv-horizon textarea.kv-field {
	min-height: 120px;
	padding-top: 14px;
	line-height: 1.6;
	resize: vertical;
}

.kv-root.kv-horizon .kv-fare {
	padding: 30px;
}

.kv-root.kv-horizon .kv-fare-title {
	font-size: 26px;
	font-weight: 500;
}

.kv-root.kv-horizon .kv-fare-lines {
	border-top: 1px solid var(--hz-hair);
	padding-top: 18px;
	margin-top: 18px;
	gap: 10px;
}

.kv-root.kv-horizon .kv-fare-line dt {
	font-size: 13px;
}

.kv-root.kv-horizon .kv-fare-line dd {
	font-size: 14px;
	text-align: end;
}

.kv-root.kv-horizon .kv-note {
	border-left: 1px solid var(--kv-beam);
	padding-left: 14px;
	margin-top: 20px;
}

.kv-root.kv-horizon .kv-terms {
	border-radius: 14px;
	color: var(--kv-ink);
}

.kv-root.kv-horizon .kv-hr {
	background: linear-gradient(90deg, var(--hz-gold-40), transparent);
	height: 1px;
	border: 0;
}

/* --------------------------------------------------------- confirmation */

.kv-root.kv-horizon .kv-ref {
	font-family: var(--kv-font-heading);
	color: var(--kv-beam);
	letter-spacing: 0.08em;
}

.kv-root.kv-horizon .kv-live-dot,
.kv-root.kv-horizon .kv-live-dot::after {
	background: var(--kv-beam);
}

/* --------------------------------------------------------------- tablet */

@media (max-width: 1100px) {
	.kv-root.kv-horizon .kv-shell {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

@media (max-width: 900px) {
	.kv-root.kv-horizon .kv-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
	.kv-root.kv-horizon .kv-heading {
		font-size: 44px;
	}
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 639px) {
	.kv-root.kv-horizon .kv-stepper {
		margin-bottom: 32px;
	}
	.kv-root.kv-horizon .kv-stepper ol {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
	.kv-root.kv-horizon .kv-step {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		font-size: 9px;
		letter-spacing: 0.16em;
		line-height: 1.35;
	}
	.kv-root.kv-horizon .kv-step-sep {
		display: none;
	}
	.kv-root.kv-horizon .kv-heading {
		font-size: 38px;
		line-height: 1.05;
		margin-top: 18px;
	}
	.kv-root.kv-horizon .kv-eyebrow-beam {
		font-size: 10px;
		letter-spacing: 0.34em;
	}
	.kv-root.kv-horizon .kv-lede,
	.kv-root.kv-horizon .kv-intro {
		font-size: 15px;
	}
	.kv-root.kv-horizon .kv-step-body {
		margin-top: 28px;
	}
	.kv-root.kv-horizon .kv-service-grid,
	.kv-root.kv-horizon .kv-payment-grid,
	.kv-root.kv-horizon .kv-grid-2,
	.kv-root.kv-horizon .kv-grid-3,
	.kv-root.kv-horizon .kv-journey-fields {
		grid-template-columns: minmax(0, 1fr);
	}
	.kv-root.kv-horizon .kv-service {
		flex-direction: row;
		align-items: stretch;
		min-height: 128px;
	}
	.kv-root.kv-horizon .kv-service-media {
		aspect-ratio: auto;
		width: 38%;
		flex: none;
	}
	.kv-root.kv-horizon .kv-service-media::after {
		background: linear-gradient(to right, transparent 40%, rgba(18, 18, 26, 0.9));
	}
	.kv-root.kv-horizon .kv-service-index {
		top: 12px;
		left: 12px;
		width: 28px;
		height: 28px;
		font-size: 14px;
	}
	.kv-root.kv-horizon .kv-service-cta {
		display: none;
	}
	.kv-root.kv-horizon .kv-service-body {
		justify-content: center;
		padding: 18px 20px;
		gap: 6px;
	}
	.kv-root.kv-horizon .kv-service-name {
		font-size: 24px;
	}
	.kv-root.kv-horizon .kv-towns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.kv-root.kv-horizon .kv-town {
		padding: 16px 16px;
	}
	.kv-root.kv-horizon .kv-town-name {
		font-size: 20px;
	}
	.kv-root.kv-horizon .kv-journey {
		padding: 20px;
	}
	.kv-root.kv-horizon .kv-slot-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.kv-root.kv-horizon .kv-nav {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
		margin-top: 36px;
		padding-top: 28px;
	}
	.kv-root.kv-horizon .kv-nav .kv-btn {
		width: 100%;
	}
	.kv-root.kv-horizon .kv-summary-inner {
		padding: 24px;
	}
	.kv-root.kv-horizon .kv-summary-title {
		font-size: 26px;
	}
	.kv-root.kv-horizon .kv-summary-price,
	.kv-root.kv-horizon .kv-fare-price {
		font-size: 44px;
	}
	.kv-root.kv-horizon .kv-payment-label {
		font-size: 20px;
	}
}
