/* Compacte planner, stap 1 ("Waar wil je voor trainen?").
   Overschrijft de stijlen uit Booking.astro; #book geeft net genoeg voorrang. */

/* ---------- Ruimte ---------- */
#book .bk__progress { margin-bottom: clamp(1.25rem, 3vw, 1.9rem); }
#book .bk__intro { margin-top: .4rem; max-width: none; }
#book .bk__panel > .bk__fs:first-of-type { margin-top: 1.4rem; }
#book .bk__panel[data-panel="1"] .bk__fs { margin-bottom: 1.35rem; }
#book .bk__panel[data-panel="1"] .bk__legend { margin-bottom: .65rem; }
#book .bk__panel[data-panel="1"] .bk__actions { margin-top: 1.4rem; padding-top: 1.2rem; }

/* ---------- Rijbewijs: lage kaarten, icoon naast de tekst ---------- */
#book .rc--lic .rc__box {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .7rem;
  row-gap: .2rem;
  align-items: center;
  align-content: center;
  min-height: 0;
  padding: .75rem .85rem;
}
#book .rc--lic .rc__top { display: contents; }
#book .rc--lic .rc__icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; }
#book .rc--lic .rc__tick { display: none; }
#book .rc--lic .rc__title { grid-column: 2; font-size: 1rem; }
#book .rc--lic .rc__meta { grid-column: 2; font-size: .8rem; gap: .25rem .4rem; }

/* Smal: vier kaarten in een 2 × 2-raster in plaats van onder elkaar */
@container (max-width: 699px) {
  #book .bk__lic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  #book .bk__lic-group,
  #book .bk__lic-grid { display: contents; }
  #book #bk-grp-licence { grid-column: 1 / -1; }
  #book #bk-grp-extra { display: none; }
}
/* Krappe kaarten (mobiel, of naast het overzicht op een kleiner scherm):
   klein icoon naast de titel, prijs eronder over de volle breedte */
@container (max-width: 420px) or ((min-width: 700px) and (max-width: 819px)) {
  #book .rc--lic .rc__box { column-gap: .5rem; padding: .7rem .75rem; }
  #book .rc--lic .rc__icon { grid-row: 1; width: 28px; height: 28px; border-radius: 9px; }
  #book .rc--lic .rc__icon svg { width: 16px; height: 16px; }
  #book .rc--lic .rc__meta { grid-column: 1 / -1; }
}

/* ---------- Soort les: tabjes in plaats van één lange lijst ---------- */
#book .bk__lessons > .bk__sep { display: none; }

#book .bk__ltabs {
  display: flex;
  gap: .25rem;
  width: max-content;
  max-width: 100%;
  margin-bottom: .8rem;
  padding: .25rem;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  scrollbar-width: none;
}
#book .bk__ltabs[hidden] { display: none; }
#book .bk__ltab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  min-height: 40px;
  padding: .6rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: 600 .9rem/1.1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
#book .bk__ltab[hidden] { display: none; }
#book .bk__ltab small { font-size: .74rem; font-weight: 500; color: var(--muted); transition: color .3s; }
#book .bk__ltab:hover { background: rgb(11 21 48 / .05); }
#book .bk__ltab[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px rgb(11 21 48 / .7); }
#book .bk__ltab[aria-pressed="true"] small { color: rgb(255 255 255 / .72); }
#book .bk__ltab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
/* Stipje: in dit tabje staat je gekozen les */
#book .bk__ltab.has-choice:not([aria-pressed="true"])::after {
  content: "";
  position: absolute;
  top: .4rem;
  right: .45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

/* Legend en tabjes op één regel */
#book .bk__fs.has-tabs > .bk__legend { float: left; margin: 0 1rem 0 0; line-height: 48px; }
#book .bk__fs.has-tabs > .bk__lessons { clear: both; }

#book .bk__lessons[data-tab="lesson"] > .rc:not([data-group="lesson"]),
#book .bk__lessons[data-tab="bundle"] > .rc:not([data-group="bundle"]),
#book .bk__lessons[data-tab="package"] > .rc:not([data-group="package"]) { display: none; }

/* Drie opties per tabje: naast elkaar zodra het past */
@container (min-width: 700px) {
  #book .bk__fs.has-tabs .bk__lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 700px) and (max-width: 859px) {
  #book .bk__fs.has-tabs .rc--row .rc__box { gap: .6rem; padding: .85rem .8rem; }
  #book .bk__fs.has-tabs .rc--row .rc__price { font-size: 1.05rem; }
}
@container (max-width: 559px) {
  #book .bk__fs.has-tabs > .bk__legend { float: none; line-height: inherit; margin-bottom: .65rem; }
  #book .bk__ltabs { width: auto; }
  #book .bk__ltab { flex: 1 0 auto; justify-content: center; padding-inline: .8rem; }
}
@container (max-width: 459px) {
  #book .bk__ltab small { display: none; }
}

/* "Eerste les plan je nu": rechts naast de tabjes, zodat er geen extra regel bij komt */
#book .bk__fs.has-tabs { position: relative; }
#book .bk__lnote { position: absolute; top: 0; right: 0; margin: 0; line-height: 48px; }
@container (max-width: 759px) {
  #book .bk__lnote { position: static; margin-top: .7rem; line-height: inherit; }
}

/* ---------- Schakel of automaat: één regel ---------- */
#book .bk__panel[data-panel="1"] .bk__fs--trans { margin-bottom: 0; }
#book .bk__trans-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
#book .bk__trans-row .bk__legend { margin: 0; }
#book .bk__trans-row .bk__toggle { flex: 0 1 420px; }
#book .bk__trans-row .tg span { min-height: 42px; }
#book .bk__trans-row .bk__note { margin: 0; }

@container (max-width: 559px) {
  #book .bk__trans-row .bk__legend { order: 1; }
  #book .bk__trans-row .bk__note { order: 2; margin-left: auto; }
  #book .bk__trans-row .bk__toggle { order: 3; flex: 1 1 100%; max-width: none; }
}