/* Petit Thai - cadeaubonnen.
   Zelfde visuele systeem als de boekingswidget (views/widget.php): mono tekst,
   serif koppen, scherpe hoeken, hoofdletterlabels, één gecentreerde kaart.
   De waarden hieronder komen letterlijk uit de widget, zodat /gifts en /book
   naast elkaar niet uit elkaar te houden zijn. */

:root{
  --serif:"Libre Baskerville",Baskerville,Georgia,serif;
  --mono:"Courier Prime",ui-monospace,"Courier New",monospace;
  --ink:#111; --muted:#636363; --lijn:#d8d8d8; --papier:#fff; --veld:#f9f9f9;
  --groen:#2a4d36; --oranje:#d8613c; --fout:#b00020;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eee; --muted:#9a9a9a; --lijn:#333; --papier:#121212; --veld:#1a1a1a;
  --groen:#4d7d60; --oranje:#e08a6b;}}
:root[data-theme="dark"]{--ink:#eee;--muted:#9a9a9a;--lijn:#333;--papier:#121212;--veld:#1a1a1a;--groen:#4d7d60;}

*{box-sizing:inherit;margin:0;padding:0}
body{background:var(--papier);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.6;
 min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:3rem 1.15rem}

.container{width:100%;max-width:34rem;border:1px solid var(--lijn);padding:2.4rem 2rem}

.brand{text-align:center;margin-bottom:2rem}
.merk{font-family:var(--serif);font-size:1.8rem;letter-spacing:3px;font-weight:400;line-height:1.2}
.merk a{color:inherit;text-decoration:none}
.plaats{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.streep{width:2.5rem;height:1px;background:var(--ink);margin:1.3rem auto 0}

.step{margin-bottom:1.6rem}
.step-label{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
 margin-bottom:.6rem;display:flex;justify-content:space-between;align-items:baseline}

/* Bedragknoppen: zelfde raster en gedrag als de gastenaantallen in de widget. */
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.amount-btn{background:transparent;border:1px solid var(--lijn);color:var(--ink);padding:.6rem 0;
 font-family:var(--mono);font-size:.95rem;font-weight:700;cursor:pointer;border-radius:0}
.amount-btn:hover{border-color:var(--ink)}
.amount-btn.on{background:var(--ink);color:var(--papier);border-color:var(--ink)}

.form-row{margin-bottom:.8rem}
.form-row label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:1.5px;
 color:var(--muted);margin-bottom:.3rem}
.form-input{width:100%;background:transparent;border:1px solid var(--lijn);color:var(--ink);
 padding:.6rem .7rem;font-family:var(--mono);font-size:14px;border-radius:0}
textarea.form-input{font-family:var(--mono);min-height:4rem;resize:vertical}
input:focus,.form-input:focus{outline:none;border-color:var(--ink)}

.submit-btn{width:100%;background:var(--groen);color:#fff;border:1px solid var(--groen);
 padding:.8rem;font-family:var(--serif);font-size:.72rem;font-weight:400;letter-spacing:2.5px;
 text-transform:uppercase;cursor:pointer;margin-top:1rem;border-radius:0}
.submit-btn:hover:not(:disabled){filter:brightness(1.15)}
.submit-btn:disabled{opacity:.5;cursor:not-allowed}
.submit-btn.ghost{background:transparent;color:var(--groen)}

.notice{padding:.9rem 1rem;font-size:.85rem;border:1px solid var(--lijn);margin-top:1rem;line-height:1.5}
.notice.closed{border-color:var(--fout);color:var(--fout)}
.notice.loading{color:var(--muted);text-align:center}

.confirm{text-align:center;padding:1.4rem 0}
.confirm-title{font-family:var(--serif);font-size:1.7rem;letter-spacing:.5px;color:var(--ink);font-weight:400}
.confirm-text{margin-top:1.4rem;font-size:.95rem;line-height:1.9;color:var(--ink)}
.confirm-text strong{font-weight:700}
.confirm-ref{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--lijn);
 font-size:.64rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}

.intro{font-size:.88rem;line-height:1.75;color:var(--ink);margin-bottom:1.8rem}
.fine{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--lijn);font-size:.76rem;
 line-height:1.7;color:var(--muted)}
.fine li{margin:0 0 .3rem;list-style:none;padding-left:.9rem;position:relative}
.fine li:before{content:"\2014";position:absolute;left:0;color:var(--lijn)}
.pay-note{margin-top:.8rem;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;
 color:var(--muted);text-align:center}

/* ------------------------------------------------- de bon zelf (printbaar) */
.bon{text-align:center}
.bon .waarde{font-family:var(--serif);font-size:3rem;line-height:1.1;margin:.6rem 0 0}
.bon .rest{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.bon .code{font-family:var(--mono);font-size:1.25rem;letter-spacing:4px;font-weight:700;
 border:1px solid var(--lijn);background:var(--veld);padding:.8rem;margin:1.3rem 0}
.bon #qr{display:flex;justify-content:center;margin:1.4rem 0 .4rem}
.bon #qr img,.bon #qr canvas{background:#fff;padding:10px;display:block}
.bon .voor{margin-top:1rem;font-size:.95rem}
.bon .bericht{margin-top:.6rem;font-size:.9rem;color:var(--muted);line-height:1.7}

@media print{
  body{background:#fff;color:#000;padding:0;display:block}
  .container{border-color:#000;max-width:none}
  .noprint{display:none !important}
  .bon .code{background:#fff;border-color:#000}
}

/* ------------------------------------------------- Christmas order form */
.container.wide{max-width:40rem}
.section{margin-bottom:2rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
 border-bottom:1px solid var(--ink);padding-bottom:.35rem;margin-bottom:.4rem}
.section-title{font-family:var(--serif);font-size:1.15rem;font-weight:400}
.section-note{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:right}
.dish{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;
 padding:.75rem 0;border-bottom:1px solid var(--lijn)}
.dish-name{font-weight:700;min-width:0}
.dish-name .v{font-weight:400;color:var(--groen);margin-left:.35rem;font-size:.8rem}
.dish-desc{grid-column:1;font-size:.82rem;color:var(--muted);line-height:1.5;min-width:0}
.dish-side{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:.7rem}
.dish-price{font-size:.9rem;white-space:nowrap}
.qty{display:flex;align-items:stretch;border:1px solid var(--lijn)}
.qty button{background:transparent;border:0;color:var(--ink);width:2.1rem;font-family:var(--mono);
 font-size:1.05rem;cursor:pointer}
.qty button:hover{background:var(--veld)}
.qty input{width:2.6rem;text-align:center;border:0;border-left:1px solid var(--lijn);border-right:1px solid var(--lijn);
 background:transparent;color:var(--ink);font-family:var(--mono);font-size:15px;padding:.45rem 0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dish.on .qty{border-color:var(--ink)}
.dish.on .qty input{font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.slot-grid label{display:block}
.slot-grid input{position:absolute;opacity:0;pointer-events:none}
.slot-grid span{display:block;text-align:center;border:1px solid var(--lijn);padding:.6rem 0;font-weight:700;cursor:pointer}
.slot-grid input:checked + span{background:var(--ink);color:var(--papier);border-color:var(--ink)}
.slot-grid input:focus-visible + span{outline:2px solid var(--groen);outline-offset:2px}
.summary{border:1px solid var(--ink);padding:1rem 1.1rem;margin-top:1.4rem}
.summary-line{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;padding:.15rem 0}
.summary-total{display:flex;justify-content:space-between;font-weight:700;border-top:1px solid var(--lijn);
 margin-top:.5rem;padding-top:.6rem;font-size:1rem}
.summary-empty{font-size:.86rem;color:var(--muted)}
.how{font-size:.86rem;line-height:1.75;margin-bottom:2rem}
.how strong{font-weight:700}
@media (max-width:520px){
  .container{padding:1.8rem 1.1rem;border:0}
  body{padding:1.2rem max(16px,env(safe-area-inset-left,0px))}
  .dish{grid-template-columns:1fr}
  .dish-side{grid-column:1;grid-row:auto;justify-content:space-between;margin-top:.35rem}
  .two{grid-template-columns:1fr}
  .slot-grid{grid-template-columns:repeat(2,1fr)}
}

.fine a{color:inherit}
.summary-line.disc{color:var(--groen);font-weight:700}
.summary-hint{font-size:.78rem;color:var(--muted);margin-top:.4rem}