/* ============================================================
   Feestkanaal — /bestellen/  (berekenen en bestellen)
   ------------------------------------------------------------
   Bovenop tokens.css, ds.css en home.css. De configurator zelf
   (conf-grid, fld, stepper, presets, opt, line, tot, tip) komt
   uit ds.css; hier alleen wat deze pagina extra nodig heeft.
   ============================================================ */

.kop { padding: var(--s9) 0 var(--s7); }
.kop h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s3); }
.kop .lead { margin: 0; }

.stap { padding-bottom: var(--s11); }
.stap[hidden] { display: none; }

/* stappen-aanduiding boven de kop */
.stappen { display: flex; gap: var(--s4); font-size: var(--t-2xs); font-weight: var(--w-bold);
           letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-bottom: var(--s5); }
.stappen b { color: var(--brand); }
.stappen span::before { content: "·"; margin-right: var(--s4); }
.stappen span:first-child::before { content: none; }

/* keuzepillen voor dj-aantal, zakelijk/privé */
.keuze { display: flex; gap: var(--s2); flex-wrap: wrap; }
.keuze button { border: 1px solid var(--line); background: var(--surface); color: var(--soft);
                padding: 10px 16px; border-radius: var(--r-pill); font: inherit; font-size: var(--t-sm);
                cursor: pointer; }
.keuze button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* De dj is het enige op dit scherm dat géén apparatuur is, en het is de stap
   die een verhuring een feest maakt; die mag eruit springen. Groen en niet de
   magenta accentkleur (Dave, 21 sep 2026): magenta leest als rood, en rood op
   een bestelscherm betekent "er is iets mis".
   --dj is --ch1 verdonkerd met --ink: het kanaalgroen zelf haalt met witte
   tekst maar 2,4:1, deze tint 4,6:1. De lichte tinten gebruiken wel gewoon
   --ch1, want daar staat geen tekst op. */
.dj-blok { --dj: color-mix(in srgb, var(--ch1) 70%, var(--ink)); }
.dj-blok .opt { border-color: color-mix(in srgb, var(--ch1) 32%, var(--line));
                background: color-mix(in srgb, var(--ch1) 5%, var(--surface)); }
.dj-blok .opt:hover { border-color: color-mix(in srgb, var(--ch1) 60%, var(--line)); }
.dj-blok .opt:has(input:checked) { border-color: var(--dj); box-shadow: var(--shadow-sm); }
.dj-blok .opt input { accent-color: var(--dj); }
.dj-blok .opt .amt { color: var(--dj); }
.dj-blok .dj-paneel { border-color: color-mix(in srgb, var(--ch1) 24%, var(--line));
                      background: color-mix(in srgb, var(--ch1) 4%, var(--wash)); }
.dj-blok .keuze button[aria-pressed="true"] { background: var(--dj); border-color: var(--dj);
                                              color: var(--on-brand); }
/* De tekst wisselt mee met het aantal dj's en is in het meervoud een regel
   langer. Zonder vaste hoogte springt alles eronder een regel omhoog of
   omlaag op het moment dat je klikt. Ruimte voor de langste variant. */
.dj-blok .opt small { min-height: calc(.89rem * var(--lh-snug) * 2); }
.dj-blok #djKanNote { min-height: calc(var(--t-xs) * var(--lh-snug) * 3); }
/* Smaller scherm, dus meer regels: de langste variant wordt er één langer. */
@media (max-width: 1000px) {
  .dj-blok .opt small { min-height: calc(.89rem * var(--lh-snug) * 3); }
  .dj-blok #djKanNote { min-height: calc(var(--t-xs) * var(--lh-snug) * 4); }
}

/* dj-paneel, klapt open onder de optie */
.dj-paneel { display: none; margin-top: var(--s5); padding: var(--s6); border: 1px solid var(--line);
             border-radius: var(--r-lg); background: var(--wash); }
.dj-paneel.aan { display: block; }
.dj-paneel .fld + .fld { margin-top: var(--s6); }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.rij2 label > span, .fld > .sub { display: block; font-size: var(--t-xs); color: var(--soft); margin-bottom: 6px; }
/* De kalender (.kal-*) staat in ds.css: de homepage gebruikt hem ook
   (21 sep 2026). */

/* Aantal feestdagen: dezelfde stepper als bij het aantal koptelefoons, maar
   smaller, want het zijn er bijna altijd één. */
.kal-duur { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s4); margin-top: var(--s5); flex-wrap: wrap; }
.kal-duur > span { font-size: var(--t-sm); }
.stepper.dagen { display: flex; flex: none; }
.stepper.dagen input { width: 96px; flex: none; font-size: 1.05rem; background: var(--wash); cursor: default; }
.stepper.dagen button { width: 46px; }
.stepper.dagen button:disabled { opacity: .35; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--soft); padding: 8px 14px;
        border-radius: var(--r-pill); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.noot { font-size: var(--t-xs); color: var(--soft); margin: var(--s2) 0 0; }
textarea { width: 100%; min-height: 84px; font: inherit; padding: 12px 14px; border: 1px solid var(--line);
           border-radius: var(--r); background: var(--surface); color: var(--ink); resize: vertical; }
textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
select { width: 100%; height: 48px; font: inherit; padding: 0 12px; border: 1px solid var(--line);
         border-radius: var(--r); background: var(--surface); color: var(--ink); }

/* de som */
/* ── de samenvatting loopt mee met scrollen ──────────────────────────
   .conf-grid had overflow:hidden om zijn ronde hoeken te knippen, en dat
   zet position:sticky bij een kind uit: de grid wordt dan de scrollbak en
   die scrollt zelf niet. De hoeken gaan daarom naar de twee kolommen. */
.conf-grid { overflow: visible; }
.conf-l { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.conf-r { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.sum-vast { position: sticky; top: calc(76px + var(--s5)); }

@media (max-width: 1000px) {
  /* Eén kolom: de samenvatting staat onder het formulier en heeft niets om
     langs te lopen. Hoeken dus boven en onder in plaats van links en rechts. */
  .conf-l { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .conf-r { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .sum-vast { position: static; }
}

.conf-r .line { font-size: var(--t-sm); }
.conf-r .line.stil .k, .conf-r .line.stil .v { color: var(--soft); }
.conf-r .tot { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.conf-r .btn.block { margin-top: var(--s5); }
.conf-r .btn.ghost { background: none; color: var(--soft); box-shadow: none; margin-top: var(--s2); }
.conf-r .btn.ghost:hover { color: var(--ink); }
.krap { display: none; margin: var(--s4) 0 0; padding: 14px 16px; border-radius: var(--r);
        background: color-mix(in srgb, var(--ch2) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ch2) 35%, transparent);
        font-size: var(--t-sm); }
.krap.aan { display: block; }
.krap b { display: block; margin-bottom: 4px; }
.tip[hidden] { display: none; }
.tip button { border: 0; background: var(--ink); color: var(--bg); padding: 5px 11px; border-radius: var(--r-sm);
              font: inherit; font-size: var(--t-xs); cursor: pointer; margin-left: 6px; }

/* stap 2: gegevens */
.zoek { position: relative; }
.zoek .uit { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
             background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
             box-shadow: var(--shadow); overflow: hidden; }
.zoek .uit.aan { display: block; }
.zoek .uit button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
                    padding: 10px 14px; cursor: pointer; }
.zoek .uit button:hover { background: var(--wash); }
.zoek .uit small { display: block; color: var(--soft); font-size: var(--t-xs); }
.gevonden { font-size: var(--t-xs); color: var(--soft); margin: 6px 0 0; }
.biz { display: none; } .biz.aan { display: block; }

/* bevestiging */
.klaar { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s8); }
.klaar h2 { margin-bottom: var(--s2); }
.klaar .regel { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center;
                padding: var(--s4) 0; border-top: 1px solid var(--line); }
.klaar .regel b { display: block; } .klaar .regel small { color: var(--soft); }
.klaar .amt { font-family: var(--font-head); font-weight: var(--head-weight); font-variant-numeric: tabular-nums; }
.pil { font-size: var(--t-2xs); font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase;
       padding: 4px 9px; border-radius: var(--r-pill); }
.pil.ok { background: color-mix(in srgb, var(--ch1) 16%, transparent); color: var(--ch1); }
.pil.wacht { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }

@media (max-width: 720px) { .rij2 { grid-template-columns: 1fr; } .klaar { padding: var(--s6); } }

/* ── verplichte velden ─────────────────────────────────────────────
   Tot 21 sep 2026 kon je met een leeg formulier naar "je bestelling staat
   genoteerd" (Dave). Nu markeert de bestelknop wat ontbreekt. */
input[aria-invalid="true"] { border-color: var(--ch2);
                             box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch2) 18%, transparent); }
.noot.fout { color: var(--ch2); font-weight: var(--w-med); }