/* 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}
}