/* Buiten.studio boekingsmodule — klantzijde (ontwerp Claude Design, sept 2026)
   Kleuren/maten uit de handoff; typografie en basisknoppen uit het thema. */
:root, .bs-bk, .bs-bk-page, .bs-bk-bedankt, .bs-bk-kalender, .bs-bk-kaarten{
  --bk-bg:#f7f5f0; --bk-card:#efece4; --bk-line:#e3ded3; --bk-border:#d9d3c6; --bk-ink:#1f2a24; --bk-muted:#5c645e; --bk-faint:#7a817b;
  --bk-green:#2C392D; --bk-gold:#BE9F56; --bk-gold-dark:#a98a45; --bk-gold-text:#8a6d2a; --bk-ok:#5f8a63; --bk-ok-bg:#e6eee6; --bk-warn-bg:#f3e7c9;
  color:var(--bk-ink); font-size:14px; line-height:1.6;
}
/* ---------- Knopmodifiers (de knoppen zelf zijn thema-knoppen: uk-button-primary/secondary/default) ---------- */
.bs-bk-full{ display:block; width:100%; box-sizing:border-box; text-align:center; }
.bs-bk-offerte-cta .uk-button [data-uk-icon], .bs-bk-offerte-cta .uk-button .uk-icon{ vertical-align:middle; position:relative; top:-1px; }
.bs-bk-outline.uk-button-default{ background:transparent !important; border:1px solid var(--bk-ink) !important; color:var(--bk-ink) !important; }
.bs-bk-outline.uk-button-default:hover{ background:var(--bk-ink) !important; color:#fff !important; }
.bs-bk-knoppen .uk-button{ white-space:nowrap; }
/* ---------- (oude eigen knopfamilie, alleen nog voor de bevestigingsknop in de widget) ---------- */
.bs-bk-btn{ display:inline-block; padding:12px 18px; border-radius:999px; background:var(--bk-green); color:#fff !important; font-size:13px; font-weight:600; line-height:1.3; text-decoration:none !important; border:1px solid var(--bk-green); cursor:pointer; box-sizing:border-box; transition:background .15s,color .15s; }
.bs-bk-btn:hover{ background:var(--bk-ink); border-color:var(--bk-ink); }
.bs-bk-btn--accent{ background:var(--bk-gold); border-color:var(--bk-gold); color:var(--bk-ink) !important; }
.bs-bk-btn--accent:hover{ background:var(--bk-gold-dark); border-color:var(--bk-gold-dark); }
.bs-bk-btn--sec{ background:transparent; border-color:var(--bk-ink); color:var(--bk-ink) !important; }
.bs-bk-btn--sec:hover{ background:var(--bk-ink); color:#fff !important; }
.bs-bk-btn--wit{ background:#fff; border-color:#fff; color:var(--bk-ink) !important; }
.bs-bk-btn--groot{ display:block; width:100%; text-align:center; padding:16px 18px; font-size:14px; }
.bs-bk-btn--klein{ padding:8px 14px; font-size:12px; }
.bs-bk-knoppen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:center; }
.bs-bk-link{ color:var(--bk-gold-text) !important; font-weight:600; font-size:13px; text-decoration:none !important; }
.bs-bk-link:hover{ text-decoration:underline !important; }
.bs-bk-eyebrow{ display:block; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--bk-gold-text); font-weight:600; margin-bottom:4px; }
.bs-bk-eyebrow--ok{ color:var(--bk-ok); }
.bs-bk-badge{ display:inline-block; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.2; }
.bs-bk-badge--ok{ background:var(--bk-ok-bg); color:var(--bk-green); }
.bs-bk-badge--bijna{ background:var(--bk-warn-bg); color:var(--bk-gold-text); }
.bs-bk-badge--vol{ background:var(--bk-line); color:var(--bk-faint); }
.bs-bk-klein{ font-size:13px; color:var(--bk-muted); }
.bs-bk-info{ background:var(--bk-card); border-radius:12px; padding:14px 18px; font-size:14px; margin:14px 0; }
.bs-bk-msg{ margin:8px 0 0; font-size:13px; color:var(--bk-gold-text); min-height:1em; }
.bs-bk-msg.is-fout{ color:#b32d2e; }
.bs-bk-msg.is-ok{ display:inline-block; background:var(--bk-ok-bg); color:var(--bk-green); padding:12px 16px; border-radius:12px; font-weight:600; margin-top:12px; }
.bs-bk-terug{ margin:0 0 18px; }
.bs-bk-page--account > .bs-bk-eyebrow:first-child{ display:none; }
/* Bedankpagina: Woo's eigen "Bedankt. Je bestelling is ontvangen." is dubbel */
.bs-bk-bedankt ~ .woocommerce-thankyou-order-received{ display:none; }
.bs-bk-bedankt .bs-bk-card{ margin-top:18px; }
.bs-bk-hp{ position:absolute !important; left:-9999px; opacity:0; }
.bs-bk-velden{ display:flex; gap:10px; flex-wrap:wrap; }
.bs-bk-velden > *{ flex:1 1 160px; min-width:0; }
.bs-bk input[type=text], .bs-bk input[type=email], .bs-bk-page input[type=text], .bs-bk-page select{ width:100%; box-sizing:border-box; padding:12px 16px; border:1px solid var(--bk-border); border-radius:10px; background:#fff; font:inherit; font-size:14px; color:var(--bk-ink); height:auto; }
.bs-bk input:focus, .bs-bk-page input:focus, .bs-bk-page select:focus{ outline:none; border-color:var(--bk-gold-text); box-shadow:0 0 0 3px rgba(190,159,86,.25); }

/* ---------- Widget op de productpagina ---------- */
.bs-bk{ margin:8px 0 24px; padding-top:22px; border-top:1px solid var(--bk-line); text-align:left; }
.bs-bk-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.bs-bk-kop strong{ font-size:15px; }
.bs-bk-kop span{ font-size:12px; color:var(--bk-faint); }
.bs-bk-datums{ display:flex; flex-direction:column; gap:8px; }
.bs-bk-datum{ display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid var(--bk-line); border-radius:12px; background:#fff; text-align:left; cursor:pointer; font:inherit; color:var(--bk-ink); transition:border-color .15s,background .15s; }
.bs-bk-datum:hover{ border-color:var(--bk-border); }
.bs-bk-datum[aria-checked=true]{ border-color:var(--bk-ink); background:var(--bk-card); }
.bs-bk-datum.is-vol{ opacity:.65; }
.bs-bk-radio{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--bk-border); background:#fff; box-sizing:border-box; }
.bs-bk-datum[aria-checked=true] .bs-bk-radio{ border:4px solid var(--bk-ink); }
.bs-bk-datum-tekst{ display:flex; flex-direction:column; min-width:0; }
.bs-bk-datum-tekst strong{ font-size:14px; font-weight:600; line-height:1.3; }
.bs-bk-datum-tekst small{ font-size:12px; color:var(--bk-gold-text); }
.bs-bk-datum[aria-checked=true] .bs-bk-datum-tekst small{ color:var(--bk-gold-text); }
.bs-bk-datum.is-vol .bs-bk-datum-tekst small{ color:var(--bk-faint); }
.bs-bk-datums.is-open .bs-bk-meer{ display:grid; }
.bs-bk-datums.is-open{ max-height:400px; overflow:auto; padding-right:2px; }
.bs-bk-toon{ display:block; width:100%; margin-top:8px; padding:10px; border:1px dashed var(--bk-border); border-radius:12px; background:transparent; color:var(--bk-gold-text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.bs-bk-form{ margin-top:16px; }
.bs-bk-aantal{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 14px; }
.bs-bk-aantal strong{ display:block; font-size:14px; }
.bs-bk-sub{ font-size:12px; color:var(--bk-faint); }
.bs-bk-stepper{ display:inline-flex; align-items:center; border:1px solid var(--bk-border); border-radius:999px; padding:3px; background:#fff; }
.bs-bk-stepper button{ width:38px; height:38px; border-radius:50%; border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--bk-ink); line-height:1; }
.bs-bk-stepper button:hover{ background:var(--bk-card); }
.bs-bk-stepper input{ width:40px; text-align:center; border:0; background:transparent; font:inherit; font-size:15px; font-weight:600; -moz-appearance:textfield; padding:0; }
.bs-bk-stepper input::-webkit-inner-spin-button, .bs-bk-stepper input::-webkit-outer-spin-button{ -webkit-appearance:none; }
.bs-bk-actie{ display:flex; gap:10px; align-items:center; }
.bs-bk .bs-bk-boek{ flex:1; border-radius:999px !important; padding:0 22px; line-height:52px; background:var(--bk-green) !important; color:#fff !important; border:0; font-weight:600; font-size:14px; }
.bs-bk .bs-bk-boek:hover{ background:var(--bk-ink) !important; }
.bs-bk .bs-bk-boek[disabled]{ opacity:.5; cursor:not-allowed; }
.bs-bk-hint{ font-size:12px; color:var(--bk-faint); margin:8px 0 0; }
.bs-bk-hint.is-leeg{ display:none; }
.bs-bk-wachtlijst{ background:var(--bk-card); border-radius:12px; padding:16px 18px; margin-top:14px; }
.bs-bk-wachtlijst p{ margin:0 0 12px; }
.bs-bk-wachtlijst .bs-bk-btn{ margin-top:10px; }
.bs-bk-trust{ list-style:none; margin:16px 0 0; padding:0; font-size:12px; color:var(--bk-muted); }
.bs-bk-trust li{ padding-left:18px; position:relative; margin:2px 0; }
.bs-bk-trust li::before{ content:"✓"; position:absolute; left:0; color:var(--bk-ok); font-weight:700; }
.bs-bk-trust a{ color:inherit; text-decoration:none; }
.bs-bk-sterren{ color:var(--bk-gold); letter-spacing:1px; }
.bs-bk-notify-toggle{ display:inline-block; margin-top:14px; }
.bs-bk-notify{ background:var(--bk-card); border-radius:12px; padding:16px 18px; margin-top:12px; }
.bs-bk-notify .bs-bk-btn{ flex:0 0 auto; }
.bs-bk-geen{ background:var(--bk-card); border-radius:12px; padding:18px; margin-bottom:6px; }
.bs-bk-geen p{ margin:6px 0 0; font-size:13px; color:var(--bk-muted); }
.bs-bk-fallback{ background:var(--bk-card); border-radius:16px; padding:22px; }
/* het favorieten-hartje naast de boek-knop (buiten-favorieten wikkelt knop+hartje in .bf-atc-row) */
.bs-bk .bf-atc-row{ width:100%; }

/* ---------- Kaarten & feiten (bedankt / boekingspagina / account) ---------- */
.bs-bk-card{ background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 1px 3px rgba(31,42,36,.08); margin:0 0 16px; }
.bs-bk-card--zand{ background:var(--bk-card); box-shadow:none; }
.bs-bk-card--rand{ background:transparent; box-shadow:none; border:1px dashed var(--bk-border); }
.bs-bk-card--leeg{ background:var(--bk-card); box-shadow:none; }
.bs-bk-card h2, .bs-bk-card h3{ margin:0 0 12px; }
.bs-bk-feiten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:14px 24px; margin:14px 0 20px; font-size:14px; }
.bs-bk-feiten--3{ margin-bottom:24px; }
.bs-bk-bedankt{ max-width:640px; margin:0 auto 40px; }
.bs-bk-bedankt h1{ margin:0 0 20px; }
.bs-bk-page{ max-width:720px; }
.bs-bk-page h1{ margin:0 0 14px; }
.bs-bk-banner{ border-radius:16px; padding:24px 28px; margin:0 0 24px; }
.bs-bk-banner--groen{ background:var(--bk-green); color:var(--bk-bg); }
.bs-bk-banner--groen h2, .bs-bk-banner--groen strong{ color:#fff; }
.bs-bk-banner--groen p{ color:rgba(255,255,255,.85); margin:6px 0 0; }
.bs-bk-banner--goud{ background:var(--bk-warn-bg); }
.bs-bk-status{ border-radius:12px; padding:14px 18px; margin:0 0 20px; font-weight:600; }
.bs-bk-status--ok{ background:var(--bk-ok-bg); color:var(--bk-green); }
.bs-bk-voortgang-kop{ display:flex; justify-content:space-between; align-items:center; }
.bs-bk-voortgang-kop span{ color:var(--bk-gold-text); font-weight:600; }
.bs-bk-balk{ height:6px; background:var(--bk-card); border-radius:999px; margin:10px 0; overflow:hidden; }
.bs-bk-balk span{ display:block; height:100%; background:var(--bk-gold); border-radius:999px; }
.bs-bk-voortgang p{ margin:0; font-size:13px; color:var(--bk-muted); }
.bs-bk-sectie-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:24px 0 12px; }
.bs-bk-sectie-kop h2, .bs-bk-sectie-kop h3{ margin:0; }
.bs-bk-sectie-kop span{ font-size:13px; color:var(--bk-faint); }
.bs-bk-persoon .bs-bk-velden{ margin-bottom:10px; }
.bs-bk-persoon .bs-bk-velden:last-child{ margin-bottom:0; }
.bs-bk-persoon .bs-bk-velden > *{ margin:0; height:46px; box-sizing:border-box; }
.bs-bk-page select{ height:46px; line-height:normal; padding:0 40px 0 16px; }
.bs-bk-deelnemers .bs-bk-btn{ margin-top:4px; }
.bs-bk-lijst{ list-style:none; margin:0; padding:0; }
.bs-bk-lijst li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--bk-line); }
.bs-bk-lijst li:last-child{ border:0; }
.bs-bk-lijst span{ color:var(--bk-muted); font-size:13px; }
.bs-bk-twee{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:24px; }
.bs-bk-twee .bs-bk-card{ margin:0; }
.bs-bk-twee p{ font-size:13px; color:var(--bk-muted); }
.bs-bk-verplaats select, .bs-bk-verplaats textarea{ margin-bottom:10px; }
.bs-bk-verplaats textarea{ width:100%; box-sizing:border-box; padding:12px 16px; border:1px solid var(--bk-border); border-radius:10px; font:inherit; font-size:14px; min-height:70px; }
.bs-bk-contact{ margin-top:28px; font-size:13px; color:var(--bk-faint); }
.bs-bk-contact a{ color:var(--bk-gold-text); font-weight:600; text-decoration:none; margin-left:6px; }
.bs-bk-recepten, .bs-bk-producten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:16px; margin:0 0 24px; }
.bs-bk-recept{ display:block; color:inherit !important; text-decoration:none !important; }
.bs-bk-recept img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; display:block; margin-bottom:8px; }
.bs-bk-product{ background:#fff; border-radius:16px; padding:12px; box-shadow:0 1px 3px rgba(31,42,36,.08); }
.bs-bk-product a{ color:inherit !important; text-decoration:none !important; }
.bs-bk-product img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:block; margin-bottom:10px; }
.bs-bk-product strong{ display:block; font-size:14px; }
.bs-bk-product-voet{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px; }

/* ---------- Kalender & kaarten ---------- */
.bs-bk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.bs-bk-chip{ padding:8px 16px; border-radius:999px; border:1px solid var(--bk-border); background:transparent; color:var(--bk-muted); font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.bs-bk-chip.is-actief{ background:var(--bk-green); border-color:var(--bk-green); color:#fff; }
.bs-bk-maand{ margin-bottom:28px; }
.bs-bk-maand h2 small{ font-size:14px; color:var(--bk-faint); font-weight:400; margin-left:8px; }
.bs-bk-rij{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:14px; background:#fff; border-radius:12px; padding:12px 16px; margin-bottom:8px; box-shadow:0 1px 3px rgba(31,42,36,.06); color:inherit !important; text-decoration:none !important; }
.bs-bk-rij.is-vol{ opacity:.65; }
.bs-bk-rij[hidden]{ display:none; }
.bs-bk-dag{ display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--bk-line); padding-right:12px; }
.bs-bk-dag small{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--bk-faint); }
.bs-bk-dag strong{ font-size:26px; font-weight:500; line-height:1; }
.bs-bk-rij-tekst{ display:flex; flex-direction:column; min-width:0; }
.bs-bk-rij-tekst strong{ font-size:15px; font-weight:600; }
.bs-bk-rij-tekst small{ font-size:12px; color:var(--bk-muted); }
.bs-bk-kaarten{ margin:40px 0; }
.bs-bk-kaarten-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; }
.bs-bk-kaarten-kop h2{ margin:0; }
.bs-bk-kaarten-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.bs-bk-kaart{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; color:inherit !important; text-decoration:none !important; box-shadow:0 1px 3px rgba(31,42,36,.06); }
.bs-bk-kaart-foto{ display:block; aspect-ratio:4/3; background:var(--bk-line); }
.bs-bk-kaart-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-bk-kaart .bs-bk-eyebrow{ margin:14px 14px 4px; }
.bs-bk-kaart strong{ margin:0 14px; font-size:14px; }
.bs-bk-kaart-voet{ display:flex; justify-content:space-between; align-items:center; margin:8px 14px 14px; font-size:13px; }

/* ---------- Winkelmand / afrekenen ---------- */
.bs-bk-cart-datum{ display:block; color:var(--bk-gold-text); font-size:13px; font-weight:600; margin-bottom:2px; }
.bs-bk-cart-qty{ display:block; font-size:13px; color:var(--bk-muted); white-space:nowrap; }
.bs-bk-cart-wijzig{ display:inline-block; font-size:12px; color:var(--bk-gold-text) !important; font-weight:600; margin-top:4px; }
.bs-bk-cart-notice{ margin:16px 0; font-size:13px; color:var(--bk-muted); }
.woocommerce-checkout .bs-bk-info{ margin:10px 0 24px; }
.bs-bk-reserve-note{ font-size:12px; color:var(--bk-faint); text-align:center; margin:12px 0 0; }
.woocommerce-checkout .bs-bk-adresveld{ display:none; }
.woocommerce-checkout .bs-bk-adres-open .bs-bk-adresveld{ display:block; }
.bs-bk-adres-toggle{ display:inline-block; margin:4px 0 16px; }

/* ---------- Mijn account → Workshops ---------- */
.bs-bk-acc-kaart{ background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 1px 3px rgba(31,42,36,.08); margin:0 0 16px; }
.bs-bk-acc-kaart--uit{ opacity:.85; background:var(--bk-card); box-shadow:none; }
.bs-bk-acc-kaart--uit h3{ color:var(--bk-muted); }
.bs-bk-acc-kop{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.bs-bk-acc-kop h3{ margin:0 0 4px; font-size:22px; }
.bs-bk-acc-kop p{ margin:0; color:var(--bk-muted); font-size:14px; }
.bs-bk-acc-lijst .bs-bk-acc-rij{ display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--bk-line); }
.bs-bk-acc-rij img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; }
.bs-bk-acc-rij p{ margin:2px 0 0; font-size:13px; color:var(--bk-muted); }
.bs-bk-acc-links a{ margin-right:14px; }
.woocommerce-account .woocommerce-MyAccount-content h2 + .bs-bk-acc-kaart{ margin-top:4px; }

@media (max-width:640px){
  .bs-bk-card, .bs-bk-acc-kaart{ padding:18px; }
  .bs-bk-banner{ padding:18px; }
  .bs-bk-aantal{ flex-wrap:wrap; }
  .bs-bk-actie{ flex-wrap:wrap; }
  .bs-bk-knoppen .uk-button{ flex:1 1 auto; text-align:center; }
  .bs-bk-rij{ grid-template-columns:44px 1fr; }
  .bs-bk-rij .bs-bk-badge{ grid-column:2; justify-self:start; }
}


/* ---------- "Je chef" in Mijn account → Workshops ---------- */
.bs-bk-chef{ display:flex; gap:14px; align-items:center; background:var(--bk-card); border-radius:12px; padding:14px 18px; margin:14px 0; }
.bs-bk-chef-avatar{ width:48px; height:48px; border-radius:50%; flex:none; background:var(--bk-green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; overflow:hidden; }
.bs-bk-chef-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-bk-chef-label{ display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--bk-gold-text); font-weight:700; margin:0 0 2px; }
.bs-bk-chef strong{ display:block; font-size:16px; color:var(--bk-ink); }
.bs-bk-chef p{ margin:2px 0 0; font-size:13px; color:var(--bk-muted); line-height:1.45; }
.bs-bk-chef--leeg .bs-bk-chef-avatar{ background:var(--bk-border); color:var(--bk-muted); }
.bs-bk-chef--leeg strong{ color:var(--bk-muted); }