/* sv-builder.css - "Jouw feest in 3 stappen" (spec 11) + page rules for /feesten (7.2) and /restaurant (7.1).
   Owner: Doors 1. Prefix sv-builder; page-only rules are scoped with .sv-page-feesten / .sv-page-restaurant.
   Tokens only (base.css). Loaded on /feesten, /bbq-buffetten and /restaurant. */

/* ================= the builder (#plan) ================= */
.sv-builder-nojs{max-width:720px;gap:16px}
@media (max-width:599px){.sv-builder-nojs .sv-btn--secondary{width:100%}}
.sv-js .sv-form.sv-builder-form[data-sv-ready]{display:grid;gap:16px;align-items:start}
.sv-builder-fs{min-width:0;margin:0;padding:clamp(20px,3vw,28px);border:1px solid var(--sv-line);border-radius:var(--sv-r-card);background:var(--sv-shell)}
.sv-builder-legend,.sv-builder-drinks > legend{float:left;width:100%;padding:0}
.sv-builder-legend{margin-bottom:16px;font:560 clamp(1.3rem,1.1rem + .8vw,1.625rem)/1.2 var(--sv-font-head);font-variation-settings:"opsz" 24;letter-spacing:-.01em;text-wrap:balance}
.sv-builder-fs > legend + *,.sv-builder-drinks > legend + *{clear:both}
.sv-builder h2[tabindex]:focus{outline:none}

/* step 1: chips are radios (base .sv-choice, input:checked + .sv-choice = lime) */
.sv-builder-chip,.sv-builder-arr,.sv-builder-opt{position:relative}

/* step 2: radio cards, phone 1 column of 56 px rows, from 600 px 2 columns */
.sv-builder-arrs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
@media (min-width:600px){.sv-builder-arrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-builder-arr{display:flex;flex-direction:column;border-radius:var(--sv-r-img);background:var(--sv-sand);box-shadow:inset 0 0 0 1.5px var(--sv-line);transition:box-shadow .15s var(--sv-ease),background-color .15s var(--sv-ease)}
.sv-builder-arr:hover{box-shadow:inset 0 0 0 1.5px var(--sv-muted)}
.sv-builder-arr:has(> input:checked){background:color-mix(in srgb,var(--sv-lime) 16%,var(--sv-shell));box-shadow:inset 0 0 0 2px var(--sv-lime-deep)}
.sv-builder-card,.sv-builder-tick{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:center;min-height:56px;padding:10px 14px;border-radius:var(--sv-r-img);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-builder-card::before,.sv-builder-tick::before{content:"";grid-row:1 / span 2;width:20px;height:20px;border-radius:50%;background:var(--sv-shell);box-shadow:inset 0 0 0 1.5px var(--sv-muted);transition:box-shadow .15s var(--sv-ease)}
input:checked + .sv-builder-card::before,input:checked + .sv-builder-tick::before{box-shadow:inset 0 0 0 6px var(--sv-lime-deep)}
input:focus-visible + .sv-builder-card,input:focus-visible + .sv-builder-tick{outline:3px solid var(--sv-lime-deep);outline-offset:2px}
.sv-builder-card__name{font-weight:600;line-height:1.3}
.sv-builder-card__price{font:600 .9375rem/1.3 var(--sv-font-text);font-feature-settings:"tnum";color:var(--sv-sun-text)}
.sv-builder-arr > .sv-details{margin:auto 14px 0 48px;font-size:.9375rem} /* fix round 2: cards in a row stretch to one height, "Wat zit erin?" sits on one line */
.sv-builder-arr > .sv-details > summary{min-height:48px;justify-content:flex-start;color:var(--sv-lime-deep);font-size:.875rem}
.sv-builder-arr > .sv-details > summary .sv-icon{margin-left:0;width:18px;height:18px}
.sv-builder-arr > .sv-details[open]{padding-bottom:14px}
.sv-builder-arr .sv-arr__note{font-size:.875rem}

/* extras under step 2 */
.sv-builder-extras{display:grid;gap:12px;margin-top:24px;padding-top:20px;border-top:1px dashed var(--sv-line)}
.sv-builder-drinks{min-width:0;margin:0;padding:0;border:0}
.sv-builder-drinks > legend{margin-bottom:8px}
.sv-builder-opts{display:grid;gap:8px}
@media (min-width:768px) and (max-width:1023px),(min-width:1280px){.sv-builder-opts{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}}
.sv-builder-tick{min-height:48px;background:var(--sv-sand);box-shadow:inset 0 0 0 1.5px var(--sv-line);font-weight:500;line-height:1.35}
.sv-builder-tick:hover{box-shadow:inset 0 0 0 1.5px var(--sv-muted)}
input:checked + .sv-builder-tick{background:color-mix(in srgb,var(--sv-lime) 16%,var(--sv-shell));box-shadow:inset 0 0 0 2px var(--sv-lime-deep)}
.sv-builder-tick--box::before{border-radius:5px}
input:checked + .sv-builder-tick--box::before{box-shadow:inset 0 0 0 10px var(--sv-lime-deep)}
.sv-builder-tick__line{font-size:.875rem;font-weight:400;color:var(--sv-muted)}
.sv-builder-opt{display:flex}
.sv-builder-opt > .sv-builder-tick{flex:1}
/* fix round 2: Windows High Contrast drops box-shadows and backgrounds: real borders, and the chosen arrangement or
   option drawn in the system Highlight colour */
@media (forced-colors:active){
  .sv-builder-card,.sv-builder-tick{border:1px solid ButtonText}
  .sv-builder-card::before,.sv-builder-tick::before{border:2px solid ButtonText;box-shadow:none}
  input:checked + .sv-builder-card::before,input:checked + .sv-builder-tick::before{forced-color-adjust:none;background:Highlight;border-color:Highlight;box-shadow:none}
  input:checked + .sv-builder-card,input:checked + .sv-builder-tick{border:2px solid Highlight}
}

/* step 3: date + stepper */
.sv-builder-when{display:grid;gap:0 24px;align-items:start}
@media (min-width:600px){.sv-builder-when{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-builder-when .sv-field{margin-bottom:0}
.sv-builder-when > .sv-field + .sv-field{margin-top:20px}
@media (min-width:600px){.sv-builder-when > .sv-field + .sv-field{margin-top:0}}
.sv-builder-stepper{display:flex;align-items:center;gap:8px;max-width:260px}
.sv-builder-pm{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--sv-r-pill);background:var(--sv-shell);color:var(--sv-text);box-shadow:inset 0 0 0 1.5px var(--sv-muted);transition:transform .09s var(--sv-ease)}
.sv-builder-pm:hover{box-shadow:inset 0 0 0 1.5px var(--sv-text)}
.sv-builder-pm:active{transform:scale(.97)}
.sv-builder-pm[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.sv-builder-p{flex:1 1 auto;min-width:0;text-align:center;font-weight:600;font-feature-settings:"tnum";-moz-appearance:textfield;appearance:textfield}
.sv-builder-p::-webkit-inner-spin-button,.sv-builder-p::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sv-builder-more{color:var(--sv-text);font-weight:600}

/* the summary ticket: sun body, notches at the stub line, perforation, sand-2 stub "prijzen 2026" */
.sv-builder-sum{min-width:0}
.sv-builder-ticket{--stub:44px;--notch:10px;position:relative;border-radius:var(--sv-r-card);background:var(--sv-sun);color:var(--sv-night);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)),transparent 97%,var(--sv-night)) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)),transparent 97%,var(--sv-night)) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)),transparent 97%,var(--sv-night)) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)),transparent 97%,var(--sv-night)) right/51% 100% no-repeat}
.sv-builder-ticket__body{padding:24px 24px 22px}
.sv-builder-ticket__stub{display:flex;align-items:center;justify-content:center;height:var(--stub);margin:0;border-top:1.5px dashed color-mix(in srgb,var(--sv-night) 45%,transparent);border-radius:0 0 var(--sv-r-card) var(--sv-r-card);background:var(--sv-sand-2);font:600 .75rem/1 var(--sv-font-text);letter-spacing:.04em}
.sv-builder-ticket a{color:var(--sv-night);font-weight:600}
.sv-builder-ticket :focus-visible{outline-color:var(--sv-night)}
.sv-builder-lines{display:grid;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:.9375rem;line-height:1.45}
.sv-builder-lines strong{font-weight:600}
.sv-builder-lines:not(:has(li:not([hidden]))){display:none}
.sv-builder-total{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.sv-builder-total__num,.sv-builder-total__folder{font:650 clamp(1.5rem,1.25rem + 1.2vw,2.25rem)/1.1 var(--sv-font-head);font-variation-settings:"opsz" 48;letter-spacing:-.01em;font-feature-settings:"lnum","tnum";text-wrap:balance}
.sv-builder-total__label{max-width:24ch;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--sv-shell) 60%,transparent);font:600 .75rem/1.3 var(--sv-font-text);letter-spacing:.02em}
.sv-builder-total__pp{margin-top:6px;font-weight:600;font-feature-settings:"tnum"}
.sv-builder-out__line{font-size:.9375rem;line-height:1.45}
.sv-builder-total__folder + .sv-builder-out__line{margin-top:8px}
.sv-motion .sv-builder-out.is-swap{animation:sv-fade .15s var(--sv-ease)}

/* step 4 */
.sv-builder-fs--you .sv-btn[type="submit"]{margin-top:4px}
@media (max-width:599px){.sv-builder-fs--you .sv-btn[type="submit"]{width:100%}}

/* desktop: steps left (7/12), the ticket sticky on the right (5/12) */
@media (min-width:1024px){
  .sv-js .sv-form.sv-builder-form[data-sv-ready]{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,3vw,48px)}
  .sv-builder-fs{grid-column:1}
  .sv-builder-sum{grid-column:2;grid-row:1 / span 4;position:sticky;top:96px;align-self:start}
}

/* ================= /feesten (7.2) ================= */
.sv-page-feesten .sv-pagehero__media .sv-ev-playonce{position:absolute;top:calc(var(--sv-header-h) + 12px);right:var(--sv-gutter);bottom:auto;left:auto;z-index:3}
.sv-builder-wat__list{gap:10px}
.sv-builder-wat .sv-section-head{margin-bottom:24px}
.sv-builder-arr-tickets{flex:1 1 100%;gap:8px}
.sv-builder-more-link{margin-top:24px}
.sv-builder-facts{margin-bottom:clamp(32px,5vw,48px)}
.sv-builder-tour{max-width:800px;margin-top:clamp(40px,6vw,64px)}
/* fix round 1: from 1024 px the 360 facade is a wide 21:9 strip with its button and line beside it, not a second
   3:2 copy of the serre tile with 400 px of empty space next to it */
@media (min-width:1024px){
  .sv-builder-tour{max-width:none}
  .sv-builder-tour .sv-tour{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:32px}
  .sv-builder-tour .sv-tour__frame{aspect-ratio:21/9}
  .sv-builder-tour .sv-tour__media img{object-position:50% 25%}
}
.sv-builder-nights .sv-ev-cards{margin-top:8px}
.sv-builder-how__steps{grid-template-columns:minmax(0,1fr);gap:28px}
.sv-builder-how__steps .sv-step{grid-template-columns:auto minmax(0,1fr);column-gap:20px;row-gap:6px}
.sv-builder-how__steps .sv-step__num{grid-row:1 / span 2;min-width:1.1ch}
.sv-builder-contact{gap:14px}
.sv-builder-contact__head{display:flex;align-items:center;gap:16px}
.sv-builder-contact__head h3{margin-bottom:6px}
.sv-builder-avatar{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sv-sand-2);color:var(--sv-lime-deep)}
.sv-builder-avatar .sv-fulmar{width:44px}
.sv-builder-contact__role{font-weight:600}
@media (min-width:1024px){.sv-builder-contact{margin-top:clamp(64px,8vw,96px)}}
.sv-builder-know__box{max-width:760px;gap:16px}
.sv-builder-know__box h2{margin:0}

/* ================= /restaurant (7.1) ================= */
.sv-builder-week__card{gap:16px;padding:clamp(20px,3vw,28px)}
.sv-builder-week__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sv-builder-week__dot{color:var(--sv-muted);font-weight:600}
.sv-builder-week__list{gap:10px;font-size:1.0625rem}
.sv-builder-week__actions{margin-top:20px}
@media (min-width:1024px){.sv-builder-week .sv-split > .sv-section-head{margin-bottom:0}}
.sv-builder-menu .sv-menu{max-width:960px}
.sv-builder-menu__chip{line-height:1}
.sv-builder-menu__chip + .sv-lead{margin-top:16px}
.sv-builder-menu__key{margin-top:8px}
.sv-builder-menu__allergy{max-width:64ch;margin:24px 0 20px}
.sv-page-restaurant abbr[title]{text-decoration:none;cursor:help}
.sv-builder-group .sv-section-head{margin-bottom:24px}
.sv-builder-group__actions{justify-content:center}
.sv-builder-hours .sv-split{align-items:start}
.sv-builder-hours__body .sv-actions{margin-top:20px}