/* Re:calibrate brand styling for the bsport widgets (prices, memberships, timetable).
   bsport's own styles use ID selectors, so ours use "html body #id" to take priority.
   Titles: Chromate Italic. Subheadings and buttons: Eleven Eleven Medium. Body: Roboto Light. */

:root {
  --rc-merlot: #5F3A41; --rc-near-black: #161616; --rc-caramel: #9C7961; --rc-grey: #878588;
  --rc-title: "Chromate", Georgia, serif;
  --rc-sub: "Eleven Eleven", "Helvetica Neue", Arial, sans-serif;
  --rc-body: "Roboto", Arial, sans-serif;
}

html body :is(#bsport-widget-pass, #bsport-widget-pass2), html body #bsport-widget-sub, html body #bsport-widget-cal {
  font-family: var(--rc-body) !important; color: var(--rc-near-black);
}

/* Body text: Roboto Light */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) [class*="__description"], html body #bsport-widget-sub [class*="__description"],
html body :is(#bsport-widget-pass, #bsport-widget-pass2) [class*="__validity"], html body :is(#bsport-widget-pass, #bsport-widget-pass2) [class*="__subtitle"],
html body #bsport-widget-cal [class*="__description"], html body #bsport-widget-cal [class*="__subtitle"] {
  font-family: var(--rc-body) !important; font-weight: 300 !important; letter-spacing: 0.01em;
}

/* Card and class titles: Chromate Italic */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .bs-paymentpack-card__title, html body :is(#bsport-widget-pass, #bsport-widget-pass2) .bs-pack-card__title,
html body #bsport-widget-sub .bs-contract-card__title,
html body #bsport-widget-cal [class*="card__title"], html body #bsport-widget-cal [class*="offer__title"],
html body #bsport-widget-cal [class*="session__title"], html body #bsport-widget-cal [class*="activity__name"] {
  font-family: var(--rc-title) !important; font-style: italic; font-weight: 400 !important;
  letter-spacing: 0.02em; font-size: 22px !important; color: var(--rc-merlot);
}

/* Category and day headings: Eleven Eleven, uppercase */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .bs-pass-page__payment__pack__list__title,
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .bs-pass-page__payment__pack__list__title--with-divider,
html body #bsport-widget-cal [class*="day__title"], html body #bsport-widget-cal [class*="date__title"],
html body #bsport-widget-cal [class*="header__title"] {
  font-family: var(--rc-sub) !important; font-weight: 500 !important; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--rc-merlot);
}

/* Buttons: Eleven Eleven, uppercase, wide tracking */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .bs-button__text, html body #bsport-widget-sub .bs-button__text,
html body #bsport-widget-cal .bs-button__text {
  font-family: var(--rc-sub) !important; font-weight: 500 !important; text-transform: uppercase;
  letter-spacing: 0.1em !important; font-size: 13px !important;
}

/* Hide bsport's "1 invoice" line on monthly memberships */
html body #bsport-widget-sub .bs-contract-card__planned-invoices { display: none !important; }

/* Annual cards: monthly price as the headline, upfront total underneath (annual-monthly.js) */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .rc-monthly { display: block; font-size: 25px; color: var(--rc-near-black); }
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .rc-monthly small { font-size: 14px; font-weight: 300; }
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .rc-upfront { display: block; font-size: 13px; font-weight: 300; color: var(--rc-grey); }

/* Bundle block moved into "Intro Packs" by annual-monthly.js */
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .rc-hidden-block { display: none !important; }
html body :is(#bsport-widget-pass, #bsport-widget-pass2) .rc-pack-proxy { cursor: default; }

/* Second pass widget (memberships, packs, drop-ins, privates): the bundle lives in the first one */
html body #bsport-widget-pass2 .bs-pass-page__carousel__container { display: none !important; }
/* Space between the three booking widgets */
.rc-buy-step { margin-top: 56px; }
.rc-buy-step:first-of-type { margin-top: 0; }