/* Parlizza · bestellen — zelfde huisstijl als de site: crème, blauw 072, Rojo, geel, Archivo breed + Instrument Serif. */
:root {
  --blue: #10069F; --red: #E4281F; --yellow: #FEDD00; --cream: #FFF8E6; --ink: #16161D;
  --muted: rgba(22, 22, 29, .6); --line: rgba(22, 22, 29, .14);
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.25, .8, .25, 1); --enter: cubic-bezier(.165, .84, .44, 1); --snap: cubic-bezier(.73, .29, 0, 1);
  --gut: 16px;
}
@media (min-width: 640px) { :root { --gut: 32px; } }
@media (min-width: 1024px) { :root { --gut: 48px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--yellow); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

/* ── bovenkant ─────────────────────────────────────────── */
.held { background: var(--blue); color: var(--cream); position: relative; overflow: hidden; }
.kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; position: relative; z-index: 2; }
.kop-logo { color: var(--cream); display: block; }
.kop-logo svg { height: 30px; width: auto; display: block; }
.kop-tag { font: 800 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.kop-tag::before { content: ''; width: 8px; height: 8px; background: var(--yellow); }
.held-in { position: relative; z-index: 2; padding: clamp(24px, 5vw, 64px) 0 clamp(36px, 6vw, 72px); display: grid; gap: 28px; max-width: 860px; }
.held h1 { margin: 0; font: 900 clamp(52px, 10.5vw, 168px)/.84 var(--font); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: var(--yellow); }
.held p { margin: 0; font: italic 400 clamp(22px, 2.4vw, 32px)/1.2 var(--serif); max-width: 30ch; }
.held-stappen { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.held-stappen li { display: flex; align-items: baseline; gap: 8px; font: 800 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.held-stappen i { font: italic 400 24px/1 var(--serif); letter-spacing: 0; color: var(--yellow); }
.held-pizza { position: absolute; z-index: 1; right: -9vw; top: 50%; width: min(58vw, 760px); aspect-ratio: 1; transform: translateY(-46%); pointer-events: none; }
.held-pizza img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35)); animation: draai 90s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* ── stappen ───────────────────────────────────────────── */
.app { padding-bottom: 150px; }
.laden { font: italic 400 22px/1.3 var(--serif); color: var(--muted); padding: 48px 0; }
.stap { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 18px; margin: clamp(56px, 8vw, 96px) 0 28px; }
.stap i { font: italic 400 clamp(56px, 7vw, 96px)/.8 var(--serif); color: var(--red); grid-row: span 2; }
.stap h2 { margin: 0; font: 900 clamp(34px, 5.4vw, 80px)/.86 var(--font); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
.stap p { margin: 0; font: italic 400 clamp(18px, 1.6vw, 22px)/1.3 var(--serif); color: var(--muted); max-width: 52ch; }

/* ── de kaart: zoals een menubord ──────────────────────── */
.kaart { border-top: 2px solid var(--ink); }
.pz { display: grid; grid-template-columns: clamp(96px, 13vw, 168px) 1fr auto; align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(16px, 2vw, 24px) 0; border-bottom: 2px solid var(--ink); }
.pz-vlak { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.pz:nth-child(3n+1) .pz-vlak { background: var(--blue); }
.pz:nth-child(3n+2) .pz-vlak { background: var(--red); }
.pz:nth-child(3n) .pz-vlak { background: var(--yellow); }
.pz-vlak svg, .pz-vlak img { width: 82%; height: 82%; object-fit: contain; transition: transform 1.4s var(--enter); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.pz:hover .pz-vlak svg, .pz:hover .pz-vlak img { transform: rotate(40deg) scale(1.05); }
.pz-tekst { min-width: 0; }
.pz-naam { margin: 0; font: 900 clamp(26px, 4vw, 56px)/.9 var(--font); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pz-oms { margin: 8px 0 0; font: italic 400 clamp(17px, 1.5vw, 21px)/1.3 var(--serif); color: var(--muted); }
.pz-rechts { display: grid; justify-items: end; gap: 12px; }
.pz-prijs { font: 900 clamp(22px, 2.4vw, 34px)/1 var(--font); font-stretch: 112%; white-space: nowrap; font-variant-numeric: tabular-nums; }

.voeg { min-height: 48px; padding: 0 22px; border: 0; background: var(--ink); color: var(--cream); font: 800 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--snap); }
.voeg::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateY(101%); transition: transform .5s var(--snap); z-index: -1; }
.voeg:hover::before { transform: none; }
.teller { display: inline-flex; align-items: center; background: var(--ink); color: var(--cream); }
.teller button { width: 48px; height: 48px; border: 0; background: transparent; color: var(--cream); font: 900 22px/1 var(--font); display: grid; place-items: center; transition: background-color .5s var(--snap), color .5s var(--snap); }
.teller button:hover { background: var(--yellow); color: var(--ink); }
.teller button:disabled { opacity: .35; cursor: default; background: transparent; color: var(--cream); }
.teller output { min-width: 34px; text-align: center; font: 900 20px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--yellow); }

/* erbij: sauzen en lookbrood als strakke tegels */
.extra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ex { display: grid; gap: 10px; align-content: space-between; padding: 18px; box-shadow: inset 0 0 0 2px var(--ink); min-height: 170px; transition: background-color .5s var(--snap); }
.ex.aan { background: var(--yellow); }
.ex b { display: block; font: 900 20px/1 var(--font); font-stretch: 112%; text-transform: uppercase; }
.ex small { display: block; margin-top: 6px; font: italic 400 17px/1.25 var(--serif); color: var(--muted); }
.ex-onder { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ex .pz-prijs { font-size: 20px; }
.ex .teller button { width: 40px; height: 40px; }
.ex .voeg { min-height: 40px; padding: 0 16px; }

/* ── ovenmomenten ──────────────────────────────────────── */
.dagen { display: inline-flex; box-shadow: inset 0 0 0 2px var(--ink); margin-bottom: 18px; }
.dagen button { border: 0; background: transparent; padding: 15px 20px; font: 800 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: background-color .5s var(--snap), color .5s var(--snap); }
.dagen button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.momenten { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mo { border: 0; background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); padding: 16px 6px 12px; text-align: center; transition: background-color .5s var(--snap), color .5s var(--snap); }
.mo b { display: block; font: 900 24px/1 var(--font); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.mo small { display: block; margin-top: 6px; font: 800 10px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mo:hover:not(:disabled) { background: var(--yellow); }
.mo.weinig small { color: var(--red); }
.mo:disabled { box-shadow: inset 0 0 0 2px var(--line); color: rgba(22, 22, 29, .3); cursor: default; }
.mo:disabled b { text-decoration: line-through; text-decoration-thickness: 2px; }
.mo[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.mo[aria-pressed="true"] small { color: var(--yellow); }
.geen { font: italic 400 22px/1.3 var(--serif); color: var(--muted); }
.waarom { margin: 18px 0 0; display: flex; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); max-width: 62ch; }
.waarom::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--red); }

/* ── betalen: gegevens links, bon rechts ───────────────── */
.afreken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.velden { display: grid; gap: 18px; }
.veld { display: grid; gap: 8px; }
.veld span { font: 800 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.veld input { font: 500 18px/1.2 var(--font); padding: 16px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--ink); background: var(--cream); color: var(--ink); width: 100%; transition: background-color .5s var(--snap); }
.veld input:focus { background: #fff; outline: none; box-shadow: inset 0 0 0 3px var(--blue); }
.veld small { color: var(--muted); font-size: 13px; }

.bonnetje { background: var(--ink); color: var(--cream); padding: 28px; display: grid; gap: 4px; }
.bonnetje .lbl { font: 800 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.bonnetje .lbl::before { content: ''; width: 8px; height: 8px; background: var(--yellow); }
.bonnetje .rij { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed rgba(255, 248, 230, .25); font-variant-numeric: tabular-nums; }
.bonnetje .moment { font: italic 400 22px/1.25 var(--serif); padding: 4px 0 10px; }
.bonnetje .tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; font: 900 30px/1 var(--font); font-stretch: 125%; text-transform: uppercase; }
.melding:empty { display: none; }
.melding { background: var(--red); color: var(--cream); padding: 14px 16px; font-weight: 700; }
.betaal { margin-top: 16px; min-height: 64px; width: 100%; border: 0; background: var(--yellow); color: var(--ink); font: 900 15px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--snap); }
.betaal::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateY(101%); transition: transform .5s var(--snap); z-index: -1; }
.betaal:not(:disabled):hover { color: var(--cream); }
.betaal:not(:disabled):hover::before { transform: none; }
.betaal:disabled { background: rgba(255, 248, 230, .15); color: rgba(255, 248, 230, .6); cursor: default; }
.klein { font-size: 13px; color: rgba(255, 248, 230, .7); margin: 12px 0 0; }

/* ── balk onderaan ─────────────────────────────────────── */
.balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--ink); color: var(--cream); padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; transform: translateY(110%); transition: transform .6s var(--ease); }
.balk.aan { transform: none; }
.balk span { display: flex; align-items: baseline; gap: 12px; font: 800 12px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.balk b { font: 900 24px/1 var(--font); font-stretch: 125%; color: var(--yellow); letter-spacing: 0; }
.balk button { min-height: 52px; padding: 0 24px; border: 0; background: var(--yellow); color: var(--ink); font: 900 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }

/* ── bon na het betalen ────────────────────────────────── */
.bon { display: grid; gap: 28px; padding-top: 8px; }
.bon-held { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.bon-held .lbl { font: 800 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.bon-held .lbl::before { content: ''; width: 8px; height: 8px; background: var(--yellow); }
.bon-code { display: block; margin-top: 12px; font: 900 clamp(110px, 26vw, 260px)/.8 var(--font); font-stretch: 125%; color: var(--yellow); letter-spacing: -.02em; }
.bon-uur { font: 900 clamp(22px, 3vw, 36px)/1 var(--font); font-stretch: 125%; text-transform: uppercase; }
.bon-status { font: italic 400 clamp(24px, 3vw, 36px)/1.2 var(--serif); max-width: 30ch; margin: 0; }
.bon.mislukt .bon-code { color: var(--cream); }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.stappen li { list-style: none; padding: 16px 12px; font: 800 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-right: 2px solid var(--ink); display: flex; gap: 8px; align-items: baseline; }
.stappen li i { font: italic 400 20px/1 var(--serif); letter-spacing: 0; }
.stappen li:last-child { border-right: 0; }
.stappen li.klaar { background: var(--ink); color: var(--cream); }
.stappen li.nu { background: var(--yellow); color: var(--ink); }
.bon-onder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 32px; align-items: start; }
.bon-onder p { margin: 0; font: italic 400 20px/1.35 var(--serif); color: var(--muted); max-width: 40ch; }
.terug { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--ink); color: var(--cream); font: 800 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; margin-top: 18px; }

@media (max-width: 1023px) {
  .extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afreken, .bon-onder { grid-template-columns: 1fr; }
  .held-pizza { width: 70vw; right: -24vw; opacity: .9; }
}
@media (max-width: 639px) {
  .kop { height: 72px; }
  .kop-tag { font-size: 10px; letter-spacing: .14em; }
  .held-in { padding-top: 12px; max-width: 78%; }
  .held-pizza { width: 88vw; right: -48vw; top: 44%; }
  .kop-tag { display: none; }
  .held-pizza { right: -56vw; }
  .stap { grid-template-columns: 1fr; gap: 10px; }
  .stap i { grid-row: auto; font-size: 44px; }
  .pz-naam { font-size: 24px; font-stretch: 112%; overflow-wrap: normal; }
  .balk span { white-space: nowrap; font-size: 11px; }
  .balk b { font-size: 20px; }
  .balk button { padding: 0 16px; min-height: 48px; }
  .pz { grid-template-columns: 88px 1fr; grid-template-areas: "vlak tekst" "vlak rechts"; row-gap: 12px; }
  .pz-vlak { grid-area: vlak; align-self: start; }
  .pz-tekst { grid-area: tekst; }
  .pz-rechts { grid-area: rechts; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; }
  .ex { min-height: 150px; padding: 14px; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .stappen li:nth-child(2) { border-right: 0; }
  .stappen li:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .bon-held { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }