/* =====================================================================
   bsport widgets — Crimsongym bright theme

   How this works
   --------------
   The bsport widget (cdn.bsport.io/scripts/widget.js) renders straight into
   the page DOM — the only iframe it creates is an invisible auth "proxy
   bridge". Its styling is driven by CSS custom properties declared on
   `<div class="bs-setup-variable" id="bs-setup-derived-variable">` and
   consumed by BEM hook classes (`.bs-offer-list-item`, `.bs-pass-card`, …).

   Covers: calendar (rooster), pass / strippenkaarten, subscription /
   abonnementen.

   Layer 1  Override the design tokens → fonts, radii, brand colours,
            shadows propagate through the whole widget (incl. dialogs).
   Layer 2  Fine-tune specific hooks. The widget's own rules look like
            `[id*=bsport-widget] .cleanslate .bs-x { … !important }`
            (specificity 0,3,0) so ours use a 4th class + !important.

   Wrap the mount node in `.bsport-theme`.
   ===================================================================== */

/* Shared mount / loading (used by rooster + tarieven) */
.bsport-mount { position: relative; min-height: 20rem; }
.bsport-mount--pricing { min-height: 32rem; }
.bsport-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  pointer-events: none;
}
.bsport-mount:has(.cleanslate) .bsport-loading { display: none; }
.bsport-loading span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--crimson);
  animation: bsport-bounce 1.1s infinite ease-in-out;
}
.bsport-loading span:nth-child(2) { animation-delay: .15s; }
.bsport-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes bsport-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---------- Layer 1: design tokens ---------- */
.bsport-theme .bs-setup-variable#bs-setup-derived-variable {
  /* Typography */
  --fontFamily: var(--font-body);
  --bs-font-family: var(--font-body);
  --h4-fontFamily: var(--font-head);      /* day numbers in the week strip */
  --h5-fontFamily: var(--font-head);
  --h6-fontFamily: var(--font-head);      /* week range in the date picker */
  --button-fontFamily: var(--font-head);
  --button-letterSpacing: .06em;
  --fontWeightMedium: 700;

  /* Radii: MUI-style scale (radius-N = radius-1 × N) + bsport's own scale */
  --border-radius-1: 6px;
  --bs-border-radius-xs: 10px;
  --bs-border-radius-sm: 14px;
  --bs-border-radius-md: 18px;
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-button-lg: var(--r-pill);

  /* Brand */
  --color-primary-main: var(--crimson);
  --color-primary-dark: var(--crimson-deep);
  --color-primary-light: var(--crimson-bright);
  --color-primary-main-background: var(--crimson-soft);
  --color-primary-contrastText: #fff;
  --color-secondary-main: var(--ink);
  --color-secondary-dark: #000;
  --color-secondary-light: var(--ink-soft);

  --bs-brand-main: var(--crimson);
  --bs-brand-main-strong: var(--crimson-deep);
  --bs-brand-main-stronger: #7f1d1d;
  --bs-brand-main-strongest: #450a0a;
  --bs-brand-main-weak: var(--crimson-bright);
  --bs-brand-main-weaker: var(--crimson-tint);
  --bs-brand-main-weakest: var(--crimson-soft);
  --bs-brand-secondary: var(--ink);
  --bs-brand-secondary-strong: #000;
  --bs-brand-secondary-weak: var(--ink-soft);
  --bs-brand-secondary-weaker: #e9e9ee;
  --bs-brand-secondary-weakest: var(--bg-soft);

  /* Neutrals / surfaces */
  --border-color: var(--line);
  --color-divider: var(--line);
  --color-grey-dark: var(--ink);
  --color-grey-main: var(--muted);
  --color-grey-light: var(--bg-soft);
  --color-background-paper: #fff;
  --color-secondary-background-paper: var(--bg-soft);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --bs-grey-100: var(--bg-soft);
  --bs-grey-300: var(--line);
  --bs-grey-800: var(--ink-soft);
  --bs-grey-900: var(--ink);

  /* Shadows */
  --bs-shadow-xs: var(--shadow-sm);
  --bs-shadow-s: var(--shadow-sm);
  --bs-shadow-m: var(--shadow-md);
  --bs-shadow-l: var(--shadow-md);
  --bs-shadow-xl: var(--shadow-lg);

  /* Component heights */
  --bs-component-height-button-lg: 3.25rem;
  --bs-component-height-input: 1.75rem;
  --bs-component-height-textfield-lg: 3.25rem;
}

/* ---------- Layer 2: hooks ---------- */

/* Base */
.bsport-theme [id*="bsport-widget"] .cleanslate {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate *:focus-visible {
  outline: 3px solid rgba(185, 28, 28, .35) !important;
  outline-offset: 2px !important;
}

/* Date picker (week range + arrows) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  padding: .3rem .5rem !important;
  min-height: 3.25rem !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__placeholder {
  font-family: var(--font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__left-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__right-button {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  color: var(--ink) !important;
  transition: background .25s, color .25s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__left-button:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__right-button:hover {
  background: var(--crimson-soft) !important;
  color: var(--crimson) !important;
}
/* Month dropdown */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__menu {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__menu__header__date {
  font-family: var(--font-head) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-date-picker__menu__calendar__day__number {
  border-radius: 50% !important;
}

/* Search */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-calendar-search__input__container {
  height: 48px !important;
  padding: 0 1.1rem !important;
  border-radius: var(--r-pill) !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-calendar-search__input__container:focus-within {
  background: #fff !important;
  border-color: var(--crimson) !important;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, .12) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-calendar-search__input {
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-calendar-search__input__icon { color: var(--muted) !important; }

/* Filters (activity / coach / level) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  transition: border-color .25s, background .25s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter:hover { border-color: var(--crimson-tint) !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter--selected,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter--open {
  border-color: var(--crimson) !important;
  background: var(--crimson-soft) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter__placeholder {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter__menu {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Week strip: day names + numbers */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__weekDay {
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--muted) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__weekDay--is-today { color: var(--crimson) !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__monthDay {
  font-family: var(--font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  transition: background .25s, color .25s, transform .3s var(--ease-spring) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date--is-abled:hover .bs-week__header__date__monthDay {
  background: var(--crimson-soft) !important;
  color: var(--crimson) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__monthDay--is-today { color: var(--crimson) !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__monthDay--is-selected,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date--is-abled:hover .bs-week__header__date__monthDay--is-selected {
  background: var(--crimson) !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
  transform: scale(1.06) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__header__date__dots { color: var(--crimson) !important; }

/* Day heading in list mode */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__listMode__content__day__date {
  font-family: var(--font-head) !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 1.5rem 0 .75rem !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__listMode__content__day__date--is-today { color: var(--crimson) !important; }

/* Offer rows (list mode) → rounded cards */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: #fff !important;
  padding: 1.15rem 1.35rem !important;
  margin-bottom: .75rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item--first,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item--last {
  border-radius: var(--r-md) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item:not(.bs-offer-list-item--disabled):hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--crimson-tint) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item--disabled {
  opacity: .6 !important;
  box-shadow: none !important;
  background: var(--bg-soft) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item--ongoing { border-color: var(--crimson) !important; }

.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__offer__left__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-card-offer__content__title {
  font-family: var(--font-head) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-card-offer__content__title { font-size: 1.1rem !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__time__offer-hours__start-time {
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  color: var(--crimson) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__time__offer-hours__end-time-duration,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__time__offer-hours__time-separator {
  color: var(--muted) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__offer__left__coach,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__offer__left__establishment,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__offer__left__extra {
  color: var(--muted) !important;
  font-size: .92rem !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-list-item__content__offer__left__coach__name { color: var(--ink-soft) !important; }

/* Offer cards (week / card mode on wide screens) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week-card .bs-card-offer,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__cardMode__offerRow__offer-wrapper > * {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week-card .bs-card-offer:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-week__cardMode__period__button { border-radius: var(--r-pill) !important; }

/* Chips / status */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-chip,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-offer-status-chip,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-card-offer__content__status-chip,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-marketplace-filter__right__chip {
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
}

/* Book buttons */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-button-primary__container {
  border-radius: var(--r-pill) !important;
  background: var(--crimson) !important;
  border: 0 !important;
  box-shadow: var(--shadow-red) !important;
  transition: transform .3s var(--ease-out), background .3s, box-shadow .3s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-button-primary__container:hover {
  background: var(--crimson-bright) !important;
  transform: translateY(-2px) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card__inner__text,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button__inner__text,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-button-primary__text {
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card--disabled {
  background: var(--bg-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card__inner__text--disabled,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card__inner__text--not-available {
  color: var(--muted) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card--booked {
  background: var(--crimson-soft) !important;
  box-shadow: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-book-button-card__inner__text--booked { color: var(--crimson) !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-button-outlined__container,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-button-secondary__container {
  border-radius: var(--r-pill) !important;
}

/* Empty state */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-calendar--no-offer {
  border-radius: var(--r-md) !important;
  background: var(--bg-soft) !important;
  padding: 2.5rem !important;
}

/* ---------- Dialogs (class details / booking) ----------
   With dialogMode 1 the dialog renders inside the widget root, so the normal
   prefix applies. The doubled `.cleanslate.cleanslate` variant (0,3,2) covers
   the case where MUI portals it to <body>, still out-ranking the widget's
   own (0,3,0) rules. */
.bsport-theme [id*="bsport-widget"] .cleanslate [class*="MuiDialog-root"],
html body .cleanslate.cleanslate [class*="MuiDialog-root"] {
  z-index: 5000 !important; /* above the sticky site header (900) and progress bar (1000) */
}
.bsport-theme [id*="bsport-widget"] .cleanslate [class*="MuiDialog-paper"],
html body .cleanslate.cleanslate [class*="MuiDialog-paper"] {
  border-radius: var(--r-lg) !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Pass / subscription "Details" popup — cover the full viewport, not just the
   embed. (Requires no transform on ancestors; see .pricing-panel animation.) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-details-dialog,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-details-dialog,
.bsport-theme [id*="bsport-widget"] .cleanslate [class*="details-dialog"]:not([class*="__"]),
html body .bs-contract-details-dialog,
html body .bs-paymentpack-details-dialog {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 5000 !important;
  box-sizing: border-box !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__top__content__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__middle__coach__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__middle__conditions__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__middle__top__description__title,
html body .cleanslate.cleanslate .bs-activity__top__content__title,
html body .cleanslate.cleanslate .bs-activity__middle__coach__title,
html body .cleanslate.cleanslate .bs-activity__middle__conditions__title,
html body .cleanslate.cleanslate .bs-activity__middle__top__description__title {
  font-family: var(--font-head) !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__top__content__title,
html body .cleanslate.cleanslate .bs-activity__top__content__title { font-size: 1.6rem !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__top__content__time__hour,
html body .cleanslate.cleanslate .bs-activity__top__content__time__hour { font-family: var(--font-head) !important; color: var(--crimson) !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__bottom__content__closeButton,
html body .cleanslate.cleanslate .bs-activity__bottom__content__closeButton { border-radius: var(--r-pill) !important; font-family: var(--font-head) !important; letter-spacing: .06em !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-activity__img,
html body .cleanslate.cleanslate .bs-activity__img { border-radius: var(--r-md) !important; overflow: hidden !important; }

/* =====================================================================
   Pass (strippenkaarten) + Subscription (abonnementen) cards
   Restyle the generic bsport shop cards to match the site's price-card look.
   ===================================================================== */

/* Let pricing widgets grow with their card grids (bsport defaults some
   ancestors to a fixed/overflow-hidden box that clips the flex wrap). */
.bsport-theme .bsport-mount--pricing .cleanslate,
.bsport-theme .bsport-mount--pricing .cleanslate .bs-setup-variable,
.bsport-theme .bsport-mount--pricing .cleanslate .bs-pass-page,
.bsport-theme .bsport-mount--pricing .cleanslate .bs-contract-page,
.bsport-theme .bsport-mount--pricing .cleanslate .bs-pass-page__list,
.bsport-theme .bsport-mount--pricing .cleanslate .bs-pass-page__list__filters__container {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Hide widget chrome that duplicates our section toggle / headings.
   IMPORTANT: do NOT hide `.bs-pass-page__list__filters__container` — on the
   pass widget the card list is nested inside that node. */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__title--with-divider,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__pass__filters__search__container,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container > :not(.bs-pass-page__list) {
  display: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Card grid — same wrapping centred layout as the old .price-grid.
   Pass packs are split across multiple `.…list__container` nodes (e.g. 1 + 3)
   nested inside `.bs-pass-page__list__filters__container`. Flatten those
   wrappers with `display: contents` so every card button is a grid item.
   (Flex + % basis breaks under `display: contents`; grid does not.) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__contract__list__container {
  --price-gap: 1.75rem;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  /* bsport injects grid-template-rows: 240px … which clips/overlaps 480px cards */
  grid-template-rows: none !important;
  grid-auto-rows: minmax(480px, auto) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: var(--price-gap) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container .bs-pass-page__payment__pack__list__container,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container .bs-pass-page__list,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list > div:not([class*="title"]) {
  display: contents !important;
}

/* Wrappers around each card are the grid items (can't use display:contents on
   <button> — browsers discard it and the cards collapse to 0×0).
   bsport often forces a fixed height (e.g. 240px) on contract wrappers — that
   made 480px cards overflow and stack on top of the next row. */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__card__button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__contract__button__container {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 480px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: visible !important;
  align-self: stretch !important;
}

/* Individual cards fill their wrapper */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card.size-auto {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 480px !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Promo / first pass card (usually the free-week actie) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__container > .bs-pass-page__payment__pack__list__card__button:first-child .bs-pass-card {
  background: linear-gradient(160deg, #fff, var(--crimson-soft)) !important;
  border-color: var(--crimson-tint) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__container > .bs-pass-page__payment__pack__list__card__button:first-child .bs-price__container > span {
  color: var(--crimson) !important;
}

/* Inner layout → vertical stack like our old price cards */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card .bs-generic-card__content,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card .bs-generic-card__content {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 480px !important;
  padding: 2.6rem 2.2rem 2.2rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__grid,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__grid {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  grid-template: none !important;
  overflow: visible !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card__content__grid__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: visible !important;
}

/* Titles */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__title,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__title {
  font-family: var(--font-head) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__title__icon { display: none !important; }

/* Subtitle / meta chips — left-aligned pills (bsport centers validity) */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__subtitle,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__validity__content,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__planned-invoices__content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  padding: .45rem 1rem !important;
  margin: .35rem .4rem .35rem 0 !important;
  border-radius: var(--r-pill) !important;
  background: var(--bg-soft) !important;
  color: var(--ink-soft) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  width: fit-content !important;
  max-width: 100% !important;
  text-align: left !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__container > .bs-pass-page__payment__pack__list__card__button:first-child .bs-paymentpack-card__subtitle,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__container > .bs-pass-page__payment__pack__list__card__button:first-child .bs-paymentpack-card__validity__content {
  background: #fff !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__validity,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__planned-invoices {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* Descriptions — unclamp bsport's 2-line clamp; JS adds .cg-desc + read-more
   when the text exceeds ~3 lines. Nested inside a <button> card, so the
   toggle is a <span role="button"> (not a nested <button>). */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__description,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__description {
  --cg-desc-lines: 3;
  display: block !important;
  color: var(--ink-soft) !important;
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  margin: .4rem 0 .35rem !important;
  flex: 0 1 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-overflow: unset !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__description.cg-desc.is-collapsed,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__description.cg-desc.is-collapsed {
  max-height: calc(1em * 1.55 * var(--cg-desc-lines)) !important;
  overflow: hidden !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .cg-readmore {
  display: inline-block !important;
  margin: 0 0 .5rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--crimson) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: .18em !important;
  line-height: 1.3 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: auto !important;
  user-select: none !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .cg-readmore:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .cg-readmore:focus-visible {
  color: var(--crimson-bright) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .cg-readmore:focus-visible {
  outline: 2px solid rgba(185, 28, 28, .45) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* Price + /maand on one baseline */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-price__container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: .4rem !important;
  margin: .4rem 0 1rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-price__container > span {
  font-family: var(--font-head) !important;
  font-size: clamp(2.6rem, 4vw, 3.8rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__billing-interval--desktop,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__billing-interval--mobile {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__billing-interval--mobile { display: none !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-billing-interval {
  display: inline !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Hide the tiny cart icon next to the price — CTA lives in the footer */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__price-icon,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__price-icon,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card__content__grid__item.bs-contract-card__price-icon {
  display: none !important;
}

/* Footer actions — keep in normal flow at the bottom of the card */
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__footer,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__footer {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: .5rem !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__left-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__left-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__right-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__right-button {
  width: 100% !important;
  min-height: 3.25rem !important;
  justify-content: center !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-head) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__left-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__left-button {
  order: 2 !important;
  background: transparent !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__left-button:hover,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__left-button:hover {
  background: var(--ink) !important;
  color: #fff !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__left-button__content,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__left-button__content {
  color: inherit !important;
  font-family: var(--font-head) !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__left-button__icon,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__left-button__icon { display: none !important; }
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__right-button,
.bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__right-button {
  order: 1 !important;
}

@media (max-width: 1100px) {
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__contract__list__container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  /* Stack cards in a normal flow — avoid display:contents (Safari collapses
     grid items) and the desktop 480px min-heights that clip to buttons-only
     when bsport forces a short height on the card. */
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__contract__list__container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container .bs-pass-page__payment__pack__list__container,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list__filters__container .bs-pass-page__list,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__list > div:not([class*="title"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-page__payment__pack__list__card__button,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-page__contract__button__container,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card.size-auto,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card .bs-generic-card__content,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card .bs-generic-card__content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card.size-auto {
    overflow: visible !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-pass-card .bs-generic-card__content,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card .bs-generic-card__content {
    padding: 1.75rem 1.35rem 1.5rem !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__grid,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__grid,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-generic-card__content__grid__item {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__footer,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__footer {
    margin-top: 1.1rem !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-price__container > span {
    font-size: 2.6rem !important;
  }
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-paymentpack-card__title,
  .bsport-theme [id*="bsport-widget"] .cleanslate .bs-contract-card__title {
    font-size: 1.45rem !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bsport-theme [id*="bsport-widget"] .cleanslate * { transition: none !important; transform: none !important; }
}