/*!
 * BALY Service Mosaic — Component styles
 *
 * Two complete layouts share the same DOM root:
 *   .bsm--desktop  (≥ 1024px)   info-plaque + taxi (tall) + food/digital + driver
 *   .bsm--mobile   (<  1024px)  headline + 3-card mosaic + driver + download card
 * Each layout is wrapped in its own subtree; CSS toggles `display` at the
 * breakpoint so only one paints at a time. No JS required.
 */

.bsm {
	font-family: var(--bsm-font);
	color: var(--bsm-black);
	direction: rtl;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.bsm *, .bsm *::before, .bsm *::after { box-sizing: border-box; }
/* Force every descendant to inherit the GraphikArabic family — themes
 * commonly hard-set font-family on h1-h6 / p / a / button at a higher
 * specificity than ".bsm", so plain inheritance loses. !important is
 * the only reliable hammer when the theme also uses !important. */
.bsm,
.bsm h1, .bsm h2, .bsm h3, .bsm h4, .bsm h5, .bsm h6,
.bsm p, .bsm a, .bsm span, .bsm div,
.bsm button, .bsm input, .bsm em, .bsm strong, .bsm aside, .bsm section {
	font-family: var(--bsm-font) !important;
}
/* Reset link defaults the theme may add (underline, color, outline,
 * tap highlight, box-shadow). Specificity bumped via tag + class. */
.bsm a,
.bsm a:hover,
.bsm a:focus,
.bsm a:active,
.bsm a:visited {
	text-decoration: none;
	color: inherit;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.bsm--desktop { display: block; }
.bsm--mobile  { display: none;  }
@media (max-width: 1023.98px) {
	.bsm--desktop { display: none;  }
	.bsm--mobile  { display: block; }
}

/* ────────────────────────────────────────────────────────────
 * SHARED — pill, chip, store badge, avatar stack, meta block
 * ──────────────────────────────────────────────────────────── */
.bsm-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--bsm-brand-lighter); color: var(--bsm-brand);
	padding: 6px 12px; border-radius: var(--bsm-radius-pill);
	font-size: 12px; font-weight: 700;
}
.bsm-pill__dot {
	width: 6px; height: 6px; border-radius: var(--bsm-radius-pill);
	background: var(--bsm-brand);
}

.bsm-card-chip {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px; border-radius: var(--bsm-radius-pill);
	background: rgba(255,255,255,.95); color: var(--bsm-black);
	font-size: 11px; font-weight: 700;
}
.bsm-card-chip__dot {
	width: 6px; height: 6px; border-radius: var(--bsm-radius-pill);
	background: var(--bsm-success);
	box-shadow: 0 0 0 3px rgba(0,168,69,.18);
}

/* App store / Play store badges — official SVGs wrapped in a pill-curve
 * container. Both badges are 135×40 (3.375:1) so equal-width flex children
 * yield equal heights with no fixed-height override. Border radius gives
 * the "curve around them" called for in the design brief.
 */
.bsm .bsm-store-badges { display: flex; gap: 10px; }
.bsm .bsm-store-badges .bsm-store-badge { flex: 1 1 0; }
.bsm a.bsm-store-badge,
.bsm .bsm-store-badge {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: transparent;
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 10px -4px rgba(0,0,0,.18);
	line-height: 0;
	text-decoration: none;
}
.bsm a.bsm-store-badge:hover,
.bsm .bsm-store-badge:hover { transform: translateY(-2px); }
.bsm .bsm-store-badge img {
	display: block;
	width: 100%;
	height: auto;
}

/* Mobile badges — slightly smaller curve to match the smaller card scale */
.bsm .bsm--mobile .bsm-store-badge,
.bsm--mobile .bsm-store-badge { border-radius: 10px; }

.bsm-avatars { display: flex; }
.bsm-avatars__a {
	width: 26px; height: 26px; border-radius: var(--bsm-radius-pill);
	border: 2px solid #fff;
	display: grid; place-items: center;
	font-size: 11px; font-weight: 800; color: var(--bsm-grey-800);
	margin-inline-start: -8px;
}
.bsm-avatars__a:first-child { margin-inline-start: 0; }

.bsm-meta {
	text-align: center; padding: 0 8px;
}
.bsm-meta + .bsm-meta { border-inline-start: 1px solid var(--bsm-grey-200); }
.bsm-meta__v {
	font-size: 16px; font-weight: 900; color: var(--bsm-black);
	letter-spacing: -0.01em; line-height: 1;
	display: inline-flex; align-items: center; gap: 4px;
}
.bsm-meta__star { color: var(--bsm-warning); }
.bsm-meta__l {
	font-size: 10px; color: var(--bsm-grey-600);
	font-weight: 500; margin-top: 4px;
}

.bsm-trust {
	display: flex; align-items: center; gap: 12px;
	font-size: 11px; font-weight: 600; color: var(--bsm-grey-700);
	line-height: 1.4;
}
.bsm-trust strong { color: var(--bsm-black); font-weight: 800; }

/* ────────────────────────────────────────────────────────────
 * DESKTOP LAYOUT — 3-column mosaic, max 1320 wide
 * ──────────────────────────────────────────────────────────── */
.bsm--desktop {
	width: 100%;
	background: var(--bsm-white);
	padding: 32px 32px 40px;
}
.bsm-grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
	grid-template-rows: repeat(7, 1fr);
	gap: 18px;
	min-height: 740px;
}
.bsm-cell--info   { grid-column: 1 / span 1; grid-row: 1 / span 7; }
.bsm-cell--taxi   { grid-column: 2 / span 1; grid-row: 1 / span 7; }
.bsm-cell--food   { grid-column: 3 / span 1; grid-row: 1 / span 3; }
.bsm-cell--digital{ grid-column: 3 / span 1; grid-row: 4 / span 3; }
.bsm-cell--driver { grid-column: 3 / span 1; grid-row: 7 / span 1; }

/* Info plaque (right column, RTL) ───────────────────────────── */
.bsm-info {
	background: #fff; border-radius: var(--bsm-radius-2xl); padding: 32px;
	display: flex; flex-direction: column; justify-content: space-between;
	border: 1px solid var(--bsm-grey-100);
	box-shadow:
		0 1px 0 rgba(0,0,0,.04),
		0 8px 24px -12px rgba(0,0,0,.10),
		0 32px 60px -24px rgba(0,30,80,.18);
}
.bsm-info__head .bsm-headline {
	font-weight: 950;
	font-size: 56px; line-height: 1; letter-spacing: -0.03em;
	margin: 20px 0 0; color: var(--bsm-black);
}
.bsm-info__head .bsm-headline em {
	font-style: normal; color: var(--bsm-brand);
}
.bsm-info__head .bsm-desc {
	margin: 18px 0 0;
	font-size: 15px; line-height: 1.6;
	color: var(--bsm-grey-700); font-weight: 500;
}

.bsm-stats {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	background: var(--bsm-grey-100); border-radius: 14px;
	padding: 12px 4px; margin-bottom: 12px;
}

.bsm-info__dl-h {
	font-size: 13px; font-weight: 800; color: var(--bsm-black); margin-bottom: 10px;
}

.bsm-dl-row { display: flex; gap: 12px; align-items: stretch; }
.bsm-qr {
	padding: 8px; background: #fff;
	border: 1px solid var(--bsm-grey-200);
	border-radius: 14px;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bsm-qr__label {
	font-size: 9.5px; font-weight: 700; color: var(--bsm-grey-700); letter-spacing: 0.02em;
}
.bsm-qr svg,
.bsm-qr .bsm-qr__img {
	display: block; width: 92px; height: 92px;
	border-radius: 6px; background: #fff;
}
.bsm-dl-col {
	flex: 1; display: flex; flex-direction: column;
	gap: 8px; justify-content: center;
}

.bsm-info__trust {
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--bsm-grey-100);
}

/* Mosaic card shared shell ──────────────────────────────────── */
/* Selector uses `a.bsm-card` so theme rules like `a { box-shadow: none }`
 * don't out-specify these. Cards are always rendered as anchor tags. */
.bsm a.bsm-card,
.bsm .bsm-card {
	position: relative;
	border-radius: var(--bsm-radius-2xl); overflow: hidden;
	background: #fff;
	border: 1px solid var(--bsm-grey-100);
	display: flex; flex-direction: column;
	/* !important on shadow defends against `a { box-shadow: none !important }`
	 * resets common to commercial themes. */
	box-shadow:
		0 1px 0 rgba(0,0,0,.04),
		0 8px 24px -12px rgba(0,0,0,.10),
		0 32px 60px -24px rgba(0,30,80,.18) !important;
	min-height: 0;
	cursor: pointer;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
	color: inherit;
}
.bsm a.bsm-card:hover,
.bsm .bsm-card:hover { transform: translateY(-2px); }
.bsm-card__art {
	position: relative; flex: 1; min-height: 180px;
	background: var(--bsm-brand); color: #fff; overflow: hidden;
}
.bsm-card--big .bsm-card__art { min-height: 360px; }
.bsm-card__body {
	padding: 16px 18px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bsm-card--big .bsm-card__body { padding: 22px; }
.bsm-card__text { flex: 1; min-width: 0; text-align: right; }
.bsm-card__title {
	font-size: 24px; font-weight: 900; letter-spacing: -0.025em;
	margin: 0; line-height: 1; color: var(--bsm-black);
}
.bsm-card--big .bsm-card__title { font-size: 36px; }
.bsm-card__sub {
	margin: 8px 0 0;
	font-size: 13px; line-height: 1.5; color: var(--bsm-grey-700);
}
.bsm-card--big .bsm-card__sub { font-size: 14px; margin-top: 10px; }
.bsm-card__cta {
	padding: 9px 16px; border-radius: var(--bsm-radius-pill);
	border: none; background: var(--bsm-brand); color: #fff;
	font-family: inherit; font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 8px;
	cursor: pointer; flex: none;
	box-shadow: 0 8px 20px -8px rgba(0,67,255,.56);
	transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bsm-card__cta:hover { background: var(--bsm-brand-hover); }
.bsm-card--big .bsm-card__cta { padding: 11px 18px; font-size: 13px; }

/* Driver row card ───────────────────────────────────────────── */
.bsm a.bsm-driver,
.bsm .bsm-driver {
	position: relative;
	border-radius: var(--bsm-radius-xl);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--bsm-grey-100);
	padding: 14px 18px 14px 14px;
	display: flex; align-items: center; gap: 14px;
	box-shadow:
		0 1px 0 rgba(0,0,0,.04),
		0 8px 24px -12px rgba(0,0,0,.10),
		0 32px 60px -24px rgba(0,30,80,.18) !important;
	cursor: pointer;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
	color: inherit;
}
.bsm a.bsm-driver:hover,
.bsm .bsm-driver:hover { transform: translateY(-2px); }
.bsm-driver__ic {
	width: 56px; height: 56px; flex: none;
	display: grid; place-items: center;
}
.bsm-driver__ic img { width: 100%; height: 100%; object-fit: contain; }
.bsm-driver__body { flex: 1; min-width: 0; text-align: right; }
.bsm-driver__title {
	font-size: 15px; font-weight: 900; letter-spacing: -0.02em;
	line-height: 1.15; color: var(--bsm-black);
}
.bsm-driver__sub {
	font-size: 11.5px; font-weight: 500; color: var(--bsm-grey-600);
	margin-top: 3px;
}
.bsm-driver__cta {
	padding: 9px 16px; border-radius: var(--bsm-radius-pill);
	border: none; background: var(--bsm-brand); color: #fff;
	font-family: inherit; font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 6px;
	cursor: pointer; flex: none;
	box-shadow: 0 8px 20px -8px rgba(0,67,255,.56);
}
.bsm-driver__cta:hover { background: var(--bsm-brand-hover); }

/* ────────────────────────────────────────────────────────────
 * CARD-ART BACKGROUNDS (CSS-only — gradient + svg overlay + floating UI)
 * ──────────────────────────────────────────────────────────── */
.bsm-bg {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, #0043FF 0%, #2E5BFF 60%, #4070FF 100%);
}
.bsm-bg__grid {
	position: absolute; inset: 0;
	background-image:
		repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 40px);
}
.bsm-bg__glow {
	position: absolute; left: 50%; top: 46%;
	transform: translate(-50%,-50%);
	width: 220px; height: 220px; border-radius: 999px;
	background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
	pointer-events: none;
}

/* Taxi BG ─────────────────────────────────────────────────── */
.bsm-bg-taxi__paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsm-bg-taxi__dot {
	position: absolute; left: 40%; top: 52%;
	width: 16px; height: 16px; border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 7px rgba(255,255,255,.25);
}
.bsm-bg-taxi__bubble {
	position: absolute; left: 16px; right: 16px; bottom: 16px;
	background: #fff; border-radius: 14px; padding: 11px 14px;
	box-shadow: 0 18px 40px -10px rgba(0,0,0,.3);
	display: flex; align-items: center; gap: 12px;
}
.bsm-bg-taxi__bubble__ic {
	width: 38px; height: 38px; border-radius: 12px;
	background: var(--bsm-brand-lighter); color: var(--bsm-brand);
	display: grid; place-items: center;
}
.bsm-bg-taxi__bubble__txt { flex: 1; text-align: right; }
.bsm-bg-taxi__bubble__t1 { font-size: 13px; font-weight: 800; color: var(--bsm-black); }
.bsm-bg-taxi__bubble__t2 { font-size: 11px; color: var(--bsm-grey-600); margin-top: 2px; }
.bsm-bg-taxi__bubble__price { font-size: 13px; font-weight: 900; color: var(--bsm-black); letter-spacing: -0.01em; }

/* Food BG ─────────────────────────────────────────────────── */
.bsm-bg-food__card {
	position: absolute;
	width: 130px; height: 130px; border-radius: 14px;
	overflow: hidden; background: #fff;
	box-shadow: 0 14px 28px -8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.5);
	display: flex; flex-direction: column;
}
.bsm-bg-food__card--a { top: 30px; left: 186px; transform: rotate(7deg); }
.bsm-bg-food__card--b { top: 92px; left: 30px;  transform: rotate(-6deg); }
.bsm-bg-food__card__img {
	height: 88px;
	background: linear-gradient(180deg, #FFF8F0 0%, #FFEFD8 100%);
	display: grid; place-items: center;
}
.bsm-bg-food__card__img img { width: 84px; height: 84px; object-fit: contain; }
.bsm-bg-food__card__row {
	flex: 1; padding: 4px 10px;
	display: flex; align-items: center; justify-content: space-between;
	direction: rtl;
}
.bsm-bg-food__card__name {
	font-size: 12px; font-weight: 900; color: var(--bsm-black); letter-spacing: -0.01em;
}
.bsm-bg-food__card__price {
	font-size: 9px; font-weight: 600; color: var(--bsm-grey-600);
}
.bsm-bg-food__disc {
	position: absolute; bottom: 16px; left: 16px;
	width: 50px; height: 50px; border-radius: 999px;
	background: #FFB300; color: #0A0A0A;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-weight: 900; transform: rotate(-8deg);
	box-shadow: 0 10px 20px -6px rgba(255,179,0,.5);
	z-index: 2;
}
.bsm-bg-food__disc__pct { font-size: 14px; line-height: 1; }
.bsm-bg-food__disc__lbl { font-size: 8px; margin-top: 1px; }

/* Digital BG ─────────────────────────────────────────────── */
.bsm-bg-digital__card {
	position: absolute;
	width: 130px; height: 84px; border-radius: 12px;
	color: #fff; padding: 10px 12px;
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 14px 28px -8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
	direction: rtl;
}
.bsm-bg-digital__card--a {
	top: 36px; left: 168px; transform: rotate(6deg);
	background: linear-gradient(135deg, #E50914, #E50914cc);
	z-index: 1;
}
.bsm-bg-digital__card--b {
	top: 92px; left: 36px; transform: rotate(-6deg);
	background: linear-gradient(135deg, #003791, #003791cc);
	z-index: 2;
}
.bsm-bg-digital__sub { font-size: 9px; opacity: .8; font-weight: 600; }
.bsm-bg-digital__name { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
.bsm-bg-digital__price { font-size: 8.5px; opacity: .8; margin-top: 1px; }

/* ────────────────────────────────────────────────────────────
 * MOBILE LAYOUT
 * ──────────────────────────────────────────────────────────── */
.bsm--mobile {
	width: 100%;
	background: #fff;
	padding: 22px 0 14px;
}
.bsm--mobile .bsm-pill { font-size: 10.5px; padding: 4px 9px; }
.bsm-m-headline {
	font-weight: 950;
	font-size: 30px; line-height: 0.98; letter-spacing: -0.03em;
	margin: 6px 0 4px; color: var(--bsm-black);
}
.bsm-m-headline em { font-style: normal; color: var(--bsm-brand); }

.bsm-m-mosaic {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	min-height: 290px;
	margin-top: 10px;
}
.bsm-m-mosaic > .bsm-m-card--taxi    { grid-column: 1; grid-row: 1 / span 2; }
.bsm-m-mosaic > .bsm-m-card--food    { grid-column: 2; grid-row: 1; }
.bsm-m-mosaic > .bsm-m-card--digital { grid-column: 2; grid-row: 2; }

.bsm a.bsm-m-card,
.bsm .bsm-m-card {
	position: relative;
	border-radius: 18px; overflow: hidden;
	background: #fff;
	border: 1px solid var(--bsm-grey-100);
	display: flex; flex-direction: column;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 32px -18px rgba(0,0,0,.18) !important;
	cursor: pointer; min-height: 0;
	text-decoration: none;
	color: inherit;
}
.bsm-m-card__art {
	position: relative; flex: 1;
	background: var(--bsm-brand); color: #fff; overflow: hidden;
	min-height: 0;
}
.bsm-m-card__chip {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 8px; border-radius: 999px;
	background: rgba(255,255,255,.95); color: var(--bsm-black);
	font-size: 9.5px; font-weight: 800;
}
.bsm-m-card__chip__dot {
	width: 5px; height: 5px; border-radius: 999px; background: var(--bsm-success);
}
.bsm-m-card__foot {
	padding: 8px 10px;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: #fff;
}
.bsm-m-card--taxi .bsm-m-card__foot { padding: 10px 12px; }
.bsm-m-card__title {
	margin: 0; font-size: 15px; font-weight: 900;
	letter-spacing: -0.025em; line-height: 1; color: var(--bsm-black);
}
.bsm-m-card--taxi .bsm-m-card__title { font-size: 20px; }
.bsm-m-card__arrow {
	width: 24px; height: 24px;
	border-radius: 0; border: none;
	background: transparent; color: var(--bsm-black);
	display: grid; place-items: center; cursor: pointer;
	flex: none; padding: 0;
}
.bsm-m-card--taxi .bsm-m-card__arrow { width: 28px; height: 28px; }

/* Mobile mini-bubble inside taxi card */
.bsm-m-taxi-bubble {
	position: absolute; left: 10px; right: 10px; bottom: 10px;
	background: #fff; border-radius: 10px; padding: 7px 9px;
	box-shadow: 0 12px 24px -10px rgba(0,0,0,.3);
	display: flex; align-items: center; gap: 8px;
}
.bsm-m-taxi-bubble__ic {
	width: 26px; height: 26px; border-radius: 8px;
	background: var(--bsm-brand-lighter); color: var(--bsm-brand);
	display: grid; place-items: center;
}
.bsm-m-taxi-bubble__txt { flex: 1; text-align: right; }
.bsm-m-taxi-bubble__t1 { font-size: 10px; font-weight: 900; color: var(--bsm-black); line-height: 1.1; }
.bsm-m-taxi-bubble__t2 { font-size: 8.5px; color: var(--bsm-grey-600); margin-top: 1px; }
.bsm-m-taxi-bubble__price { font-size: 10px; font-weight: 900; color: var(--bsm-black); }

/* Mobile food hero card */
.bsm-m-bg-food__card {
	position: absolute; left: 50%; top: 54%;
	transform: translate(-50%,-50%) rotate(-5deg);
	width: 88px; height: 92px; border-radius: 10px;
	overflow: hidden; background: #fff;
	box-shadow: 0 14px 28px -8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.5);
	display: flex; flex-direction: column;
}
.bsm-m-bg-food__card__img {
	height: 62px; background: linear-gradient(180deg, #FFF8F0 0%, #FFEFD8 100%);
	display: grid; place-items: center;
}
.bsm-m-bg-food__card__img img { width: 58px; height: 58px; object-fit: contain; }
.bsm-m-bg-food__card__row {
	flex: 1; padding: 0 7px;
	display: flex; align-items: center; justify-content: space-between;
	direction: rtl;
}
.bsm-m-bg-food__card__name { font-size: 9px; font-weight: 900; color: var(--bsm-black); }
.bsm-m-bg-food__card__price { font-size: 7.5px; font-weight: 600; color: var(--bsm-grey-600); }

/* Mobile digital hero card */
.bsm-m-bg-digital__card {
	position: absolute; left: 50%; top: 56%;
	transform: translate(-50%,-50%) rotate(-6deg);
	width: 108px; height: 68px; border-radius: 10px;
	background: linear-gradient(135deg, #003791, #003791cc);
	color: #fff; padding: 8px 10px;
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 14px 28px -8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
}
.bsm-m-bg-digital__sub { font-size: 8px; opacity: .85; font-weight: 600; text-align: left; }
.bsm-m-bg-digital__name { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; }
.bsm-m-bg-digital__price { font-size: 8px; opacity: .8; margin-top: 1px; }
.bsm-m-bg-digital__bottom { direction: rtl; }

/* Mobile background glow (smaller) */
.bsm--mobile .bsm-bg__glow { width: 140px; height: 140px; top: 50%; }

/* Driver — compact (mobile) variant */
.bsm-driver--compact {
	border-radius: 16px;
	padding: 10px 12px 10px 10px;
	gap: 12px;
	margin-top: 10px;
}
.bsm-driver--compact .bsm-driver__ic { width: 44px; height: 44px; }
.bsm-driver--compact .bsm-driver__title { font-size: 14px; }
.bsm-driver--compact .bsm-driver__cta { padding: 7px 13px; font-size: 11px; }

/* Mobile download card */
.bsm-m-download {
	background: #fff; border-radius: 18px; padding: 12px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 32px -18px rgba(0,0,0,.18);
	margin-top: 10px;
}
.bsm-m-download__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 8px;
}
.bsm-m-download__title {
	font-size: 13px; font-weight: 900; color: var(--bsm-black); letter-spacing: -0.01em;
}
.bsm-m-rating {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 10px; font-weight: 700;
	color: var(--bsm-grey-700);
	background: var(--bsm-grey-100);
	padding: 3px 7px; border-radius: 999px;
}
.bsm-m-rating__star { color: var(--bsm-warning); }
.bsm-m-rating__sep { width: 2px; height: 2px; border-radius: 999px; background: var(--bsm-grey-400); }
.bsm-m-download__stats {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	background: var(--bsm-grey-100); border-radius: 12px;
	padding: 8px 4px; margin-bottom: 10px;
}
.bsm-m-download__trust {
	margin-top: 10px; padding-top: 10px;
	border-top: 1px solid var(--bsm-grey-100);
	display: flex; align-items: center; gap: 10px;
	font-size: 10.5px;
}

/* ─────── Brand color override (per-instance) ───────
 * The shortcode renders an inline --bsm-brand on the .bsm root so users can
 * swap brand color via attribute. All brand-driven selectors read from it.
 */
.bsm[style*="--bsm-brand"] .bsm-card__cta,
.bsm[style*="--bsm-brand"] .bsm-driver__cta {
	background: var(--bsm-brand);
}

/* ─────── Platform-specific badge visibility ───────
 * Tiny inline script at the end of the render adds `.bsm--ios` or
 * `.bsm--android` to the root based on user-agent. Inside the mobile
 * subtree only, we hide the non-matching badge — on desktop both stay
 * visible. When only one badge remains, the container shrinks and
 * centers so the single badge doesn't span full-width.
 */
@media (max-width: 1023.98px) {
	.bsm.bsm--ios .bsm--mobile .bsm-store-badge--android,
	.bsm.bsm--android .bsm--mobile .bsm-store-badge--ios { display: none; }

	.bsm.bsm--ios .bsm--mobile .bsm-store-badges,
	.bsm.bsm--android .bsm--mobile .bsm-store-badges {
		max-width: 200px;
		margin-inline: auto;
		justify-content: center;
	}
}