/* Single-line fields inherit --control-height from the theme (.form-field). */
.bth-enroll .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.bth-enroll .form-field select {
  height: var(--control-height, 2.725rem);
  min-height: var(--control-height, 2.725rem);
  padding-block: var(--control-pad-y, 0.5rem);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height, 1.6);
}

/* WebKit date inputs ignore height constraints and render oversized on mobile. */
.bth-enroll input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-height: var(--control-height, 2.725rem);
}

.bth-enroll input[type="date"]::-webkit-date-and-time-value {
  min-height: 0;
  height: auto;
  line-height: var(--control-line-height, 1.6);
  text-align: left;
}

.bth-enroll input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.bth-enroll .form-field:has(input[type="date"]) {
  position: relative;
}

.bth-enroll-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 760px) {
  .bth-enroll-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.75fr);
  }

  .bth-enroll-main {
    grid-column: 1;
    grid-row: 1;
  }

  .bth-enroll-summary {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-height, 5rem) + 1rem);
    max-height: calc(100vh - var(--header-height, 5rem) - 2rem);
    overflow-y: auto;
    align-self: start;
  }
}

.bth-enroll-section {
  margin: 0 0 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-200, #e2e5ef);
}

.bth-enroll-section:last-of-type {
  border-bottom: 0;
}

.bth-enroll-location,
.bth-enroll-hint {
  color: var(--color-gray-600, #4b5066);
  margin: 0.35rem 0 1rem;
}

.bth-enroll-niveau-fact {
  margin: 0.25rem 0 0;
  color: var(--color-gray-600, #4b5066);
}

/* Shared choice cards: lesvorm, wie betaalt, betaalwijze */
.bth-choices {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0.5rem 0 0;
  border: var(--control-border-width, 1px) solid var(--color-gray-200, #e2e5ef);
  border-radius: var(--radius-lg, 0.75rem);
  background: #fff;
  overflow: hidden;
}

.bth-enroll .bth-choice.bth-radio {
  margin: 0;
  padding: 0.7rem 0.85rem;
  gap: 0.55rem;
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bth-choice + .bth-choice {
  border-top: 1px solid var(--color-gray-200, #e2e5ef);
}

.bth-choice:has(input:checked) {
  background: color-mix(in srgb, var(--color-brand, #176B80) 9%, #fff);
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .bth-choice:has(input:checked) {
    background: rgba(23, 107, 128, 0.08);
  }
}

.bth-choice__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.bth-choice__label {
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary-900, #0a1628);
}

.bth-choice__hint {
  font-weight: 400;
  font-size: var(--fs-klein);
  line-height: 1.45;
  color: var(--color-gray-600, #4b5066);
}

.bth-choice input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.bth-radio,
.bth-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0.65rem 0;
  cursor: pointer;
}

.bth-radio input,
.bth-check input {
  margin-top: 0.2rem;
}

.bth-business {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-gray-50, #f8f9fc);
  border: 1px solid var(--color-gray-200, #e2e5ef);
  border-radius: var(--radius-control, var(--radius-lg, 0.75rem));
}

/* Sidebar rooster */
.bth-summary-roster {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200, #e2e5ef);
}

.bth-summary-roster-title {
  margin: 0;
  font-size: var(--fs-basis);
  font-weight: 600;
  color: var(--tekst-kop);
}

.bth-summary-roster-note {
  margin: 0.35rem 0 0.65rem;
  color: var(--color-gray-600, #4b5066);
  line-height: 1.4;
}

.bth-roster-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  max-height: min(32rem, 60vh);
  border: 1px solid var(--color-gray-200, #e2e5ef);
  border-radius: var(--radius-lg, 0.75rem);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(10, 22, 40, 0.05));
}

.bth-roster-modules {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bth-roster-module {
  margin: 0;
}

.bth-roster-module-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0.5rem 0.65rem 0.35rem;
  background: color-mix(in srgb, var(--color-brand, #176B80) 10%, #fff);
  color: var(--color-brand-dark, #125866);
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 1.35;
  border-bottom: 0;
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .bth-roster-module-header {
    background: var(--color-accent-50, #eef6fb);
    color: var(--color-accent-600, #125866);
  }
}

.bth-roster-module-title {
  display: block;
}

.bth-roster-module-location {
  display: block;
  font-weight: 500;
  font-size: var(--fs-mini);
  color: var(--color-gray-600, #4b5066);
}

.bth-roster-module + .bth-roster-module .bth-roster-module-header {
  margin-top: 0;
  border-top: 1px solid var(--color-gray-200, #e2e5ef);
}

.bth-roster-module-body {
  margin: 0;
  padding: 0.15rem 0.65rem 0.55rem;
  background: #fff;
  border-bottom: 1px solid var(--color-gray-200, #e2e5ef);
}

.bth-roster-module:last-child .bth-roster-module-body {
  border-bottom: 0;
}

.bth-roster-entry {
  padding-top: 0.35rem;
}

.bth-roster-col-les,
.bth-roster-col-schedule {
  font-weight: 600;
  color: var(--tekst-kop);
  white-space: normal;
  font-size: var(--fs-mini);
  line-height: 1.35;
}

.bth-roster-col-les {
  margin-bottom: 0.1rem;
}

.bth-roster-col-date {
  font-variant-numeric: tabular-nums;
}

.bth-roster-col-time {
  font-variant-numeric: tabular-nums;
}

.bth-roster-loading {
  margin: 0.5rem;
  color: var(--color-gray-600, #4b5066);
}

.bth-roster-pdf-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  white-space: nowrap;
  text-align: center;
  background-color: transparent;
  color: var(--color-brand, #176B80);
  border: 1.5px solid color-mix(in srgb, var(--color-brand, #176B80) 45%, transparent);
  box-shadow: none;
}

.bth-roster-pdf-btn:hover {
  background-color: color-mix(in srgb, var(--color-brand, #176B80) 10%, #fff);
  color: var(--color-brand-dark, #125866);
  border-color: var(--color-brand, #176B80);
  transform: none;
}

.bth-roster-pdf-btn:focus-visible {
  outline: 2px solid var(--color-brand, #176B80);
  outline-offset: 2px;
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .bth-roster-pdf-btn {
    border-color: var(--color-accent-300, #66b3d9);
  }

  .bth-roster-pdf-btn:hover {
    background-color: var(--color-accent-50, #eef6fb);
  }
}

.bth-enroll .btn-sm {
  padding: calc(0.55rem - 3px) 0.9rem;
  font-size: var(--fs-klein);
}

@media (max-width: 759px) {
  .bth-enroll-main > .section-header {
    display: none;
  }

  .bth-enroll-summary {
    margin-bottom: 0.5rem;
    scroll-margin-top: calc(var(--header-height, 5rem) + 0.75rem);
  }

  .bth-enroll-submit-wrap {
    width: 100%;
    margin-top: 0.25rem;
  }

  .bth-enroll-submit-wrap .bth-enroll-submit,
  .bth-enroll-submit-wrap [data-bth-submit] {
    display: flex;
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  .bth-summary-roster {
    margin-top: 1rem;
  }

  .bth-roster-col-les,
  .bth-roster-col-schedule {
    font-size: var(--fs-mini);
  }
}

.bth-summary-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem;
}

.bth-summary-title {
  margin: 0 0 1.35rem;
}

.bth-summary-course {
  margin: 0 0 0.25rem;
}

/* Match theme .label (INSCHRIJVING eyebrow): blue, uppercase, spaced. */
.bth-summary-course-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold, 600);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-blue, var(--color-brand, #176B80));
  margin-bottom: 0.25rem;
}

.bth-summary-course-title {
  margin: 0;
  font-size: var(--fs-groot);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink, #1e293b);
}

.bth-summary-course-code {
  margin: 0.35rem 0 0;
  font-size: var(--fs-klein);
  line-height: 1.4;
  color: var(--color-gray-500, #94a3b8);
}

.bth-summary-list li {
  margin: 0.35rem 0;
}

/* Emphasize chosen VC Startmoment / Studiemoment in the sidebar. */
.bth-summary-list [data-bth-sum-start],
.bth-summary-list [data-bth-sum-studie] {
  color: var(--brand-blue, var(--color-brand, #176B80));
  font-weight: 600;
}

.bth-summary-price {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.bth-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-klein);
}

.bth-summary-total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-gray-200, #e2e5ef);
  font-size: var(--fs-basis);
}

.bth-enroll-error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: #FFF4E8;
  color: #7a3b0a;
  border: 1px solid #f0c49a;
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 0 0 3px rgba(234, 120, 40, 0.18);
  scroll-margin-top: calc(var(--header-height, 5rem) + 1rem);
  line-height: 1.45;
}

/* Mark only the control itself — never the .form-field / check / group cell. */
.bth-enroll input.bth-field-invalid:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.bth-enroll select.bth-field-invalid,
.bth-enroll textarea.bth-field-invalid {
  background-color: #FFF4E8 !important;
  border-color: #ea7828 !important;
  box-shadow: 0 0 0 3px rgba(234, 120, 40, 0.25);
}

.bth-enroll input[type="checkbox"].bth-field-invalid,
.bth-enroll input[type="radio"].bth-field-invalid {
  box-shadow: 0 0 0 3px rgba(234, 120, 40, 0.35);
  outline: 2px solid #ea7828;
  outline-offset: 2px;
}

.bth-enroll-notice.err {
  padding: 1rem;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
}

/* —— Thank-you / confirmation ——
   Eén kop (de paginakop vervalt op de bevestiging), daaronder drie gelijke blokken (inschrijving, overzicht,
   betaling) over de breedte van de container, even hoog, zelfde rand, ronding, binnenruimte en kop.
   De betaalstand kleurt alleen de kop. Geen lijnen tussen regels (huisstijl). */
.bth-enroll-thankyou {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}

/* Achtergrondfoto (vakneutraal, thema assets/img/bevestiging/): rechtsboven zichtbaar, naar linksonder
   transparant, zodat kop en blokken leesbaar blijven. */
.bth-bevestiging-sectie {
  position: relative;
  overflow: hidden;
}

.bth-bevestiging-foto {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(62%, 1000px);
  height: 680px;
  pointer-events: none;
  opacity: .55;
  /* Diagonaal naar linksonder, plus boven- en onderrand zacht: nergens een harde lijn (huisstijl). */
  -webkit-mask-image: linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 75%), linear-gradient(180deg, transparent 0, #000 18%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 75%), linear-gradient(180deg, transparent 0, #000 18%, #000 60%, transparent 100%);
  mask-composite: intersect;
}

.bth-bevestiging-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  /* Gespiegeld: het gezicht valt dan tussen titel en logo in plaats van achter het logo. */
  transform: scaleX(-1);
}

/* Zonder paginakop begint de pagina met dit blok: minder lucht boven dan een gewone sectie
   (huisstijl.css zet main > section.section op 80px met !important). */
main.z-pagina > section.section:has(.bth-enroll-thankyou) {
  padding-top: 3rem !important;
}

.bth-thankyou__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titel logo" "lede lede";
  align-items: end;
  gap: 0.75rem 2rem;
}

/* .b-pagina h1 in het thema (b.css) geeft 12px marge onder; weg, zodat logo en titel onderaan gelijk staan. */
.bth-enroll-thankyou h1.bth-thankyou__title {
  grid-area: titel;
  margin: 0;
}

.bth-thankyou__lede {
  grid-area: lede;
}

/* Logo van de vakgebiedsite rechtsboven, groot: hier is ingeschreven (Wilmar, 30 oktober 2026).
   De viewBox wordt in de pagina tot de inhoud bijgesneden, zodat het logo strak rechts uitlijnt. */
.bth-thankyou__logo {
  grid-area: logo;
  justify-self: end;
  align-self: end;
  display: block;
  width: auto;
  height: 77px;
  max-width: 100%;
}

/* Zelfde maat als de paginakop elders (zakelijk.css, .b-pagina .z-kop h1). */
.bth-thankyou__title {
  margin: 0;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.bth-thankyou__lede {
  margin: 0;
  max-width: none;
  color: var(--color-gray-600, #4b5066);
  font-size: 1.125rem;
  line-height: 1.6;
}

.bth-thankyou__panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.bth-thankyou__blok {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid var(--color-gray-200, #e2e5ef);
  border-radius: var(--radius-lg, 0.75rem);
  background: #fff;
}

.bth-thankyou__blok-kop {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.25rem;
}

/* .b-pagina h2 in het thema (zakelijk.css) maakt koppen sectiegroot; hier een blokkop. */
.bth-enroll-thankyou .bth-thankyou__blok-label {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary-900, #0b1f3a);
}

.bth-thankyou__greeting {
  margin: 0 0 0.5rem;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--color-primary-900, #0b1f3a);
  line-height: 1.6;
}

.bth-thankyou__body,
.bth-thankyou__pay-text {
  margin: 0;
  color: var(--color-gray-600, #4b5066);
  font-size: var(--text-base, 1rem);
  line-height: 1.6;
}

.bth-thankyou__details {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

.bth-thankyou__row {
  display: grid;
  gap: 0.1rem;
}

.bth-thankyou__row dt {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-gray-500, #6b7085);
  line-height: 1.5;
}

.bth-thankyou__row dd {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--color-primary-900, #0b1f3a);
  line-height: 1.5;
}

.bth-thankyou__pay--success .bth-thankyou__pay-label {
  color: #1a7f4b;
}

.bth-thankyou__pay--warn .bth-thankyou__pay-label {
  color: #b45309;
}

.bth-thankyou__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bth-thankyou__actions .btn {
  width: auto;
}

@media (max-width: 960px) {
  .bth-thankyou__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  .bth-bevestiging-foto {
    width: 100%;
    height: 420px;
    opacity: .4;
  }

  /* Gezicht links van het logo houden. */
  .bth-bevestiging-foto img {
    object-position: 45% 30%;
  }

  .bth-thankyou__header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "titel" "lede";
  }

  .bth-thankyou__logo {
    height: 56px;
    margin-bottom: 0.25rem;
  }

  .bth-thankyou__blok {
    padding: 1.25rem;
  }

  .bth-thankyou__blok-kop {
    margin-bottom: 1rem;
  }

  .bth-thankyou__actions {
    flex-direction: column;
  }

  .bth-thankyou__actions .btn {
    width: 100%;
  }
}

.bth-enroll .btn-secondary {
  margin-left: 0;
}

/* In-field VIES check control on BTW number. */
.bth-btw-field {
  position: relative;
  display: block;
}

.bth-enroll .bth-btw-field__input {
  width: 100%;
  padding-right: 6.75rem;
}

.bth-btw-field__btn {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0.2rem 0.55rem;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: calc(var(--radius-lg, 0.75rem) - 0.2rem);
  background: transparent;
  color: var(--color-brand, #176B80);
  font: inherit;
  font-size: var(--fs-klein);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

.bth-btw-field__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-brand, #176B80) 10%, #fff);
  color: var(--color-brand-dark, #125866);
}

.bth-btw-field__btn:focus-visible {
  outline: 2px solid var(--color-brand, #176B80);
  outline-offset: 1px;
}

.bth-btw-field__btn:disabled,
.bth-btw-field__btn.is-loading {
  opacity: 0.65;
  cursor: wait;
  color: var(--color-gray-600, #4b5066);
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .bth-btw-field__btn:hover:not(:disabled) {
    background: var(--color-accent-50, #eef6fb);
  }
}

/* Tablet en kleine laptop: formulier links, overzicht rechts in een smallere kolom. */
@media (min-width: 760px) and (max-width: 1099px) {
  .bth-enroll-layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 1.5rem;
  }
}

/* Lesvorm: twee keuzes naast elkaar, 50/50 (30 september 2026); op smalle schermen onder elkaar. */
@media (min-width: 560px) {
  .bth-choices--naast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bth-choices--naast .bth-choice + .bth-choice { border-top: 0; border-left: 1px solid var(--color-gray-200, #e2e5ef); }
  .bth-enroll .bth-choices--naast .bth-choice.bth-radio { padding: 0.9rem 1rem; }
}

/* Foutmelding zonder doodlopend eind en met afgeronde hoeken zoals de rest van de site (zelfscan A8 en A16, 12 oktober 2026). */
.bth-enroll-notice { border-radius: 12px; }
.bth-enroll-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }