/*!
 * Baly Site System — /carbox (بَلي باكج).
 * Built on the taxi family: the hero shell, sister-service cards and driver
 * card come from taxi.css (a dependency of this handle), which depends on
 * bsy-chrome.css. Only what /carbox adds lives here.
 */

/* ── Hero ───────────────────────────────────────────────────── */
/* The /taxi title is nowrap and one short line; this one carries a second,
   longer line, so it gets its own rules instead of fighting that. */
.bsy-carbox__copy { max-width: 520px; }
.bsy-carbox__title {
	margin: 0 0 10px;
	font-family: var(--bsy-font);
	font-weight: 950;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.02;
	color: #fff;
}
.bsy-carbox__accent {
	display: block; margin-top: 8px;
	font-size: clamp(18px, 2.2vw, 26px);
	font-weight: var(--bsy-fw-black);
	line-height: 1.3;
	color: var(--bsy-accent-gold);
}
/* The white panel that holds the car selector on /taxi holds the illustration here. */
.bsy-carbox__visual { display: flex; flex-direction: column; gap: 12px; }
.bsy-carbox__img {
	width: 100%; height: auto;
	aspect-ratio: 1024 / 554; object-fit: cover;
	border-radius: var(--bsy-radius-md);
	background: var(--bsy-grey-100);
}

/* ── How it works ───────────────────────────────────────────── */
.bsy-carbox-how .bsy-shead { margin-bottom: 22px; }
.bsy-carbox-how__track { position: relative; }
.bsy-carbox-how__connector {
	position: absolute; top: 48px; inset-inline: 16%;
	border-top: 2px dashed var(--bsy-brand-light);
	z-index: 0;
}
.bsy-carbox-how__list {
	position: relative;
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.bsy-carbox-how__step {
	position: relative; z-index: 1;
	background: #fff;
	border: 1px solid var(--bsy-grey-100);
	border-radius: var(--bsy-radius-xl);
	padding: 22px 20px;
	display: flex; flex-direction: column; gap: 10px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 22px -16px rgba(0,30,80,.16);
}
.bsy-carbox-how__head { display: flex; align-items: center; justify-content: space-between; }
.bsy-carbox-how__ic {
	width: 52px; height: 52px; border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 10px 24px -8px rgba(0,67,255,.40);
}
.bsy-carbox-how__n {
	font-family: var(--bsy-font); font-weight: 950;
	font-size: 50px; line-height: 1;
	color: var(--bsy-brand-lighter);
}
.bsy-carbox-how__t {
	margin: 6px 0 0;
	font-size: 19px; font-weight: 900; line-height: 1.2;
	color: var(--bsy-fg-primary);
}
.bsy-carbox-how__s {
	margin: 0;
	font-size: 14px; line-height: 1.65;
	color: var(--bsy-grey-700); font-weight: var(--bsy-fw-medium);
}

@media (max-width: 768px) {
	.bsy-carbox__title { font-size: 30px; }
	.bsy-carbox-how__list { grid-template-columns: 1fr; gap: 12px; }
	.bsy-carbox-how__connector { display: none; }
	.bsy-carbox-how__step { padding: 18px 16px; }
	.bsy-carbox-how__t { font-size: 17px; }
	.bsy-carbox-how__s { font-size: 13px; }
}