/* Tasty Trailers – huisstijl van de eindejaarsbrochure: zwart, goud, koper */
/* Lettertypes staan op de eigen site (geen Google: beter voor privacy/GDPR). Licentie: SIL Open Font License */
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-latin-700-normal.woff2') format('woff2'); }
:root {
  --zwart: #0d0d0d;
  --donker: #171717;
  --kaart: #1f1f1f;
  --lijn: #333;
  --goud: #c9a45c;
  --goud-licht: #e2c78f;
  --koper: #c27a45;
  --tekst: #f2efe9;
  --zacht: #a9a39a;
  --groen: #5fb878;
  --rood: #e0645a;
  --oranje: #e6a23c;
  --radius: 10px;
  --kop: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zwart); color: var(--tekst); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: var(--goud-licht); }
h1, h2, h3 { font-family: var(--kop); font-weight: 400; letter-spacing: .5px; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
h2 { font-size: 2rem; }
h3 { font-size: 1.45rem; color: var(--goud); }
.goud { color: var(--goud); }
.zacht { color: var(--zacht); }
.klein { font-size: .88rem; }
.verborgen { display: none !important; }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- kop ---------- */
.kop { border-bottom: 1px solid var(--lijn); background: #000; }
.kop-in { max-width: 980px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.logo { font-family: var(--kop); font-size: 1.7rem; letter-spacing: 2px; color: var(--goud); text-decoration: none; white-space: nowrap; }
.logo span { color: var(--tekst); }
.kop-rechts { margin-left: auto; font-size: .9rem; color: var(--zacht); text-align: right; }
.kop-rechts a { white-space: nowrap; }
@media (max-width: 480px) { .niet-gsm { display: none; } .logo { font-size: 1.45rem; } }

.held { max-width: 980px; margin: 0 auto; padding: 28px 16px 8px; }
.held p { color: var(--zacht); max-width: 640px; margin: 0; }
.prijs-badge { display: inline-block; border: 2px solid var(--goud); padding: 6px 14px; font-family: var(--kop); font-size: 1.6rem; color: var(--goud); margin: 10px 0; }
.prijs-badge small { font-family: var(--body); font-size: .8rem; color: var(--tekst); margin-left: 6px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 140px; }

/* ---------- stappen ---------- */
.stappen { display: flex; gap: 6px; margin: 18px 0 22px; overflow-x: auto; padding-bottom: 4px; }
.stap-knop { flex: 1 0 auto; background: none; border: 0; border-bottom: 3px solid var(--lijn); color: var(--zacht); padding: 8px 6px; font-family: var(--kop); font-size: 1.1rem; letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
.stap-knop .nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: .85rem; margin-right: 6px; font-family: var(--body); }
.stap-knop.actief { color: var(--goud); border-color: var(--goud); }
.stap-knop.klaar { color: var(--tekst); border-color: var(--koper); }
.stap-knop:disabled { cursor: default; }

.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.kaart > h3:first-child { margin-top: 0; }
.uitleg { color: var(--zacht); margin: -4px 0 14px; font-size: .95rem; }

/* ---------- formulier ---------- */
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .95rem; }
.veld { margin-bottom: 14px; }
.verplicht::after { content: ' *'; color: var(--goud); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; background: #111; color: var(--tekst); border: 1px solid #444; border-radius: 8px; padding: 11px 12px; font: inherit; font-size: 16px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--goud); outline-offset: 1px; border-color: var(--goud); }
.ongeldig { border-color: var(--rood) !important; }
.rij { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.rij-3 { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 2fr; }
@media (max-width: 640px) { .rij, .rij-3 { grid-template-columns: 1fr; } }

.vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; margin-bottom: 8px; }
.vink input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--goud); flex: none; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; padding: 12px 20px; font: 600 1rem var(--body); cursor: pointer; text-decoration: none; min-height: 46px; }
.knop-goud { background: var(--goud); color: #111; }
.knop-goud:hover { background: var(--goud-licht); }
.knop-rand { background: transparent; color: var(--tekst); border: 1px solid #555; }
.knop-rand:hover { border-color: var(--goud); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop-klein { padding: 6px 12px; min-height: 34px; font-size: .9rem; }

/* keuzetegels (dagen / tijdsloten / personen) */
.tegels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tegel { background: #111; border: 1px solid #444; border-radius: var(--radius); padding: 14px; color: var(--tekst); text-align: left; cursor: pointer; font: inherit; }
.tegel strong { display: block; font-family: var(--kop); font-size: 1.35rem; font-weight: 400; letter-spacing: .5px; }
.tegel small { color: var(--zacht); }
.tegel:hover:not(:disabled) { border-color: var(--goud); }
.tegel.gekozen { border-color: var(--goud); background: #2a2417; box-shadow: inset 0 0 0 1px var(--goud); }
.tegel:disabled { opacity: .4; cursor: not-allowed; }
.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.slot { background: #111; border: 1px solid #444; border-radius: 8px; padding: 10px 4px; color: var(--tekst); cursor: pointer; font: 600 1rem var(--body); text-align: center; }
.slot small { display: block; font-weight: 400; font-size: .75rem; color: var(--zacht); }
.slot.gekozen { border-color: var(--goud); background: #2a2417; }
.slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* teller: - 0 + */
.gerecht { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.gerecht:last-child { border-bottom: 0; }
.gerecht-info { flex: 1; }
.gerecht-info strong { display: block; }
.gerecht-info .zacht { font-size: .9rem; }
.gerecht-prijs { color: var(--goud); font-weight: 600; white-space: nowrap; font-size: .95rem; }
.teller { display: flex; align-items: center; border: 1px solid #555; border-radius: 8px; overflow: hidden; flex: none; }
.teller button { width: 44px; height: 44px; background: #111; color: var(--goud); border: 0; font-size: 1.4rem; cursor: pointer; }
.teller button:disabled { color: #555; cursor: not-allowed; }
.teller output { min-width: 40px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.teller-groot output { min-width: 60px; font-size: 1.5rem; }

.vaste-gang { padding: 8px 0; border-bottom: 1px dashed var(--lijn); }
.vaste-gang:last-child { border-bottom: 0; }
.vaste-gang .gang { font-family: var(--kop); color: var(--goud); letter-spacing: .5px; font-size: 1.1rem; }

.teller-status { font-size: .9rem; padding: 6px 10px; border-radius: 6px; display: inline-block; margin-bottom: 6px; }
.teller-status.ok { background: rgba(95,184,120,.15); color: var(--groen); }
.teller-status.nok { background: rgba(230,162,60,.15); color: var(--oranje); }

.allergenen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 12px; margin-bottom: 10px; }

/* meldingen */
.melding { border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.melding ul { margin: 6px 0 0; padding-left: 20px; }
.melding-fout { background: rgba(224,100,90,.12); border: 1px solid var(--rood); color: #ffd2cd; }
.melding-ok { background: rgba(95,184,120,.12); border: 1px solid var(--groen); color: #d4f5dd; }
.melding-info { background: rgba(201,164,92,.1); border: 1px solid var(--goud); color: var(--goud-licht); }

/* formules */
.formules { display: grid; gap: 12px; }
.formule { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; background: #111; border: 1px solid #444; border-radius: var(--radius); padding: 16px; }
.formule.gekozen { border-color: var(--goud); background: #1d1a12; }
.formule-naam { font-family: var(--kop); font-size: 1.7rem; letter-spacing: .5px; line-height: 1; }
.formule-naam .goud { margin-left: 8px; }
.formule-prijs { font-family: var(--kop); font-size: 1.7rem; color: var(--goud); white-space: nowrap; }
.formule-prijs small { font-family: var(--body); font-size: .75rem; color: var(--zacht); margin-left: 4px; }
.formule p { margin: 4px 0 0; color: var(--zacht); font-size: .95rem; }
.formule ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.formule li { font-size: .8rem; border: 1px solid #555; border-radius: 12px; padding: 2px 9px; color: var(--tekst); }
@media (max-width: 560px) { .formule { grid-template-columns: 1fr; } .formule .teller { justify-self: start; } }
.vaste-gang-info { color: var(--zacht); font-size: .95rem; margin: 0; }

/* overzicht / bedragen */
table.bedragen { width: 100%; border-collapse: collapse; }
table.bedragen td { padding: 7px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.bedragen td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
table.bedragen tr.totaal td { border-top: 2px solid var(--goud); border-bottom: 0; font-weight: 700; font-size: 1.15rem; padding-top: 10px; }
table.bedragen tr.sub td { color: var(--zacht); font-size: .95rem; }
.betaalkeuze { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .betaalkeuze { grid-template-columns: 1fr; } }
.betaalkeuze .tegel strong { font-size: 1.6rem; color: var(--goud); }
dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.gegevens dt { color: var(--zacht); }
dl.gegevens dd { margin: 0; }
@media (max-width: 520px) { dl.gegevens { grid-template-columns: 1fr; } dl.gegevens dd { margin-bottom: 6px; } }

/* onderste balk met totaal */
.balk { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.95); border-top: 1px solid var(--goud); z-index: 20; }
.balk-in { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.balk-totaal { line-height: 1.2; }
.balk-totaal strong { font-family: var(--kop); font-size: 1.7rem; color: var(--goud); font-weight: 400; letter-spacing: .5px; }
.balk-knoppen { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 480px) { .balk-knoppen .knop-rand { padding: 12px; } }

.laden { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: draai .8s linear infinite; vertical-align: -3px; }
@keyframes draai { to { transform: rotate(360deg); } }

.voet { text-align: center; color: var(--zacht); font-size: .85rem; padding: 20px 16px; }

@media print {
  body { background: #fff; color: #000; }
  .kop, .balk, .stappen, .geen-print, .knop { display: none !important; }
  .kaart { border: 1px solid #999; background: #fff; break-inside: avoid; }
  h1, h2, h3, .goud { color: #000; }
  .zacht, dl.gegevens dt { color: #444; }
}