/*
 * Booking surfaces — search results + seat selection.
 * Owner: builder B. Loaded only on /search/ and /seats/{id}/ (see the
 * ksb_theme_booking_needs_css condition in inc/search.php).
 *
 * Mobile-first. Every horizontal rule uses CSS logical properties, so the same
 * declarations lay out correctly in RTL (Arabic, the primary language at the
 * root URLs) and LTR (/en/) with no mirrored stylesheet.
 *
 * Tokens are read through var(--ksb-*, fallback): when builder A's style.css
 * defines the palette on :root this file inherits it, and when it does not the
 * brand values below apply. Nothing here redefines a shared token.
 */

.ksb-booking {
	--k-red: var(--ksb-red, #a61c1c);
	--k-red-deep: var(--ksb-red-deep, #7a1212);
	--k-gold: var(--ksb-gold, #e8a317);
	--k-ink: var(--ksb-ink, #1a1a1a);
	--k-paper: var(--ksb-paper, #f8f5f0);
	--k-green: var(--ksb-green, #1e9e52);
	--k-line: var(--ksb-line, #dcdad5);
	--k-muted: var(--ksb-muted, #8e706d);
	--k-sand: #fdf8f0;
	--k-stone: #e5e3df;
	--k-shadow: 0 4px 20px rgba(26, 26, 26, 0.06);
	--k-radius: 16px;
	--k-radius-sm: 8px;

	color: var(--k-ink);
	padding-block: 16px 96px;
}

.ksb-booking :where(h1, h2, h3) {
	font-family: "Noto Kufi Arabic", "Cairo", system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.ksb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Buttons + chips                                                     */
/* ------------------------------------------------------------------ */

.ksb-booking .ksb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding-inline: 24px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ksb-booking .ksb-btn--primary {
	background: linear-gradient(135deg, var(--k-red) 0%, var(--k-red-deep) 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(166, 28, 28, 0.24);
}

.ksb-booking .ksb-btn--primary:hover,
.ksb-booking .ksb-btn--primary:focus-visible {
	transform: translateY(-1px);
}

.ksb-booking .ksb-btn--ghost {
	background: #fff;
	color: var(--k-red);
	border: 1.5px solid var(--k-line);
}

.ksb-booking .ksb-btn--disabled,
.ksb-booking .ksb-btn[disabled] {
	background: var(--k-stone);
	color: #9a968e;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* Two-tone, matching base.css :focus-visible — gold alone is 2.17:1 on the
   white cards and seat buttons, under the 3:1 SC 1.4.11 floor (this rule's
   (0,2,0) beats base's (0,1,0), so on /search/ and /seats/ THIS is the ring).
   Ink core 17.4:1 on white (15.2:1 on the cabin) + the gold halo; the outline
   stays declared so forced-colors mode (which drops box-shadow) keeps a ring.
   Selects on the hero .ks-field anatomy are excluded: their indicator is the
   control's :focus-within ring (base.css), and an outline on the inner
   borderless select would draw a second ring inside it. */
.ksb-booking :where(button, a, input, select:not(.ks-field__input)):focus-visible {
	outline: 2px solid var(--k-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(232, 163, 23, 0.55);
}

.ksb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--k-sand);
	border: 1px solid var(--k-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--k-ink);
	white-space: nowrap;
}

.ksb-chip--warn {
	background: #fdf3dc;
	border-color: var(--k-gold);
	color: #8a5d05;
}

.ksb-chip--muted {
	background: var(--k-stone);
	border-color: var(--k-stone);
	color: #77736c;
}

.ksb-chip--timer {
	border-color: var(--k-red);
	color: var(--k-red);
	background: #fff;
}

.ksb-chip--timer.is-live {
	background: var(--k-red);
	border-color: var(--k-red);
	color: #fff;
}

.ksb-ico {
	width: 18px;
	height: 18px;
	flex: none;
}

.ksb-ico--red {
	color: var(--k-red);
}

.ksb-ico--gold {
	color: var(--k-gold);
}

.ksb-card {
	background: #fff;
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
	padding: 20px;
}

.ksb-card__title {
	font-size: 18px;
	margin-block-end: 14px;
}

.ksb-card__title--rule::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--k-gold);
	margin-block-start: 8px;
}

/* ------------------------------------------------------------------ */
/* Journey summary + steps                                             */
/* ------------------------------------------------------------------ */

.ksb-summary {
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--k-shadow);
	margin-block-end: 16px;
}

.ksb-summary[open] {
	border-radius: var(--k-radius);
}

.ksb-summary__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 12px 18px;
	cursor: pointer;
	list-style: none;
	min-height: 56px;
}

.ksb-summary__bar::-webkit-details-marker {
	display: none;
}

.ksb-summary__trip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
}

.ksb-summary__arrow {
	color: var(--k-muted);
}

.ksb-summary__meta {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ksb-summary__chip {
	font-size: 13px;
	color: var(--k-muted);
	border-inline-start: 1px solid var(--k-line);
	padding-inline-start: 12px;
}

.ksb-summary__edit {
	margin-inline-start: auto;
	color: var(--k-red);
	font-weight: 700;
	font-size: 14px;
	text-decoration: underline;
}

.ksb-editform {
	display: grid;
	gap: 12px;
	padding: 4px 18px 18px;
	border-block-start: 1px solid var(--k-line);
}

.ksb-field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.ksb-field label,
.ksb-filters legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--k-muted);
}

/* select:not(.ks-field__input): the search page's route/board/alight selects
   sit on the hero's .ks-field anatomy (templates/search.php) — label +
   .ks-field__control, which carries the border, background and 48px height.
   Unexcluded, this (0,1,0) rule tied .ks-field__input (0,1,0) and won on sheet
   order, nesting a second bordered white box inside the control. :not() inside
   :where() keeps the weight at (0,1,0). The plain date/number inputs in
   .ksb-editform still take this box. */
.ksb-booking :where(input[type="date"], input[type="number"], select:not(.ks-field__input)) {
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	background: #fff;
	font: inherit;
	color: inherit;
	width: 100%;
}

.ksb-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	color: var(--k-muted);
	overflow-x: auto;
}

.ksb-steps li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ksb-steps li + li::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--k-line);
}

.ksb-steps__no {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--k-stone);
	color: #77736c;
	font-size: 12px;
	font-weight: 700;
}

.ksb-steps .is-current {
	color: var(--k-red);
	font-weight: 700;
}

.ksb-steps .is-current .ksb-steps__no {
	background: var(--k-red);
	color: #fff;
}

.ksb-search__title {
	font-size: 24px;
}

.ksb-search__sub {
	margin: 4px 0 16px;
	color: var(--k-muted);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Date strip                                                          */
/* ------------------------------------------------------------------ */

.ksb-datestrip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-block-end: 6px;
	margin-block-end: 18px;
	scrollbar-width: thin;
}

.ksb-datestrip__day {
	flex: none;
	display: grid;
	gap: 2px;
	justify-items: center;
	min-width: 92px;
	padding: 10px 12px;
	border-radius: var(--k-radius-sm);
	background: #fff;
	border: 1.5px solid var(--k-line);
	color: var(--k-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.ksb-datestrip__day.is-selected {
	background: var(--k-red);
	border-color: var(--k-red);
	color: #fff;
}

.ksb-datestrip__today {
	font-size: 11px;
	color: var(--k-gold);
	font-weight: 700;
}

.ksb-datestrip__day.is-selected .ksb-datestrip__today {
	color: #fdf3dc;
}

/* ------------------------------------------------------------------ */
/* Layout: filters + results                                           */
/* ------------------------------------------------------------------ */

.ksb-search__layout {
	display: grid;
	gap: 18px;
}

.ksb-filters {
	background: #fff;
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
	padding: 18px;
}

.ksb-filters__title {
	font-size: 16px;
	margin-block-end: 12px;
}

.ksb-filters__group {
	border: 0;
	border-block-start: 1px solid var(--k-line);
	margin: 0;
	padding: 14px 0 0;
	display: grid;
	gap: 10px;
}

.ksb-filters__group:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.ksb-filters__hint {
	margin: 0;
	font-size: 12px;
	color: var(--k-muted);
	line-height: 1.6;
}

.ksb-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
	min-height: 32px;
}

.ksb-check input {
	width: 20px;
	height: 20px;
	accent-color: var(--k-red);
}

.ksb-filters__range {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-filters__range output {
	color: var(--k-red);
	font-weight: 700;
}

.ksb-filters input[type="range"] {
	width: 100%;
	accent-color: var(--k-red);
}

.ksb-filters__apply,
.ksb-filters__reset {
	margin: 14px 0 0;
}

/*
 * The apply button is the no-JavaScript path: search.js flags the form with
 * data-ksb-live and filters then refresh as soon as a control changes.
 */
.ksb-filters form[data-ksb-live] .ksb-filters__apply {
	display: none;
}

.ksb-filters__reset a {
	color: var(--k-muted);
	font-size: 13px;
}

.ksb-results__count {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--k-muted);
	font-weight: 600;
}

.ksb-results__list {
	display: grid;
	gap: 14px;
}

.ksb-results[aria-busy="true"] .ksb-results__list {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

/* ------------------------------------------------------------------ */
/* Trip card                                                           */
/* ------------------------------------------------------------------ */

.ksb-trip {
	position: relative;
	background: #fff;
	border: 1.5px solid var(--k-line);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
	padding: 18px;
	display: grid;
	gap: 14px;
}

.ksb-trip.is-featured {
	background: var(--k-sand);
	border-color: var(--k-gold);
}

.ksb-trip.is-soldout {
	opacity: 0.7;
}

.ksb-trip__badge {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: 16px;
	background: var(--k-gold);
	color: #4a3200;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
}

.ksb-trip__journey {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 6px 12px;
}

/* Boarding / drop-off disclosure (item 24.1). .ksb-trip__main keeps the card a
   two-child grid so the fare rail stays beside the journey; the gap here
   replaces the one .ksb-trip used to give between journey and fare. */
.ksb-trip__main {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.ksb-trip__stops {
	font-size: 13px;
	line-height: 1.6;
}

.ksb-trip__stops-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	min-height: 44px;          /* one-handed Android tap target (master plan 4.0) */
	align-content: center;
}

.ksb-trip__stops-summary::-webkit-details-marker {
	display: none;
}

.ksb-trip__stops-summary::after {
	content: "▾";
	color: var(--k-muted);
	transition: transform .18s ease;
}

.ksb-trip__stops[open] .ksb-trip__stops-summary::after {
	transform: rotate(180deg);
}

.ksb-trip__stops-label {
	font-weight: 700;
	color: var(--k-red);
}

.ksb-trip__stops-more {
	color: var(--k-muted);
}

.ksb-trip__stops-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.ksb-trip__stop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.ksb-trip__stop-time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ksb-trip__stop-landmark {
	color: var(--k-muted);
	font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.ksb-trip__stops-summary::after {
		transition: none;
	}
}

.ksb-trip__end {
	display: grid;
	gap: 2px;
}

.ksb-trip__end--arrive {
	text-align: end;
}

.ksb-trip__time {
	font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
	font-size: 20px;
	font-weight: 700;
}

.ksb-trip__place {
	font-size: 13px;
	color: var(--k-muted);
}

.ksb-trip__line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ksb-trip__dash {
	flex: 1;
	height: 0;
	border-block-start: 2px dashed var(--k-line);
}

.ksb-trip__bus {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--k-line);
	background: #fff;
	color: var(--k-red);
}

.ksb-trip.is-soldout .ksb-trip__bus {
	color: #a5a19a;
}

.ksb-trip__duration {
	grid-column: 2;
	text-align: center;
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-trip__fare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	border-block-start: 1px solid var(--k-line);
	padding-block-start: 14px;
}

.ksb-trip__price {
	margin: 0;
	display: grid;
	gap: 0;
	margin-inline-end: auto;
}

.ksb-trip__price data {
	font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: var(--k-red);
	line-height: 1.2;
}

.ksb-trip.is-soldout .ksb-trip__price data {
	color: #8d8981;
}

.ksb-trip__per {
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-occupancy {
	flex-basis: 100%;
	order: 5;
}

.ksb-occupancy__bar {
	display: block;
	height: 4px;
	border-radius: 4px;
	background: var(--k-stone);
	overflow: hidden;
}

.ksb-occupancy__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--k-gold), var(--k-red));
}

/* ------------------------------------------------------------------ */
/* Promo, empty states                                                 */
/* ------------------------------------------------------------------ */

.ksb-promo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: var(--k-radius);
	background: linear-gradient(135deg, var(--k-gold) 0%, #d18f0a 100%);
	color: #3d2900;
	font-weight: 700;
}

.ksb-promo__text {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.ksb-promo__code {
	background: rgba(255, 255, 255, 0.75);
	border-radius: 6px;
	padding: 2px 8px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.ksb-empty {
	text-align: center;
	display: grid;
	gap: 12px;
	justify-items: center;
}

.ksb-empty__title {
	font-size: 20px;
}

.ksb-empty__body {
	margin: 0;
	color: var(--k-muted);
	max-width: 46ch;
	line-height: 1.8;
}

.ksb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.ksb-empty__alt {
	margin: 0;
	font-size: 14px;
}

.ksb-routelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	width: 100%;
	text-align: start;
}

.ksb-routelist__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	text-decoration: none;
	color: inherit;
	font-weight: 600;
}

.ksb-routelist__price {
	color: var(--k-red);
	font-weight: 700;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Seat page chrome                                                    */
/* ------------------------------------------------------------------ */

.ksb-seats__bar {
	background: #fff;
	box-shadow: var(--k-shadow);
	margin-block-end: 16px;
}

.ksb-seats__barin {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
}

.ksb-seats__back {
	color: var(--k-ink);
	text-decoration: none;
	font-size: 22px;
	line-height: 1;
	padding: 8px;
}

.ksb-seats__title {
	text-align: center;
	flex: 1;
}

.ksb-seats__title h1 {
	font-size: 18px;
	color: var(--k-red);
}

.ksb-seats__title p {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-seats__progress {
	height: 3px;
	background: var(--k-stone);
}

.ksb-seats__progress span {
	display: block;
	height: 100%;
	background: var(--k-red);
}

.ksb-seats__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 14px;
}

.ksb-segbanner,
.ksb-fleetnote {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--k-sand);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	padding: 12px 14px;
	margin-block-end: 14px;
}

.ksb-segbanner b,
.ksb-fleetnote p {
	display: block;
	font-size: 14px;
}

.ksb-segbanner p,
.ksb-fleetnote p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--k-muted);
	line-height: 1.7;
}

.ksb-segbanner__closed {
	color: var(--k-red) !important;
}

.ksb-fleetnote__img {
	width: 72px;
	height: 52px;
	object-fit: cover;
	border-radius: var(--k-radius-sm);
}

.ksb-fleetnote__ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--k-red);
	color: #fff;
	flex: none;
}

.ksb-seats__layout {
	display: grid;
	gap: 16px;
}

/* ------------------------------------------------------------------ */
/* The cabin                                                           */
/* ------------------------------------------------------------------ */

.ksb-cabin {
	display: grid;
	grid-template-columns: repeat(var(--ksb-cols, 3), minmax(56px, 1fr));
	gap: 10px;
	background: #f4efe7;
	border: 1px solid var(--k-line);
	border-radius: 28px;
	padding: 18px 16px 22px;
	max-width: 320px;
	margin-inline: auto;
}

.ksb-cabin__split {
	grid-column: 1 / -1;
	height: 0;
	border-block-start: 2px dashed #cfc9bd;
	margin-block: 2px;
}

.ksb-seat {
	position: relative;
	display: grid;
	place-items: center;
	gap: 2px;
	aspect-ratio: 4 / 5;
	min-height: 56px;
	border-radius: 12px;
	border: 1.5px solid var(--k-line);
	background: #fff;
	color: var(--k-ink);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	padding: 0;
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

/*
 * The cabin's small corridor, between 2B and 2C on the real vehicle. Drawn as a
 * dashed rule in the grid gap rather than as margin, so the seat keeps the same
 * width as every other seat and the 44px touch target is untouched. Decorative
 * only: pointer-events off, no text, and the seat's accessible name is unchanged.
 * Matches .ksb-cabin__split so the two dividers read as the same object.
 */
.ksb-seat.has-gap-before::before {
	content: "";
	position: absolute;
	inset-block: -6px;
	inset-inline-start: -6px;
	block-size: calc(100% + 12px);
	border-inline-start: 2px dashed #cfc9bd;
	pointer-events: none;
}

.ksb-seat__ico {
	width: 20px;
	height: 20px;
}

.ksb-seat__no {
	line-height: 1;
}

button.ksb-seat:hover {
	transform: translateY(-1px);
	border-color: var(--k-red);
}

.ksb-seat.is-mine {
	background: var(--k-red);
	border-color: var(--k-red);
	color: #fff;
}

.ksb-seat.is-booked {
	background: var(--k-stone);
	border-color: var(--k-stone);
	color: #8d8981;
	cursor: not-allowed;
}

.ksb-seat.is-held {
	background: #fdf3dc;
	border-color: var(--k-gold);
	color: #8a5d05;
	cursor: not-allowed;
}

.ksb-seat.is-premium {
	border-width: 2px;
	border-color: var(--k-gold);
	background: #fffaf0;
	color: #8a5d05;
}

.ksb-seat.is-premium .ksb-seat__ico {
	color: var(--k-gold);
}

.ksb-seat.is-premium.is-mine {
	background: var(--k-red);
	color: #fff;
}

.ksb-seat.is-premium.is-mine .ksb-seat__ico {
	color: #fff;
}

.ksb-seat--driver {
	background: transparent;
	border: 0;
	color: var(--k-muted);
	font-size: 11px;
	font-weight: 600;
	cursor: default;
}

.ksb-seat--driver .ksb-seat__ico {
	width: 24px;
	height: 24px;
	color: #6f6a62;
}

.ksb-seat--void {
	background: transparent;
	border: 0;
	cursor: default;
}

.ksb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: center;
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-block-start: 1px solid var(--k-line);
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ksb-legend__sw {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1.5px solid var(--k-line);
	background: #fff;
}

.ksb-legend__sw.is-mine {
	background: var(--k-red);
	border-color: var(--k-red);
}

.ksb-legend__sw.is-booked {
	background: var(--k-stone);
	border-color: var(--k-stone);
}

.ksb-legend__sw.is-held {
	background: #fdf3dc;
	border-color: var(--k-gold);
}

.ksb-legend__sw.is-premium {
	background: #fffaf0;
	border-color: var(--k-gold);
	border-width: 2px;
}

.ksb-seatmap__note {
	margin: 10px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--k-muted);
}

/* ------------------------------------------------------------------ */
/* Picked seats + pay bar                                              */
/* ------------------------------------------------------------------ */

/* 700, not 600: the head font is requested at 700/800 only, so a 600 here
   was being synthesised by the browser. */
.ksb-picked__count {
	color: var(--k-muted);
	font-weight: 700;
}

.ksb-picked__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.ksb-picked__item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--k-sand);
	border-radius: var(--k-radius-sm);
	padding: 10px 12px;
}

.ksb-picked__no {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--k-red);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex: none;
}

.ksb-picked__meta {
	display: grid;
	gap: 2px;
	font-size: 13px;
	flex: 1;
}

.ksb-picked__meta span {
	color: var(--k-red);
	font-weight: 700;
}

.ksb-picked__drop {
	border: 0;
	background: transparent;
	color: var(--k-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 6px;
}

.ksb-picked__drop:hover {
	color: var(--k-red);
}

.ksb-picked__empty {
	margin: 0;
	font-size: 13px;
	color: var(--k-muted);
}

.ksb-paybar {
	position: sticky;
	inset-block-end: 0;
	background: #fff;
	border-block-start: 1px solid var(--k-line);
	box-shadow: 0 -4px 20px rgba(26, 26, 26, 0.08);
	padding-block: 10px;
	z-index: 20;
}

.ksb-paybar__in {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ksb-paybar__total {
	margin: 0;
	display: grid;
	gap: 0;
}

.ksb-paybar__total span {
	font-size: 12px;
	color: var(--k-muted);
}

.ksb-paybar__total b {
	font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
	font-size: 22px;
	color: var(--k-red);
	line-height: 1.2;
}

.ksb-paybar__cta {
	margin-inline-start: auto;
	flex: 1;
	max-width: 260px;
}

.ksb-paybar__msg {
	margin: 6px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--k-red);
	min-height: 1em;
}

.ksb-paybar__msg:empty {
	display: none;
}

.ksb-noscript {
	margin: 16px;
	padding: 14px;
	border-radius: var(--k-radius-sm);
	background: #fdf3dc;
	border: 1px solid var(--k-gold);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Desktop                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 720px) {
	.ksb-trip {
		grid-template-columns: 1fr minmax(200px, 240px);
		align-items: center;
		gap: 20px;
		padding: 22px 24px;
	}

	.ksb-trip__fare {
		border-block-start: 0;
		border-inline-start: 1px solid var(--k-line);
		padding-block-start: 0;
		padding-inline-start: 20px;
		justify-content: center;
		text-align: center;
	}

	.ksb-trip__price {
		flex-basis: 100%;
		margin-inline-end: 0;
		justify-items: center;
	}

	.ksb-trip__fare .ksb-btn {
		flex-basis: 100%;
	}

	.ksb-seats__layout {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
		align-items: start;
	}

	.ksb-search__title {
		font-size: 30px;
	}
}

@media (min-width: 960px) {
	.ksb-search__layout {
		grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
		align-items: start;
	}

	.ksb-filters {
		position: sticky;
		inset-block-start: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ksb-booking * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Round trip (ذهاب وعودة) — outbound strip, group badge, notices      */
/*                                                                     */
/* /search/ and /seats/{id}/ render the SAME strip markup, so one set   */
/* of rules dresses both. Logical properties only: Arabic (RTL) is the  */
/* root language and /en/ (LTR) reads from the identical declarations.  */
/* Nothing here is inside a phase selector — the markup itself only     */
/* exists in a round-trip phase, so a one-way page paints as before.    */
/* ------------------------------------------------------------------ */

/* The group badge: brand red, never the gold warning tint, so «ذهاب
   وعودة» is not mistaken for an alert. 9.6:1 on its own background. */
.ksb-chip--rt {
	background: #fbeee9;
	border-color: var(--k-red);
	color: var(--k-red-deep);
}

/* Outbound-phase hint (search) / step note (seats): same anatomy. */
.ksb-rt-hint,
.ksb-rtstep {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block: 0 14px;
	padding-block: 10px;
	padding-inline: 14px;
	background: var(--k-sand);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	font-size: 14px;
	line-height: 1.7;
	color: var(--k-ink);
}

.ksb-rtstep p {
	margin: 0;
	flex: 1 1 240px;
	text-align: start;
}

/* ---- The strip -------------------------------------------------- */

.ksb-rtstrip {
	display: grid;
	gap: 10px;
	margin-block: 0 14px;
	padding-block: 14px;
	padding-inline: 16px;
	background: var(--k-sand);
	border: 1px solid var(--k-line);
	border-inline-start: 4px solid var(--k-red);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
}

.ksb-rtstrip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.ksb-rtstrip__route {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--k-ink);
}

/* 7.8:1 on the sand card — well past the 4.5:1 body-text floor. */
.ksb-rtstrip__meta,
.ksb-rtstrip__hidden {
	font-size: 13px;
	line-height: 1.7;
	color: #5c4a48;
}

.ksb-rtstrip__need {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--k-ink);
}

.ksb-rtstrip__count {
	padding-block: 2px;
	padding-inline: 10px;
	border: 1px solid var(--k-line);
	border-radius: 999px;
	background: #fff;
	color: var(--k-red);
	font-variant-numeric: tabular-nums;
}

.ksb-rtstrip__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ksb-rtstrip__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--k-red-deep);
}

.ksb-rtstrip__hidden {
	margin: 0;
}

/* 44x44 minimum on both ways out (SC 2.5.8): 44px tall, and the inline
   padding keeps even the shortest Arabic label past 44px wide. */
.ksb-rtstrip .ksb-btn--ghost,
.ksb-rtnotice .ksb-btn {
	min-height: 44px;
	padding-inline: 18px;
	font-size: 14px;
}

.ksb-rtstrip__cancel {
	color: var(--k-red-deep);
	border-color: #e3c9c9;
}

/*
 * Hover is a lift and a shadow — deliberately NOT a colour flood. The box
 * keeps its white ground and every hovered state re-declares its own text
 * colour, so no label can be left sitting on a background it cannot be read
 * against. (Same bug was just fixed on the trip cards; do not reintroduce it.)
 */
.ksb-rtstrip .ksb-btn--ghost:hover,
.ksb-rtstrip .ksb-btn--ghost:focus-visible {
	background: #fff;
	color: var(--k-red-deep);
	border-color: var(--k-red);
	transform: translateY(-1px);
}

/* Hover-only lift. Kept OFF the :focus-visible selector on purpose — box-shadow
   is the same property the shared two-tone focus ring uses, and a combined
   rule here (0,3,0) outranked it (0,2,0) and silently stripped the gold halo
   from these two buttons alone. Keyboard users got a weaker indicator than
   every other control on the page. */
.ksb-rtstrip .ksb-btn--ghost:hover:not(:focus-visible) {
	box-shadow: 0 4px 14px rgba(166, 28, 28, 0.18);
}

/* ---- The inline link error, next to the map --------------------- */

.ksb-rterror {
	display: block;
	margin-block: 0 14px;
	padding-block: 12px;
	padding-inline: 14px;
	background: #fdecea;
	border: 1px solid var(--k-red);
	border-inline-start: 4px solid var(--k-red);
	border-radius: var(--k-radius-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--k-red-deep);
}

/* ---- Recovery notices (§3.4-a) ---------------------------------- */

.ksb-rtnotice {
	display: grid;
	gap: 10px;
	margin-block: 0 14px;
	padding-block: 14px;
	padding-inline: 16px;
	background: #fff;
	border: 1px solid var(--k-red);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
}

.ksb-rtnotice__title {
	font-size: 17px;
	color: var(--k-red-deep);
}

.ksb-rtnotice__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--k-ink);
}

.ksb-rtnotice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* display:grid / display:block would otherwise beat the hidden attribute —
   #ksb-rt-lost and #ksb-rt-error ship hidden and are revealed by seats.js. */
.ksb-rterror[hidden],
.ksb-rtstrip[hidden],
.ksb-rtnotice[hidden],
.ksb-rtstrip__note[hidden],
.ksb-rtstrip__hidden[hidden] {
	display: none;
}

@media (min-width: 720px) {
	/* The held-trip facts sit at the far inline end of the head row —
	   automatically the physical left in Arabic, the right on /en/. */
	.ksb-rtstrip__meta {
		margin-inline-start: auto;
		text-align: end;
	}
}


/* --- Arabic legibility floor ------------------------------------------------
   MEASURED ON LIVE at a real 386px viewport: the funnel carries 11-12px text on
   the lines a customer actually decides with — how long the trip takes, the
   per-person fare, which landmark to stand at, and what the seat legend means.
   Cairo's loop height makes 12px Arabic read roughly like 10.5px Latin, so this
   is not a preference; it is the difference between reading a pickup time and
   guessing it.

   Deliberately NOT a blanket bump: badges, step numbers and the «اليوم» chip are
   labels, not decisions, and stay where they are. Only the lines that carry
   money, time or place move, and only to 13-14px — enough to clear the floor
   without reflowing the cards they sit in. */
.ksb-trip__duration,
.ksb-trip__stop-landmark,
.ksb-seatmap__note,
.ksb-legend {
	font-size: 13px;
}
.ksb-trip__per,
.ksb-paybar__total span {
	font-size: 13.5px;
}


/* --- Filter rail: a disclosure below the two-column breakpoint --------------
   Behaviour lives entirely in :checked — no JS, so this survives the same
   no-script path the rest of the search page is built for. Above 960px the
   layout is two columns and the rail is a rail: the toggle disappears and the
   body is unconditionally open, which is why this is a checkbox and not a
   <details> (a <details> cannot be forced open from CSS). */
.ksb-filters__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.ksb-filters__title { margin-block-end: 0; }
.ksb-filters__toggle-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
	font: inherit;
}
.ksb-filters__chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.ksb-filters__toggle:checked ~ .ksb-filters__title .ksb-filters__chev { transform: rotate(-135deg); }
/* The ring has to land on something visible — the box itself is 1px. */
.ksb-filters__toggle:focus-visible ~ .ksb-filters__title .ksb-filters__toggle-label {
	outline: 3px solid var(--k-gold, #e8a317);
	outline-offset: 3px;
	border-radius: 6px;
}
/* Visible even while the rail is collapsed: a filtered result list must say so. */
.ksb-filters__on {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 9px;
	border-radius: 999px;
	background: #fdf3df;
	color: #9a6b00;
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}
.ksb-filters__body { display: none; }
.ksb-filters__toggle:checked ~ .ksb-filters__body { display: block; }

@media (min-width: 960px) {
	/* Two columns: the rail is always open and there is nothing to toggle. */
	.ksb-filters__toggle-label { cursor: default; min-height: 0; }
	.ksb-filters__chev { display: none; }
	.ksb-filters__body { display: block; }
	.ksb-filters__title { margin-block-end: 12px; }
}