/* ==========================================================================
   The Body Clinic – huisstijl voor de ekis online agenda
   --------------------------------------------------------------------------
   Eén extra stylesheet, géén wijziging aan HTML, templates of TypeScript.
   Laad dit bestand als LAATSTE <link> in de <head> van src/index.html:

     <link rel="stylesheet" href="assets/css/bodyclinic-theme.css">

   Het bestand overschrijft alleen vormgeving (kleur, letter, afronding,
   ruimte). Elke bestaande regel in de app blijft werken: alle klassen,
   id's, inputs en knoppen blijven onaangeraakt.

   Waarom de lange selectors en de enkele !important?
   Angular voegt de component-stijlen tijdens het laden toe ná alle <link>s,
   met attribuut-selectors ([_ngcontent-…]). Om die te overwinnen moeten
   onze regels een hogere specificiteit hebben; !important staat alleen
   waar de app zelf ook !important gebruikt.

   Kleuren en letter volgen www.bodyclinic.nl en shop.bodyclinic.nl.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --bc-text: #39332e;
  --bc-muted: #625b55;
  --bc-faint: #9a938d;
  --bc-accent: #317689;
  --bc-accent-dark: #255664;
  --bc-accent-soft: #eaf2f4;
  --bc-cream: #f7f2f0;
  --bc-cream-dark: #ebe4df;
  --bc-border: #e4e9eb;
  --bc-radius: 16px;
  --bc-radius-sm: 12px;
  --bc-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* De variabelen die ekis zelf per kliniek zet, voor regels die we niet apart raken. */
  --color-primary: var(--bc-accent) !important;
  --bg-primary: var(--bc-accent) !important;
  --thme-color2: var(--bc-accent) !important;
  --blueshade1: var(--bc-accent) !important;
  --blueshade2: var(--bc-accent) !important;
  --greyshade3: var(--bc-muted) !important;
  --color-text: #fff;
}

/* --- Basis --------------------------------------------------------------- */
html { font-size: 16px; }
body {
  font-family: var(--bc-font);
  color: var(--bc-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body .pageblock-wrap,
body .pageblock-wrap h1, body .pageblock-wrap h2, body .pageblock-wrap h3,
body .pageblock-wrap h4, body .pageblock-wrap h5, body .pageblock-wrap h6,
body .pageblock-wrap label, body .pageblock-wrap button, body .pageblock-wrap input,
body .pageblock-wrap select, body .pageblock-wrap textarea {
  font-family: var(--bc-font);
}
body .pageblock-wrap a { color: var(--bc-accent); }
body .pageblock-wrap a:hover { color: var(--bc-accent-dark); }
body .pageblock-wrap .page-wrapper { margin-top: 0; }
body .pageblock-wrap .ct-container-488 { max-width: 520px; padding: 0 16px; }
body .pageblock-wrap .ct-container-488 .ct-margin { margin: 0; }

/* --- Kop: woordmerk links, taal en sluitknop rechts ---------------------- */
body .pageblock-wrap .header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 12px;
  background: #fff;
}
body .pageblock-wrap .logo-section { padding: 16px 4px 12px; }
body .pageblock-wrap .logo { max-width: none; }
body .pageblock-wrap .logo-section .navbar-brand { padding: 0; margin: 0; display: block; }
body .pageblock-wrap .logo img { max-height: 56px; width: auto; }
body .pageblock-wrap .header-section .row.mr-20 { margin: 0; }
body .pageblock-wrap .flags ul { margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
body .pageblock-wrap .flags ul li { margin: 0; display: flex; align-items: center; }
body .pageblock-wrap .flags ul li .fi {
  font-size: 16px;
  margin: 0;
  border-radius: 3px;
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s;
}
body .pageblock-wrap .flags ul li.active .fi,
body .pageblock-wrap .flags ul li:hover .fi { opacity: 1; }

/* Sluitknop: ronde donkere knop zoals op bodyclinic.nl */
body .pageblock-wrap .flags .close-link,
body .pageblock-wrap .header-section .logo + .logo .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 0 10px;
  border-radius: 50%;
  background: var(--bc-accent);
  transition: background .15s;
}
body .pageblock-wrap .flags .close-link:hover,
body .pageblock-wrap .header-section .logo + .logo .navbar-brand:hover { background: var(--bc-accent-dark); }
body .pageblock-wrap .flags .close-link svg,
body .pageblock-wrap .header-section .logo + .logo .navbar-brand svg { width: 13px; height: 13px; fill: #fff; }

/* --- Het crèmekleurige paneel met de titel ------------------------------- */
body .pageblock-wrap .block-wrap { border: 0; margin-top: 0; color: var(--bc-text); }
body .pageblock-wrap .block-wrap.header-color {
  background: var(--bc-cream) !important;
  color: var(--bc-text);
  border-radius: 20px 20px 0 0;
  padding: 22px 16px 4px;
}
body .pageblock-wrap .block-wrap.header-color .authentication-wrapper { padding: 0; }
body .pageblock-wrap .block-wrap.header-color .authentication-sec { margin: 0; padding: 0; }
body .pageblock-wrap .block-wrap.header-color .row { margin: 0; }
body .pageblock-wrap .block-wrap.header-color .col-12 { padding: 0; }
body .pageblock-wrap .header-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px !important;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: left;
}
body .pageblock-wrap .header-panel label { flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; cursor: default; }
body .pageblock-wrap .header-panel .back-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  float: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .18);
  cursor: pointer;
}
body .pageblock-wrap .header-panel .back-header-icon:hover { box-shadow: inset 0 0 0 1px var(--bc-text); }
body .pageblock-wrap .header-panel .back-icon { display: block; width: 11px !important; height: 11px !important; margin: 0 1px 0 0; fill: var(--bc-text); }

/* Kop en inhoud vormen samen één paneel: de schaduw van de inhoud mag niet als streep over de kop vallen.
   Alleen op bredere schermen (op een telefoon zijn er geen schaduwen). Alleen de bovenkant wordt afgesneden; onder
   blijft 2000px ruimte, zodat uitklaplijsten (landcode e.d.) nooit worden afgeknipt. */
body .pageblock-wrap .ct-margin > .block-wrap:not(.header-color) { margin-top: -1px !important; }
@media (min-width: 481px) {
  body .pageblock-wrap .ct-margin > .block-wrap:not(.header-color) { clip-path: inset(0 -40px -2000px -40px); }
}
/* (1px overlap: anders schemert op een halve pixel een witte lijn tussen kop en inhoud door) */
/* Het vervolg van het paneel: de lijst, de keuzes en het formulier */
body .pageblock-wrap .ct-margin > .block-wrap:not(.header-color) {
  background: var(--bc-cream);
  border-radius: 0 0 20px 20px;
  padding: 0 16px 20px;
  margin: 0 0 24px;
}
body .pageblock-wrap .wrapper-form-body { padding: 0 16px 20px; }
body .pageblock-wrap .wrapper-form-body .slider-container { margin-bottom: 0; }
body .pageblock-wrap .wrapper-form-body .wrapper-inner { margin: 0; padding: 0; }
body .pageblock-wrap .wrapper-form-body .location-block { padding: 0; }
body .pageblock-wrap .wrapper-form-body .p-10.pt-0 { padding: 0; }

/* Eén titel per scherm: op het startscherm "Afspraak maken", daarna de
   categorie met een terugknop. (Browsers zonder :has() tonen beide.) */
body .pageblock-wrap .ct-margin:has(.back-btn[style*="opacity: 1"]) .block-wrap.header-color .header-panel { display: none; }
body .pageblock-wrap .ct-margin:has(.back-btn[style*="opacity: 1"]) .block-wrap.header-color { padding-bottom: 0; }
body .pageblock-wrap .wrapper-form-body .multilevel-category-header:has(.back-btn[style*="opacity: 0"]) { display: none; }

/* Terugknop + categorietitel */
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .header { background: transparent; padding: 0; margin: 0 0 14px; }
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .header-inner { display: flex; align-items: center; gap: 12px; position: static; }
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .18);
  color: var(--bc-text);
  font-size: 0;
  line-height: 0;
  opacity: 1;
  transition: box-shadow .15s;
}
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .back-btn:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--bc-text); }
/* Het woord "Back" wordt het chevron zelf: een symmetrisch pijltje, exact in het midden van de cirkel */
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .back-btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.5 2.5L4 6l3.5 3.5'/></svg>") no-repeat center / 12px 12px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.5 2.5L4 6l3.5 3.5'/></svg>") no-repeat center / 12px 12px;
}
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .back-btn[style*="opacity: 0"] { display: none; }
body .pageblock-wrap .wrapper-form-body .multilevel-category-header .title {
  position: static;
  transform: none;
  left: auto;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--bc-text);
}

/* --- Lijst met categorieën (witte kaart met scheidingslijnen) ------------ */
#sectionblock-wrap .multilevel-category-container {
  background: #fff;
  border-radius: var(--bc-radius);
  overflow: hidden;
}
#sectionblock-wrap .category-accordion,
#sectionblock-wrap .multilevel-category-container .category-accordion.sub-category-btn {
  width: 100%;
  margin: 0;
  padding: 17px 18px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--bc-border);
  color: var(--bc-text);
  font-size: 16px;
  font-weight: 500 !important;
  line-height: 1.3;
  text-align: left;
  transition: background .15s;
}
#sectionblock-wrap .category-accordion:last-child { border-bottom: 0; }
#sectionblock-wrap .category-accordion:hover,
#sectionblock-wrap .multilevel-category-container .category-accordion.sub-category-btn:hover { background: #fbf8f6; box-shadow: none; }
#sectionblock-wrap .category-accordion.sub-category-btn::after { color: var(--bc-faint); font-size: 13px; margin-top: 2px; }

/* --- Lijst met behandelingen (rondjes, titel, toelichting) --------------- */
#sectionblock-wrap .multilevel-category-container > .p-10 { padding: 0 !important; }
#sectionblock-wrap .servicelist-label {
  margin: 0;
  padding: 16px 18px !important;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--bc-border);
  border-radius: 0 !important;
  cursor: pointer;
  transition: background .15s;
}
#sectionblock-wrap .servicelist-label:hover { background: #fbf8f6; }
#sectionblock-wrap .multilevel-category-container > .p-10 > div:last-child .servicelist-label { border-bottom: 0; }
body .pageblock-wrap .servicelist-label .row.ml-0 > .col-12 { padding: 0; }
body .pageblock-wrap .category-details { padding: 0; align-items: center; }

/* Rondjes en vinkjes */
body .pageblock-wrap .check-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0 14px 0 0;
  border: 1.5px solid #c9d2d6;
  border-radius: 50%;
  background: #fff;
  transition: background .15s, border-color .15s;
}
body .pageblock-wrap .check-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / 12px 12px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / 12px 12px;
}
body .pageblock-wrap .service-check:checked + .check-icon,
body .pageblock-wrap .service-checkselect .check-icon {
  background: var(--bc-accent) !important;
  border-color: var(--bc-accent);
}
body .pageblock-wrap .service-check:checked + .check-icon::after,
body .pageblock-wrap .service-checkselect .check-icon::after { opacity: 1; }
body .pageblock-wrap .service-checkselect .check-icon::before { display: none !important; }
body .pageblock-wrap .checkbox-custom:hover .check-icon,
body .pageblock-wrap .servicelist-label:hover .check-icon { background: var(--bc-accent-soft) !important; border-color: var(--bc-accent); }
body .pageblock-wrap .checkbox-custom:hover .service-check:checked + .check-icon,
body .pageblock-wrap .servicelist-label:hover .service-check:checked + .check-icon,
body .pageblock-wrap .servicelist-label:hover .service-checkselect .check-icon { background: var(--bc-accent) !important; }
body .pageblock-wrap .addOn-container .addon-radio { width: 22px; height: 22px; }

/* Titel en toelichting in een rij */
body .pageblock-wrap .service-detail h5,
body .pageblock-wrap .title-services h5 {
  margin: 0 0 2px;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bc-text);
}
body .pageblock-wrap .title-services > a { padding: 0 !important; display: inline; }
body .pageblock-wrap .title-services > a.badge-block { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
body .pageblock-wrap .service-price {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--bc-muted);
}
body .pageblock-wrap .badge-wrap {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bc-accent-soft);
  color: var(--bc-accent);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

/* --- Gemaakte keuze: witte kaart met vinkje en "Verander" ----------------- */
body .pageblock-wrap .wrapper-form-body .col-label,
body .pageblock-wrap .wrapper-form-body .selectservice-box > .col-label {
  display: block;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--bc-text);
  text-transform: none;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box.form-group { margin: 0 0 18px; }
body .pageblock-wrap .wrapper-form-body .selectservice-box .servicelist-label {
  margin: 0 !important;
  padding: 16px 18px 14px;
  min-height: 0;
  border: 0;
  border-radius: var(--bc-radius) !important;
  background: #fff;
  cursor: default;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .servicelist-label .justify-content-between { align-items: center; }
/* "Verander": een kleine ronde knop rechts in de kaart (zoals de ghost-knop van de webshop) */
body .pageblock-wrap .wrapper-form-body .theme2-text {
  flex: none;
  align-self: center;
  margin: 0 0 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .22);
  background: #fff;
  color: var(--bc-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .15s, background .15s;
}
body .pageblock-wrap .wrapper-form-body .theme2-text:hover { box-shadow: inset 0 0 0 1px var(--bc-text); color: var(--bc-text); text-decoration: none; }

/* De consultvraag onder een gekozen behandeling */
body .pageblock-wrap .addOn-container { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bc-border); }
body .pageblock-wrap .addOn-container > .col-12 { padding: 0; }
body .pageblock-wrap .addOn-container .checkbox-custom.opacity-0 { display: none; }
body .pageblock-wrap .addOn-container .addon-check { padding: 6px 0 0; cursor: pointer; }
body .pageblock-wrap .addOn-container .addon-check h5 { font-size: 14px !important; font-weight: 400; }

/* --- Locatielijst: één witte kaart met rijen ----------------------------- */
body .pageblock-wrap .wrapper-form-body .selectservice-box > div > .servicelist-label {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--bc-border);
  cursor: pointer;
  transition: background .15s;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box > div > .servicelist-label:hover { background: #fbf8f6; }
body .pageblock-wrap .wrapper-form-body .selectservice-box > div:first-of-type > .servicelist-label { border-radius: var(--bc-radius) var(--bc-radius) 0 0 !important; }
body .pageblock-wrap .wrapper-form-body .selectservice-box > div:last-of-type > .servicelist-label { border-radius: 0 0 var(--bc-radius) var(--bc-radius) !important; border-bottom: 0; }
body .pageblock-wrap .wrapper-form-body .selectservice-box > div:only-of-type > .servicelist-label { border-radius: var(--bc-radius) !important; }

/* --- Specialisten -------------------------------------------------------- */
body .pageblock-wrap .wrapper-form-body .specialist-wrap { margin-bottom: 18px; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .row { margin: 0; background: #fff; border-radius: var(--bc-radius); overflow: hidden; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail {
  margin: 0 !important;
  padding: 12px 18px;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--bc-border);
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail:last-child { border-bottom: 0; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail:hover { background: #fbf8f6; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail:has(input:checked) { background: var(--bc-accent-soft); }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .doctor-image {
  width: 44px;
  height: 44px;
  flex: none;
  margin-right: 12px;
  border: 0;
  box-shadow: none;
}
/* "Geen voorkeur": het rondje in het midden van de fotokolom, de tekst op dezelfde lijn als de namen */
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail > .d-flex { min-height: 44px; align-items: center; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail .check-icon { margin: 0 23px 0 11px; }
body .pageblock-wrap .wrapper-form-body .specialist-wrap .selection-detail .btn-block { display: flex; align-items: center; }

/* --- Datum en tijd ------------------------------------------------------- */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap { padding: 0; margin-bottom: 6px; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector::-webkit-scrollbar { display: none; height: 0; }
/* De pijlknoppen staan rechts op de regel van de kop "Selecteer datum en tijd"; de dagvakjes lopen daaronder over
   de volle breedte, gelijk met de tijden en de knop. (Op een telefoon verbergt ekis de pijlen en veegt de strook.) */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn:first-child { order: 1; margin-left: auto; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn:last-child { order: 2; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .dates { order: 3; flex: 0 0 100%; width: 100%; }
@media (min-width: 769px) {
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector { margin-top: -54px; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .dates { margin-top: 28px; }
  /* Vangnet: staan er ooit meer dan zeven dagen (bijv. na draaien van een tablet), dan blijven ze binnen de kaart */
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .dates { overflow-x: auto; scrollbar-width: none; }
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .18);
  transition: box-shadow .15s;
}
/* Wit met donker pijltje en dun kader, zoals de terugknop (alleen op desktop; op een telefoon veeg je) */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn:hover { transform: none; background: #fff; box-shadow: inset 0 0 0 1px var(--bc-text); }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn svg { width: 12px; height: 12px; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn svg path { fill: var(--bc-text) !important; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .dates { gap: 6px; align-items: stretch; }
/* Elk dagvakje even hoog en even breed; de inhoud exact gecentreerd */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card {
  position: relative;
  flex: 1 1 0;
  min-width: 46px;
  height: 78px;
  aspect-ratio: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  border-radius: var(--bc-radius-sm);
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  transition: background .15s;
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card:hover { transform: none; background: var(--bc-accent-soft); }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .day-label,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .month-label {
  font-size: 10px;
  line-height: 1.2;
  color: var(--bc-muted);
  text-transform: lowercase;
  white-space: nowrap;
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .day-number { font-size: 20px; font-weight: 500; line-height: 1.15; color: var(--bc-text); }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.active { background: var(--bc-accent) !important; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.active .day-label,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.active .day-number,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.active .month-label { color: #fff !important; }
/* Vol of gesloten: grijs met fijne schuine streepjes, zoals in de oude agenda */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.bookableFull,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.disabled {
  opacity: 1;
  background-color: #ece8e4;
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(57, 51, 46, .07) 4px 5px);
  background-size: auto;
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.bookableFull:hover,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.disabled:hover { background-color: #ece8e4; }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.bookableFull .day-label,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.bookableFull .day-number,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.bookableFull .month-label,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.disabled .day-label,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.disabled .day-number,
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card.disabled .month-label { color: var(--bc-faint); }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .full-day-container {
  position: absolute;
  right: 3px;
  bottom: 3px;
  margin: 0;
  padding: 0;
}
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card svg {
  position: static;
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .7;
}
body .pageblock-wrap .wrapper-form-body .date-show-weekly { justify-content: flex-start; }
body .pageblock-wrap .wrapper-form-body .date-show-weekly h5 { margin: 0; font-size: 14px; font-weight: 500; color: var(--bc-text) !important; }
body .pageblock-wrap .wrapper-form-body .date-show-weekly h5 b { font-weight: 500; }
/* Tijden: een raster van vier gelijke vakjes per rij, allemaal even hoog */
body .pageblock-wrap .wrapper-form-body .slot-container { padding: 0; max-width: none; background: transparent !important; }
body .pageblock-wrap .wrapper-form-body .slot-container > .row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
/* Melding "geen tijden" (een col-12 in dezelfde rij) over de volle breedte, niet in één kolom */
body .pageblock-wrap .wrapper-form-body .slot-container > .row > .col-12 { grid-column: 1 / -1; }
body .pageblock-wrap .wrapper-form-body .slot-single {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
body .pageblock-wrap .wrapper-form-body .app-check { display: block; height: 100%; }
body .pageblock-wrap .wrapper-form-body .app-border {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--bc-border);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  transition: background .15s, border-color .15s;
}
/* Tijden als pillen, dezelfde ronding als de knop; de gekozen tijd groenblauw met een vinkje.
   ekis zet bij een keuze de klasse "active" op het label, daarom ook :has(.app-label.active). */
body .pageblock-wrap .wrapper-form-body .app-check:hover .app-border { background: var(--bc-accent-soft); border-color: var(--bc-accent); }
body .pageblock-wrap .wrapper-form-body .option-input.radio:checked + .app-border,
body .pageblock-wrap .wrapper-form-body .app-border:has(.app-label.active) { background: var(--bc-accent); border-color: var(--bc-accent); }
body .pageblock-wrap .wrapper-form-body .app-label.active { gap: 6px; }
body .pageblock-wrap .wrapper-form-body .app-label.active::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / contain;
}
body .pageblock-wrap .wrapper-form-body .app-label {
  position: static;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--bc-text) !important;
  cursor: pointer;
}
body .pageblock-wrap .wrapper-form-body .app-label.active { color: #fff !important; }

/* --- Datum en tijd als één witte kaart, net als behandeling, locatie en specialist ---
   De kaart is het blok met de dagenstrook, de gekozen datum en de tijden. De pijlknoppen blijven op desktop
   rechts op de regel van de kop "Selecteer datum en tijd", boven de kaart. */
body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) {
  margin: 0 0 6px;
  padding: 16px 18px;
  border-radius: var(--bc-radius);
  background: #fff;
  overflow: visible;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) > .row { margin: 0; }
body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) .datepicker-wrap { margin: 0; }
/* Dagvakjes in de kaart: crème in plaats van wit, zodat ze zich van de kaart onderscheiden */
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card { background: var(--bc-cream); }
body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card:hover { background: var(--bc-accent-soft); }
/* De gekozen datum als kopje boven de tijden, met een dunne lijn ertussen */
body .pageblock-wrap .wrapper-form-body .date-show-weekly {
  margin: 16px 0 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--bc-border);
}
body .pageblock-wrap .wrapper-form-body .date-show-weekly h5 { font-size: 15px; }

/* --- Knoppen ------------------------------------------------------------- */
body .pageblock-wrap .btn-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 8px 0 0 !important;
  padding: 12px 48px !important;
  border: 0;
  border-radius: 32px;
  background: var(--bc-accent) !important;
  color: #fff !important;
  font-family: var(--bc-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .15s;
}
body .pageblock-wrap .btn-primary:hover,
body .pageblock-wrap .btn-primary:focus { background: var(--bc-accent-dark) !important; }
body .pageblock-wrap .btn-primary:disabled { opacity: .55; }
body .pageblock-wrap .book-reservationbtn svg {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: #fff;
}
body .pageblock-wrap #booking-details .row { margin: 0; }
body .pageblock-wrap #booking-details .col-md-12 { padding: 0; }

/* --- Formulier "Uw gegevens" --------------------------------------------- */
body .pageblock-wrap .col-label {
  display: block;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--bc-text);
  text-transform: none;
}
body .pageblock-wrap .authentication-wrapper { padding: 0; }
body .pageblock-wrap .authentication-sec { margin: 0; }
body .pageblock-wrap .authentication-sec > .row { margin-left: -6px; margin-right: -6px; }
body .pageblock-wrap .authentication-sec > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
body .pageblock-wrap .form-blockgroup { margin: 0 0 14px; }
body .pageblock-wrap .form-blockgroup .col-label { margin: 10px 0 2px; }
/* De inleiding "Bestaande of nieuwe cliënt?" (een label met een .col-label erin; het zwevende "Aanhef"-label niet) */
body .pageblock-wrap .form-blockgroup > label[for="gender"]:has(> .col-label) { display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--bc-muted); }
body .pageblock-wrap .form-blockgroup > label[for="gender"] > .col-label { margin: 0 0 4px; }
body .pageblock-wrap label.mb-0.d-flex.bg-white {
  min-height: 56px;
  margin: 0 0 12px !important;
  padding: 10px 14px;
  border-radius: var(--bc-radius-sm);
  background: #fff;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s;
}
body .pageblock-wrap label.mb-0.d-flex.bg-white:hover { background: var(--bc-accent-soft); }
body .pageblock-wrap label.mb-0.d-flex.bg-white > div { display: flex; }
body .pageblock-wrap label.mb-0.d-flex.bg-white .padding-right-10 { padding-right: 0; }
body .pageblock-wrap .form-blockgroup input,
body .pageblock-wrap .form-blockgroup select,
body .pageblock-wrap .form-blockgroup select.gender-label {
  width: 100%;
  height: 52px !important;
  padding: 12px 14px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-family: var(--bc-font);
  font-size: 15px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
body .pageblock-wrap .form-blockgroup input.has-value,
body .pageblock-wrap .form-blockgroup select.has-value { border-color: var(--bc-border); box-shadow: none; }
body .pageblock-wrap .form-blockgroup input:focus,
body .pageblock-wrap .form-blockgroup select:focus {
  border-color: var(--bc-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(49, 118, 137, .14);
}
/* Keuzelijsten: eigen pijltje met ruimte eromheen in plaats van het pijltje van de browser tegen de rand */
body .pageblock-wrap .form-blockgroup select,
body .pageblock-wrap .form-blockgroup select.gender-label {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2339332e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
/* Labels binnen het veld: rustend in het midden zoals een placeholder, en bij focus of een waarde klein en grijs
   bovenin het veld, met de waarde eronder. Geen wit vlakje meer over de rand van het veld. */
body .pageblock-wrap .form-blockgroup input:has(+ label),
body .pageblock-wrap .form-blockgroup select:has(+ label),
body .pageblock-wrap .form-blockgroup select[class]:has(+ label) { padding-top: 20px; padding-bottom: 4px; }
body .pageblock-wrap .form-blockgroup input + label,
body .pageblock-wrap .form-blockgroup select + label {
  top: 15px;
  left: 15.5px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--bc-muted);
  font-size: 15px;
  line-height: 21px;
  pointer-events: none;
  transition: top .15s, font-size .15s, line-height .15s, color .15s;
}
body .pageblock-wrap .form-blockgroup input:focus + label,
body .pageblock-wrap .form-blockgroup input.has-value + label,
body .pageblock-wrap .form-blockgroup select:focus + label,
body .pageblock-wrap .form-blockgroup select.has-value + label,
body .pageblock-wrap .form-blockgroup select + label {
  top: 6px;
  font-size: 11px;
  line-height: 14px;
  color: var(--bc-muted);
}
body .pageblock-wrap .form-blockgroup input:focus + label,
body .pageblock-wrap .form-blockgroup select:focus + label { color: var(--bc-accent); }
body .pageblock-wrap .form-blockgroup textarea.form-control,
body .pageblock-wrap .form-blockgroup .body-label {
  min-height: 100px;
  padding: 12px 14px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: #fff;
  font-family: var(--bc-font);
  font-size: 15px;
  color: var(--bc-text);
  box-shadow: none;
}
body .pageblock-wrap .form-blockgroup textarea.form-control:focus { border-color: var(--bc-accent); box-shadow: 0 0 0 3px rgba(49, 118, 137, .14); }
body .pageblock-wrap .form-blockgroup .btn-group .dropdown-btn {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 12px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-family: var(--bc-font);
  font-size: 15px;
  box-shadow: none;
}
body .pageblock-wrap .form-blockgroup .btn-group .dropdown-btn:focus { border-color: var(--bc-accent); box-shadow: 0 0 0 3px rgba(49, 118, 137, .14); }
body .pageblock-wrap .form-blockgroup .dropdown-menu { border-radius: var(--bc-radius-sm); border-color: var(--bc-border); }
/* Landcode: vlag op normale grootte (ekis rekt hem op tot de volle knophoogte), netjes op één lijn met het nummer */
body .pageblock-wrap .form-blockgroup .btn-group .dropdown-btn { gap: 8px; }
body .pageblock-wrap .form-blockgroup .btn-group .dropdown-btn img,
body .pageblock-wrap .form-blockgroup .dropdown-menu .dropdown-item img {
  flex: none;
  align-self: center;
  width: 20px;
  height: 14px;
  margin: 0;
  object-fit: cover;
  border-radius: 2px;
  outline: 1px solid rgba(57, 51, 46, .12);
  outline-offset: -1px;
}
body .pageblock-wrap .form-blockgroup .btn-group .btn.dropdown-toggle.dropdown-btn span { margin: 0; font-size: 15px; line-height: 1; }
body .pageblock-wrap .form-blockgroup .btn-group .btn.dropdown-toggle.dropdown-btn::after { margin: 0 0 0 auto; }
body .pageblock-wrap .form-blockgroup .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 15px; }
body .pageblock-wrap .postcode-title-info { margin: 0 0 8px; font-size: 13px; color: var(--bc-muted); }
body .pageblock-wrap .error-msg { font-size: 12px; color: #b42318; }

/* Samenvatting van de afspraak */
body .pageblock-wrap .booking-details.address-container {
  margin: 0;
  padding: 14px 16px;
  border: 0 !important;
  border-radius: 14px;
  background: #fff !important;
}
body .pageblock-wrap .booking-details .row { margin: 0; padding: 0; background: transparent; }
body .pageblock-wrap .booking-details .row.pt-4 { padding-top: 0 !important; }
body .pageblock-wrap .booking-details .col-12 { padding: 0; }
body .pageblock-wrap .booking-details h5 { margin: 0 0 2px; font-size: 15px; font-weight: 500; line-height: 1.35; }
body .pageblock-wrap .booking-details h5 strong { font-weight: 500; text-transform: none; }
body .pageblock-wrap .booking-details p { margin: 0; font-size: 13px; color: var(--bc-muted); }

/* Toestemmingsvinkjes */
body .pageblock-wrap .checkbox-wrap { padding: 2px 0 0; }
body .pageblock-wrap .checkbox-wrap label { cursor: pointer; }
body .pageblock-wrap .checkbox-wrap .checkmark-icon { margin-right: 12px; }
body .pageblock-wrap .checkbox-wrap .checkmark-icon::before {
  padding: 10px;
  border: 1.5px solid #c9d2d6;
  border-radius: 6px;
  background: #fff;
  transition: background .15s, border-color .15s;
}
body .pageblock-wrap .checkbox-wrap input:checked + .checkmark-icon::before { background: var(--bc-accent); border-color: var(--bc-accent); }
body .pageblock-wrap .checkbox-wrap .service-detail { font-size: 14px; line-height: 1.5; color: var(--bc-text); }
body .pageblock-wrap .checkbox-wrap input:not(:checked) ~ .service-detail .text-graydark { color: var(--bc-text); }
body .pageblock-wrap hr.authentication-border { display: none; }

/* ==========================================================================
   Route medisch afvallen: artsenblok, online-kaart, medische vragenlijst,
   tijdlijn en het gegevensformulier na de vragenlijst.
   Zelfde huisstijl als de rest: Poppins, crème vlak, witte kaarten,
   pilvormige knoppen. Alleen vormgeving; geen stap of veld verandert.
   ========================================================================== */

/* --- Artsenblok boven de locaties --------------------------------------- */
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro {
  margin: 4px 0 6px;
  padding: 24px 20px 20px;
  border-radius: var(--bc-radius);
  background: #fff;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .doctor-image-center { border-color: #fff; }
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .doctor-intro-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--bc-text);
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .doctor-intro-description {
  max-width: 300px;
  margin: 0 auto 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bc-muted);
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .doctor-benefits { max-width: 320px; }
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .doctor-benefit {
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bc-text);
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .doctor-intro .benefit-check { font-size: 14px; line-height: 1.45; color: var(--bc-accent); }

/* --- Online-consult als eerste rij van de locatielijst, met label "aanbevolen" --- */
body .pageblock-wrap .wrapper-form-body .selectservice-box .servicelist-label.online-consultation-card {
  border: 0 !important;
  border-bottom: 1px solid var(--bc-border) !important;
  background: var(--bc-accent-soft) !important;
  overflow: visible !important;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .online-consultation-card .online-recommended-badge {
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%);
  height: 24px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: var(--bc-accent) !important;
  color: #fff !important;
  font-family: var(--bc-font);
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}
body .pageblock-wrap .wrapper-form-body .selectservice-box .online-consultation-card .service-detail { padding-right: 96px; }

/* --- Vragenlijst: basis ----------------------------------------------------- */
body .pageblock-wrap .block-wrap .medical-question-wrapper,
body .pageblock-wrap .block-wrap .medical-question-wrapper * { font-family: var(--bc-font); }
body .pageblock-wrap .block-wrap .medical-question-wrapper { min-height: 0; background: transparent; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-progress { width: 100%; margin: 4px 0 0; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .progress-line { height: 6px; background: var(--bc-cream-dark); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .progress-fill { height: 6px; background: var(--bc-accent); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content { padding: 20px 0 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content h2 {
  margin: 0 0 8px !important;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--bc-text);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content > p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bc-muted);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content .medical-centered-message h2 { text-align: center !important; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-centered-message p { font-size: 15px; color: var(--bc-muted); }

/* "Goed nieuws" en andere schermen met een gecentreerde boodschap: geen extra ruimte bovenaan (ekis duwt het blok
   met een automatische marge naar beneden), maar gelijke ruimte boven het icoon en onder de tekst. */
body .pageblock-wrap .block-wrap .medical-question-wrapper .root-questions-wrapper { margin: 0; padding: 17px 0 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .root-questions-wrapper .medical-question-content { padding: 0; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-success-icon { margin: 0 auto 20px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content .medical-centered-message h2 {
  margin: 0 0 8px !important;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--bc-text);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content .medical-centered-message p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bc-muted); }

/* "Goed om te weten": witte kaart */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-info {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: var(--bc-radius);
  background: #fff;
  color: var(--bc-text);
  font-size: 15px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-info strong { font-weight: 500; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-info div > span:first-child { color: var(--bc-accent); }

/* --- Keuzes: witte rijen met rondje of vinkje, zoals elders ------------- */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-options,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-options { gap: 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option {
  min-height: 56px;
  padding: 14px 18px;
  border: 1.5px solid transparent;
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-size: 15px;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option + .medical-agreement-radio-option { margin-top: 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option:hover,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option:hover,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option:hover { border-color: var(--bc-border); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option.selected,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option:has(input:checked),
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option.selected,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option:has(input:checked),
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option.selected,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option:has(input:checked) {
  border-color: var(--bc-accent);
  background: var(--bc-accent-soft);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-text,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-text,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-label { font-size: 15px; color: var(--bc-text); }

/* Rondjes en vakjes: dezelfde als bij behandeling en locatie (gevuld met wit vinkje) */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 1.5px solid #c9d2d6;
  background: #fff;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-box { border-radius: 6px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option.selected .medical-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option:has(input:checked) .medical-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option.selected .medical-agreement-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option:has(input:checked) .medical-agreement-radio-circle,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option.selected .medical-checkbox-box,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option:has(input:checked) .medical-checkbox-box {
  border-color: var(--bc-accent);
  background: var(--bc-accent);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-box::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  opacity: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / 12px 12px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / 12px 12px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option.selected .medical-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-radio-option:has(input:checked) .medical-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option.selected .medical-agreement-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-radio-option:has(input:checked) .medical-agreement-radio-circle::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option.selected .medical-checkbox-box::after,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-checkbox-option:has(input:checked) .medical-checkbox-box::after {
  background: #fff !important;
  transform: none !important;
  opacity: 1;
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
}

/* Toestemmingsvragen (huisarts, LSP) */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-question { margin: 0 0 18px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-agreement-text { margin: 0 0 10px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-declaration-item { font-size: 15px; line-height: 1.5; color: var(--bc-text); }

/* --- Velden ---------------------------------------------------------------- */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-input,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-field input,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-input,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-select {
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background-color: #fff;
  box-shadow: none;
  color: var(--bc-text);
  font-size: 15px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-input:focus,
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-field input:focus,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-input:focus,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-select:focus,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-textarea:focus {
  border-color: var(--bc-accent);
  box-shadow: 0 0 0 3px rgba(49, 118, 137, .14);
  outline: 0;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-input::placeholder,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-input::placeholder,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-textarea::placeholder { color: var(--bc-faint); }
body .pageblock-wrap .block-wrap .medical-question-wrapper select.post-details-input,
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2339332e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-textarea {
  min-height: 100px;
  padding: 12px 14px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-size: 15px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bmi-input-row { gap: 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bmi-calculate-button {
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .22);
  color: var(--bc-text);
  font-size: 15px;
  font-weight: 500;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bmi-calculate-button:hover { box-shadow: inset 0 0 0 1px var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-content .bmi-description { margin: 10px 0 0; font-size: 13px; color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper > .bmi-confirmation {
  margin: 8px 0 0;
  padding: 14px 18px;
  border-radius: var(--bc-radius-sm);
  background: var(--bc-accent-soft);
  color: var(--bc-text);
  font-size: 16px;
  font-weight: 500;
}

/* --- Knoppen onderaan: terug als rond knopje, verder als pil ------------- */
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-question-actions {
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  background: transparent;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-start-button {
  height: 52px;
  border-radius: 999px;
  background: var(--bc-accent) !important;
  font-size: 16px;
  font-weight: 500;
  transition: background .15s;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-start-button:hover { background: var(--bc-accent-dark) !important; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-start-button:disabled { background: #c3d0d4 !important; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-back-button {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(57, 51, 46, .18);
  color: var(--bc-text) !important;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .medical-back-button:hover { box-shadow: inset 0 0 0 1px var(--bc-text); }

/* --- Tijdlijn ("Bijna klaar") ---------------------------------------------- */
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-title {
  margin: 4px 0 20px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bc-text);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-timeline { padding: 18px 18px 2px; border-radius: var(--bc-radius); background: #fff; }
/* De verticale lijn van ekis staat 15px van de rand; met de extra binnenruimte schuift hij mee door het midden van de rondjes */
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-timeline::before { left: 28px; top: 28px; bottom: 71px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-timeline-title { font-size: 15px; color: var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-timeline-item.current .post-timeline-title { font-weight: 500; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-timeline-description { max-width: none; font-size: 13px; color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-timeline-item.current .post-timeline-marker { border-color: var(--bc-accent); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-timeline-status { font-size: 10px; letter-spacing: .04em; }

/* --- Gegevensformulier na de vragenlijst ------------------------------------ */
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-question { margin: 4px 0 4px; font-size: 18px; font-weight: 500; color: var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-subtext { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-client-type-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-client-type-option {
  min-height: 56px;
  padding: 10px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-size: 15px;
  font-weight: 400;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-client-type-option:has(input:checked) { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-client-radio { width: 22px; height: 22px; flex: 0 0 22px; border: 1.5px solid #c9d2d6; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-client-type-option input:checked + .post-triage-client-radio { border: 6px solid var(--bc-accent); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-field { margin: 0 0 10px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-row { gap: 10px; margin: 0; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .phone-field { gap: 10px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .phone-country-trigger {
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: #fff;
  color: var(--bc-text);
  font-size: 15px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-label { margin: 4px 0 8px; font-size: 13px; color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-triage-new-client-field { margin: 0 0 10px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-details-content > p[style] { margin: 8px 0 8px; font-size: 18px; font-weight: 500 !important; color: var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .appointment-details-card {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .appointment-details-line { font-size: 14px; line-height: 1.5; color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .appointment-details-line:first-child { font-size: 15px; font-weight: 500; color: var(--bc-text); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-consent-option { align-items: flex-start; gap: 12px; margin: 0 0 12px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-consent-checkbox {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  border: 1.5px solid #c9d2d6;
  border-radius: 6px;
  font-size: 12px;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-consent-option input:checked + .post-consent-checkbox { border-color: var(--bc-accent); background: var(--bc-accent); color: #fff; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .post-consent-text { font-size: 14px; line-height: 1.5; color: var(--bc-text); }

/* --- Afsluitscherm met video (voorstel, zie afsluitscherm-video.html) ------ */
/* De video staat in een witte kaart, altijd 16:9 en over de volle breedte van de kaart.
   Schermvullend gaat via de knop in de YouTube-speler zelf. */
body .pageblock-wrap .block-wrap .medical-question-wrapper.bc-done .root-questions-wrapper { padding-bottom: 0; }
/* Op dit afsluitscherm geen kop met terugknop: de boodschap en de video staan bovenaan het paneel */
body .pageblock-wrap .ct-margin:has(.bc-done) > .block-wrap.header-color { display: none; }
body .pageblock-wrap .ct-margin:has(.bc-done) > .block-wrap:not(.header-color) { margin-top: 0 !important; border-radius: 20px; clip-path: none; }
body .pageblock-wrap .block-wrap .medical-question-wrapper.bc-done .root-questions-wrapper { padding-top: 8px; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video { margin: 24px 0 0; }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bc-radius);
  background: #f2f8f6;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Voorplaat van de video, in de stijl van de presentatie in de video zelf: lichte mintgrijze plaat,
   in het midden een grote witte afspeelknop met titel en duur eronder. De hele plaat is één knop;
   bij een klik komt de YouTube-speler op dezelfde plek. */
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: #f2f8f6;
  color: var(--bc-text);
  text-align: center;
  cursor: pointer;
}
/* Portret uit de video met de afspeelknop rechtsonder eraan vast: één beeld, één plek om te klikken */
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster-visual {
  position: relative;
  display: block;
  flex: none;
  width: clamp(112px, 34vw, 150px);
  height: clamp(112px, 34vw, 150px);
  margin: 0 0 clamp(10px, 3vw, 16px);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster-portrait {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform .25s ease;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster-icon {
  position: absolute;
  right: -6%;
  bottom: -2%;
  display: block;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  /* Afgerond afspeelteken; het zwaartepunt van de driehoek ligt exact in het midden van de cirkel */
  background: var(--bc-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.4 7.1v9.8L17.2 12z' fill='white' stroke='white' stroke-width='2.4' stroke-linejoin='round'/></svg>") no-repeat center / 58% 58%;
  box-shadow: 0 0 0 4px #f2f8f6, 0 8px 20px rgba(49, 118, 137, .30);
  transition: transform .2s ease, background-color .2s ease;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster:hover .bc-video-poster-icon { transform: scale(1.08); background-color: var(--bc-accent-dark); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster:hover .bc-video-poster-portrait { transform: scale(1.02); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster-title {
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster-sub { margin-top: 4px; font-size: clamp(12px, 3.4vw, 14px); color: var(--bc-muted); }
body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-poster:focus-visible { outline: 3px solid var(--bc-accent); outline-offset: -3px; }

body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-caption {
  margin: 10px 4px 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bc-muted);
}
body .pageblock-wrap .block-wrap .medical-question-wrapper.bc-done a.medical-start-button { display: flex; text-decoration: none; color: #fff !important; }

/* --- Telefoon ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Op een telefoon:
     - De dagenstrook loopt tot de rand van de witte kaart (op een telefoon loopt de kaart zelf van rand tot rand), met
       dagbreedtes waarbij er vijf en een halve dag in beeld staan. Zo staat er rechts altijd een half zichtbare dag: de hint dat je kunt vegen. Veeg je tot het
       einde, dan laadt ekis zelf de volgende week (de strook is het element waar ekis op het vegen let).
     - De pijlknoppen blijven hier verborgen, zoals ekis het zelf doet: op een telefoon laadt ekis de volgende week
       bij het vegen, en pijlen en vegen door elkaar gebruiken haalt de weken door elkaar (getest op de live agenda). */
  body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) { padding: 14px 18px; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap { position: relative; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector { flex-wrap: nowrap; }
  body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) .datepicker-wrap .date-selector {
    width: calc(100% + 36px);
    max-width: none;
    margin: 0 -18px;
    padding: 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 0 18px;
    -webkit-overflow-scrolling: touch;
  }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .dates { flex: none; width: auto; margin: 0; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card {
    flex: 0 0 auto;
    width: min(calc((100vw - 62px) / 5.5), 76px);
    min-width: 0;
    scroll-snap-align: start;
  }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .arrow-btn { display: none; }
}
@media (max-width: 480px) {
  body .pageblock-wrap .ct-margin:has(.bc-done) > .block-wrap:not(.header-color) { border-radius: 0; padding-top: 8px; }
  /* Afsluitscherm: de videokaart loopt op een telefoon van rand tot rand, zodat de video zo groot mogelijk is */
  body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video { margin-left: -14px; margin-right: -14px; padding: 0; border-radius: 0; background: transparent; }
  body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-frame { border-radius: 0; }
  body .pageblock-wrap .block-wrap .medical-question-wrapper .bc-video-caption { margin: 10px 14px 0; }
  /* Op een telefoon loopt de kaart met datum en tijd van schermrand tot schermrand, zodat de dagenstrook binnen het
     wit tot de rand van het scherm doorloopt. De inhoud blijft op dezelfde lijn als de kaarten erboven. */
  body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) {
    margin: 0 -14px 6px;
    padding: 14px 32px;
    border-radius: 0;
  }
  body .pageblock-wrap .wrapper-form-body .selectservice-box .mb-10:has(.datepicker-wrap) .datepicker-wrap .date-selector {
    width: calc(100% + 64px);
    margin: 0 -32px;
    padding: 0 32px;
    scroll-padding: 0 32px;
  }
  /* Op een telefoon loopt het crème vlak tot aan de randen: geen marges, geen dubbele rand */
  body { background: var(--bc-cream); padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
  body app-root, body app-home, body app-register { display: block; padding: 0 !important; margin: 0 !important; }
  body .pageblock-wrap { padding: 0; margin: 0; }
  body .pageblock-wrap .ct-container-488 { padding: 0; min-width: 0; }
  /* "Verander" linksonder, op dezelfde lijn als de tekst, zodat de naam van de behandeling niet hoeft af te breken */
  body .pageblock-wrap .wrapper-form-body .selectservice-box .servicelist-label .justify-content-between { flex-wrap: wrap; }
  body .pageblock-wrap .wrapper-form-body .selectservice-box .servicelist-label .justify-content-between > .justify-content-between { flex: 0 0 100%; }
  body .pageblock-wrap .wrapper-form-body .theme2-text { flex: 0 0 auto; margin: 12px auto 0 36px; }
  body .pageblock-wrap .header-section,
  body .pageblock-wrap .logo-section { padding: 12px 14px 10px; }
  body .pageblock-wrap .logo img { max-height: 44px; }
  body .pageblock-wrap .block-wrap.header-color { padding: 18px 14px 4px; border-radius: 0; box-shadow: none; }
  body .pageblock-wrap .ct-margin > .block-wrap:not(.header-color) { padding: 0 14px 20px; margin: 0; border-radius: 0; box-shadow: none; }
  body .pageblock-wrap .wrapper-form-body { padding: 0 14px 20px; }
  body .pageblock-wrap .header-panel,
  body .pageblock-wrap .wrapper-form-body .multilevel-category-header .title { font-size: 22px; }
  #sectionblock-wrap .category-accordion,
  #sectionblock-wrap .multilevel-category-container .category-accordion.sub-category-btn { padding: 16px; font-size: 16px; }
  #sectionblock-wrap .servicelist-label { padding: 14px 16px !important; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card { min-width: 44px; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .day-label,
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .month-label { font-size: 9px; letter-spacing: -.01em; }
  body .pageblock-wrap .wrapper-form-body .datepicker-wrap .date-selector .date-card .day-number { font-size: 19px; }
}