/*!
 * Baly Site System — /taxi · /taxi/airport · /taxi/intercity
 * One shared stylesheet for the whole taxi page family.
 * Depends on bsy-chrome.css (which already loads bsy-tokens.css).
 *
 * Class families:
 *   .bsy-taxi__*           shared taxi-family classes (sub-service cards, etc.)
 *   .bsy-taxi-airport__*   airport-only classes
 *   .bsy-taxi-intercity__* intercity-only classes
 *   .bsy-tier__*           the 3-tier car selector (used on /taxi hero)
 */

/* ==========================================================================
   /taxi — main page
   ========================================================================== */

/* Row 1 — hero + sub-service grid. align-items: start so the two
 * columns are independently sized; the hero no longer stretches to
 * match an oversized sub-grid. */
.bsy-taxi__top {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 18px;
	align-items: stretch;
}

/* Hero card */
.bsy-taxi__hero {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, var(--bsy-brand) 0%, #2052FF 60%, #355FFF 100%);
	color: #fff;
	min-height: 0;
	padding: 22px 24px 18px;
	display: flex; flex-direction: column;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -16px rgba(0,30,80,.40);
}
.bsy-taxi__hero-bg, .bsy-taxi__mapbg {
	position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.bsy-taxi__hero-head {
	position: relative; z-index: 2;
	display: flex; justify-content: space-between; align-items: center;
}
.bsy-taxi__hero-copy {
	position: relative; z-index: 2;
	margin-top: 14px; margin-bottom: 12px;
	max-width: 460px;
}
.bsy-taxi__hero-title {
	margin: 0 0 10px;
	font-family: var(--bsy-font);
	font-weight: 950;
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 0.98;
	color: #fff;
}
.bsy-taxi__hero-accent { color: var(--bsy-accent-gold); }
.bsy-taxi__hero-lede {
	margin: 0;
	font-size: clamp(13px, 1.4vw, 14px);
	line-height: 1.55;
	font-weight: var(--bsy-fw-medium);
	color: rgba(255,255,255,.85);
}

.bsy-taxi__hero-stats {
	position: relative; z-index: 2;
	/* auto pushes the stats row to the bottom so, when the hero column is
	   stretched to match the taller sub-grid column, the slack sits above
	   the stats instead of leaving an empty gap under them. */
	margin-top: auto;
	padding-top: 16px;
	display: flex; align-items: center; gap: 22px;
	color: #fff;
}
.bsy-taxi__hero-stat { display: flex; flex-direction: column; gap: 2px; }
.bsy-taxi__hero-stat-n {
	font-size: 20px; font-weight: var(--bsy-fw-black);
 line-height: 1;
	display: flex; align-items: center; gap: 5px;
}
.bsy-taxi__hero-star { color: var(--bsy-accent-gold); }
.bsy-taxi__hero-stat-l { font-size: 11px; font-weight: var(--bsy-fw-medium); color: rgba(255,255,255,.7); }
.bsy-taxi__hero-div { width: 1px; height: 28px; background: rgba(255,255,255,.16); }

/* 3-tier white card */
.bsy-tier {
	position: relative; z-index: 2;
	margin-top: auto;
	background: #fff;
	border-radius: var(--bsy-radius-lg);
	padding: 14px;
	box-shadow: 0 24px 48px -16px rgba(0,30,80,.45), 0 1px 0 rgba(0,0,0,.04);
}
.bsy-tier__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 10px; padding: 0 4px;
}
.bsy-tier__h {
	margin: 0;
	font-size: 15px; font-weight: 800;
	color: var(--bsy-fg-primary);
}
.bsy-tier__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

/* Radio-driven tile (zero-JS). Radios are visually hidden; the
   associated label is the actual tile, with :checked state styling. */
.bsy-tier__radio {
	position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.bsy-tier__tile {
	position: relative;
	background: #fff;
	border: 1px solid var(--bsy-grey-200);
	border-radius: var(--bsy-radius-md);
	padding: 10px 10px 12px;
	display: flex; flex-direction: column; align-items: stretch;
	min-height: 140px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.bsy-tier__radio:checked + .bsy-tier__tile {
	background: #F4F7FF;
	border: 1.5px solid var(--bsy-brand);
}
.bsy-tier__radio:focus-visible + .bsy-tier__tile {
	outline: 2px solid var(--bsy-brand);
	outline-offset: 2px;
}
/* Per design: badge sits in the visual top-right of the card (the
 * RTL "start" edge), check indicator goes to the top-left ("end"). */
.bsy-tier__badge {
	position: absolute; top: 8px; inset-inline-start: 8px;
	display: inline-flex; align-items: center;
	padding: 3px 8px; border-radius: 999px;
	background: var(--bsy-grey-100);
	color: var(--bsy-grey-700);
	font-size: 9.5px; font-weight: 800;
}
.bsy-tier__radio:checked + .bsy-tier__tile .bsy-tier__badge {
	background: #fff; color: var(--bsy-brand);
	box-shadow: 0 1px 0 rgba(0,67,255,.18);
}
.bsy-tier__check {
	position: absolute; top: 7px; inset-inline-end: 7px;
	width: 16px; height: 16px; border-radius: 999px;
	background: var(--bsy-brand); color: #fff;
	display: none; place-items: center;
}
.bsy-tier__radio:checked + .bsy-tier__tile .bsy-tier__check { display: grid; }
.bsy-tier__img-wrap {
	width: 100%; height: 62px;
	display: flex; align-items: center; justify-content: center;
	margin-top: 18px;
	overflow: hidden;
}
/* Match the design's car-illustration size (~62px tall, natural aspect). */
.bsy-tier__img {
	height: auto !important;
	width: auto !important;
	max-height: 62px !important;
	max-width: 88% !important;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}
.bsy-tier__name {
	margin-top: 12px;
	text-align: right;
	font-size: 18px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
 line-height: 1;
}
.bsy-tier__cta {
	margin-top: 14px;
	width: 100%; height: 44px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: #fff;
	font-family: var(--bsy-font);
	font-size: 14px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	cursor: pointer; text-decoration: none;
	box-shadow: var(--bsy-shadow-brand);
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out),
				color var(--bsy-duration-fast) var(--bsy-ease-out);
}
/* Keep CTA text white on hover (the previous theme-anchor override
 * darkened it to brand-blue on its blue background — unreadable). */
.bsy-tier__cta:hover { background: var(--bsy-brand-hover); color: #fff; }
.bsy-tier__cta:visited,
.bsy-tier__cta:active,
.bsy-tier__cta:focus { color: #fff; }

/* Sub-service grid (right col) */
.bsy-taxi__sub-grid {
	display: grid;
	grid-auto-rows: auto;
	gap: 10px;
	min-width: 0;
}

.bsy-taxi__sub {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-2xl);
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	box-shadow: var(--bsy-shadow-card);
	display: grid; grid-template-columns: 1.05fr 1fr;
	min-height: 110px;
	text-decoration: none; color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.bsy-taxi__sub:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 32px -10px rgba(0,30,80,.18), 0 32px 60px -24px rgba(0,30,80,.22);
}
.bsy-taxi__sub-art {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, var(--bsy-brand-active) 0%, var(--bsy-brand) 55%, #3463FF 100%);
	min-height: 0;
}
.bsy-taxi__sub--package .bsy-taxi__sub-art {
	background: linear-gradient(160deg, #082370 0%, #0A2BB8 60%, var(--bsy-brand) 100%);
}
.bsy-taxi__sub-svg {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.bsy-taxi__sub-body {
	padding: 12px 14px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.bsy-taxi__sub-eyebrow {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	background: var(--bsy-brand-lighter);
	color: var(--bsy-brand);
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
	margin-bottom: 6px;
}
.bsy-taxi__sub-dot {
	width: 5px; height: 5px; border-radius: 999px;
	background: var(--bsy-brand);
}
.bsy-taxi__sub-title {
	margin: 0;
	font-size: 18px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
	line-height: 1.1;
}
.bsy-taxi__sub-chips {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.bsy-taxi__sub-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px; border-radius: 999px;
	background: var(--bsy-grey-100);
	color: var(--bsy-grey-800);
	font-size: 11px; font-weight: 700;
}
.bsy-taxi__sub-chip-ic { color: var(--bsy-brand); display: inline-flex; }
.bsy-taxi__sub-cta {
	height: 38px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: #fff;
	font-family: var(--bsy-font);
	font-size: 12.5px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding-inline: 20px;
	align-self: flex-end;
	box-shadow: 0 4px 14px rgba(0,67,255,.26);
}

/* Driver signup row */
.bsy-taxi__driver {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-xl);
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	color: var(--bsy-fg-primary);
	padding: 14px 18px 14px 14px;
	display: flex; align-items: center; gap: 14px;
	box-shadow: var(--bsy-shadow-card);
	text-decoration: none;
	transition: transform .15s ease;
}
.bsy-taxi__driver:hover { transform: translateY(-2px); }
.bsy-taxi__driver-ic {
	position: relative; flex: none;
	width: 56px; height: 56px;
	display: grid; place-items: center;
}
.bsy-taxi__driver-ic img { width: 100%; height: 100%; object-fit: contain; }
.bsy-taxi__driver-copy {
	flex: 1; min-width: 0;
	text-align: right;
	display: flex; flex-direction: column; gap: 3px;
}
.bsy-taxi__driver-t {
	font-size: 15px; font-weight: var(--bsy-fw-black);
 line-height: 1.15;
	color: var(--bsy-fg-primary);
}
.bsy-taxi__driver-s {
	font-size: 11.5px; font-weight: var(--bsy-fw-medium);
	color: var(--bsy-grey-600);
}
.bsy-taxi__driver-cta {
	flex: none;
	padding: 9px 16px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: #fff;
	font-family: var(--bsy-font);
	font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 6px;
	box-shadow: 0 8px 20px -8px rgba(0,67,255,.56);
}

/* ==========================================================================
   /taxi/airport
   ========================================================================== */

.bsy-taxi-airport__hero {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, var(--bsy-brand-active) 0%, var(--bsy-brand) 55%, #3463FF 100%);
	color: #fff;
	min-height: 480px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -16px rgba(0,30,80,.40);
}
.bsy-taxi-airport__scene, .bsy-taxi-airport__veil {
	position: absolute; inset: 0; pointer-events: none;
}
.bsy-taxi-airport__scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsy-taxi-airport__veil {
	background: linear-gradient(270deg, rgba(0,30,90,.55) 0%, rgba(0,30,90,.30) 38%, rgba(0,30,90,0) 70%);
}
.bsy-taxi-airport__hero-copy {
	position: relative; z-index: 2;
	padding: 34px 36px 30px;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 18px;
	min-height: 480px;
	max-width: 560px;
}
.bsy-taxi-airport__hero-title {
	margin: 14px 0 12px;
	font-family: var(--bsy-font);
	font-weight: 950;
	font-size: clamp(28px, 4.5vw, 48px);
	line-height: 0.98;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,20,60,.25);
}
.bsy-taxi-airport__hero-accent { color: var(--bsy-accent-gold); }
.bsy-taxi-airport__hero-lede {
	margin: 0;
	font-size: clamp(13px, 1.5vw, 15.5px);
	line-height: 1.6;
	font-weight: var(--bsy-fw-medium);
	color: rgba(255,255,255,.88);
	max-width: 460px;
}
.bsy-taxi-airport__hero-foot { display: flex; flex-direction: column; gap: 10px; }
.bsy-taxi-airport__hero-foot-label {
	font-size: 12px; font-weight: 700;
	color: rgba(255,255,255,.85);
}

/* Savings feature card */
.bsy-taxi-airport__savings {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
	padding: 0;
	overflow: hidden;
}
.bsy-taxi-airport__savings-copy {
	padding: 26px;
	display: flex; flex-direction: column; gap: 14px;
}
.bsy-taxi-airport__savings-list {
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 10px;
}
.bsy-taxi-airport__savings-list li {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 14px; font-weight: var(--bsy-fw-semibold);
	color: var(--bsy-fg-primary); line-height: 1.5;
}
.bsy-taxi-airport__savings-check {
	width: 24px; height: 24px; border-radius: 999px;
	background: var(--bsy-brand); color: #fff;
	display: grid; place-items: center;
	margin-top: 1px; flex: none;
}
.bsy-taxi-airport__savings-side {
	position: relative; overflow: hidden;
	background: var(--bsy-grey-50);
	color: var(--bsy-fg-primary);
	padding: 22px;
	border-inline-start: 1px solid var(--bsy-grey-100);
	display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.bsy-taxi-airport__savings-eyebrow {
	display: inline-flex; align-self: flex-start;
	padding: 5px 11px; border-radius: 999px;
	background: var(--bsy-brand-lighter); color: var(--bsy-brand);
	font-size: 11px; font-weight: 800;
	align-items: center; gap: 6px;
	letter-spacing: 0.01em;
}
.bsy-taxi-airport__savings-dot {
	width: 5px; height: 5px; border-radius: 999px;
	background: var(--bsy-brand);
}
.bsy-taxi-airport__savings-foot {
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 8px;
}
.bsy-taxi-airport__savings-foot li {
	display: flex; align-items: center; gap: 10px;
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	padding: 10px 12px; border-radius: 12px;
	font-size: 13px; font-weight: var(--bsy-fw-semibold);
	color: var(--bsy-fg-primary);
	line-height: 1.45;
}
.bsy-taxi-airport__savings-foot-ic {
	width: 22px; height: 22px; border-radius: 999px;
	background: var(--bsy-brand-lighter); color: var(--bsy-brand);
	display: grid; place-items: center;
	flex: none;
}

/* ==========================================================================
   /taxi/intercity
   ========================================================================== */

.bsy-taxi-intercity__top {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
	align-items: stretch;
}

/* overflow: visible — the .bsy-taxi-intercity__scene child already clips
 * the decorative SVG to the rounded corners. Keeping the hero visible
 * means the city-picker dropdown panel can escape downward instead of
 * being cropped against the hero edge. */
.bsy-taxi-intercity__hero {
	position: relative; overflow: visible;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, #00309C 0%, var(--bsy-brand) 60%, #355FFF 100%);
	color: #fff;
	min-height: 580px;
	padding: 32px 36px 28px;
	display: flex; flex-direction: column;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -16px rgba(0,30,80,.40);
}
.bsy-taxi-intercity__scene {
	position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
	pointer-events: none; z-index: 0;
}
.bsy-taxi-intercity__scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsy-taxi-intercity__hero-top {
	position: relative; z-index: 2;
}
.bsy-taxi-intercity__hero-copy {
	position: relative; z-index: 2;
	margin-top: auto; margin-bottom: 18px;
	max-width: 540px;
}
.bsy-taxi-intercity__hero-title {
	margin: 0 0 10px;
	font-family: var(--bsy-font);
	font-weight: 950;
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 0.98;
	color: #fff;
}
.bsy-taxi-intercity__hero-accent { color: var(--bsy-accent-gold); }
.bsy-taxi-intercity__hero-lede {
	margin: 0;
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.55;
	font-weight: var(--bsy-fw-medium);
	color: rgba(255,255,255,.85);
}

/* Route picker — JS-driven. Design spec: 511×214, padding 16px, br 22px. */
.bsy-taxi-intercity__picker {
	position: relative; z-index: 5;
	margin-top: 24px;
	background: #fff;
	border-radius: 22px;
	padding: 16px;
	box-shadow: 0 24px 48px -16px rgba(0,30,80,.5);
}
.bsy-taxi-intercity__picker-row {
	position: relative;
	display: grid; grid-template-columns: 1fr auto 1fr;
	gap: 12px; align-items: center;
}
.bsy-taxi-intercity__select {
	position: relative;
	min-width: 0;
	flex: 1 1 0;
}
/* Select button — design spec from IntercityMosaic.jsx is 210×54 with
 * 14px corner radius (rounded rectangle, not pill), 10/12 padding, and
 * a column-stacked label-above-value layout inside. */
.bsy-taxi-intercity__select-summary {
	width: 100%;
	background: #fff;
	border: 1px solid var(--bsy-grey-200);
	border-radius: 14px;
	padding: 10px 12px;
	min-height: 54px;
	display: flex; align-items: center; gap: 10px;
	cursor: pointer; list-style: none;
	font-family: var(--bsy-font);
	transition: box-shadow .2s ease, border-color .2s ease;
	box-shadow: 0 1px 0 rgba(0,0,0,.02);
	text-align: right;
}
.bsy-taxi-intercity__select-summary::-webkit-details-marker { display: none; }
.bsy-taxi-intercity__select.is-open .bsy-taxi-intercity__select-summary {
	border-color: var(--bsy-brand);
	box-shadow: 0 0 0 4px rgba(0,67,255,.10), 0 6px 18px rgba(0,30,80,.10);
}
/* Column-stacked label/value to match the design's two-line button
 * content (small grey "من"/"إلى" label above bold city name). */
.bsy-taxi-intercity__select-text {
	flex: 1; min-width: 0; text-align: right;
	display: flex; flex-direction: column; align-items: stretch; gap: 1px;
}
.bsy-taxi-intercity__select-label {
	font-size: 13px; font-weight: 400;
	color: var(--bsy-grey-600);
	line-height: 1.1;
}
.bsy-taxi-intercity__select-value {
	font-size: 15px; font-weight: 700;
	color: var(--bsy-fg-primary);
	line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bsy-taxi-intercity__select-chev {
	color: var(--bsy-grey-600);
	display: inline-flex;
	transition: transform .2s ease;
}
.bsy-taxi-intercity__select.is-open .bsy-taxi-intercity__select-chev { transform: rotate(180deg); }

/* Panel — hidden by default, shown only on .is-open. Overlays the hero
 * thanks to z-index: 1000 + parent stacking context. No scrollbar:
 * the panel grows to fit the city list (10 items is fine). */
.bsy-taxi-intercity__select-panel {
	position: absolute;
	top: calc(100% + 8px); inset-inline: 0;
	background: #fff; border-radius: 16px;
	padding: 10px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -16px rgba(0,30,80,.30), 0 2px 6px rgba(0,0,0,.06);
	border: 1px solid var(--bsy-grey-200);
	z-index: 1000;
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .15s var(--bsy-ease-out), transform .15s var(--bsy-ease-out), visibility .15s;
	pointer-events: none;
}
.bsy-taxi-intercity__select.is-open .bsy-taxi-intercity__select-panel {
	opacity: 1; visibility: visible; transform: translateY(0);
	pointer-events: auto;
}
.bsy-taxi-intercity__select-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 4px 8px 8px;
	border-bottom: 1px solid var(--bsy-grey-100);
	margin-bottom: 6px;
}
.bsy-taxi-intercity__select-panel-h {
	font-size: 11.5px; font-weight: 800;
	color: var(--bsy-grey-700); letter-spacing: 0.02em;
}
.bsy-taxi-intercity__select-panel-count {
	font-size: 10.5px; font-weight: var(--bsy-fw-semibold);
	color: var(--bsy-grey-600);
}
.bsy-taxi-intercity__select-list {
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 0;
}
.bsy-taxi-intercity__select-list li { list-style: none; }
.bsy-taxi-intercity__select-item {
	width: 100%;
	display: flex; align-items: center; gap: 10px;
	padding: 6px 10px;
	border-radius: 10px;
	color: var(--bsy-fg-primary);
	font-size: 13.5px; font-weight: var(--bsy-fw-semibold);
	background: transparent; border: 0;
	cursor: pointer;
	text-align: right;
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-taxi-intercity__select-item:hover { background: var(--bsy-grey-100); }
.bsy-taxi-intercity__select-item.is-selected {
	background: var(--bsy-brand-lighter);
	color: var(--bsy-brand);
	font-weight: 800;
}

/* Origin / destination markers */
.bsy-taxi-intercity__marker {
	width: 20px; height: 20px;
	display: grid; place-items: center;
	flex: none;
}
.bsy-taxi-intercity__marker--sm { width: 14px; height: 14px; }
.bsy-taxi-intercity__marker--origin {
	border-radius: 999px;
	background: #FF6A3D;
	box-shadow: 0 0 0 2px rgba(255,106,61,.20);
}
.bsy-taxi-intercity__marker--origin > span {
	width: 34%; height: 34%; border-radius: 999px; background: #fff;
}
.bsy-taxi-intercity__marker--dest {
	border-radius: 5px;
	background: var(--bsy-brand);
	box-shadow: 0 0 0 2px rgba(0,67,255,.18);
}
.bsy-taxi-intercity__marker--dest > span {
	width: 36%; height: 36%; border-radius: 2px; background: #fff;
}

.bsy-taxi-intercity__swap {
	width: 40px; height: 40px; border-radius: 999px;
	background: var(--bsy-brand-lighter);
	color: var(--bsy-brand);
	border: 3px solid #fff;
	display: grid; place-items: center;
	justify-self: center;
	box-shadow: 0 2px 6px rgba(0,67,255,.18);
	position: relative; z-index: 1;
	cursor: pointer;
	transition: transform .25s var(--bsy-ease-out), background .15s var(--bsy-ease-out);
}
.bsy-taxi-intercity__swap:hover { background: var(--bsy-brand); color: #fff; }
.bsy-taxi-intercity__swap:active { transform: rotate(180deg) scale(.95); }

/* Trip teaser cells */
.bsy-taxi-intercity__teaser {
	margin-top: 12px;
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	padding: 12px 4px;
	border-radius: 14px;
	background: var(--bsy-grey-100);
}
.bsy-taxi-intercity__teaser-cell {
	text-align: center; padding: 0 10px;
}
.bsy-taxi-intercity__teaser-cell--div {
	border-inline-start: 1px solid var(--bsy-grey-200);
}
.bsy-taxi-intercity__teaser-l {
	font-size: 11px; font-weight: 700;
	color: var(--bsy-grey-600);
	letter-spacing: 0.01em; margin-bottom: 4px;
}
.bsy-taxi-intercity__teaser-v {
	font-family: var(--bsy-font);
	font-size: 16px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
 line-height: 1;
}
/* Teaser price — blurred placeholder per design. The real number is
 * revealed by clicking "احسب سعر الرحلة" which opens the fare modal. */
.bsy-taxi-intercity__teaser-price {
	display: inline-block;
	font-family: var(--bsy-font);
	font-weight: var(--bsy-fw-black);
	color: transparent;
	background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.15));
	-webkit-background-clip: text; background-clip: text;
	filter: blur(3.5px);
}
.bsy-taxi-intercity__teaser-cur {
	font-size: 11px; font-weight: 700;
	color: var(--bsy-grey-600);
	margin-inline-start: 4px;
}

.bsy-taxi-intercity__calc {
	margin-top: 12px;
	display: block; width: 100%;
	font-family: var(--bsy-font);
	font-size: 16px; font-weight: 700;
	padding: 14px 32px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: #fff;
	border: 0; cursor: pointer;
	text-align: center; text-decoration: none;
	box-shadow: var(--bsy-shadow-brand);
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-taxi-intercity__calc:hover { background: var(--bsy-brand-hover); color: #fff; }
.bsy-taxi-intercity__calc.is-error {
	background: var(--bsy-error);
	box-shadow: 0 4px 20px rgba(217,45,32,.32);
}

/* Coverage map card */
.bsy-taxi-intercity__coverage {
	display: flex; flex-direction: column; gap: 10px;
	border-radius: var(--bsy-radius-3xl);
}
.bsy-taxi-intercity__coverage-h {
	margin: 0;
	font-size: 18px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
}
.bsy-taxi-intercity__coverage-p {
	margin: 0;
	font-size: 12.5px; color: var(--bsy-grey-700);
	line-height: 1.55; font-weight: var(--bsy-fw-medium);
}
.bsy-taxi-intercity__coverage-map {
	position: relative;
	width: calc(100% + 36px);
	margin-inline: -18px;
	margin-block-start: 4px;
	aspect-ratio: 820 / 600;
}
.bsy-taxi-intercity__coverage-map img {
	width: 100%; height: 100%; display: block;
	object-fit: contain; object-position: center;
}
.bsy-taxi-intercity__coverage-legend {
	display: flex; flex-wrap: wrap;
	gap: 28px;
	align-items: center; justify-content: center;
	padding-block-start: 14px; padding-block-end: 4px;
	border-block-start: 1px solid var(--bsy-grey-100);
	margin-block-start: auto;
}
.bsy-taxi-intercity__legend-item {
	display: inline-flex; align-items: center; gap: 8px;
}
.bsy-taxi-intercity__legend-swatch {
	width: 18px; height: 18px; border-radius: 5px;
	flex: 0 0 auto;
}
.bsy-taxi-intercity__legend-swatch--brand { background: var(--bsy-brand); }
.bsy-taxi-intercity__legend-swatch--muted {
	background: #E8EAEE;
	border: 1px solid rgba(0,0,0,0.04);
}
.bsy-taxi-intercity__legend-label {
	font-size: 13.5px; font-weight: 700;
	color: var(--bsy-fg-primary);
}
.bsy-taxi-intercity__legend-label--muted { color: var(--bsy-grey-700); }
.bsy-taxi-intercity__legend-count {
	font-size: 12px; font-weight: 800;
	padding: 2px 8px; border-radius: 999px;
	min-width: 22px; text-align: center;
}
.bsy-taxi-intercity__legend-count--brand {
	color: var(--bsy-brand);
	background: var(--bsy-brand-10);
}
.bsy-taxi-intercity__legend-count--muted {
	color: var(--bsy-grey-600);
	background: var(--bsy-grey-100);
}

/* Price factors */
.bsy-taxi-intercity__factors {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.bsy-taxi-intercity__factor {
	background: var(--bsy-grey-100);
	border: 1px solid transparent;
	border-radius: 14px; padding: 14px;
	display: flex; flex-direction: column; gap: 8px;
	position: relative; overflow: hidden;
}
.bsy-taxi-intercity__factor--active {
	background: var(--bsy-brand-lighter);
	border-color: rgba(0,67,255,.15);
}
.bsy-taxi-intercity__factor-n {
	position: absolute; top: -10px; inset-inline-start: -4px;
	font-size: 72px; font-weight: 950;
	color: rgba(0,0,0,.05);
	line-height: 1; pointer-events: none;
	font-family: var(--bsy-font);
}
.bsy-taxi-intercity__factor--active .bsy-taxi-intercity__factor-n {
	color: rgba(0,67,255,.10);
}
.bsy-taxi-intercity__factor-ic {
	width: 34px; height: 34px; border-radius: 10px;
	background: #fff;
	color: var(--bsy-brand);
	display: grid; place-items: center;
	position: relative;
}
.bsy-taxi-intercity__factor--active .bsy-taxi-intercity__factor-ic {
	background: var(--bsy-brand); color: #fff;
}
.bsy-taxi-intercity__factor-t {
	position: relative;
	font-size: 14px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
 margin-top: 4px;
}
.bsy-taxi-intercity__factor-s {
	position: relative;
	font-size: 12px;
	color: var(--bsy-grey-700);
	line-height: 1.45; font-weight: var(--bsy-fw-medium);
}

/* Car types section */
.bsy-taxi-intercity__cars {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
/* Compact horizontal card matching the design — shorter card, larger car art. */
.bsy-taxi-intercity__car {
	position: relative;
	border-radius: 16px;
	padding: 14px;
	background: var(--bsy-grey-100);
	border: 1px solid transparent;
	display: flex; flex-direction: column; gap: 6px;
	min-height: 150px;
}
.bsy-taxi-intercity__car--featured {
	background: var(--bsy-brand-lighter);
	border-color: rgba(0,67,255,.20);
}
/* Top-right (RTL start) badge — present on every car. The featured
 * variant uses the brand color; others use a neutral chip look. */
.bsy-taxi-intercity__car-badge {
	position: absolute; top: 10px; inset-inline-start: 10px;
	background: #fff; color: var(--bsy-grey-700);
	font-size: 10.5px; font-weight: 800;
	padding: 4px 10px; border-radius: 999px;
	border: 1px solid var(--bsy-grey-200);
	box-shadow: 0 1px 0 rgba(0,0,0,.03);
	white-space: nowrap;
}
.bsy-taxi-intercity__car-badge.is-featured {
	background: var(--bsy-brand); color: #fff;
	border-color: transparent;
}
.bsy-taxi-intercity__car-img-wrap {
	display: flex; align-items: center; justify-content: center;
	height: 76px; margin-top: 2px;
	overflow: visible;
}
/* Larger car art inside a shorter card. */
.bsy-taxi-intercity__car-img {
	height: auto !important;
	width: auto !important;
	max-height: 76px !important;
	max-width: 96% !important;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}
.bsy-taxi-intercity__car-name {
	font-size: 17px; font-weight: var(--bsy-fw-black);
	color: var(--bsy-fg-primary);
}
.bsy-taxi-intercity__car-desc {
	/* margin-top: auto pushes the description to the bottom of the
	 * flex card — all 3 descriptions align across the row regardless
	 * of how long the name + badge took above. */
	margin: auto 0 0;
	padding-top: 12px;
	font-size: 13px; line-height: 1.55;
	color: var(--bsy-grey-700);
	font-weight: var(--bsy-fw-medium);
}

/* Why-intercity feature */
.bsy-taxi-intercity__why {
	border-radius: var(--bsy-radius-3xl); overflow: hidden;
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	box-shadow: var(--bsy-shadow-card);
	display: grid; grid-template-columns: 1.05fr 1fr;
}
.bsy-taxi-intercity__why-copy {
	padding: 28px;
	display: flex; flex-direction: column; gap: 16px;
}
.bsy-taxi-intercity__why-title {
	margin: 12px 0 8px;
	font-family: var(--bsy-font);
	font-weight: var(--bsy-fw-black);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.15;
	color: var(--bsy-fg-primary);
}
.bsy-taxi-intercity__why-p {
	margin: 0;
	font-size: 14px; line-height: 1.65;
	color: var(--bsy-grey-700);
	font-weight: var(--bsy-fw-medium);
}
.bsy-taxi-intercity__why-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.bsy-taxi-intercity__why-tile {
	background: var(--bsy-grey-100);
	border: 1px solid transparent;
	border-radius: 14px; padding: 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.bsy-taxi-intercity__why-tile--active {
	background: var(--bsy-brand-lighter);
	border-color: rgba(0,67,255,.15);
}
.bsy-taxi-intercity__why-tile-ic {
	width: 36px; height: 36px; border-radius: 10px;
	background: #fff;
	color: var(--bsy-brand);
	display: grid; place-items: center;
}
.bsy-taxi-intercity__why-tile--active .bsy-taxi-intercity__why-tile-ic {
	background: var(--bsy-brand); color: #fff;
}
.bsy-taxi-intercity__why-tile-t {
	font-size: 13.5px; font-weight: 800;
	color: var(--bsy-fg-primary);
 line-height: 1.3;
}
.bsy-taxi-intercity__why-tile-s {
	font-size: 11.5px;
	color: var(--bsy-grey-700);
	font-weight: var(--bsy-fw-medium);
	line-height: 1.45;
}

.bsy-taxi-intercity__why-visual {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, #00309C 0%, var(--bsy-brand) 70%, #3463FF 100%);
	color: #fff;
	padding: 32px 28px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.bsy-taxi-intercity__why-scene {
	position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.bsy-taxi-intercity__why-visual-top { position: relative; }
.bsy-taxi-intercity__why-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px;
	background: rgba(255,255,255,.16);
	backdrop-filter: blur(8px);
	font-size: 11px; font-weight: 700;
	color: #fff;
}
.bsy-taxi-intercity__why-pill-dot {
	width: 5px; height: 5px; border-radius: 999px; background: var(--bsy-accent-gold);
}
.bsy-taxi-intercity__why-h {
	margin: 14px 0 0;
	font-family: var(--bsy-font);
	font-weight: var(--bsy-fw-black);
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1;
	color: #fff;
}
.bsy-taxi-intercity__why-h-accent { color: var(--bsy-accent-gold); }
.bsy-taxi-intercity__why-strip {
	position: relative;
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 8px;
}
.bsy-taxi-intercity__why-strip li {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.12);
	backdrop-filter: blur(8px);
	padding: 9px 12px; border-radius: 12px;
	font-size: 12.5px; font-weight: var(--bsy-fw-semibold);
	color: #fff;
}
.bsy-taxi-intercity__why-strip-ic {
	width: 22px; height: 22px; border-radius: 999px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center; flex: none;
}

/* ==========================================================================
   Responsive — 960px breakpoint (tablet)
   ========================================================================== */
@media (max-width: 960px) {
	/* /taxi */
	.bsy-taxi__top { grid-template-columns: 1fr; gap: 14px; }
	.bsy-taxi__hero { padding: 22px 20px 20px; min-height: 0; border-radius: var(--bsy-radius-xl); }
	.bsy-taxi__hero-title { font-size: 30px; }
	.bsy-taxi__hero-copy { margin-top: 18px; margin-bottom: 14px; }
	.bsy-taxi__hero-stats { gap: 14px; flex-wrap: wrap; }

	.bsy-taxi__sub-grid { gap: 12px; }
	.bsy-taxi__sub { grid-template-columns: 0.9fr 1fr; }

	/* airport */
	.bsy-taxi-airport__hero { min-height: 460px; border-radius: var(--bsy-radius-xl); }
	.bsy-taxi-airport__hero-copy { padding: 22px 20px 20px; max-width: 100%; min-height: 460px; }
	.bsy-taxi-airport__savings { grid-template-columns: 1fr; }
	.bsy-taxi-airport__savings-copy { padding: 22px; }
	.bsy-taxi-airport__savings-side {
		border-inline-start: none;
		border-top: 1px solid var(--bsy-grey-100);
		padding: 18px;
	}

	/* intercity */
	.bsy-taxi-intercity__top { grid-template-columns: 1fr; }
	.bsy-taxi-intercity__hero { min-height: 420px; padding: 24px 20px 20px; border-radius: var(--bsy-radius-xl); }
	.bsy-taxi-intercity__factors { grid-template-columns: 1fr 1fr; }
	.bsy-taxi-intercity__cars { grid-template-columns: 1fr; }
	.bsy-taxi-intercity__why { grid-template-columns: 1fr; }
	.bsy-taxi-intercity__why-copy { padding: 20px; }
	.bsy-taxi-intercity__why-visual { padding: 24px 18px; min-height: 240px; }
}

/* ==========================================================================
   Responsive — 768px breakpoint (mobile)
   ========================================================================== */
@media (max-width: 768px) {
	/* /taxi */
	.bsy-taxi__hero { padding: 18px 18px 16px; min-height: 0; border-radius: var(--bsy-radius-xl); }
	.bsy-taxi__hero-title { font-size: 28px; }
	.bsy-taxi__hero-lede { font-size: 12.5px; }

	/* Tier selector switches to a stacked row layout on mobile so each
	   tier shows its name + the car silhouette side-by-side. */
	.bsy-tier { padding: 12px; border-radius: var(--bsy-radius-lg); }
	.bsy-tier__grid { grid-template-columns: 1fr; gap: 8px; }
	.bsy-tier__tile {
		min-height: 0;
		padding: 10px 14px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.bsy-tier__badge {
		position: static;
		font-size: 10px;
	}
	.bsy-tier__check {
		position: static;
		order: 3;
	}
	.bsy-tier__img-wrap {
		width: 112px; height: 56px;
		margin-top: 0;
		order: 2;
	}
	.bsy-tier__name {
		margin-top: 4px;
		order: 1;
		font-size: 16px;
	}
	.bsy-tier__cta { height: 48px; font-size: 14px; }

	/* Sub services — 3 across at mobile size */
	.bsy-taxi__sub-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 8px; }
	.bsy-taxi__sub {
		grid-template-columns: 1fr;
		border-radius: var(--bsy-radius-lg);
	}
	.bsy-taxi__sub-art { height: 72px; }
	.bsy-taxi__sub-body { padding: 10px 12px 12px; flex-direction: row; align-items: center; gap: 6px; }
	.bsy-taxi__sub-copy { flex: 1; min-width: 0; }
	.bsy-taxi__sub-eyebrow { display: none; }
	.bsy-taxi__sub-title { font-size: 11px; line-height: 1.12; word-break: break-word; }
	.bsy-taxi__sub-chips { display: none; }
	.bsy-taxi__sub-cta {
		height: auto; padding: 0; background: transparent;
		color: var(--bsy-brand); box-shadow: none;
		flex: none; padding-inline: 0;
	}
	.bsy-taxi__sub-cta span { display: none; }

	/* Driver card spans the full row under the 3 sub-cards (it was landing in
	   a single 1/3 column, which squashed the icon + clipped the text). */
	.bsy-taxi__driver { grid-column: 1 / -1; padding: 10px 12px 10px 10px; border-radius: var(--bsy-radius-lg); }
	.bsy-taxi__driver-ic { width: 44px; height: 44px; }
	.bsy-taxi__driver-t { font-size: 14px; }
	.bsy-taxi__driver-s { display: none; }
	.bsy-taxi__driver-cta { padding: 7px 13px; font-size: 11px; }

	.bsy-taxi__hero-stats { gap: 14px; }
	.bsy-taxi__hero-stat-n { font-size: 16px; }
	.bsy-taxi__hero-stat-l { font-size: 10px; }

	/* airport */
	.bsy-taxi-airport__hero { min-height: 460px; }
	.bsy-taxi-airport__veil {
		background: linear-gradient(180deg, rgba(0,30,90,.05) 0%, rgba(0,30,90,.40) 60%, rgba(0,30,90,.55) 100%);
	}
	.bsy-taxi-airport__hero-copy { padding: 22px 18px 18px; min-height: 460px; }
	.bsy-taxi-airport__hero-title { font-size: 30px; }
	.bsy-taxi-airport__hero-lede { font-size: 13px; }
	.bsy-taxi-airport__savings-copy,
	.bsy-taxi-airport__savings-side { padding: 18px; }

	/* intercity */
	.bsy-taxi-intercity__hero { padding: 18px 16px; min-height: 360px; }
	.bsy-taxi-intercity__hero-title { font-size: 32px; }
	.bsy-taxi-intercity__picker-row {
		display: flex; flex-direction: column;
		gap: 6px; align-items: stretch;
	}
	.bsy-taxi-intercity__swap {
		width: 32px; height: 32px;
		transform: rotate(90deg);
		margin: -10px auto;
	}
	.bsy-taxi-intercity__picker { padding: 14px; border-radius: var(--bsy-radius-xl); }
	.bsy-taxi-intercity__calc { font-size: 14px; padding: 12px 24px; }
	.bsy-taxi-intercity__teaser { padding: 10px 0; }
	.bsy-taxi-intercity__teaser-cell { padding: 0 6px; }
	.bsy-taxi-intercity__teaser-l { font-size: 10px; }
	.bsy-taxi-intercity__teaser-v { font-size: 14px; }
	.bsy-taxi-intercity__teaser-cur { font-size: 10px; }

	.bsy-taxi-intercity__coverage { padding: 16px; }
	.bsy-taxi-intercity__coverage-map {
		width: calc(100% + 24px);
		margin-inline: -12px;
	}
	.bsy-taxi-intercity__coverage-legend { gap: 16px; padding-block-start: 10px; }

	.bsy-taxi-intercity__factors { gap: 8px; }
	.bsy-taxi-intercity__factor { padding: 12px; }
	.bsy-taxi-intercity__factor-n { font-size: 56px; }

	.bsy-taxi-intercity__why-grid { grid-template-columns: 1fr 1fr; }
	.bsy-taxi-intercity__why-title { font-size: 20px; }
	.bsy-taxi-intercity__why-h { font-size: 24px; }
}

/* ============================================================
   Fare-result modal — opens when the user clicks "احسب سعر الرحلة"
   in the intercity picker. Fixed-position overlay; closes on
   backdrop click, close button, or Escape.
   ============================================================ */
.bsy-fare-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: grid; place-items: center;
	padding: 20px;
}
.bsy-fare-modal[hidden] { display: none; }
.bsy-fare-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(10,10,10,.55);
	backdrop-filter: blur(4px);
	animation: bsy-fade-in var(--bsy-duration-base) var(--bsy-ease-out);
}
.bsy-fare-modal__panel {
	position: relative;
	background: #fff;
	border-radius: var(--bsy-radius-3xl);
	padding: 28px;
	width: min(420px, 100%);
	box-shadow: 0 24px 60px -16px rgba(0,30,80,.40), 0 4px 16px rgba(0,30,80,.10);
	direction: rtl;
	animation: bsy-pop var(--bsy-duration-slow) var(--bsy-ease-out);
}
.bsy-fare-modal__close {
	position: absolute; top: 14px; inset-inline-start: 14px;
	width: 32px; height: 32px; border-radius: 999px;
	background: var(--bsy-grey-100); color: var(--bsy-grey-700);
	border: 0; cursor: pointer;
	display: grid; place-items: center;
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-fare-modal__close:hover { background: var(--bsy-grey-200); color: var(--bsy-fg-primary); }
.bsy-fare-modal__route {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 700; color: var(--bsy-fg-primary);
	background: var(--bsy-brand-lighter);
	padding: 10px 14px; border-radius: 999px;
	margin-bottom: 16px;
}
.bsy-fare-modal__title {
	margin: 0 0 16px;
	font-family: var(--bsy-font);
	font-weight: var(--bsy-fw-black);
	font-size: 22px; line-height: 1.15;
	color: var(--bsy-fg-primary);
}
.bsy-fare-modal__stats {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
	margin-bottom: 16px;
}
.bsy-fare-modal__stats > div {
	background: var(--bsy-grey-100);
	border-radius: 14px; padding: 12px 14px;
}
.bsy-fare-modal__l { font-size: 11px; font-weight: 700; color: var(--bsy-grey-600); letter-spacing: 0.02em; }
.bsy-fare-modal__v {
	font-family: var(--bsy-font);
	font-weight: var(--bsy-fw-black);
	font-size: 18px; color: var(--bsy-fg-primary);
	margin-top: 4px;
}
.bsy-fare-modal__price {
	display: flex; align-items: baseline; gap: 8px;
	background: var(--bsy-brand);
	color: #fff;
	border-radius: var(--bsy-radius-2xl);
	padding: 18px 22px;
	margin-bottom: 12px;
	box-shadow: var(--bsy-shadow-brand-lg);
}
/* Fare amount — also blurred per design. Real price is shown in the
 * native app; this page is marketing, not a binding quote. */
.bsy-fare-modal__amount {
	font-family: var(--bsy-font);
	font-weight: 950; font-size: 32px;
	line-height: 1;
	color: transparent;
	background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,.4));
	-webkit-background-clip: text; background-clip: text;
	filter: blur(5px);
}
.bsy-fare-modal__cur { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); }
.bsy-fare-modal__note {
	margin: 0 0 16px;
	font-size: 12px; font-weight: 500;
	color: var(--bsy-grey-600); line-height: 1.55;
}
.bsy-fare-modal__cta {
	display: block; text-align: center;
	background: var(--bsy-black); color: #fff;
	padding: 14px 24px; border-radius: var(--bsy-radius-pill);
	text-decoration: none;
	font-family: var(--bsy-font);
	font-size: 15px; font-weight: 700;
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-fare-modal__cta:hover { background: var(--bsy-brand); color: #fff; }

@keyframes bsy-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsy-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}