/* Styling-lock: alle declaraties !important zodat thema's (Elementor e.d.) de widget
   niet kunnen verbouwen (uitzondering: custom-property-declaraties zoals --otr-a
   hoeven geen !important); alle selectors geprefixt met .otr-booking zodat ze van de
   button/input-resets (specificiteit 0,1,1) winnen. White-label via custom properties:
   --otr-accent (knoppen/accenten), --otr-text (koppen/labels, fallback inherit),
   --otr-btn-text (knoptekst, fallback #fff). Font erft bewust van de site.
   Kaart-recept "echt clean": wit, border-radius 14px, schaduw 0 1px 4px rgba(0,0,0,.06),
   ruime padding. Twee kolommen met sticky samenvattingskaart NIET via een viewport-
   media-query maar via de JS-classes otr-wide (container ≥ ~720px) + otr-has-layout
   (bon-kaart-layout gerenderd) — zo stapelen de admin-preview en smalle
   thema-containers vanzelf; de succes-weergave is de enige overgebleven
   weergave zonder bon-kaart-layout en blijft op 680px. */

.otr-booking { max-width: 680px !important; margin: 0 auto !important;
  font-family: var(--otr-font, inherit) !important;
  font-size: var(--otr-font-size, 16px) !important; color: inherit !important; line-height: 1.55 !important;
  --otr-a: var(--otr-accent, #7a8a2f);
  --otr-r: var(--otr-radius, 14px);
  --otr-r-s: var(--otr-radius-small, 10px);
  --otr-br: var(--otr-btn-radius, 999px);
  --otr-line: var(--otr-border, rgba(0,0,0,.09)); }
.otr-booking * { box-sizing: border-box !important; }

/* Defensieve resets tegen thema-CSS (buttons/inputs). */
.otr-booking button, .otr-booking input, .otr-booking textarea, .otr-booking select {
  text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
  margin: 0 !important; line-height: 1.4 !important; text-decoration: none !important;
  width: auto !important; min-height: 0 !important; }
.otr-booking input, .otr-booking textarea { width: 100% !important; color: #1e1e1e !important; }
.otr-booking p, .otr-booking small { text-transform: none !important; letter-spacing: normal !important;
  color: inherit !important; }
.otr-booking h3, .otr-booking h4, .otr-booking label { text-transform: none !important;
  letter-spacing: normal !important; color: var(--otr-text, inherit) !important; }

/* Kop */
.otr-booking .otr-head { text-align: center !important; margin-bottom: 24px !important; }
.otr-booking .otr-head-img { width: 100% !important; max-height: 260px !important; object-fit: cover !important;
  border-radius: var(--otr-r) !important; margin-bottom: 14px !important; }
.otr-booking .otr-head-title { margin: 0 0 6px !important; font-size: 1.5em !important; }
.otr-booking .otr-head-sub { margin: 0 auto !important; max-width: 560px !important; opacity: .75 !important;
  font-size: .95em !important; }

/* Meldingen */
.otr-booking .otr-error { background: #fdecea !important; color: #8a1f1f !important; padding: 12px 16px !important;
  border-radius: var(--otr-r) !important; margin-bottom: 16px !important; }
.otr-booking .otr-success { text-align: center !important; padding: 40px 16px !important; }
.otr-booking .otr-success-total { font-weight: 700 !important; margin: 8px 0 0 !important; }

/* Bon na het reserveren: hetzelfde overzicht als in de bevestigingsmail. */
.otr-booking .otr-receipt { max-width: 560px !important; margin: 0 auto !important; padding: 26px 24px 30px !important; }
.otr-booking .otr-receipt-head { display: flex !important; align-items: flex-start !important; gap: 14px !important;
  margin-bottom: 18px !important; text-align: left !important; }
.otr-booking .otr-receipt-check { width: 34px !important; height: 34px !important; flex: none !important;
  border-radius: var(--otr-br) !important; background: var(--otr-a) !important; color: var(--otr-btn-text, #fff) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; line-height: 1 !important; }
.otr-booking .otr-receipt-head h3 { margin: 0 0 2px !important; font-size: 18px !important; }
.otr-booking .otr-receipt-sub { margin: 0 !important; color: #5c5c5c !important; font-size: 14px !important; }
.otr-booking .otr-receipt-nr { font-size: 13px !important; color: #6b6b6b !important; margin-bottom: 10px !important; }
.otr-booking .otr-receipt-rows { border: 1px solid #e6e6e2 !important; border-radius: var(--otr-r) !important; overflow: hidden !important; }
.otr-booking .otr-receipt-row { display: flex !important; justify-content: space-between !important; gap: 16px !important;
  padding: 10px 14px !important; font-size: 14px !important; border-bottom: 1px solid #f0f0ec !important; }
.otr-booking .otr-receipt-row:last-child { border-bottom: 0 !important; }
.otr-booking .otr-receipt-label { color: #6b6b6b !important; }
.otr-booking .otr-receipt-value { font-weight: 600 !important; text-align: right !important; }
.otr-booking .otr-receipt-breakdown { margin-top: 16px !important; }
.otr-booking .otr-receipt-total { display: flex !important; justify-content: space-between !important;
  margin-top: 14px !important; padding-top: 14px !important; border-top: 2px solid #e6e6e2 !important;
  font-weight: 700 !important; font-size: 16px !important; }
.otr-booking .otr-receipt-next { margin-top: 18px !important; padding: 12px 14px !important;
  background: #f7f7f4 !important; border-radius: var(--otr-r) !important; }
.otr-booking .otr-receipt-next p { margin: 0 !important; font-size: 13.5px !important; color: #5c5c5c !important; }
.otr-booking .otr-return { padding: 14px 18px !important; border-radius: var(--otr-r) !important; margin-bottom: 16px !important;
  background: #fff6e5 !important; border: 1px solid #e3c98f !important; color: #1e1e1e !important; }
.otr-booking .otr-return-ok { background: var(--otr-accent-soft, #e8f6ec) !important;
  border-color: var(--otr-accent, #9fd3ae) !important; color: var(--otr-text, #1e1e1e) !important; }

/* Layout: gestapeld; brede container mét bon-kaart-layout → twee kolommen met
   sticky samenvattingskaart (classes gezet door de widget-JS op containermaat). */
.otr-booking .otr-layout { display: flex !important; flex-direction: column !important; gap: 24px !important; }
.otr-booking .otr-main { display: flex !important; flex-direction: column !important; gap: 24px !important;
  min-width: 0 !important; }
.otr-booking .otr-aside { min-width: 0 !important; }
.otr-booking.otr-wide.otr-has-layout { max-width: 1040px !important; }
.otr-booking.otr-wide.otr-has-layout .otr-layout { display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important; gap: 28px !important; align-items: start !important; }
.otr-booking.otr-wide.otr-has-layout .otr-aside { position: sticky !important; top: 24px !important; }

/* Het "blok": één witte shell om alles heen — consistent op elke pagina-achtergrond. */
.otr-booking .otr-shell { background: var(--otr-surface, #fff) !important; border: 1px solid var(--otr-line) !important;
  border-radius: calc(var(--otr-r) * 1.3) !important; padding: 28px !important; color: var(--otr-text, #1e1e1e) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.07) !important; }
.otr-booking:not(.otr-wide) .otr-shell { padding: 18px !important; }

/* Binnen-blokken: rustige witte kaarten met dunne rand (fillo-stijl). */
.otr-booking .otr-cards-card, .otr-booking .otr-calendar, .otr-booking .otr-slots-card,
.otr-booking .otr-form, .otr-booking .otr-summary {
  background: var(--otr-surface, #fff) !important; border: 1px solid var(--otr-line) !important;
  border-radius: var(--otr-r) !important; box-shadow: none !important; }
.otr-booking .otr-cards-card, .otr-booking .otr-calendar, .otr-booking .otr-slots-card,
.otr-booking .otr-form { padding: 22px !important; }
/* De bon "zweeft" als enige. */
.otr-booking .otr-summary { box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.08) !important; }
.otr-booking .otr-cal-hint { margin: 4px 0 0 !important; opacity: .65 !important; }
/* Donkere thema's: de kaarten zijn wit, dus de inkt erin expliciet donker — nooit
   de (lichte) thematekstkleur erven. Een expliciete --otr-text van de eigenaar
   blijft winnen via de var(--otr-text, #1e1e1e)-fallbacks hieronder. */
.otr-booking .otr-calendar, .otr-booking .otr-slots-card, .otr-booking .otr-form,
.otr-booking .otr-summary, .otr-booking .otr-card, .otr-booking .otr-cards-card { color: #1e1e1e !important; }
.otr-booking .otr-calendar h3, .otr-booking .otr-calendar h4, .otr-booking .otr-calendar label,
.otr-booking .otr-slots-card h3, .otr-booking .otr-slots-card h4, .otr-booking .otr-slots-card label,
.otr-booking .otr-form h3, .otr-booking .otr-form h4, .otr-booking .otr-form label,
.otr-booking .otr-summary h3, .otr-booking .otr-summary h4, .otr-booking .otr-summary label {
  color: var(--otr-text, #1e1e1e) !important; }

/* Kalender */
.otr-booking .otr-cal-head { display: flex !important; justify-content: space-between !important;
  align-items: center !important; margin-bottom: 14px !important; }
.otr-booking .otr-cal-head strong { font-size: 1.15em !important; text-transform: capitalize !important;
  font-weight: 700 !important; }
.otr-booking .otr-cal-nav button { width: 36px !important; height: 36px !important; margin-left: 8px !important;
  border: 1px solid rgba(0,0,0,.15) !important; background: #fff !important; color: #1e1e1e !important;
  border-radius: var(--otr-br) !important; cursor: pointer !important; font-size: 16px !important; line-height: 1 !important;
  padding: 0 !important; transition: all .15s !important; }
.otr-booking .otr-cal-nav button:hover { border-color: var(--otr-a) !important; color: var(--otr-a) !important; }
.otr-booking .otr-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important; }
.otr-booking .otr-cal-wd { text-align: center !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; color: #9a9a9a !important; padding: 6px 0 10px !important; }
/* Elke dag van de maand blijft leesbaar — ook als je er niet op kunt boeken.
   Alleen zó zie je in één oogopslag welke datum waar staat. Niet-boekbaar is
   grijs en zonder kader; boekbaar krijgt een wit vlak met rand. */
.otr-booking .otr-cal-day { text-align: center !important; padding: 0 !important; height: 44px !important;
  border: 1px solid transparent !important; background: none !important;
  border-radius: var(--otr-r-s) !important; opacity: 1 !important; color: #a8a8a8 !important;
  font: inherit !important; }
.otr-booking .otr-cal-empty { opacity: 0 !important; }
/* Vrije, boekbare dag: helemaal in de accentkleur. */
.otr-booking .otr-cal-available { opacity: 1 !important; cursor: pointer !important; font-weight: 600 !important;
  background: var(--otr-a) !important; border-color: var(--otr-a) !important;
  color: var(--otr-btn-text, #fff) !important; transition: all .15s !important; }
.otr-booking .otr-cal-available:hover { box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important; }
/* Bezetting in één oogopslag: vrije dag wit met accentrand bij hover, een dag
   waarop al iets geboekt is in een lichte tint van dezelfde accentkleur, en een
   volgeboekte dag grijs en niet aanklikbaar. color-mix houdt de tint automatisch
   in de huisstijl; browsers zonder color-mix vallen terug op de vlakke kleuren
   die er hierboven al staan. */
/* Boekbaar, maar er is al iemand: lichtere tint van dezelfde accentkleur. */
.otr-booking .otr-cal-busy, .otr-booking .otr-cal-available.otr-cal-busy {
  background: color-mix(in srgb, var(--otr-a) 28%, #fff) !important;
  border-color: color-mix(in srgb, var(--otr-a) 40%, #fff) !important;
  color: #1e1e1e !important; }
.otr-booking .otr-cal-busy:hover { background: color-mix(in srgb, var(--otr-a) 40%, #fff) !important; }

/* Volgeboekt: grijs en doorgestreept. */
.otr-booking .otr-cal-full, .otr-booking .otr-cal-available.otr-cal-full {
  background: #ededed !important; border-color: #e0e0e0 !important;
  color: #9a9a9a !important; opacity: 1 !important; text-decoration: line-through !important;
  cursor: not-allowed !important; font-weight: 400 !important; }
.otr-booking .otr-cal-full:hover { transform: none !important; box-shadow: none !important;
  border-color: #e0e0e0 !important; color: #9a9a9a !important; }

/* Gekozen dag: een DONKERE variant van de accentkleur. Vrije dagen zijn al
   accentkleurig, dus alleen zo zie je in één oogopslag wat je zelf hebt
   aangeklikt - zeker bij van-tot boeken, waar aankomst en vertrek tussen
   allemaal groene dagen staan. */
.otr-booking .otr-cal-day-selected, .otr-booking .otr-cal-day-selected:hover,
.otr-booking .otr-cal-available.otr-cal-day-selected,
.otr-booking .otr-cal-busy.otr-cal-day-selected {
  background: color-mix(in srgb, var(--otr-a) 45%, #111) !important;
  border-color: color-mix(in srgb, var(--otr-a) 45%, #111) !important;
  color: #fff !important; font-weight: 700 !important; transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--otr-a) 35%, #fff) !important; }

/* Tijden-kaart + sloten */
.otr-booking .otr-slots-title, .otr-booking .otr-form-title { margin: 0 0 14px !important; font-size: 1.1em !important; }
/* Tijden in een raster in plaats van een rij: vier naast elkaar op een breed
   blok, en op een smal zoveel als er passen. Een kapper heeft er zo vijftien op
   een dag, en die passen niet in brede knoppen naast elkaar. */
.otr-booking .otr-slot-list { display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 8px !important; }
.otr-booking.otr-wide .otr-slot-list { grid-template-columns: repeat(4, 1fr) !important; }

.otr-booking .otr-slot { display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 2px !important; padding: 10px 8px !important; min-width: 0 !important;
  font-size: .95em !important; white-space: nowrap !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: var(--otr-r) !important; background: #fff !important; color: #1e1e1e !important; cursor: pointer !important;
  font: inherit !important; transition: all .15s !important; }
.otr-booking .otr-slot:hover { border-color: var(--otr-a) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  transform: translateY(-1px) !important; }
.otr-booking .otr-slot-selected, .otr-booking .otr-slot-selected:hover {
  background: var(--otr-a) !important; border-color: var(--otr-a) !important;
  color: var(--otr-btn-text, #fff) !important; font-weight: 700 !important; transform: none !important; }
.otr-booking .otr-slot small { opacity: .65 !important; font-weight: 400 !important; font-size: .82em !important; }
.otr-booking .otr-slot-selected small { opacity: .85 !important; }

/* Formulier */
.otr-booking .otr-form .otr-field { margin-bottom: 14px !important; display: flex !important;
  flex-direction: column !important; gap: 5px !important; }
.otr-booking .otr-form label { font-weight: 600 !important; font-size: .92em !important; }
.otr-booking .otr-form-row { display: flex !important; gap: 12px !important; }
.otr-booking .otr-form-row .otr-field { flex: 1 !important; }
.otr-booking .otr-form input, .otr-booking .otr-form textarea { padding: 12px 14px !important;
  border: 1px solid rgba(0,0,0,.18) !important; border-radius: var(--otr-r-s) !important; font: inherit !important;
  background: #fff !important; }
.otr-booking .otr-form input:focus, .otr-booking .otr-form textarea:focus { outline: 2px solid var(--otr-a) !important;
  outline-offset: 0 !important; border-color: transparent !important; }
.otr-booking .otr-addons { border: 0 !important; border-radius: var(--otr-r) !important;
  padding: 0 !important; background: none !important; }
.otr-booking .otr-addon { display: flex !important; align-items: center !important; gap: 8px !important;
  font-weight: 400 !important; padding: 4px 0 !important; cursor: pointer !important; }
.otr-booking .otr-addon input { width: auto !important; }

/* Extra opties als kaartjes: aanvinken, of een aantal kiezen met plus en min. */
.otr-booking .otr-addon-grid { display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 10px !important;
  /* Elk kaartje net zo hoog als zijn eigen inhoud: een simpele aanvinkoptie
     hoort niet mee te rekken met een kaartje dat plus- en min-knoppen heeft. */
  align-items: start !important; }
.otr-booking .otr-addon-card { border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r) !important;
  padding: 12px 14px !important; background: var(--otr-surface, #fff) !important; display: flex !important;
  flex-direction: column !important; gap: 9px !important; transition: border-color .12s, box-shadow .12s !important; }
.otr-booking .otr-addon-card.is-on { border-color: var(--otr-a) !important;
  box-shadow: 0 0 0 1px var(--otr-a) inset !important; }
.otr-booking .otr-addon-main { display: flex !important; align-items: flex-start !important; gap: 10px !important;
  margin: 0 !important; font-weight: 400 !important; cursor: pointer !important;
  /* Ook als dit een <label> is (aanvinkbare optie) even groot blijven als een
     kaartje met plus en min; de label-regels elders zetten anders .92em/600. */
  font-size: 1em !important; line-height: 1.4 !important; }
.otr-booking .otr-addon-main input[type="checkbox"] { width: auto !important; margin: 2px 0 0 !important;
  accent-color: var(--otr-a) !important; flex: none !important; }
.otr-booking .otr-addon-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.otr-booking .otr-addon-name { font-weight: 600 !important; line-height: 1.3 !important;
  font-size: 1em !important; letter-spacing: normal !important; }
.otr-booking .otr-addon-price { font-size: .88em !important; opacity: .7 !important;
  font-weight: 400 !important; line-height: 1.3 !important; }
.otr-booking .otr-addon-counter { display: flex !important; align-items: center !important; gap: 8px !important;
  margin-top: auto !important; }
.otr-booking .otr-addon-step { width: 34px !important; height: 34px !important; flex: none !important;
  border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r-s) !important;
  background: var(--otr-surface, #fff) !important;
  font-size: 17px !important; line-height: 1 !important; cursor: pointer !important; color: inherit !important;
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.otr-booking .otr-addon-step:hover:not(:disabled) { border-color: var(--otr-a) !important; color: var(--otr-a) !important; }
.otr-booking .otr-addon-step:disabled { opacity: .35 !important; cursor: default !important; }
.otr-booking .otr-addon-qty { width: 58px !important; height: 34px !important; text-align: center !important;
  padding: 0 4px !important; border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r-s) !important;
  font-size: 1em !important; line-height: 34px !important; -moz-appearance: textfield !important; }
.otr-booking .otr-addon-qty::-webkit-outer-spin-button,
.otr-booking .otr-addon-qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.otr-booking .otr-hp { position: absolute !important; left: -9999px !important; }
.otr-booking .otr-consent { display: block !important; margin: 14px 0 0 !important; font-size: .92em !important; }
.otr-booking .otr-consent input { width: auto !important; }
.otr-booking .otr-submit { padding: 14px 36px !important; border: none !important; border-radius: var(--otr-br) !important;
  cursor: pointer !important; font: inherit !important; font-weight: 700 !important;
  background: var(--otr-a) !important; color: var(--otr-btn-text, #fff) !important; transition: opacity .15s !important; }
.otr-booking .otr-submit:hover { opacity: .92 !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; }
.otr-booking .otr-submit:disabled { opacity: .55 !important; }
.otr-booking .otr-submit-hidden { display: none !important; }

/* Samenvattingskaart (foto, keuzes, Prijsopbouw, totaal, CTA) */
.otr-booking .otr-summary { overflow: hidden !important; padding: 0 0 20px !important; }
.otr-booking .otr-summary-img { width: 100% !important; height: 150px !important; object-fit: cover !important;
  display: block !important; }
.otr-booking .otr-summary-title { font-weight: 700 !important; font-size: 1.1em !important;
  padding: 16px 20px 0 !important; color: var(--otr-text, #1e1e1e) !important; }
.otr-booking .otr-summary-choices { padding: 10px 20px 0 !important; }
.otr-booking .otr-summary-line { display: flex !important; justify-content: space-between !important;
  gap: 12px !important; padding: 7px 0 !important; font-size: .95em !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.otr-booking .otr-summary-line-label { opacity: .6 !important; }
.otr-booking .otr-summary-line-value { text-align: right !important; font-weight: 600 !important; }
.otr-booking .otr-summary-line-value-empty { font-weight: 400 !important; font-style: italic !important;
  opacity: .45 !important; }
.otr-booking .otr-summary-sub { font-weight: 700 !important; font-size: .85em !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; opacity: .65 !important;
  margin-bottom: 4px !important; color: var(--otr-text, #1e1e1e) !important; }
.otr-booking .otr-summary-breakdown { padding: 14px 20px 0 !important; }
.otr-booking .otr-breakdown-line { display: flex !important; justify-content: space-between !important;
  gap: 12px !important; padding: 4px 0 !important; font-size: .95em !important; }
.otr-booking .otr-breakdown-line + .otr-breakdown-line { border-top: 1px dashed rgba(0,0,0,.08) !important; }
.otr-booking .otr-breakdown-amount { font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.otr-booking .otr-summary-total { display: flex !important; justify-content: space-between !important;
  align-items: baseline !important; gap: 12px !important; margin: 14px 20px 0 !important;
  padding-top: 12px !important; border-top: 1px solid rgba(0,0,0,.1) !important; font-weight: 700 !important; }
.otr-booking .otr-total-value { font-size: 1.25em !important; font-weight: 700 !important; }
.otr-booking .otr-summary-msg { margin: 12px 20px 0 !important; padding: 10px 14px !important;
  border-radius: var(--otr-r-s) !important; background: #fdecea !important; color: #8a1f1f !important;
  font-size: .92em !important; }
/* Lege aria-live-regio: blijft in de DOM (hoorbaar bij de volgende melding),
   maar neemt geen ruimte in. */
.otr-booking .otr-summary-msg-empty { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.otr-booking .otr-summary-cta { display: block !important; width: calc(100% - 40px) !important;
  margin: 16px 20px 0 !important; }

/* Extra-opties-blok (flow met addons-stap) */
.otr-booking .otr-flow-addons { margin-top: 4px !important; }
/* Losse addons-stap: veld-styling die anders alleen binnen .otr-form geldt. */
.otr-booking .otr-flow-addons .otr-field { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.otr-booking .otr-flow-addons > .otr-field > label { font-weight: 600 !important; font-size: .92em !important; }
.otr-booking .otr-flow-addons .otr-addon { font-weight: 400 !important; }

/* Productkeuze-kaarten — gelijke hoogtes per rij (grid-stretch), foto bovenin
   (bovenhoeken volgen de kaart-radius via overflow:hidden), omschrijving geclamped
   op 3 regels: line-clamp voor de ellipsis + max-height (3 × line-height 1.4 =
   4.2em) en overflow-wrap als niet-WebKit-fallback — nooit buiten de kaart. */
.otr-booking .otr-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important; align-items: stretch !important; }
.otr-booking .otr-card { display: flex !important; flex-direction: column !important; gap: 8px !important;
  width: 100% !important; padding: 0 0 14px !important; text-align: left !important; cursor: pointer !important;
  border: 1px solid rgba(0,0,0,.1) !important; border-radius: var(--otr-r) !important; background: #fff !important;
  font: inherit !important; overflow: hidden !important; transition: all .15s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; }
.otr-booking .otr-card:hover { border-color: var(--otr-a) !important; box-shadow: 0 2px 8px rgba(0,0,0,.1) !important; }
.otr-booking .otr-card-selected { border: 2px solid var(--otr-a) !important; }
.otr-booking .otr-card-img { width: 100% !important; height: 140px !important; object-fit: cover !important;
  display: block !important; }
/* Titel/omschrijving: expliciete white-space + line-height zodat thema-CSS
   (nowrap, ruime regelhoogte) de afkap nooit halverwege een regel laat knippen. */
/* Meerdaags boeken: de nachten tussen aankomst en vertrek krijgen exact dezelfde
   kleur als de aankomst- en vertrekdag zelf, zonder tussenruimte. De hele
   periode leest daardoor als één gevuld blok. */
.otr-booking .otr-cal-day-range,
.otr-booking .otr-cal-available.otr-cal-day-range,
.otr-booking .otr-cal-busy.otr-cal-day-range,
.otr-booking .otr-cal-full.otr-cal-day-range {
  background: color-mix(in srgb, var(--otr-a) 45%, #111) !important;
  border-color: color-mix(in srgb, var(--otr-a) 45%, #111) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transform: none !important;
  cursor: default !important;
  text-decoration: none !important; }
/* De tussenliggende nachten dragen de gloed niet: die hoort bij de uiteinden,
   anders krijgt elke dag een eigen randje en valt de band uit elkaar. */
.otr-booking .otr-cal-day-range { box-shadow: none !important; }
.otr-booking .otr-cal-day-range:hover { transform: none !important; box-shadow: none !important; }
.otr-booking .otr-stay-hint { margin-top: 12px !important; font-size: 13px !important; line-height: 1.5 !important; }
.otr-booking .otr-stay-hint p { margin: 0 0 6px !important; }
.otr-booking .otr-stay-err { color: #b32d2e !important; font-weight: 600 !important; }
.otr-booking .otr-stay-reset { border: 0 !important; background: none !important; padding: 0 !important;
  color: var(--otr-accent, #7a8a2f) !important; text-decoration: underline !important; cursor: pointer !important;
  font: inherit !important; font-size: 13px !important; }

/* Wachtlijst bij een volgeboekt tijdslot. */
.otr-booking .otr-waitlist { border: 1px dashed var(--otr-line, #d9d9d9) !important; border-radius: var(--otr-r) !important;
  padding: 14px !important; margin-top: 14px !important; background: #fafafa !important; }
.otr-booking .otr-waitlist strong { display: block !important; margin-bottom: 4px !important; }
.otr-booking .otr-waitlist p { margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.45 !important; }
.otr-booking .otr-waitlist-label { display: block !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.otr-booking .otr-waitlist-input, .otr-booking .otr-waitlist-time { width: 100% !important; padding: 10px 12px !important;
  margin-bottom: 8px !important; border: 1px solid var(--otr-line, #d9d9d9) !important; border-radius: var(--otr-r-s) !important;
  font-size: 14px !important; font-family: inherit !important; background: #fff !important; color: inherit !important; }
.otr-booking .otr-waitlist-btn { width: 100% !important; padding: 11px 14px !important; border: 0 !important;
  border-radius: var(--otr-br) !important; background: var(--otr-accent, #7a8a2f) !important; color: var(--otr-btn-text, #fff) !important;
  font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; }
.otr-booking .otr-waitlist-consent { display: flex !important; align-items: flex-start !important; gap: 8px !important;
  font-size: 12px !important; line-height: 1.45 !important; margin: 4px 0 10px !important; }
.otr-booking .otr-waitlist-err { color: #b32d2e !important; margin: 8px 0 0 !important; font-size: 13px !important; }
.otr-booking .otr-waitlist-ok { margin: 0 !important; font-weight: 600 !important; }

/* Voorwaarden-kader in het formulier (borg, aanbetaling, annuleren). */
.otr-booking .otr-terms { border: 1px solid var(--otr-line, #e6e6e6) !important; background: #fafafa !important;
  border-radius: var(--otr-r) !important; padding: 12px 14px !important; margin: 4px 0 14px !important; font-size: 13px !important; }
.otr-booking .otr-terms strong { display: block !important; margin-bottom: 4px !important; font-size: 13px !important; }
.otr-booking .otr-terms ul { margin: 0 !important; padding-left: 18px !important; list-style: disc !important; }
.otr-booking .otr-terms li { margin: 2px 0 !important; line-height: 1.45 !important; }
.otr-booking .otr-field select { width: 100% !important; padding: 11px 12px !important; font-size: 15px !important;
  border: 1px solid var(--otr-line, #d9d9d9) !important; border-radius: var(--otr-r-s) !important; background: #fff !important;
  color: inherit !important; font-family: inherit !important; }

/* Keuze-stappen: één blok bovenaan, genummerd. Gegevens + bon staan er los
   onder/naast en blijven altijd zichtbaar. */
.otr-booking .otr-steps { border: 1px solid var(--otr-line, #e6e6e6) !important; border-radius: var(--otr-r) !important;
  padding: 0 !important; margin: 0 0 18px !important; background: #fff !important; overflow: hidden !important; }
.otr-booking .otr-steps-nav { display: flex !important; flex-wrap: wrap !important; gap: 0 !important;
  border-bottom: 1px solid var(--otr-line, #e6e6e6) !important; background: #fafafa !important; }
.otr-booking .otr-step-chip { flex: 1 1 0 !important; min-width: 120px !important; display: flex !important;
  align-items: center !important; gap: 10px !important; padding: 12px 14px !important; background: none !important;
  border: 0 !important; border-right: 1px solid var(--otr-line, #e6e6e6) !important; cursor: pointer !important;
  text-align: left !important; font: inherit !important; color: #6b6b6b !important; }
.otr-booking .otr-step-chip:last-child { border-right: 0 !important; }
.otr-booking .otr-step-nr { flex: 0 0 auto !important; width: 24px !important; height: 24px !important;
  border-radius: var(--otr-br) !important; background: #e8e8e8 !important; color: #555 !important; display: flex !important;
  align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 600 !important; }
.otr-booking .otr-step-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.otr-booking .otr-step-label { font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.otr-booking .otr-step-value { font-size: 12px !important; line-height: 1.3 !important; color: #8a8a8a !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.otr-booking .otr-step-active { background: #fff !important; color: #1a1a1a !important; }
.otr-booking .otr-step-active .otr-step-nr { background: var(--otr-accent, #7a8a2f) !important; color: #fff !important; }
.otr-booking .otr-step-done .otr-step-nr { background: var(--otr-accent-soft, #d9e4c2) !important;
  color: var(--otr-text, #1e1e1e) !important; }
.otr-booking .otr-step-done.otr-step-active .otr-step-nr { background: var(--otr-accent, #7a8a2f) !important; color: #fff !important; }
.otr-booking .otr-step-body { padding: 18px !important; }
.otr-booking .otr-step-body > .otr-calendar,
.otr-booking .otr-step-body > .otr-slots-card,
.otr-booking .otr-step-body > .otr-cards-card { border: 0 !important; padding: 0 !important; margin: 0 !important;
  box-shadow: none !important; background: none !important; }

.otr-booking .otr-card-title {padding: 0 14px !important; font-size: 1em !important;
  color: var(--otr-text, #1e1e1e) !important; overflow-wrap: anywhere !important;
  white-space: normal !important; line-height: 1.35 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; max-height: 2.7em !important; }
.otr-booking .otr-card-from { padding: 0 14px !important; font-size: .9em !important; font-weight: 600 !important;
  color: var(--otr-a) !important; white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; }
.otr-booking .otr-card-sub { padding: 0 14px !important; font-size: .85em !important; opacity: .7 !important;
  white-space: normal !important; line-height: 1.45 !important; letter-spacing: normal !important;
  display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; max-height: 4.4em !important; overflow-wrap: anywhere !important; }

/* Praktische informatie bij een verhuur: inchecken, huisdieren, wifi. */
.otr-booking .otr-infoblock { border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r) !important;
  padding: 18px 20px !important; background: var(--otr-surface, #fff) !important; margin-top: 4px !important; }
.otr-booking .otr-infoblock-title { margin: 0 0 12px !important; font-size: 1.05em !important; font-weight: 700 !important; }
.otr-booking .otr-infoblock-text { margin: 0 !important; white-space: pre-line !important; font-size: .95em !important; opacity: .85 !important; }
/* Twee naast elkaar: kop vet, daaronder het antwoord. */
.otr-booking .otr-infoblock-grid { display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: 14px 26px !important; }
.otr-booking .otr-infoblock-item { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.otr-booking .otr-infoblock-label { font-weight: 700 !important; font-size: .93em !important; }
.otr-booking .otr-infoblock-value { font-size: .93em !important; opacity: .8 !important; }

/* Prijs per nacht onder de datum, zoals bij hotels. */
.otr-booking .otr-cal-has-price { display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 1px !important;
  line-height: 1.15 !important; padding: 4px 2px !important; }
.otr-booking .otr-cal-num { display: block !important; }
.otr-booking .otr-cal-price { display: block !important; font-size: .62em !important; opacity: .85 !important;
  font-variant-numeric: tabular-nums !important; }

/* Aantal kiezen met plus en min in plaats van typen. */
.otr-booking .otr-stepper { display: flex !important; align-items: center !important; gap: 8px !important; }
.otr-booking .otr-stepper input { text-align: center !important; max-width: 90px !important; height: 44px !important; }
.otr-booking .otr-step-btn { width: 44px !important; height: 44px !important; flex: none !important;
  border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r-s) !important;
  background: var(--otr-surface, #fff) !important; color: inherit !important; cursor: pointer !important;
  font-size: 19px !important; line-height: 1 !important; display: flex !important;
  align-items: center !important; justify-content: center !important; padding: 0 !important; }
.otr-booking .otr-step-btn:hover { border-color: var(--otr-a) !important; color: var(--otr-a) !important; }

/* Keuzemenu's in het formulier: ruimte voor de pijl, en dezelfde vorm als de
   andere velden. */
.otr-booking select { padding: 12px 34px 12px 14px !important; border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: var(--otr-r-s) !important; background-color: #fff !important; font: inherit !important;
  width: 100% !important; }

/* Kopjes boven groepen kaarten in het keuzescherm: "Kinderen t/m 10 jaar",
   "Heren", "Dames". Rustig gehouden, want de kaarten eronder doen het werk. */
.otr-booking .otr-cards-kop { margin: 20px 0 10px !important; font-size: 1em !important;
  font-weight: 700 !important; color: var(--otr-text, inherit) !important; line-height: 1.3 !important; }
.otr-booking .otr-cards-wrap > .otr-cards-kop:first-child { margin-top: 0 !important; }

/* Kaart zonder foto (kappersbehandelingen, dagdelen): titel en prijs midden in
   het vlak. De gewone kaart heeft opvulling die op een foto is afgestemd; zonder
   foto plakt de tekst dan tegen de bovenrand. */
.otr-booking .otr-card-zonderfoto { align-items: center !important; justify-content: center !important;
  text-align: center !important; padding: 18px 12px !important; min-height: 84px !important; gap: 4px !important; }
.otr-booking .otr-card-zonderfoto .otr-card-title,
.otr-booking .otr-card-zonderfoto .otr-card-from,
.otr-booking .otr-card-zonderfoto .otr-card-sub { padding: 0 !important; text-align: center !important; }

/* Bij-wie-kaarten: rond fotootje links, naam ernaast op ooghoogte van het
   bolletje. Verder dezelfde kaart als bij de productkeuze, dus dezelfde hoeken
   en kleuren uit de Opmaak-pagina. */
.otr-booking .otr-card-staff { flex-direction: row !important; align-items: center !important;
  gap: 12px !important; text-align: left !important; padding: 12px 14px !important; }
.otr-booking .otr-card-avatar { width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  border-radius: 999px !important; object-fit: cover !important; display: block !important; }
/* Geen foto? Dan een leeg bolletje, zodat de namen op één lijn blijven staan. */
.otr-booking .otr-card-avatar-leeg { width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  border-radius: 999px !important; background: var(--otr-accent-soft, #eff1e6) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 700 !important; color: var(--otr-a) !important; font-size: 15px !important; }
/* Heeft niemand in de rij een foto, dan verdwijnen de bolletjes en staat de naam
   midden in de kaart. Bij een kapper is dat de normale situatie. */
.otr-booking .otr-cards-staff-zonderfoto .otr-card-staff { justify-content: center !important;
  text-align: center !important; padding: 16px 14px !important; }
.otr-booking .otr-cards-staff-zonderfoto .otr-card-staff-tekst { align-items: center !important;
  text-align: center !important; }

/* Wel foto's in de groep, maar niet op elke kaart: een egaal vlak op de plek van
   de foto, zodat de kaarten even hoog blijven. */
.otr-booking .otr-card-img-leeg { display: block !important; width: 100% !important;
  height: 140px !important; background: var(--otr-accent-soft, #eff1e6) !important; }

.otr-booking .otr-card-staff .otr-card-title { margin: 0 !important; }
.otr-booking .otr-card-staff .otr-card-sub { margin: 2px 0 0 !important; }
.otr-booking .otr-card-staff-tekst { display: flex !important; flex-direction: column !important;
  min-width: 0 !important; }

/* Niets mag uit beeld vallen. Een lange behandelnaam breekt af in plaats van de
   kaart op te rekken of de tekst af te kappen. */
.otr-booking .otr-card-title, .otr-booking .otr-card-sub, .otr-booking .otr-card-from,
.otr-booking .otr-cards-kop { overflow-wrap: anywhere !important; word-break: normal !important;
  hyphens: auto !important; }
.otr-booking .otr-card { min-width: 0 !important; }

/* Op een smal blok gaan de kapperskaarten onder elkaar staan als volle regels.
   Het fotootje blijft links en de naam ernaast: dat is waar de bezoeker op
   kiest, en dat kan een keuzelijst niet laten zien. De CSS beslist op de
   breedte van het BLOK, niet van het venster, dus in een smalle themakolom of
   in de admin-preview gebeurt hetzelfde. */
.otr-booking:not(.otr-wide) .otr-cards-staff { grid-template-columns: 1fr !important; }

/* Bezette tijden bij een medewerker: zichtbaar, maar duidelijk niet te kiezen.
   Ze blijven staan omdat een volle dag er anders uit hoort te zien dan een dag
   zonder openingstijden. */
/* Een geboekt tijdslot is grijs ingevuld, niet half doorzichtig: doorzichtig
   leest als "laadt nog" of "kapot", grijs leest als bezet. */
.otr-booking .otr-slot-bezet { cursor: not-allowed !important;
  background: #e4e4e0 !important; border-color: #d5d5d0 !important;
  color: #8a8a85 !important; text-decoration: line-through !important; }
.otr-booking .otr-slot-bezet:hover { transform: none !important; box-shadow: none !important; }
.otr-booking .otr-slot-bezet small { text-decoration: none !important; }

/* Eerstvolgende plek bij een volle dag: een regel, geen knop die om aandacht
   schreeuwt - hij hoort bij de tekst eronder. */
.otr-booking .otr-next-free { display: block !important; margin: 4px 0 14px !important;
  border: 0 !important; background: none !important; padding: 0 !important;
  color: var(--otr-a) !important; text-decoration: underline !important;
  cursor: pointer !important; font: inherit !important; font-size: .95em !important;
  text-align: left !important; }

/* Het vinkje om gegevens te onthouden staat vlak boven het akkoord-vinkje en
   krijgt daarom wat lucht ertussen. */
.otr-booking .otr-onthoud { margin-bottom: 6px !important; }

/* Nu betalen of in de zaak: twee knoppen naast elkaar in de bon-kaart, de
   gekozen in de accentkleur. Bewust knoppen en geen rondjes: op een telefoon
   zijn die te klein om te raken. */
/* Zelfde inspringing als de regels erboven en de knop eronder (20px), anders
   valt dit blok uit de kaart. */
.otr-booking .otr-pay-kop { margin: 16px 20px 8px !important; font-size: .95em !important;
  font-weight: 700 !important; }
.otr-booking .otr-pay-keuze { display: flex !important; gap: 10px !important;
  margin: 0 20px 14px !important; }
.otr-booking .otr-pay-knop { flex: 1 1 0 !important; min-width: 0 !important;
  padding: 11px 14px !important; cursor: pointer !important;
  border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r-s) !important;
  background: #fff !important; color: #1e1e1e !important; font: inherit !important;
  font-size: .92em !important; white-space: nowrap !important; }
.otr-booking .otr-pay-knop-actief { background: var(--otr-a) !important; border-color: var(--otr-a) !important;
  color: var(--otr-btn-text, #fff) !important; font-weight: 600 !important; }

/* Een veld dat er niet toe doet, zoals het aantal personen als er maar één
   persoon in past: bij een kapper boek je voor jezelf, dus dan hoort er geen
   teller te staan. Deze selector is bewust net zo specifiek als die van het
   veld zelf, anders wint het verbergen niet. */
.otr-booking .otr-form .otr-field.otr-verborgen,
.otr-booking .otr-verborgen { display: none !important; }

/* Een product in de winkel: naam, dan de keuze tussen fles en doos, dan het
   aantal. De varianten zijn knoppen en geen keuzelijst - twee of drie opties
   naast elkaar leest sneller dan een menu dat je moet openen. */
.otr-booking .otr-product-card { display: flex !important; flex-direction: column !important;
  gap: 10px !important; align-items: stretch !important; }
.otr-booking .otr-product-foto-leeg { border: 1px dashed var(--otr-line) !important; }
.otr-booking .otr-product-foto { display: block !important; width: 100% !important;
  height: 150px !important; object-fit: contain !important; margin-bottom: 2px !important;
  background: #fafaf8 !important; border-radius: var(--otr-r-s) !important; }
.otr-booking .otr-product-varianten { display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; }
.otr-booking .otr-product-variant { flex: 1 1 auto !important; padding: 8px 10px !important;
  border: 1px solid var(--otr-line) !important; border-radius: var(--otr-r-s) !important;
  background: #fff !important; color: #1e1e1e !important; font: inherit !important;
  font-size: .88em !important; cursor: pointer !important; white-space: nowrap !important; }
.otr-booking .otr-product-variant.is-on { background: var(--otr-accent-soft, #eff1e6) !important;
  border-color: var(--otr-a) !important; font-weight: 600 !important; }

/* Aantal en Toevoegen naast elkaar. De knop pakt de resterende ruimte, zodat
   hij op een telefoon breed genoeg blijft om te raken. */
.otr-booking .otr-product-toevoegen { display: flex !important; align-items: center !important;
  gap: 8px !important; flex-wrap: wrap !important; }
.otr-booking .otr-product-add { flex: 1 1 auto !important; min-height: 34px !important;
  padding: 8px 14px !important; border: 0 !important; border-radius: var(--otr-r-s) !important;
  background: var(--otr-a) !important; color: #fff !important; font: inherit !important;
  font-size: .9em !important; font-weight: 600 !important; cursor: pointer !important; }
.otr-booking .otr-product-add:hover:not(:disabled) { filter: brightness(.94) !important; }
.otr-booking .otr-product-add:disabled { opacity: .4 !important; cursor: default !important; }
.otr-booking .otr-product-al { font-size: .82em !important; color: var(--otr-a) !important; }

/* Het mandje: wat er tot nu toe in de bestelling zit. Staat in de bon rechts,
   direct boven de prijsopbouw, zodat bijstellen en het totaal bij elkaar staan.
   Geen eigen kader dus - de bon is het kader. */
.otr-booking .otr-mandje { margin: 2px 0 4px !important; }
.otr-booking .otr-mandje-kop { display: block !important; margin-bottom: 8px !important;
  font-size: .92em !important; }
.otr-booking .otr-mandje-regel { display: flex !important; align-items: center !important;
  gap: 10px !important; padding: 6px 0 !important; flex-wrap: wrap !important; }
.otr-booking .otr-mandje-regel + .otr-mandje-regel { border-top: 1px solid var(--otr-line) !important; }
.otr-booking .otr-mandje-naam { flex: 1 1 140px !important; font-size: .9em !important; }
.otr-booking .otr-mandje-aantal { min-width: 28px !important; text-align: center !important;
  font-variant-numeric: tabular-nums !important; }
.otr-booking .otr-mandje-bedrag { min-width: 72px !important; text-align: right !important;
  font-size: .9em !important; font-variant-numeric: tabular-nums !important; }
.otr-booking .otr-mandje-weg { width: 28px !important; height: 28px !important; flex: none !important;
  border: 0 !important; background: none !important; color: #8a8a8a !important;
  font-size: 1.15em !important; line-height: 1 !important; cursor: pointer !important; }
.otr-booking .otr-mandje-weg:hover { color: #b3261e !important; }

/* Het mandje in de bon: de kolom is smal, dus de naam krijgt een eigen regel en
   daaronder staan plus/min, het bedrag en het kruisje op één lijn. De kop krijgt
   dezelfde stijl als "Prijsopbouw" eronder, zodat het één kaart blijft. */
.otr-booking .otr-summary .otr-mandje-kop { font-weight: 700 !important; font-size: .85em !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; opacity: .65 !important; }
.otr-booking .otr-summary .otr-mandje-naam { flex: 1 1 100% !important; font-size: .95em !important; }
.otr-booking .otr-summary .otr-mandje-bedrag { margin-left: auto !important; }

/* De bon rechts moet meescrollen. Hij staat al op position: sticky, maar veel
   thema's (hier Elementor/Hello) zetten overflow-x: hidden op html en body om
   horizontaal scrollen tegen te gaan. Daarmee wordt de body zélf de
   scroll-container en werkt sticky nergens meer op de pagina. clip doet
   hetzelfde - geen horizontale scrollbar - zonder die bijwerking. De :has()
   zorgt dat we alleen pagina's raken waar de brede widget echt op staat; kent
   een browser :has() niet, dan valt de regel weg en verandert er niets. */
html:has(.otr-booking.otr-wide),
body:not(.wp-admin):has(.otr-booking.otr-wide) { overflow-x: clip !important; }