/*!
 * نادي كباتن بَلي — Driver Club pages (driverclub-baly-iq-plugin).
 *
 * Source of truth: Baly Design System (Update)/templates/driver-club-{home,listing,vendor}/*.dc.html.
 * Every inline style there is a class here, values unchanged. Tokens (--bsy-*),
 * the font and the shared primitives (.bsy-btn / .bsy-shead / .bsy-pill /
 * .bsy-card / .bsy-faq) come from the theme (bch-tokens.css + bch-chrome.css).
 * RTL throughout: logical properties only.
 */

/* ---------------------------------------------------------------- Page */
/* White, like every other page on the site (owner, 2026-09-23) — the design's
   grey-50 ground is dropped; cards and fields keep their 1px borders on it. */
body.bdc-body { background: #fff; }

.bdc {
	/* Open/closed badge ink — the design's values; the token set has no dark success/error. */
	--bdc-open-ink: #00733B;
	--bdc-closed-ink: #A8231A;
	--bdc-card-hover: 0 18px 38px -18px rgba(0, 30, 80, .30);
	--bdc-rail-pad: 16px; /* ≤ the theme shell's smallest gutter (16px), so rails never overflow the page */
	--bdc-sec-gap: clamp(36px, 4vw, 52px); /* one rhythm between every section on a page */
	color: var(--bsy-black);
	padding-block: 20px 56px;
}
.bdc a { text-decoration: none; color: inherit; }
/* That rule (and the theme's own .bsy-page a) outranks the button variants'
   single-class ink, which turned every link-button's label black. */
.bdc a.bsy-btn--primary { color: #fff; }
.bdc a.bsy-btn--secondary { color: var(--bsy-brand); }
.bdc .bdc-i { display: inline-block; flex: none; vertical-align: middle; }
.bdc .bdc-flip { transform: scaleX(-1); }
.bdc [hidden] { display: none !important; }
.bdc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bdc :is(a, button, select, summary, input):focus-visible { outline: 2px solid var(--bsy-brand); outline-offset: 2px; }
.bdc-sec { padding-top: var(--bdc-sec-gap); }
.bdc-sec--hero { padding-top: 8px; }
.bdc-center { display: flex; justify-content: center; margin-top: 6px; }
.bdc-h2 { margin: 0 0 12px; font-size: 20px; font-weight: 900; }
.bdc-subh { margin: 14px 0 12px; font-size: 20px; font-weight: 900; }

/* -------------------------------------------------------- Breadcrumbs */
.bdc-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bsy-grey-600); margin-bottom: 14px; }
.bdc-crumbs a { color: var(--bsy-grey-600); }
.bdc-crumbs a:hover { color: var(--bsy-brand); }
.bdc-crumbs [aria-current] { color: var(--bsy-black); }

/* -------------------------------------------------------------- Slider */
.bdc-slider { position: relative; border-radius: var(--bsy-radius-2xl); overflow: hidden; background: var(--bsy-grey-100); aspect-ratio: 1100 / 360; box-shadow: 0 4px 16px rgba(16, 24, 40, .05); touch-action: pan-y; }
.bdc-slider__slides { position: absolute; inset: 0; }
.bdc-slide { position: absolute; inset: 0; z-index: 1; display: block; opacity: 0; visibility: hidden; transition: opacity var(--bsy-duration-slow) var(--bsy-ease-out), visibility 0s linear var(--bsy-duration-slow); }
.bdc-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity var(--bsy-duration-slow) var(--bsy-ease-out); }
.bdc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdc-slider__dots { position: absolute; bottom: 14px; inset-inline: 0; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.bdc-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: none; padding: 0; cursor: pointer; transition: width .2s ease; }
.bdc-dot.is-active { width: 24px; background: #fff; }
/* The design goes to 16:9 below 640px, but their banners are 2:1 artwork with
   text near the edges (checked against the live feed, 2026-09-23): a 16:9 crop
   cut the headline. Phones keep the full 2:1 frame. */
@media (max-width: 900px) { .bdc-slider { aspect-ratio: 2 / 1; } }

/* --------------------------------------------------------- Categories */
/* Fixed-size tiles (the 28px glyph stays as it was): at the full 1224px shell
   all 14 fit one row; narrower desktops wrap. Tablets and phones get a snap
   carousel that bleeds to the page edge like the rails, with the next tile
   peeking in so it reads as scrollable. */
.bdc-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px 8px; }
.bdc-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--bsy-black); text-align: center; }
.bdc-cat__ic { width: 72px; height: 72px; flex: none; border-radius: 18px; background: #fff; border: 1.5px solid var(--bsy-border-default); color: var(--bsy-brand); display: grid; place-items: center; transition: border-color .15s, transform .15s; }
.bdc-cat:hover .bdc-cat__ic { border-color: var(--bsy-brand); transform: translateY(-2px); }
.bdc-cat__l { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
@media (max-width: 900px) {
	/* margin-bottom −1 label line: a two-line label («تبريد وتكييف السيارات»)
	   sits off-screen yet set the row's height, so the gap under the visible
	   one-line labels read ~20px taller than every other section gap. */
	.bdc-catgrid { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bdc-rail-pad); padding: 4px var(--bdc-rail-pad) 0; margin-inline: calc(var(--bdc-rail-pad) * -1); margin-bottom: -16px; }
	.bdc-catgrid::-webkit-scrollbar { display: none; }
	.bdc-cat { flex: 0 0 72px; scroll-snap-align: start; }
	.bdc-cat__ic { width: 64px; height: 64px; border-radius: 16px; }
}

/* ------------------------------------------------- Results head + tools */
.bdc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bdc-head .bsy-shead { margin-bottom: 0; }
.bdc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 1 1 380px; justify-content: flex-end; min-width: 0; }
@media (max-width: 640px) { .bdc-tools { width: 100%; } }
.bdc-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }

/* -------------------------------------------------------------- Search */
.bdc-search { position: relative; direction: rtl; min-width: 0; margin: 0; }
.bdc-search--home { flex: 1 1 260px; max-width: 420px; }
.bdc-search--listing { flex: 1; }
.bdc-search__box { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 999px; box-shadow: var(--bsy-shadow-1); padding: 6px 10px; transition: border-color .15s, box-shadow .15s; }
.bdc-search--listing .bdc-search__box { gap: 12px; padding: 8px 10px; }
.bdc-search__box:focus-within { border-color: var(--bsy-brand); box-shadow: var(--bsy-shadow-1), 0 0 0 4px rgba(0, 67, 255, .1); }
.bdc-search__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--bsy-brand-lighter); color: var(--bsy-brand); border: none; cursor: pointer; padding: 0; line-height: 0; transition: background .15s, color .15s; }
.bdc-search--listing .bdc-search__btn { width: 44px; height: 44px; }
.bdc-search__btn:hover { background: var(--bsy-brand); color: #fff; }
.bdc-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-weight: 500; font-size: 14px; color: var(--bsy-black); text-align: right; direction: rtl; padding: 8px 4px; }
.bdc-search--listing .bdc-search__input { font-size: var(--bsy-text-base, 16px); padding: 10px 4px; }
.bdc-search__input::-webkit-search-cancel-button { display: none; }
.bdc .bdc-search__input:focus-visible { outline: none; }
.bdc-search__clear { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--bsy-grey-100); color: var(--bsy-grey-600); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bdc-search__clear:hover { background: var(--bsy-grey-200); }
.bdc-suggest { position: absolute; inset-inline: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--bsy-border-subtle); border-radius: var(--bsy-radius-xl); overflow: hidden; box-shadow: var(--bsy-shadow-3); z-index: 30; }
.bdc-suggest__head { margin: 0; padding: 11px 18px 6px; font-size: 12px; font-weight: 700; color: var(--bsy-grey-600); text-align: right; }
.bdc-suggest__list { margin: 0; list-style: none; padding: 6px 0; }
.bdc-suggest__list li { margin: 0; }
.bdc-sugg { display: flex; align-items: center; gap: 12px; padding: 11px 18px; text-align: right; color: var(--bsy-black); }
.bdc-sugg:hover, .bdc-sugg.is-active { background: var(--bsy-brand-lighter); }
.bdc-sugg__ic { width: 40px; height: 40px; border-radius: var(--bsy-radius-md); flex: none; display: flex; align-items: center; justify-content: center; background: var(--bsy-brand-lighter); color: var(--bsy-brand); }
.bdc-sugg__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bdc-sugg__n { font-size: 14px; font-weight: 700; }
.bdc-sugg__m { font-size: 12px; color: var(--bsy-grey-600); }
.bdc-suggest__empty { margin: 0; padding: 22px 18px; text-align: center; color: var(--bsy-grey-600); font-size: 14px; }

/* ----------------------------------------------------------- City menu */
.bdc-city { position: relative; flex: none; }
.bdc-city__btn { display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--bsy-border-default); box-shadow: var(--bsy-shadow-1); color: var(--bsy-black); font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.bdc-city--listing .bdc-city__btn { height: 62px; }
.bdc-city__btn:hover { border-color: var(--bsy-brand); }
/* The theme's focus ring sets border-radius: inherit (the wrapper's 0), which
   squared this pill whenever the menu handed focus back to it. */
.bdc .bdc-city__btn:focus-visible { border-radius: 999px; }
.bdc-city__pin { color: var(--bsy-brand); }
.bdc-city__chev { color: var(--bsy-grey-600); }
.bdc-city__pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 25; width: 200px; max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid var(--bsy-border-subtle); border-radius: var(--bsy-radius-xl); box-shadow: var(--bsy-shadow-3); padding: 6px; }
.bdc-city__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: none; background: transparent; color: var(--bsy-black); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: right; }
.bdc-city__opt:hover { background: var(--bsy-grey-100); }
.bdc-city__n { font-size: 12px; font-weight: 600; color: var(--bsy-grey-600); }
.bdc-city__ok { display: none !important; }
.bdc-city__opt[aria-selected="true"] { background: var(--bsy-brand-lighter); color: var(--bsy-brand); font-weight: 700; }
.bdc-city__opt[aria-selected="true"] .bdc-city__n { display: none; }
.bdc-city__opt[aria-selected="true"] .bdc-city__ok { display: inline-block !important; }
/* Phones (home tools row and listing bar): the city control collapses to its
   pin (the name stays in its aria-label) so the search field gets the width.
   A picked city tints it. */
@media (max-width: 640px) {
	.bdc-city__btn { width: 52px; padding: 0; justify-content: center; }
	.bdc-city--listing .bdc-city__btn { width: 62px; }
	.bdc-city__btn > [data-city-label], .bdc .bdc-city__chev { display: none; } /* .bdc .bdc-i would re-show the chevron */
	.bdc-city__pin { width: 22px; height: 22px; }
	.bdc-city__btn[data-on] { background: var(--bsy-brand-lighter); border-color: var(--bsy-brand); }
}

/* --------------------------------------------------------------- Rails */
.bdc-rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bdc-rail-pad); padding: 22px var(--bdc-rail-pad) 34px; margin: -22px calc(var(--bdc-rail-pad) * -1) -22px; scroll-behavior: smooth; }
.bdc-rail::-webkit-scrollbar { display: none; }
.bdc-rail > .bdc-card { flex: 0 0 clamp(250px, 74%, 300px); scroll-snap-align: start; }

/* ---------------------------------------------------------------- Card */
.bdc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 22px; overflow: hidden; color: inherit; transition: transform .2s var(--bsy-ease-out), box-shadow .2s; }
.bdc-card:hover { transform: translateY(-3px); box-shadow: var(--bdc-card-hover); }
.bdc-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--bsy-brand-lighter); display: grid; place-items: center; }
.bdc-card__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bdc-card__art { width: auto; height: 58%; max-width: 70%; object-fit: contain; border-radius: 14px; }
.bdc-card__offers { position: absolute; top: 12px; inset-inline-end: 12px; background: var(--bsy-brand); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.bdc-card__chip { position: absolute; bottom: -22px; inset-inline-start: 16px; width: 52px; height: 52px; border-radius: 16px; background: #fff; border: 1px solid var(--bsy-border-default); box-shadow: var(--bsy-shadow-2); display: grid; place-items: center; overflow: hidden; }
.bdc-card__chip img { width: 100%; height: 100%; object-fit: cover; }
.bdc-card__body { padding: 30px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bdc-card__media--logo + .bdc-card__body { padding-top: 16px; }
.bdc-card__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bdc-card__name { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.2; }
.bdc-grid .bdc-card__name { font-size: 17.5px; }
.bdc-card__cat { font-size: 12.5px; font-weight: 600; color: var(--bsy-grey-600); display: inline-flex; align-items: center; gap: 6px; }
.bdc-card__cat .bdc-i { color: var(--bsy-brand); }
.bdc-card__offer { background: var(--bsy-brand-lighter); border-radius: 14px; padding: 10px 13px; color: var(--bsy-brand); font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.bdc-card__meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 600; color: var(--bsy-grey-700); flex-wrap: wrap; border-top: 1px solid var(--bsy-border-subtle); padding-top: 10px; margin-top: auto; }
.bdc-card__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.bdc-card__meta .bdc-i { color: var(--bsy-grey-600); }

/* Open / closed */
.bdc-badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bdc-badge.is-open { background: var(--bsy-success-light); color: var(--bdc-open-ink); }
.bdc-badge.is-closed { background: var(--bsy-error-light); color: var(--bdc-closed-ink); }

/* Partner card */
.bdc-partner { border: 2px dashed var(--bsy-brand); background: var(--bsy-brand-lighter); align-items: center; justify-content: center; gap: 12px; padding: 20px; min-height: 224px; text-align: center; }
.bdc-partner__ic { width: 56px; height: 56px; border-radius: 999px; background: var(--bsy-brand); color: #fff; display: grid; place-items: center; }
.bdc-partner__t { font-size: 16px; font-weight: 900; }
.bdc-partner__s { font-size: 13px; font-weight: 500; color: var(--bsy-grey-700); line-height: 1.5; }
.bdc-partner__cta { background: var(--bsy-brand); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; }

/* --------------------------------------------------------------- Empty */
.bdc-empty { background: #fff; border: 1px dashed var(--bsy-border-default); border-radius: 22px; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bdc-empty__ic { width: 56px; height: 56px; border-radius: 999px; background: var(--bsy-grey-100); color: var(--bsy-grey-600); display: grid; place-items: center; }
.bdc-empty__t { margin: 0; font-size: 19px; font-weight: 900; }
.bdc-empty__p { margin: 0; font-size: 14px; font-weight: 500; color: var(--bsy-grey-600); max-width: 44ch; line-height: 1.6; }
.bdc-empty__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------- Listing */
/* 80px chips (were 106; the 28px glyph is unchanged): at the full 1224px shell
   all 14 fit one row, like the home tiles; narrower screens scroll as before. */
.bdc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 4px 0 16px; margin-bottom: 6px; }
.bdc-chips::-webkit-scrollbar { display: none; }
.bdc-chip { flex: 0 0 80px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--bsy-grey-600); text-align: center; }
.bdc-chip__ic { width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--bsy-grey-100); border: 1.5px solid transparent; color: var(--bsy-grey-600); position: relative; display: grid; place-items: center; transition: border-color .15s, transform .15s; }
.bdc-chip:hover .bdc-chip__ic { border-color: var(--bsy-brand); transform: translateY(-2px); }
.bdc-chip__tick { position: absolute; top: 6px; inset-inline-start: 6px; width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--bsy-border-default); display: grid; place-items: center; }
.bdc-chip__l { font-size: 12.5px; font-weight: 700; line-height: 1.3; padding-inline: 2px; }
@media (max-width: 640px) { .bdc-chip { flex-basis: 72px; } }
.bdc-chip.is-active { color: var(--bsy-brand); }
.bdc-chip.is-active .bdc-chip__ic { background: var(--bsy-brand); border-color: var(--bsy-brand); color: #fff; box-shadow: 0 10px 26px -12px rgba(0, 67, 255, .55); }
.bdc-chip.is-active .bdc-chip__tick { border: none; color: var(--bsy-brand); }
.bdc-listhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.bdc-listhead .bsy-shead { margin-bottom: 0; }
.bdc-controls { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; padding: 2px; }
.bdc-controls::-webkit-scrollbar { display: none; }
.bdc-select { position: relative; flex: none; display: inline-flex; }
.bdc-select select { -webkit-appearance: none; appearance: none; cursor: pointer; background: var(--bsy-grey-100); border: 1px solid var(--bsy-border-default); border-radius: 999px; padding: 10px 16px; padding-inline-end: 38px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--bsy-black); }
.bdc-select__chev { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--bsy-grey-600); pointer-events: none; }
.bdc-toggle { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--bsy-grey-100); border: 1px solid var(--bsy-border-default); color: var(--bsy-black); border-radius: 999px; padding: 9px 15px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bdc-toggle:hover { border-color: var(--bsy-brand); }
.bdc-toggle__off { color: var(--bsy-grey-600); }
.bdc-toggle__on { display: none !important; }
.bdc-toggle[aria-pressed="true"] { background: var(--bsy-brand); border: 1.5px solid var(--bsy-brand); color: #fff; }
.bdc-toggle[aria-pressed="true"] .bdc-toggle__on { display: inline-block !important; }
.bdc-toggle[aria-pressed="true"] .bdc-toggle__off { display: none !important; }
.bdc-reset { flex: none; color: var(--bsy-grey-700) !important; font-size: 13px; font-weight: 700; text-decoration: underline !important; white-space: nowrap; }
.bdc-note { margin: -4px 0 14px; font-size: 13px; font-weight: 600; color: var(--bsy-grey-700); background: var(--bsy-warning-light); border-radius: 12px; padding: 10px 14px; }
.bdc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .bdc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bdc-grid { grid-template-columns: 1fr; } }
.bdc-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.bdc-pg { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bsy-border-default); background: #fff; color: var(--bsy-black); display: inline-grid; place-items: center; font-size: 13.5px; font-weight: 600; }
.bdc-pg:hover { border-color: var(--bsy-brand); }
.bdc-pg--nav { padding: 0; width: 38px; }
.bdc-pg.is-active { border: 1.5px solid var(--bsy-brand); background: var(--bsy-brand); color: #fff; font-weight: 700; }

/* -------------------------------------------------------------- Vendor */
.bdc-vhead { background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 26px; overflow: hidden; margin-bottom: 22px; }
.bdc-vhead__cover { position: relative; height: 190px; background: var(--bsy-brand-lighter); }
.bdc-vhead__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdc-vhead__id { padding: 0 24px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.bdc-vhead__logo { position: relative; z-index: 2; width: 96px; height: 96px; margin-top: -42px; border-radius: 26px; background: #fff; border: 1px solid var(--bsy-border-default); box-shadow: var(--bsy-shadow-2); display: grid; place-items: center; font-size: 34px; font-weight: 900; color: var(--bsy-brand); overflow: hidden; }
/* Logos fill their frame: every feed logo is square artwork (163 of 163,
   2026-09-23), so the old inset only framed it in a white ring. */
.bdc-vhead__logo img { width: 100%; height: 100%; object-fit: cover; }
.bdc-vhead__text { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.bdc-vhead__title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bdc-vhead__title h1 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; line-height: 1.1; }
.bdc-vhead__title .bdc-badge { font-size: 12.5px; padding: 5px 12px; }
.bdc-vhead__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bdc-vhead__meta > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bsy-grey-700); }
.bdc-vhead__meta > span .bdc-i { color: var(--bsy-grey-600); }
.bdc-vhead__meta > .is-brand, .bdc-vhead__meta > .is-brand .bdc-i { color: var(--bsy-brand); font-weight: 700; white-space: nowrap; }
.bdc-pill { gap: 6px; }
.bdc-vhead__cta { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 16px; }
.bdc-vshell { display: grid; grid-template-columns: 1fr 316px; gap: 22px; align-items: start; }
.bdc-vmain { min-width: 0; }
.bdc-vside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 940px) { .bdc-vshell { grid-template-columns: 1fr; } .bdc-vside { position: static; } }
@media (max-width: 820px) { .bdc-vhead__id { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.bdc-vhead__cover { height: 120px; }
	.bdc-vhead__id { padding: 0 16px 16px; gap: 10px; }
	.bdc-vhead__logo { width: 68px; height: 68px; margin-top: -34px; border-radius: 20px; font-size: 26px; }
	.bdc-vhead__text { padding-top: 0; gap: 8px; }
	.bdc-vhead__title h1 { font-size: 22px; }
	.bdc-vhead__cta { padding-top: 4px; flex-wrap: nowrap; }
	.bdc-vhead__cta > a { flex: 1; justify-content: center; }
}

/* Offers */
.bdc-offers { margin-bottom: 24px; }
.bdc-offers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bdc-offers__head .bsy-shead { margin-bottom: 0; }
.bdc-offers__head .bsy-shead__title { font-size: clamp(22px, 2.6vw, 28px); }
.bdc-offers__list { display: flex; flex-direction: column; gap: 12px; }
.bdc-offer { background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 20px; overflow: hidden; transition: border-color .15s; }
.bdc-offer:hover { border-color: var(--bsy-brand); }
.bdc-offer__sum { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.bdc-offer__sum::-webkit-details-marker { display: none; }
.bdc-offer__val { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--bsy-brand-lighter); color: var(--bsy-brand); display: grid; place-items: center; align-content: center; gap: 1px; font-size: 16px; font-weight: 900; line-height: 1.1; }
.bdc-offer__upto { font-size: 10.5px; font-weight: 700; line-height: 1; }
.bdc-offer__title { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 900; line-height: 1.3; }
.bdc-offer__end { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.bdc-offer__valid { font-size: 12px; font-weight: 700; color: var(--bsy-grey-600); white-space: nowrap; }
.bdc-offer__chev { color: var(--bsy-brand); transition: transform .2s var(--bsy-ease-out); }
.bdc-offer[open] .bdc-offer__chev { transform: rotate(180deg); }
.bdc-offer__body { padding: 0 18px 18px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 16px; align-items: start; }
.bdc-offer__main { display: flex; flex-direction: column; gap: 10px; }
.bdc-offer__desc { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.75; color: var(--bsy-grey-800); text-wrap: pretty; }
.bdc-offer__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; font-weight: 500; line-height: 1.7; color: var(--bsy-grey-800); }
.bdc-offer__list li::marker { color: var(--bsy-brand); }
.bdc-offer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bdc-offer__chips > span { display: inline-flex; align-items: center; gap: 6px; background: var(--bsy-grey-100); font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.bdc-offer__chips .bdc-i { color: var(--bsy-brand); }
.bdc-offer__how { background: var(--bsy-brand-lighter); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.65; color: var(--bsy-grey-800); }
.bdc-offer__how-t { font-size: 12.5px; font-weight: 700; color: var(--bsy-brand); }
@media (max-width: 820px) { .bdc-offer__body { grid-template-columns: 1fr; } }

/* Branches */
.bdc-branches { margin-bottom: 22px; }
.bdc-branches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bdc-branch { background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 18px; padding: 15px; display: flex; flex-direction: column; gap: 7px; }
.bdc-branch__n { font-size: 15px; font-weight: 900; }
.bdc-branch__a { font-size: 13px; font-weight: 500; color: var(--bsy-grey-700); display: inline-flex; align-items: center; gap: 7px; }
.bdc-branch__a .bdc-i { color: var(--bsy-grey-600); }
.bdc-branch__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.bdc-branch__links a { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; color: var(--bsy-black); }
.bdc-branch__links a .bdc-i { color: var(--bsy-brand); }
.bdc-branch__links a:hover { color: var(--bsy-brand); }

/* Location card — the food vendor page's map (food-baly-iq-plugin
   asset/css/bulk/menu-location.css; DS components/food/vendor-location-map.html),
   on --bsy-* tokens. The #F1F3F6 ground and the vignette are the component's own values. */
.bdc-loc { background: #fff; border: 1px solid var(--bsy-border-subtle); border-radius: var(--bsy-radius-2xl); box-shadow: var(--bsy-shadow-2); overflow: clip; margin-bottom: 22px; }
.bdc-loc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; }
.bdc-loc__main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.bdc-loc__badge { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--bsy-radius-md); background: var(--bsy-brand-lighter); color: var(--bsy-brand); display: flex; align-items: center; justify-content: center; }
.bdc-loc__titles { min-width: 0; }
.bdc-loc__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--bsy-black); }
.bdc-loc__addr { margin: 4px 0 0; font-size: 14px; font-weight: 400; color: var(--bsy-grey-600); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdc-loc__apps { flex: none; display: flex; gap: 8px; }
.bdc-loc__go { flex: none; }
.bdc-loc__vp { position: relative; height: 460px; background: #F1F3F6; overflow: hidden; border-top: 1px solid var(--bsy-border-subtle); }
/* Two classes on purpose: MapLibre's own .maplibregl-map sets position:relative
   and loads later — a single class would lose, collapsing the map to 300px. */
.bdc-loc .bdc-loc__map { position: absolute; inset: 0; background: #F1F3F6; }
.bdc-loc__fade { position: absolute; inset: 0; pointer-events: none; z-index: 400; background: linear-gradient(180deg, rgba(241, 243, 246, .55) 0%, rgba(241, 243, 246, 0) 14%, rgba(241, 243, 246, 0) 86%, rgba(241, 243, 246, .45) 100%); }
.bdc-loc__ui { position: absolute; z-index: 500; display: flex; flex-direction: column; gap: 10px; bottom: 18px; inset-inline-start: 18px; }
.bdc-loc__zoom { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bsy-border-subtle); border-radius: var(--bsy-radius-md); box-shadow: var(--bsy-shadow-2); overflow: hidden; }
.bdc-loc__zoom button { width: 44px; height: 44px; border: none; background: #fff; cursor: pointer; color: var(--bsy-black); display: flex; align-items: center; justify-content: center; font-family: inherit; padding: 0; transition: background .15s var(--bsy-ease-out); }
.bdc-loc__zoom button:hover { background: var(--bsy-grey-100); }
.bdc-loc__zoom button:active { background: var(--bsy-brand-lighter); color: var(--bsy-brand); }
.bdc-loc__zoom button:disabled { color: var(--bsy-grey-300); cursor: default; background: #fff; }
.bdc-loc__zoom button + button { border-top: 1px solid var(--bsy-border-subtle); }
.bdc-loc__btn { width: 44px; height: 44px; border-radius: var(--bsy-radius-md); background: #fff; border: 1px solid var(--bsy-border-subtle); box-shadow: var(--bsy-shadow-2); cursor: pointer; color: var(--bsy-brand); display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s var(--bsy-ease-out), transform .15s var(--bsy-ease-out); }
.bdc-loc__btn:hover { background: var(--bsy-grey-50); transform: translateY(-1px); }
/* The map data is OpenStreetMap's (ODbL): credit it, quietly. */
.bdc-loc__attr { position: absolute; z-index: 500; bottom: 6px; inset-inline-end: 10px; font-size: 10px; font-weight: 500; color: var(--bsy-grey-500); direction: ltr; }
.bdc .bdc-loc__attr a { color: inherit; }
/* Map-engine chrome off — the card brings its own controls. */
.bdc-loc .maplibregl-ctrl-attrib, .bdc-loc .maplibregl-ctrl-bottom-right, .bdc-loc .maplibregl-ctrl-bottom-left, .bdc-loc .maplibregl-ctrl-logo,
.bdc-loc .leaflet-control-attribution, .bdc-loc .leaflet-control-zoom { display: none !important; }
.bdc-loc .maplibregl-canvas { outline: none; }
/* No-WebGL fallback: raster OSM tiles, toned down toward the vector style. */
.bdc-loc .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.08); }
@media (max-width: 760px) {
	.bdc-loc__head { padding: 16px 18px; flex-wrap: wrap; }
	.bdc-loc__apps { width: 100%; }
	.bdc-loc__go { flex: 1 1 0; }
	.bdc-loc__vp { height: 380px; }
}

/* Pin + label. Never set position here: MapLibre (.maplibregl-marker) and
   Leaflet (.leaflet-marker-icon) position the marker element themselves. */
.bdc-pin { width: 40px; height: 52px; overflow: visible; will-change: transform; font-family: var(--bsy-font); cursor: default; }
.bdc-pin.is-multi { cursor: pointer; }
.bdc-pin.is-open { z-index: 2; }
.bdc-pin__label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; white-space: nowrap; background: #fff; border: 1px solid var(--bsy-border-subtle); border-radius: var(--bsy-radius-pill); padding: 7px 14px 7px 8px; box-shadow: var(--bsy-shadow-2); direction: rtl; }
.bdc-pin:not(.is-open) .bdc-pin__label { display: none; }
.bdc-pin__label::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-1px); width: 14px; height: 8px; background: #fff; border-right: 1px solid var(--bsy-border-subtle); border-bottom: 1px solid var(--bsy-border-subtle); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bdc-pin__logo { width: 30px; height: 30px; border-radius: var(--bsy-radius-sm); flex: 0 0 auto; background: #fff center / cover no-repeat; border: 1px solid var(--bsy-border-subtle); }
.bdc-pin__text { display: flex; flex-direction: column; line-height: 1.15; }
.bdc-pin__name { font-size: 13.5px; font-weight: 700; color: var(--bsy-black); }
.bdc-pin__sub { font-size: 11.5px; font-weight: 500; color: var(--bsy-grey-600); }
.bdc-pin__pin { position: relative; width: 40px; height: 52px; margin: 0 auto; }
.bdc-pin__shadow { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); width: 22px; height: 7px; border-radius: 50%; background: rgba(10, 10, 10, .22); filter: blur(2px); }
.bdc-pin__pin svg { position: relative; width: 40px; height: 52px; display: block; color: var(--bsy-brand); filter: drop-shadow(0 6px 10px rgba(0, 67, 255, .28)); }
.bdc-pin__ping { position: absolute; left: 50%; top: 16px; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bsy-brand); opacity: .35; animation: bdc-ping 2.4s var(--bsy-ease-out) infinite; }
.bdc-pin.is-multi .bdc-pin__ping { display: none; }
@keyframes bdc-ping {
	0% { transform: translate(-50%, -50%) scale(1); opacity: .35; }
	70% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bdc-pin__ping { animation: none; opacity: 0; } }

/* Aside */
.bdc-box { background: #fff; border: 1px solid var(--bsy-border-default); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bdc-box__t { font-size: 16px; font-weight: 900; }
.bdc-info { display: flex; align-items: flex-start; gap: 11px; }
.bdc-info__ic { width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--bsy-brand-lighter); color: var(--bsy-brand); display: grid; place-items: center; }
.bdc-info__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bdc-info__l { font-size: 12px; font-weight: 600; color: var(--bsy-grey-600); }
.bdc-info__v { font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.bdc-info__copy { flex: none; border: none; background: var(--bsy-brand-lighter); color: var(--bsy-brand); width: 34px; height: 34px; padding: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.bdc-info__copy:hover { background: var(--bsy-brand); color: #fff; }
.bdc-status { font-size: 12.5px; font-weight: 700; color: var(--bsy-success); min-height: 18px; margin-block: -6px; }
.bdc-wide { width: 100%; }
.bdc-hrs { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--bsy-grey-700); border-bottom: 1px solid var(--bsy-border-subtle); padding-bottom: 7px; }
.bdc-hrs bdi { font-weight: 700; color: var(--bsy-black); }
.bdc-sim { display: flex; align-items: center; gap: 11px; border: 1px solid var(--bsy-border-default); border-radius: 16px; padding: 11px; transition: border-color .15s; }
.bdc-sim:hover { border-color: var(--bsy-brand); }
.bdc-sim__logo { width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--bsy-brand-lighter); color: var(--bsy-brand); display: grid; place-items: center; font-size: 16px; font-weight: 900; overflow: hidden; }
.bdc-sim__logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.bdc-sim__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bdc-sim__n { font-size: 14px; font-weight: 900; }
.bdc-sim__o { font-size: 12px; font-weight: 700; color: var(--bsy-brand); line-height: 1.35; }
.bdc-more { font-size: 13px; font-weight: 700; color: var(--bsy-brand) !important; }

/* ------------------------------------------------- Latest blog posts */
/* The blog plugin's [baly_blog_recent] strip, unchanged except that it sits in
   the club's column (its own 1200px container and margins off), takes the
   club's heading size, and fits four cards across on desktop instead of
   scrolling a fourth half into view. */
.bdc .baly-blog-recent .baly-blog-container { max-width: none; padding: 0; }
.bdc .baly-blog-recent .baly-blog-related { margin: 0; }
/* Its mandatory snap aligned the first card to the viewport's bleed edge,
   scrolling it 16px past the column; snap to the track's inset instead. */
.bdc .baly-blog-recent .baly-blog-related__viewport { scroll-padding-inline: 16px; }
.bdc .baly-blog-recent .baly-blog-related__head { margin-bottom: 18px; align-items: center; }
.bdc .baly-blog-recent .baly-blog-related__head h2 { font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0; line-height: 1.2; }
@media (min-width: 1001px) {
	.bdc .baly-blog-recent .baly-blog-related__track > .baly-blog-card { flex-basis: calc((100% - 60px) / 4); width: auto; }
}

/* ------------------------------------------------ FAQ + announcements */
.bdc-faq .bsy-faq__q { cursor: pointer; }
.bdc-rich p { margin: 0 0 10px; }
.bdc-rich p:last-child { margin-bottom: 0; }
.bdc-rich a { color: var(--bsy-brand) !important; text-decoration: underline !important; }
.bdc-anns { display: flex; flex-direction: column; gap: 14px; }
.bdc-ann__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--bsy-brand); background: var(--bsy-brand-lighter); border-radius: 999px; padding: 5px 12px; }
.bdc-ann__t { margin: 12px 0 8px; font-size: 20px; font-weight: 900; line-height: 1.35; }
.bdc-ann .bdc-rich { font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--bsy-grey-800); }

/* --------------------------------------------------------- Motion */
@media (prefers-reduced-motion: reduce) {
	.bdc *, .bdc *::before, .bdc *::after { transition: none !important; scroll-behavior: auto !important; }
	.bdc-card:hover, .bdc-cat:hover .bdc-cat__ic, .bdc-chip:hover .bdc-chip__ic { transform: none; }
}