/* 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"). */

/* De <dialog> zelf is een transparante laag over het hele scherm die als
   geheel scrollt; het beige paneel (__body) heeft geen eigen hoogte-limiet en
   dus geen eigen scrollbalk. Zo scroll je het formulier zoals een gewone
   pagina, ook op mobiel, i.p.v. in een klein kader binnen de popup. */
dialog.reservation-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  padding: var(--spacing-40) var(--spacing-20);
  background: transparent;
  color: var(--nb-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

dialog.reservation-dialog::-webkit-scrollbar {
  display: none;
}

/* Pagina erachter niet laten meescrollen zolang de popup open is. */
html:has(dialog.reservation-dialog[open]) {
  overflow: hidden;
}

.reservation-dialog__body {
  box-sizing: border-box;
  max-width: var(--width-wizard);
  margin: 0 auto;
  padding: var(--spacing-40);
  background: var(--nb-beige);
  border-radius: var(--radius-large);
}

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

/* Sticky i.p.v. absolute: de ✕ blijft bovenin beeld terwijl je door het
   formulier scrollt. De negatieve margin-bottom houdt 'm uit de flow, zodat
   de formulierkop gewoon bovenaan begint. */
.reservation-dialog__close {
  position: sticky;
  top: var(--spacing-20);
  margin: calc(-1 * var(--spacing-20)) calc(-1 * var(--spacing-20)) -20px auto;
  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 */
}

/* Op mobiel vult het paneel het hele scherm, als een eigen pagina. */
@media (max-width: 600px) {
  dialog.reservation-dialog {
    padding: 0;
  }

  .reservation-dialog__body {
    min-height: 100%;
    padding: var(--spacing-20) var(--spacing-20) var(--spacing-40);
    border-radius: 0;
  }

  .reservation-dialog__close {
    margin-right: 0;
    margin-top: 0;
  }
}

/* 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;
}

@media (max-width: 600px) {
  /* Twee kolommen is te krap voor selects en datumvelden. */
  .reservation-form__grid {
    grid-template-columns: 1fr;
  }

  .reservation-form h3.reservation-form__subtitle {
    margin-top: var(--spacing-24);
  }

  .reservation-form__divider {
    margin: var(--spacing-24) 0;
  }

  .reservation-form__total {
    padding: var(--spacing-16);
  }

  .reservation-form__submit {
    width: 100%;
    padding: var(--spacing-16) var(--spacing-24);
  }

  .reservation-confirmation {
    padding: var(--spacing-28) var(--spacing-20);
  }

  .reservation-confirmation__title {
    font-size: var(--font-size-28);
  }

  .reservation-confirmation__text {
    font-size: var(--font-size-16);
  }
}

/* Uitleg als reCAPTCHA nog niet mag laden (geen cookietoestemming,
   recaptcha_consent_controller.js) — zelfde body-stijl als de hints. */
.reservation-form__captcha-notice {
  margin-top: var(--spacing-24);
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  color: var(--nb-border-25);
}

.reservation-form__captcha-notice p {
  margin: 0 0 var(--spacing-6);
}