/*
 * DE WIDGET VAN ONLINE AFSPRAKEN IN DE STIJL VAN DE SITE (2026-10-15).
 *
 * Het venster neemt de lettertypen en kleuren over van de pagina eromheen
 * (online-afspraken.js kopieert haar stijlblokken: --dp-primary, --dp-font-*);
 * de waarden achter de komma gelden alleen als het venster los geopend wordt.
 * Online Afspraken zet zijn eigen stijl met #oa_widget en kleuren uit het
 * adres, vaak met !important. Daarom staat hier overal #oa_widget#oa_widget
 * (het id twee keer weegt zwaarder dan hun regels) en !important.
 *
 * Het rooster van de dag: breed (vanaf 640px) een bord met de kamers naast
 * elkaar, de poster boven de tijden, zoals de affiches van een bioscoop; smal
 * een rij per kamer, de poster links en de tijden ernaast. Een vrije tijd is
 * een roze omlijnd vak, een volgeboekte tijd doorgestreept en grijs, de
 * gekozen tijd roze gevuld. De dagen staan op EEN rij; smal schuif je erdoor.
 */

:root {
  --roze: var(--dp-primary, #ff0080);
  --wit: var(--dp-text, #ffffff);
  --grijs: var(--dp-light-gray, #b0b0c0);
  --letter-kop: var(--dp-font-heading, 'Oswald', sans-serif);
  --letter-tekst: var(--dp-font-body, 'Questrial', sans-serif);
  --gewicht-kop: var(--dp-font-heading-weight, 700);
  --lijn: rgba(255, 255, 255, 0.12);
  --vlak: rgba(255, 255, 255, 0.04);
  --vlak-donker: #07061f;
}

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--wit);
  font-family: var(--letter-tekst);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

#oa_widget#oa_widget,
#oa_widget#oa_widget.theme-advanced {
  background: transparent !important;
  color: var(--wit) !important;
  font-family: var(--letter-tekst) !important;
  font-size: 15px !important;
  line-height: 1.5;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

#oa_widget#oa_widget a { color: var(--roze) !important; }

/* === Koppen: Oswald, hoofdletters, zoals de rest van de site === */
#oa_widget#oa_widget h1,
#oa_widget#oa_widget h2,
#oa_widget#oa_widget h3,
#oa_widget#oa_widget .oanl-escaperoom h2,
#oa_widget#oa_widget section.oa-frm-section > h2 {
  font-family: var(--letter-kop) !important;
  font-weight: var(--gewicht-kop) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wit) !important;
  background: none !important;
  border: 0 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* === De week: titel links, pijlen rechts === */
#oa_widget#oa_widget .oanl-select-date-container { display: block !important; width: 100% !important; }

#oa_widget#oa_widget .oanl-select-date-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#oa_widget#oa_widget .oanl-select-date-header-title {
  margin: 0 !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
}


#oa_widget#oa_widget .oanl-select-date-header-navigation {
  display: flex !important;
  gap: 6px;
  float: none !important;
  margin: 0 !important;
}

#oa_widget#oa_widget .oanl-select-date-navigation {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 2px !important;
  background: var(--vlak) !important;
  background-image: none !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  float: none !important;
}

#oa_widget#oa_widget .oanl-select-date-navigation::before,
#oa_widget#oa_widget .oanl-select-date-navigation::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--wit) !important;
  border-right: 2px solid var(--wit) !important;
  background: none !important;
  font-size: 0 !important;
}

/* Een pijl voor een dag terug en verder, twee voor een week */
#oa_widget#oa_widget .oanl-select-date-prev::before { left: 15px !important; transform: translateY(-50%) rotate(-135deg) !important; }
#oa_widget#oa_widget .oanl-select-date-next::before { left: 12px !important; transform: translateY(-50%) rotate(45deg) !important; }
#oa_widget#oa_widget .oanl-select-date-backward::before { left: 12px !important; transform: translateY(-50%) rotate(-135deg) !important; }
#oa_widget#oa_widget .oanl-select-date-backward::after { left: 18px !important; transform: translateY(-50%) rotate(-135deg) !important; }
#oa_widget#oa_widget .oanl-select-date-forward::before { left: 9px !important; transform: translateY(-50%) rotate(45deg) !important; }
#oa_widget#oa_widget .oanl-select-date-forward::after { left: 15px !important; transform: translateY(-50%) rotate(45deg) !important; }
#oa_widget#oa_widget .oanl-select-date-prev::after,
#oa_widget#oa_widget .oanl-select-date-next::after { display: none; }

#oa_widget#oa_widget .oanl-select-date-navigation:hover {
  border-color: var(--roze) !important;
  background: color-mix(in srgb, var(--roze) 15%, transparent) !important;
}

#oa_widget#oa_widget .oanl-select-date-navigation-disabled,
#oa_widget#oa_widget .oanl-select-date-navigation-disabled:hover {
  opacity: 0.3;
  cursor: default;
  border-color: var(--lijn) !important;
  background: var(--vlak) !important;
}

/* === De dagen op EEN rij === */
#oa_widget#oa_widget .oanl-select-date-table {
  height: auto !important;
  overflow-y: hidden;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#oa_widget#oa_widget .oanl-select-date-table::-webkit-scrollbar { display: none; }

#oa_widget#oa_widget .oanl-select-date-dates {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  height: auto !important;
  gap: 6px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

#oa_widget#oa_widget .oanl-select-date-cell {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 2px !important;
  float: none !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 2px !important;
  background: var(--vlak) !important;
  color: var(--wit) !important;
  text-align: center !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* De naam van de dag klein, het getal groot (de stukken maakt het script) */
#oa_widget#oa_widget .oanl-select-date-cell .dp-dag {
  font-family: var(--letter-tekst);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grijs);
}

#oa_widget#oa_widget .oanl-select-date-cell .dp-nr {
  font-family: var(--letter-kop);
  font-weight: var(--gewicht-kop);
  font-size: 20px;
  line-height: 1;
}

#oa_widget#oa_widget .oanl-select-date-cell-active .dp-dag { color: var(--wit); }

/* Online Afspraken kleurt een vrije dag met een roze vlak eronder; hier is
   een vrije dag gewoon wit, een volle dag vaag en de gekozen dag roze. */
#oa_widget#oa_widget .oanl-select-date-cell::before,
#oa_widget#oa_widget .oanl-select-date-cell::after { display: none !important; }

#oa_widget#oa_widget .oanl-select-date-cell-weekend { background: rgba(255, 255, 255, 0.07) !important; }

#oa_widget#oa_widget .oanl-select-date-cell:hover {
  border-color: var(--roze) !important;
  background: color-mix(in srgb, var(--roze) 15%, transparent) !important;
}

#oa_widget#oa_widget .oanl-select-date-cell-today { border-color: rgba(255, 255, 255, 0.45) !important; }

#oa_widget#oa_widget .oanl-select-date-cell-disabled,
#oa_widget#oa_widget .oanl-select-date-cell-disabled:hover {
  opacity: 0.3;
  cursor: default;
  border-color: var(--lijn) !important;
  background: transparent !important;
}

#oa_widget#oa_widget .oanl-select-date-cell-active,
#oa_widget#oa_widget .oanl-select-date-cell-active:hover {
  opacity: 1;
  border-color: var(--roze) !important;
  background: var(--roze) !important;
  color: var(--wit) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--roze) 40%, transparent);
}

/* === De dag zelf: Beschikbaarheid op ... === */
#oa_widget#oa_widget .oanl-escaperoom { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }

/* BESCHIKBAARHEID OP wit, de datum roze (besluit Gijs 18-10-2026) */
#oa_widget#oa_widget .oanl-escaperoom h2 { font-size: 16px !important; color: var(--wit) !important; }
#oa_widget#oa_widget .oanl-escaperoom h2 .oanl-selected-date { color: var(--roze); }

/* === Het rooster: smal een rij per kamer === */
#oa_widget#oa_widget .oanl-escaperoom-table-container {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  float: none !important;
  background: var(--vlak) !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 2px;
  text-align: left !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell-header {
  display: contents !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell-header-logo {
  grid-row: 1 / span 2;
  width: 76px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell-header-logo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  border: 0 !important;
  margin: 0 !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell-header-name {
  grid-column: 2;
  margin: 2px 0 6px !important;
  padding: 0 !important;
  font-family: var(--letter-kop) !important;
  font-weight: var(--gewicht-kop) !important;
  font-size: 16px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--wit) !important;
  background: none !important;
  min-height: 0 !important;
  height: auto !important;
}

#oa_widget#oa_widget .oanl-escaperoom-table-cell-times {
  grid-column: 2;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--grijs) !important;
  font-size: 13px !important;
  text-align: left !important;
}

#oa_widget#oa_widget .oanl-escaperoom-times-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#oa_widget#oa_widget .oanl-escaperoom-times-list-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 38px;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  float: none !important;
  border: 1.5px solid var(--roze) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--wit) !important;
  font-family: var(--letter-kop) !important;
  font-weight: var(--gewicht-kop) !important;
  font-size: 15px !important;
  letter-spacing: 1px;
  line-height: 1 !important;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#oa_widget#oa_widget .oanl-escaperoom-times-list-item:hover {
  background: color-mix(in srgb, var(--roze) 22%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 25%, transparent);
}

/* Volgeboekt: grijs en doorgestreept, niet meer aan te raken */
#oa_widget#oa_widget .oanl-escaperoom-times-list-item-disabled,
#oa_widget#oa_widget .oanl-escaperoom-times-list-item-disabled:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.32) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  box-shadow: none;
  cursor: not-allowed;
}

#oa_widget#oa_widget .oanl-escaperoom-times-list-item-disabled::after { content: none !important; }

#oa_widget#oa_widget .oanl-escaperoom-times-list-item-selected,
#oa_widget#oa_widget .oanl-escaperoom-times-list-item-selected:hover {
  border-color: var(--roze) !important;
  background: var(--roze) !important;
  color: var(--wit) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 30%, transparent), 0 6px 20px color-mix(in srgb, var(--roze) 45%, transparent);
}

/* Smal (de kamers onder elkaar) is een tijd een klein vak, en het vinkje van
   Online Afspraken (een pictogram links in het vak) staat dan door de tijd
   heen (Gijs 31-10-2026: "Kun je op mobiel dat vinkje weglaten?"). De roze
   vulling zegt daar al welke tijd gekozen is. */
@media (max-width: 639.98px) {
  #oa_widget#oa_widget .oanl-escaperoom-times-list-item-selected::before { content: none !important; display: none !important; }
}

#oa_widget#oa_widget .oanl-escaperoom-times-list-item-placeholder { visibility: hidden; }

/* === Breed: het bord met de kamers naast elkaar === */
@media (min-width: 640px) {
  #oa_widget#oa_widget .oanl-escaperoom-table-container {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
  }

  #oa_widget#oa_widget .oanl-escaperoom-table-cell {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 10px !important;
    overflow: hidden;
  }

  #oa_widget#oa_widget .oanl-escaperoom-table-cell-header {
    display: block !important;
  }

  /* De poster in het midden, met wat lucht erboven (besluit Gijs 18-10-2026) */
  /* border-box: Online Afspraken zet content-box, en dan steekt het vak met
     zijn opvulling rechts buiten de kolom (gemeten 18-10-2026). */
  #oa_widget#oa_widget .oanl-escaperoom-table-cell-header-logo {
    display: flex !important;
    justify-content: center;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 14px 12px 0 !important;
  }

  #oa_widget#oa_widget .oanl-escaperoom-table-cell-header-logo img {
    width: 100% !important;
    max-width: 120px;
  }

  #oa_widget#oa_widget .oanl-escaperoom-table-cell-header-name {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 3.6em !important;
    margin: 0 !important;
    padding: 8px 8px 6px !important;
    font-size: 13px !important;
    line-height: 1.2;
    text-align: center !important;
  }

  #oa_widget#oa_widget .oanl-escaperoom-table-cell-times {
    padding: 0 8px !important;
    text-align: center !important;
  }

  #oa_widget#oa_widget .oanl-escaperoom-times-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #oa_widget#oa_widget .oanl-escaperoom-times-list-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
  }
}

/* === Je selectie en Volgende === */
#oa_widget#oa_widget .text-danger,
#oa_widget#oa_widget .oanl-text-danger { color: var(--grijs) !important; }

/* Wat de bezoeker nog moet doen (het aantal spelers kiezen) valt op */
#oa_widget#oa_widget .text-warning { color: #ff8cc6 !important; font-weight: 700; }

#oa_widget#oa_widget table,
#oa_widget#oa_widget .oanl-widget-selection-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--vlak) !important;
  border: 1px solid var(--lijn) !important;
  margin: 0 0 18px !important;
  color: var(--wit) !important;
}

#oa_widget#oa_widget table td,
#oa_widget#oa_widget table th {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lijn) !important;
  background: none !important;
  color: inherit !important;
  font-size: 14px !important;
  text-align: left;
}

#oa_widget#oa_widget table tr:last-child td { border-bottom: 0 !important; }

/* Zonder !important op display: Online Afspraken verbergt een knop of een rij
   knoppen met display: none in de pagina zelf, en dat moet blijven werken. */
#oa_widget#oa_widget .form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* De knoppen: de knop van de site (.dp-btn in global.css) */
#oa_widget#oa_widget button,
#oa_widget#oa_widget.theme-advanced button,
#oa_widget#oa_widget.theme-advanced .form-row button,
#oa_widget#oa_widget.theme-advanced .form-buttons button,
#oa_widget#oa_widget .fake-button,
#oa_widget#oa_widget input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: auto;
  padding: 12px 30px !important;
  border: 2px solid var(--wit) !important;
  border-radius: 2px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--wit) !important;
  font-family: var(--letter-kop) !important;
  font-weight: var(--gewicht-kop) !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none;
  cursor: pointer;
  transition: filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

#oa_widget#oa_widget button:hover,
#oa_widget#oa_widget .fake-button:hover {
  border-color: var(--roze) !important;
  background: color-mix(in srgb, var(--roze) 15%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 35%, transparent), 0 8px 28px color-mix(in srgb, var(--roze) 45%, transparent);
}

/* De volgende stap is de hoofdknop: roze, over de volle breedte. Met
   .theme-advanced en .form-row erbij, anders wint de regel van de gewone
   knop hierboven. */
#oa_widget#oa_widget.theme-advanced :is(.form-row, .form-buttons) button:is(.oa-wizard-btn-next, .oanl-er-button-submit, .widget-shoppingcart-submit, .widget-register-submit, .widget-checkout-submit, .widget-confirm-submit, .widget-shop-submit) {
  flex: 1 1 100%;
  width: 100% !important;
  min-height: 54px;
  border-color: var(--roze) !important;
  background: var(--roze) !important;
  font-size: 15px !important;
}

#oa_widget#oa_widget.theme-advanced :is(.form-row, .form-buttons) button:is(.oa-wizard-btn-next, .oanl-er-button-submit, .widget-shoppingcart-submit, .widget-register-submit, .widget-checkout-submit, .widget-confirm-submit, .widget-shop-submit):not([disabled]):hover {
  background: var(--roze) !important;
  filter: brightness(1.15);
}

/* Uit is alleen een knop met disabled: Online Afspraken laat de klasse
   oanl-er-button-disabled staan als de knop al werkt (gemeten 18-10-2026). */
#oa_widget#oa_widget.theme-advanced button[disabled],
#oa_widget#oa_widget.theme-advanced button[disabled]:hover {
  opacity: 0.35;
  filter: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* De pijltjes die Online Afspraken achter Volgende en voor Vorige zet */
#oa_widget#oa_widget .form-buttons button.oa-wizard-btn-next::after,
#oa_widget#oa_widget .form-buttons button.oa-wizard-btn-back::before {
  color: inherit !important;
  border-color: currentColor !important;
}

/* === De formulieren van de volgende stappen === */
#oa_widget#oa_widget .form-row {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#oa_widget#oa_widget label,
#oa_widget#oa_widget .form-label,
#oa_widget#oa_widget.theme-advanced .form-row .fld label {
  display: block;
  margin: 0 0 6px !important;
  color: var(--grijs) !important;
  font-family: var(--letter-kop) !important;
  font-weight: var(--gewicht-kop) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  float: none !important;
  width: auto !important;
  text-align: left !important;
}

#oa_widget#oa_widget input[type="text"],
#oa_widget#oa_widget input[type="email"],
#oa_widget#oa_widget input[type="tel"],
#oa_widget#oa_widget input[type="password"],
#oa_widget#oa_widget input[type="number"],
#oa_widget#oa_widget input:not([type]),
#oa_widget#oa_widget select,
#oa_widget#oa_widget textarea,
#oa_widget#oa_widget.theme-advanced .form-input input,
#oa_widget#oa_widget.theme-advanced .form-row select,
#oa_widget#oa_widget.theme-advanced .fld input,
#oa_widget#oa_widget.theme-advanced .fld select,
#oa_widget#oa_widget.theme-advanced .fld textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  background: var(--vlak-donker) !important;
  color: var(--wit) !important;
  font-family: var(--letter-tekst) !important;
  /* Nooit kleiner dan 16px: anders zoomt een iPhone in bij het typen */
  font-size: max(16px, 1em) !important;
  box-shadow: none !important;
  outline: none;
  touch-action: manipulation;
}

#oa_widget#oa_widget input:focus,
#oa_widget#oa_widget select:focus,
#oa_widget#oa_widget textarea:focus {
  border-color: var(--roze) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 30%, transparent) !important;
}

/* Het wachtwoordveld: het vak eromheen niet wit, de knop Toon klein */
#oa_widget#oa_widget .fld-password,
#oa_widget#oa_widget .fld-password-inner {
  background: transparent !important;
  border: 0 !important;
  max-width: 100%;
}

#oa_widget#oa_widget.theme-advanced .fld-password button.fld-password-show {
  min-height: 0;
  padding: 6px 12px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
}

#oa_widget#oa_widget .fld,
#oa_widget#oa_widget .form-input { max-width: 100%; }

#oa_widget#oa_widget input[type="checkbox"],
#oa_widget#oa_widget input[type="radio"] {
  accent-color: var(--roze);
  width: 18px;
  height: 18px;
}

#oa_widget#oa_widget .oanl-form-errors,
#oa_widget#oa_widget .frm-section-error {
  color: #ffb3d6 !important;
  background: color-mix(in srgb, var(--roze) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--roze) 50%, transparent) !important;
  border-radius: 2px;
}

#oa_widget#oa_widget .oanl-form-success,
#oa_widget#oa_widget .form-success { color: var(--wit) !important; }

#oa_widget#oa_widget .oanl-card,
#oa_widget#oa_widget section.oa-frm-section {
  background: var(--vlak) !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 2px;
  color: var(--wit) !important;
}

#oa_widget#oa_widget .text-muted,
#oa_widget#oa_widget .oanl-text-muted { color: var(--grijs) !important; }

/* De keuze voor het aantal spelers (verborgen tot Online Afspraken hem toont) */
#oa_widget#oa_widget #widget-select-filters .form-row select { max-width: 220px !important; }

/* === De winkelwagen: je afspraak, de knop, en wat je erbij kunt nemen === */
#oa_widget#oa_widget .oanl-shop-container { display: flex !important; flex-direction: column; gap: 28px; }
#oa_widget#oa_widget .oanl-shop-summary-container { order: -1; }

#oa_widget#oa_widget [data-role="appointment-name"] {
  font-family: var(--letter-kop);
  font-weight: var(--gewicht-kop);
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#oa_widget#oa_widget [data-role="appointment-datetime"],
#oa_widget#oa_widget [data-role="appointment-extra"] { color: var(--grijs); font-size: 14px; }

#oa_widget#oa_widget .cell-price {
  font-family: var(--letter-kop);
  font-weight: var(--gewicht-kop);
  font-size: 18px !important;
  white-space: nowrap;
}

#oa_widget#oa_widget .product-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#oa_widget#oa_widget .product-list li.oanl-invisible { display: none !important; }

#oa_widget#oa_widget .product-list li {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 170px !important;
  margin: 0 !important;
  padding: 14px 14px 16px !important;
  float: none !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 2px;
  background: var(--vlak) !important;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#oa_widget#oa_widget .product-list li:hover {
  border-color: var(--roze) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 25%, transparent);
}

#oa_widget#oa_widget .product-list .photo { width: 100%; margin: 0 !important; border: 0 !important; }
#oa_widget#oa_widget .product-list .photo img { display: block; width: 100% !important; height: auto !important; border: 0 !important; }

#oa_widget#oa_widget .product-list .price {
  font-family: var(--letter-kop);
  font-weight: var(--gewicht-kop);
  font-size: 18px;
  font-style: normal;
  color: var(--roze) !important;
  border: 0 !important;
}

#oa_widget#oa_widget .product-list h2 { margin: 0 !important; font-size: 13px !important; text-align: center !important; }

/* === Je gegevens: een rustig formulier === */

/* Particulier of zakelijk: twee knoppen naast elkaar in plaats van rondjes */
#oa_widget#oa_widget .frm-section-register-form-consumertype .form-row > div:not(.form-label) {
  display: flex !important;
  float: none !important;
  gap: 8px;
}

#oa_widget#oa_widget .frm-section-register-form-consumertype input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#oa_widget#oa_widget .frm-section-register-form-consumertype input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 11px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: var(--vlak);
  color: var(--grijs) !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#oa_widget#oa_widget .frm-section-register-form-consumertype input[type="radio"] + label:hover { color: var(--wit) !important; border-color: var(--roze); }

#oa_widget#oa_widget .frm-section-register-form-consumertype input[type="radio"]:checked + label {
  border-color: var(--roze);
  background: var(--roze);
  color: var(--wit) !important;
}

#oa_widget#oa_widget .frm-section-register-form-consumertype input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--roze);
  outline-offset: 2px;
}

/* De delen van het formulier, elk met zijn kop */
#oa_widget#oa_widget .frm-section-register-form > h2 { margin: 30px 0 4px !important; }
#oa_widget#oa_widget .frm-section-register-form.frm-section-register-form-appointment > h2 { margin: 30px 0 14px !important; }

#oa_widget#oa_widget .frm-section-register-form > p {
  margin: 0 0 16px !important;
  font-size: 13px;
  color: var(--grijs);
}

/* De velden in twee kolommen, het e-mailadres over de volle breedte */
#oa_widget#oa_widget .frm-section-fields-base {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

#oa_widget#oa_widget .frm-section-fields-base > .form-row[data-field-attribute$=".email"] { grid-column: 1 / -1; }

#oa_widget#oa_widget .frm-section-fields-base .fld,
#oa_widget#oa_widget .frm-section-fields-base .fld-medium {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Het e-mailveld zonder de witte balk met het envelopje */
#oa_widget#oa_widget .fld-email::before,
#oa_widget#oa_widget .fld-email::after,
#oa_widget#oa_widget .fld-phone::before,
#oa_widget#oa_widget .fld-phone::after { display: none !important; }

#oa_widget#oa_widget .widget-register-email,
#oa_widget#oa_widget .widget-register-phone {
  margin: 6px 0 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grijs);
}

/* Terug: een kleine link onder de knop */
#oa_widget#oa_widget a.oanl-nav-back,
#oa_widget#oa_widget .oanl-nav-inline a {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--grijs) !important;
  text-decoration: none;
}

#oa_widget#oa_widget a.oanl-nav-back:hover,
#oa_widget#oa_widget .oanl-nav-inline a:hover { color: var(--roze) !important; }

@media (max-width: 560px) {
  #oa_widget#oa_widget .frm-section-fields-base { grid-template-columns: minmax(0, 1fr); }
  #oa_widget#oa_widget .product-list li { width: calc(50% - 6px) !important; }
}

/* === Smal: de week, de pijlen en de dagen iets kleiner === */
@media (max-width: 420px) {
  #oa_widget#oa_widget .oanl-select-date-header-title { font-size: 15px !important; letter-spacing: 1px !important; }
  #oa_widget#oa_widget .oanl-select-date-navigation { width: 34px !important; height: 34px !important; }
  #oa_widget#oa_widget .oanl-select-date-cell .dp-nr { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #oa_widget#oa_widget * { transition: none !important; }
}