/* 85-bestelling.css — het besteldetailscherm voor de bakker (/orders/?order_id=).
 *
 * Bord: bestelling-bakker.png (2026-09-11). Band met kruimelpad, titel en de
 * twee hoofdhandelingen; daaronder rail, hoofdkolom en een zijkolom voor geld,
 * klant en "als het misgaat". Alleen tokens uit 00-tokens.css.
 */

.tb-bestelling{background:var(--tb-ground);padding-bottom:var(--tb-ruimte-m);}

/* ---- de band ------------------------------------------------------------ */
.tb-bst-band{background:var(--tb-wash);border-bottom:1px solid var(--tb-line);}
.tb-bst-band-in{max-width:var(--tb-container);margin:0 auto;padding:22px 24px 30px;}

.tb-bst-kruimel{font:500 14px/1.4 var(--tb-sans);color:var(--tb-muted);display:flex;gap:6px;align-items:center;}
.tb-bst-kruimel a{color:var(--tb-body);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tb-border-strong);}
.tb-bst-kruimel a:hover{color:var(--tb-ink);}

.tb-bst-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:10px;flex-wrap:wrap;}
.tb-bst-kop-tekst{min-width:0;}
.tb-bst-titel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tb-bestelling .tb-bst-titel h1{
  font-family:var(--tb-serif);font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  color:var(--tb-ink);margin:0;
}
.tb-bst-onder{margin:8px 0 0;font:400 15px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-reden{margin:4px 0 0;font:600 14px/1.5 var(--tb-sans);color:var(--tb-body);}

.tb-bst-pil{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:var(--tb-r-ctrl);font:700 14px/1 var(--tb-sans);white-space:nowrap;
}
.tb-bst-pil--ok{background:var(--tb-ok-bg);color:var(--tb-ok-ink);box-shadow:inset 0 0 0 1px rgba(9,124,86,.28);}
.tb-bst-pil--wacht{background:var(--tb-warn-bg);color:var(--tb-warn-ink);box-shadow:inset 0 0 0 1px rgba(224,123,57,.42);}
.tb-bst-pil--grijs{background:var(--tb-tint);color:var(--tb-muted);box-shadow:inset 0 0 0 1px var(--tb-border);}

/* ---- knoppen ------------------------------------------------------------- */
.tb-bst-acties{display:flex;gap:12px;flex-wrap:wrap;}
.tb-bst-acties form{margin:0;}
.tb-bst-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--tb-h-ctrl);padding:0 22px;border-radius:var(--tb-r-ctrl);
  font:700 15px/1 var(--tb-sans);text-decoration:none;cursor:pointer;border:0;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.tb-bst-knop--vol{background:var(--tb-action);color:#FFF;}
.tb-bst-knop--vol:hover{background:var(--tb-action-hover);color:#FFF;}
.tb-bst-knop--zacht{background:var(--tb-surface);color:var(--tb-ink);box-shadow:inset 0 0 0 1px var(--tb-border);}
.tb-bst-knop--zacht:hover{box-shadow:inset 0 0 0 1px var(--tb-border-strong);color:var(--tb-ink);}
.tb-bst-knop--rood{background:var(--tb-surface);color:var(--tb-bad-ink);box-shadow:inset 0 0 0 1px rgba(186,53,53,.45);}
.tb-bst-knop--rood:hover{background:var(--tb-bad-bg);color:var(--tb-bad-ink);}
.tb-bst-knop--breed{display:flex;width:100%;}
.tb-bst-knop:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}

.tb-bst-melding{
  max-width:var(--tb-container);margin:20px auto 0;padding:12px 16px;box-sizing:border-box;
  border-radius:var(--tb-r-ctrl);font:500 15px/1.5 var(--tb-sans);
}
.tb-bst-melding--ok{background:var(--tb-ok-bg);color:var(--tb-ok-ink);}
.tb-bst-melding--fout{background:var(--tb-bad-bg);color:var(--tb-bad-ink);}

/* ---- het raster ------------------------------------------------------------ */
.tb-bst-raster{
  max-width:var(--tb-container);margin:28px auto 0;padding:0 24px;box-sizing:border-box;
  display:grid;gap:24px;align-items:start;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"hoofd zij";
}
.tb-bst-raster.heeft-rail{
  grid-template-columns:220px minmax(0,1fr) 340px;
  grid-template-areas:"rail hoofd zij";
}
.tb-bst-hoofd{grid-area:hoofd;min-width:0;display:grid;gap:20px;}
.tb-bst-zij{grid-area:zij;min-width:0;display:grid;gap:20px;}
.tb-bst-rail{grid-area:rail;}

.tb-bst-kaart{
  background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:18px;
  box-shadow:var(--tb-lift);padding:26px 28px;
}
.tb-bestelling .tb-bst-label{
  margin:0 0 18px;font:700 12.5px/1 var(--tb-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tb-soft);
}

/* ---- wanneer --------------------------------------------------------------- */
.tb-bst-wanneer{display:flex;gap:22px;align-items:flex-start;}
.tb-bst-datum{
  flex:0 0 72px;display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--tb-line);border-radius:var(--tb-r-img);overflow:hidden;background:var(--tb-surface);
}
.tb-bst-datum-dag{align-self:stretch;text-align:center;background:var(--tb-action);color:#FFF;font:700 12px/1 var(--tb-sans);letter-spacing:.08em;padding:6px 0;}
.tb-bst-datum-nr{font:600 30px/1.1 var(--tb-serif);color:var(--tb-ink);padding-top:6px;}
.tb-bst-datum-maand{font:400 13px/1 var(--tb-sans);color:var(--tb-muted);padding:2px 0 10px;}
.tb-bst-wanneer-tekst{min-width:0;flex:1;}
.tb-bst-wanneer-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.tb-bestelling .tb-bst-wanneer h2{margin:0;font:700 21px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-bst-wanneer p{margin:8px 0 0;font:400 15.5px/1.6 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-teller{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;white-space:nowrap;
  border-radius:var(--tb-r-ctrl);background:var(--tb-warn-bg);color:var(--tb-warn-ink);
  box-shadow:inset 0 0 0 1px rgba(224,123,57,.5);font:700 14px/1 var(--tb-sans);
}
.tb-bst-teller.is-voorbij{background:var(--tb-tint);color:var(--tb-muted);box-shadow:inset 0 0 0 1px var(--tb-border);}

/* ---- wat er besteld is ----------------------------------------------------- */
.tb-bst-product{display:flex;gap:16px;align-items:flex-start;}
.tb-bst-product-foto{
  flex:0 0 64px;width:64px;height:64px;border-radius:12px;object-fit:cover;
  background:linear-gradient(135deg,var(--tb-sand),var(--tb-cream));
}
.tb-bst-product-tekst{flex:1;min-width:0;}
.tb-bst-product-naam{margin:0;font:700 18px/1.35 var(--tb-sans);color:var(--tb-ink);}
.tb-bst-product-meta{margin:4px 0 0;font:400 15px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-product-prijs{margin:0;font:700 18px/1.35 var(--tb-sans);color:var(--tb-ink);white-space:nowrap;}
.tb-bst-citaat{
  margin:18px 0 0;padding:16px 20px;border-radius:12px;background:var(--tb-ground-alt);
  font:400 15.5px/1.6 var(--tb-sans);color:var(--tb-body);
}
.tb-bst-link{margin:16px 0 0;}
.tb-bst-link a,
.tb-bst-klein a,
.tb-bst-notitie a{color:var(--tb-accent-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ---- verloop ---------------------------------------------------------------- */
.tb-bst-verloop{list-style:none;margin:0;padding:0;}
.tb-bst-verloop li{position:relative;padding:0 0 20px 34px;}
.tb-bst-verloop li:last-child{padding-bottom:0;}
.tb-bst-verloop li::before{
  content:"";position:absolute;left:6px;top:18px;bottom:-2px;width:2px;background:var(--tb-mint-solid);
}
.tb-bst-verloop li:last-child::before{display:none;}
.tb-bst-stip{position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;box-sizing:border-box;}
.tb-bst-verloop .is-klaar .tb-bst-stip{background:var(--tb-ok);}
.tb-bst-verloop .is-nu .tb-bst-stip{background:var(--tb-action);}
.tb-bst-verloop .is-fout .tb-bst-stip{background:var(--tb-bad);}
.tb-bst-verloop .is-straks .tb-bst-stip{background:var(--tb-surface);border:2px solid var(--tb-border-strong);}
.tb-bst-stap{display:block;font:500 16px/1.4 var(--tb-sans);color:var(--tb-ink);}
.tb-bst-verloop .is-nu .tb-bst-stap{font-weight:700;}
.tb-bst-verloop .is-straks .tb-bst-stap{color:var(--tb-muted);}
.tb-bst-stap-sub{display:block;margin-top:2px;font:400 14px/1.4 var(--tb-sans);color:var(--tb-soft);}

/* ---- geld --------------------------------------------------------------------- */
.tb-bst-bedragen{margin:0;}
.tb-bst-bedragen div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;}
.tb-bst-bedragen dt,
.tb-bst-bedragen dd{margin:0;font:400 16px/1.4 var(--tb-sans);color:var(--tb-body);}
.tb-bst-bedragen dd{white-space:nowrap;font-variant-numeric:tabular-nums;}
.tb-bst-bedragen-waarvan dt,
.tb-bst-bedragen-waarvan dd{font-size:14px;color:var(--tb-muted);}
.tb-bst-bedragen-totaal{border-top:1px solid var(--tb-line);border-bottom:1px solid var(--tb-line);margin-top:8px;padding:14px 0 !important;}   /* wint van de 7px van .tb-bst-bedragen div */
.tb-bst-bedragen-totaal dt,
.tb-bst-bedragen-totaal dd{font-weight:700;font-size:18px;color:var(--tb-ink);}

.tb-bst-klein{margin:16px 0 0;font:400 14px/1.6 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-klein strong{color:var(--tb-ink);}
.tb-bst-klein--lijn{border-top:1px solid var(--tb-line);padding-top:16px;}
.tb-bst-notitie{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:var(--tb-ground-alt);font:400 14px/1.6 var(--tb-sans);color:var(--tb-muted);}

/* ---- klant -------------------------------------------------------------------- */
.tb-bst-klant{display:flex;gap:14px;align-items:center;}
.tb-bst-avatar{flex:0 0 48px;height:48px;border-radius:50%;background:var(--tb-avatar-grond);}
.tb-bst-klant-naam{margin:0;font:700 17px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-bst-klant-sub{margin:2px 0 0;font:400 14px/1.4 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-regels{margin:18px 0 0;}
.tb-bst-regels div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;}
.tb-bst-regels dt{margin:0;font:400 15px/1.4 var(--tb-sans);color:var(--tb-muted);}
.tb-bst-regels dd{margin:0;font:500 15px/1.4 var(--tb-sans);color:var(--tb-ink);text-align:right;}
.tb-bst-regels a{color:var(--tb-accent-text);}

/* ---- als het misgaat ---------------------------------------------------------- */
.tb-bst-afmelden{margin-top:12px;}
.tb-bst-afmelden summary{list-style:none;}
.tb-bst-afmelden summary::-webkit-details-marker{display:none;}
.tb-bst-afmelden form{margin-top:12px;display:grid;gap:10px;}
.tb-bst-veld{display:grid;gap:6px;font:500 14px/1.4 var(--tb-sans);color:var(--tb-body);}
.tb-bst-veld textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--tb-r-ctrl);
  border:1px solid var(--tb-border);font:400 15px/1.5 var(--tb-sans);color:var(--tb-ink);background:var(--tb-surface);
}

/* ---- rail -------------------------------------------------------------------- */
.tb-bst-rail{position:sticky;top:var(--tb-sticky-top);}

/* ---- smaller ----------------------------------------------------------------- */
@media (max-width:1199px){
  .tb-bst-raster.heeft-rail{
    grid-template-columns:200px minmax(0,1fr);
    grid-template-areas:"rail hoofd" "rail zij";
  }
}
@media (max-width:899px){
  .tb-bst-band-in{padding:16px 16px 22px;}
  .tb-bestelling .tb-bst-titel h1{font-size:30px;}
  .tb-bst-kop{align-items:stretch;}
  .tb-bst-acties{width:100%;}
  .tb-bst-acties > *{flex:1 1 100%;}
  .tb-bst-acties .tb-bst-knop{width:100%;}
  .tb-bst-raster,
  .tb-bst-raster.heeft-rail{
    padding:0 12px;margin-top:16px;gap:16px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hoofd" "zij" "rail";
  }
  .tb-bst-kaart{padding:20px 18px;}
  .tb-bst-rail{position:static;}
  .tb-bst-wanneer{gap:16px;}
  .tb-bst-datum{flex-basis:60px;}
  .tb-bst-product{flex-wrap:wrap;}
  .tb-bst-melding{margin:12px 12px 0;}
}