/* Aanvraagformulier-popup op de detailpagina (README §3, veld "Formulier
   opent als modal/popup"). --width-wizard is precies hiervoor bedoeld
   (CLAUDE.md §2.4: "contact-wizard / formulier"). */

/* Alleen de body scrollt, nooit de dialog zelf — anders scrollt de ✕ mee
   uit beeld. border-box + dvh: de hele popup (incl. padding) past altijd in
   het zichtbare scherm, ook op mobiel waar 100vh groter is dan wat je ziet
   (adresbalk) en de gecentreerde popup anders boven en onder afgesneden werd. */
dialog.reservation-dialog {
  position: relative;
  box-sizing: border-box;
  margin: auto;
  border: none;
  padding: var(--spacing-40);
  background: var(--nb-beige);
  color: var(--nb-ink);
  width: calc(100% - var(--spacing-40));
  max-width: var(--width-wizard);
  max-height: 88vh;
  max-height: 88dvh;
  overflow: hidden;
  border-radius: var(--radius-large);
}

/* [open]: een display-waarde op de dialog zelf overschrijft anders de
   display: none van een dichte dialog. */
dialog.reservation-dialog[open] {
  display: flex;
  flex-direction: column;
}

.reservation-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

dialog.reservation-dialog::backdrop {
  background: rgba(47, 50, 47, 0.5); /* --nb-ink @ 50% */
  backdrop-filter: blur(12px);
}

.reservation-dialog__close {
  position: absolute;
  top: var(--spacing-20);
  right: var(--spacing-20);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--nb-border);
  background: var(--nb-white);
  color: var(--nb-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  z-index: 1; /* boven gepositioneerde formulier-elementen die eronder doorscrollen */
}

@media (max-width: 600px) {
  dialog.reservation-dialog {
    padding: var(--spacing-60) var(--spacing-20) var(--spacing-20);
  }
}

/* Formuliervelden — Symfony's standaard form_row-markup (label + widget +
   errors in een div), hier alleen ingekleurd met de bestaande tokens. */

.reservation-form h3.reservation-form__subtitle {
  font-size: var(--font-size-22);
  margin: var(--spacing-32) 0 var(--spacing-16);
}

.reservation-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
}

.reservation-form__hint {
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  color: var(--nb-border-25);
  margin: var(--spacing-6) 0 var(--spacing-16);
}

.reservation-form__divider {
  border: none;
  border-top: 1px solid var(--nb-border);
  margin: var(--spacing-32) 0;
}

.reservation-form__submit {
  margin-top: var(--spacing-24);
  padding: var(--spacing-16) var(--spacing-40);
}

/* Live "Geschat totaal" (README §3, veld 8) — wit vlak tegen de beige
   dialog-achtergrond, zoals ook de day-entry- en catering-kaarten dat doen.
   reservation_price_controller.js rekent 'm live bij, puur weergave. */
.reservation-form__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
  padding: var(--spacing-20) var(--spacing-24);
  border-radius: var(--radius-extra-small);
  background: var(--nb-white);
}

.reservation-form__total-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-16);
  color: var(--nb-border-25);
}

.reservation-form__total-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-24);
  color: var(--nb-salmon);
}

.reservation-form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-14);
  color: var(--nb-border-25);
  margin-bottom: var(--spacing-6);
}

.reservation-form input[type]:not([type='checkbox']):not([type='radio']),
.reservation-form select,
.reservation-form textarea {
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-extra-small);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  color: var(--nb-ink);
  background: var(--nb-white);
  width: 100%;
  box-sizing: border-box;
}

.reservation-form > div {
  margin-bottom: var(--spacing-16);
}

/* Validatiemeldingen (_form_theme.html.twig) — bewust geen rood: het merk
   kent geen status-kleuren (CLAUDE.md §2.2), dus salmon is ook hier het
   enige aandacht-signaal, in de gewone body-stijl. */

.reservation-form__errors {
  list-style: none;
  margin: var(--spacing-6) 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-14);
  color: var(--nb-salmon);
}

.reservation-form__field--invalid {
  border-color: var(--nb-salmon) !important;
}

/* Checkbox-rijen (multiDay, apparatuur) — de generieke label-regel hierboven
   maakt er anders een blok-label bovenop een losse checkbox van; hier staan
   ze naast elkaar, zoals een gewone toggle. */

.reservation-form .reservation-form__toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

/* display: flex hierboven wint anders van het hidden-attribuut — de
   lunch-optie wordt zo verborgen bij "geen catering" en het 8-uurs arrangement. */
.reservation-form .reservation-form__toggle[hidden] {
  display: none;
}

.reservation-form .reservation-form__toggle label {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-16);
  color: var(--nb-ink);
  cursor: pointer;
}

.reservation-form .reservation-form__toggle input[type='checkbox'] {
  order: -1; /* checkbox visueel voor het label, ook al staat het label eerst in de DOM */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--nb-salmon);
  cursor: pointer;
}

/* Multi-dag-rijen (README §3, veld 5) — elke rij een eigen kaartje met een
   verwijderknop, toegevoegd/verwijderd door collection_controller.js. */

.reservation-form__extra-days {
  margin-bottom: var(--spacing-16);
}

.reservation-form__day-entry {
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-extra-small);
  padding: var(--spacing-16);
  margin-bottom: var(--spacing-10);
  background: var(--nb-white);
}

/* .reservation-form > div hierboven raakt alleen DIRECTE kinderen van het
   formulier — de genest gerenderde velden in een kaart (Datum/Van/Tot/
   Catering) vielen daarbuiten en stonden zonder ruimte op elkaar. */
.reservation-form__day-entry > div,
.reservation-form__day-entry .reservation-form__grid {
  margin-bottom: var(--spacing-16);
}

.reservation-form__day-entry-heading {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-16);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--nb-salmon);
}

.reservation-form__add-day {
  font-size: var(--font-size-16);
  padding: var(--spacing-10) var(--spacing-24);
}

.reservation-form__remove-day {
  display: block;
  margin-top: var(--spacing-10);
  padding: 0;
  border: none;
  background: none;
  color: var(--nb-salmon);
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  cursor: pointer;
}

.reservation-form__remove-day:hover {
  text-decoration: underline;
}

/* Catering-keuzekaarten (README §3, veld 6) — Symfony rendert dit als een
   losse input+label per keuze; hier zetten we het radio-paar zelf onzichtbaar
   (maar focusbaar) en stylen we de label als de klikbare kaart. Scope via
   ".reservation-form .catering-cards" i.p.v. gewoon "label", zodat dit de
   generieke label-styling hierboven overschrijft ongeacht bestandsvolgorde. */

.reservation-form .catering-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  margin-top: var(--spacing-6);
}

.reservation-form .catering-cards input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.reservation-form .catering-cards label {
  flex: 1 1 140px;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: var(--spacing-10);
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-extra-small);
  background: var(--nb-white);
  color: var(--nb-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}

.reservation-form .catering-cards input[type='radio']:checked + label {
  border: 2px solid var(--nb-salmon);
  cursor: default;
  padding: 9px; /* 10px - 1px, zodat de kaart niet verspringt door de dikkere rand */
}

.reservation-form .catering-cards input[type='radio']:focus-visible + label {
  outline: 2px solid var(--nb-ink);
  outline-offset: 2px;
}

.reservation-form ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-6) 0 0;
  color: var(--nb-salmon);
  font-size: var(--font-size-14);
}

/* Bevestigingsscherm (README §3, veld 10) — beige oppervlak i.p.v. de
   ink-achtergrond uit de oude design-referentie, consistent met hoe de rest
   van de site content-cards toont (CLAUDE.md §2.2: beige = "content-cards
   op wit"). De titel heeft geen eigen kleur nodig: die erft de salmon uit de
   globale h1-h4-regel in app.css. */

.reservation-confirmation {
  background: var(--nb-beige);
  color: var(--nb-ink);
  border-radius: var(--radius-large);
  padding: var(--spacing-60);
  margin-top: var(--spacing-32);
}

.reservation-confirmation__title {
  font-size: var(--font-size-36);
  margin-bottom: var(--spacing-16);
}

.reservation-confirmation__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-18);
  color: var(--nb-border-25);
  max-width: var(--width-text);
  margin: 0;
}