/* Kassa-CSS (contract §14): het afrekenblok van WooCommerce in de vorm van afrekenen.html, plus de bevestiging,
   je briefje en Mijn bestellingen. Alleen op is_checkout(), is_cart() en is_account_page(). Selectors beginnen
   met body om de stijlen van de WooCommerce-blokken te overstemmen. */

/* Wat de kassabon of de spec vervangt: overzicht van WooCommerce, gastmelding, landveld (alleen NL), uitleg bij het adres. */
body .kassa-main .wc-block-checkout__sidebar,body .kassa-main .checkout-order-summary-block-fill-wrapper,
body .kassa-main .wc-block-checkout__guest-checkout-notice,body .kassa-main .wc-block-components-address-form__country,
body .kassa-main #billing-fields .wc-block-components-checkout-step__description{display:none!important}
body .kassa-main .wc-block-components-sidebar-layout{display:block;margin:0}
body .kassa-main .wc-block-components-main{width:100%;padding:0;box-sizing:border-box}
body .kassa-main .wp-block-woocommerce-checkout{margin:0;padding:0}

/* Stappen: korstkleurige kop met een rond nummer, stippellijn ertussen (legend en .nr van het prototype). */
body .kassa-main .wc-block-components-form .wc-block-components-checkout-step{margin:0 0 6px;padding:18px 0 4px;border-top:2px dotted var(--stip)}
body .kassa-main .wc-block-components-form .wc-block-components-checkout-step:first-of-type{border-top:0;padding-top:4px}
body .kassa-main .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number{padding-left:0}
body .kassa-main .wc-block-components-checkout-step__heading-container{margin-bottom:6px}
body .kassa-main .wc-block-components-checkout-step__title{display:flex;align-items:center;gap:10px;margin:0;font:700 22px/1.2 var(--slab);color:var(--korst)}
body .kassa-main .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title:before{
  content:counter(checkout-step);position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;
  border-radius:50%;background:var(--terracotta-donker);color:var(--bord-tekst);font:700 18px/1 var(--slab);transform:none}
body .kassa-main .wc-block-components-checkout-step__description{font-size:16px;color:var(--tekst-zacht)}
body .kassa-main .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title:empty{display:none}

/* Velden: label boven het veld (geen zwevend label), 52 px hoog, ronding 12 (.label en .veld van het prototype). */
body .kassa-main .wc-block-components-form .wc-block-components-text-input,body .kassa-main .wc-blocks-components-select{display:flex;flex-direction:column;margin-top:14px;line-height:1.3;white-space:normal}
body .kassa-main .wc-block-components-form .wc-block-components-text-input label,body .kassa-main .wc-blocks-components-select .wc-blocks-components-select__label{
  position:static!important;order:-1;transform:none!important;max-width:none;margin:0 0 6px;font:600 17px/1.3 var(--sans)!important;color:var(--tekst)}
body .kassa-main .wc-blocks-components-select .wc-blocks-components-select__container{display:flex;flex-direction:column;height:auto;background:transparent;border:0}
body .kassa-main .wc-block-components-form .wc-block-components-text-input input,body .kassa-main .wc-blocks-components-select .wc-blocks-components-select__select,
body .kassa-main .wc-block-components-textarea{box-sizing:border-box;width:100%;min-height:52px;height:auto;padding:10px 14px!important;
  font:600 18px/1.3 var(--sans);color:var(--tekst);background:#FFFDF8;border:1.5px solid var(--veldrand);border-radius:12px;box-shadow:none}
body .kassa-main .wc-blocks-components-select .wc-blocks-components-select__select{padding-right:42px!important}
body .kassa-main .wc-blocks-components-select svg{top:auto;bottom:14px;right:14px;fill:var(--korst)}
body .kassa-main .wc-block-components-textarea{min-height:96px;font-weight:400}
body .kassa-main .wc-block-components-text-input input:focus,body .kassa-main .wc-blocks-components-select__select:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:var(--korst)}
body .kassa-main .hulp{margin-top:6px}
/* De hulpregel onder het telefoonnummer staat in de adresvorm (flex met regelafbreking) als broertje van het veld. Zonder deze twee regels staat hij naast het veld
   en is het veld maar half breed: veld en hulpregel krijgen elk een eigen volle regel (eindcontrole M-1). */
body .kassa-main .wc-block-components-address-form__phone{flex:1 1 100%;max-width:100%}
body .kassa-main .wc-block-components-address-form>.hulp{flex:0 0 100%;margin:6px 0 0}
/* WooPayments (alleen live actief) zet het e-mailveld met een id-selector op inline-block, zodat order:-1 van het label niet meer werkt en het label onder
   het veld staat. Dezelfde id-selectors, met body ervoor, geven het veld zijn kolom terug, ook als dat bestand na dit thema laadt. */
body #contact-fields .wc-block-components-text-input,body .woopay-billing-email .wc-block-components-text-input{display:flex;flex-direction:column}
/* WooPayments: de teller bij de betaallogo's ("+ 2") was 11 px; minstens 16 px, de breedte groeit mee met de tekst. */
body .payment-methods--logos-count{box-sizing:border-box;width:auto;min-width:38px;padding:0 6px;font-size:16px}

/* Vinkje "Bericht voor de bakker toevoegen" en de voorwaardenregel. */
body .kassa-main .wc-block-components-checkbox label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:17px}
body .kassa-main .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{width:24px;height:24px;margin:0;border:1.5px solid var(--veldrand);border-radius:6px;accent-color:var(--terracotta)}
body .kassa-main .wc-block-checkout__terms{margin:16px 0 0;padding:0;border:0;font-size:16px;line-height:1.45;color:var(--tekst-zacht)}

/* Betalen: kaarten zoals .methode, de gekozen met een korstrand en een gouden streep links. */
body .kassa-main .wc-block-components-radio-control--highlight-checked{border:0}
body .kassa-main .wc-block-components-radio-control--highlight-checked:after{display:none}
body .kassa-main .wc-block-components-radio-control-accordion-option{margin-top:10px;border:1.5px solid var(--veldrand);border-radius:12px;background:#FFFDF8;box-shadow:none}
body .kassa-main .wc-block-components-radio-control-accordion-option--checked-option-highlighted{border:2px solid var(--korst);background:var(--papier-licht);box-shadow:inset 4px 0 0 var(--goud)}
body .kassa-main .wc-block-components-radio-control__option{min-height:60px;padding:12px 14px 12px 48px;font:700 18px/1.3 var(--slab);color:var(--korst)}
body .kassa-main .wc-block-components-radio-control__input{left:14px;width:22px;height:22px;accent-color:var(--terracotta)}
body .kassa-main .wc-block-components-radio-control-accordion-content{padding:0 14px 12px 48px;font-size:16px;color:var(--tekst-zacht)}

/* Knop "Bestellen en betalen": de primaire knop (.knop.vol). */
body .kassa-main .wc-block-checkout__actions{margin-top:16px}
body .kassa-main .wc-block-checkout__actions_row{display:block}
body .kassa-main .wc-block-components-checkout-place-order-button{width:100%;min-height:56px;padding:12px 22px;border:0;border-radius:12px;background:var(--terracotta);color:#FFF7E8;
  font:700 19px/1.15 var(--sans);box-shadow:0 3px 0 var(--terracotta-donker)}
body .kassa-main .wc-block-components-checkout-place-order-button:hover{background:var(--terracotta-donker)}

/* Meldingen van WooCommerce (bijvoorbeeld buiten het bezorggebied, contract §17.3). */
body .kassa-main .wc-block-components-notice-banner{border-radius:12px;font-size:17px}
body .kassa-main .wc-block-components-notice-banner a{font-weight:700}
/* Buiten het bezorggebied zegt onze melding al wat er aan de hand is (besluit Harm, 10 okt): de melding "Er zijn geen verzendopties beschikbaar voor dit adres" van WooCommerce verdwijnt, alleen die ene. */
body .kassa-main .wc-block-components-shipping-rates-control__no-results-notice{display:none}

/* ===== Nieuwe kassa (ontwerp 18 okt 2026): stap 1 Wanneer, 2 Waar en 3 Wie zijn eigen velden (plugin includes/kassa.php, assets/js/kassa.js)
   boven het afrekenblok; dat blok houdt alleen Betalen (stap 4), de voorwaardenregel en de knop. De stappen van WooCommerce voor contact,
   adres, verzenden, extra velden en bericht blijven in de pagina (kassa.js vult ze via de stores) maar zijn niet zichtbaar. ===== */
body .kassa-main :is(#contact-fields,#billing-fields,#shipping-fields,#shipping-option,#order-fields,#order-notes,
  .wp-block-woocommerce-checkout-shipping-method-block,.wp-block-woocommerce-checkout-pickup-options-block,.wc-block-checkout__use-address-for-billing){display:none!important}
body .kassa-main #payment-method{border-top:2px dotted var(--stip);padding-top:18px}
body .kassa-main .wc-block-checkout__form--with-step-numbers #payment-method .wc-block-components-checkout-step__title:before{content:"4"}
body .kassa-main .wc-block-checkout__terms{order:2}

.kassa-stappen{min-width:0}
.kassa-stappen fieldset{border:0;margin:0;padding:18px 0 8px;border-top:2px dotted var(--stip);min-width:0}
.kassa-stappen fieldset:first-of-type{border-top:0;padding-top:4px}
.kassa-stappen legend{display:flex;align-items:center;gap:10px;float:left;width:100%;padding:0;margin-bottom:4px;font:700 22px/1.2 var(--slab);color:var(--korst)}
.kassa-stappen legend+*{clear:both}
.kassa-stappen .label{display:block;margin:14px 0 6px;font-weight:600;font-size:17px;line-height:1.3}
.kassa-stappen .veld{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:52px;padding:10px 14px;font:600 18px var(--sans);color:var(--tekst);
  background:#FFFDF8;border:1.5px solid var(--veldrand);border-radius:12px}
.kassa-stappen .veld:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:var(--korst)}
.kassa-stappen .veld[aria-invalid=true]{border:2px solid var(--terracotta-donker)}
.kassa-stappen textarea.veld{min-height:96px;font-weight:400;resize:vertical}
.kassa-stappen .hulp{margin-top:6px;font-size:16px;line-height:1.4;color:var(--tekst-zacht)}
.kassa-stappen .fout{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font:600 16px/1.35 var(--sans);color:var(--terracotta-donker)}
.kassa-stappen .fout:before{content:"!";flex:0 0 20px;height:20px;border-radius:50%;background:var(--terracotta-donker);color:var(--bord-tekst);font:700 14px/20px var(--sans);text-align:center}
.kassa-stappen [hidden]{display:none!important}
.kassa-stappen .adresrij{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.85fr);gap:10px}
.kassa-stappen .adresrij .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kassa-stappen .twee{display:grid;grid-template-columns:minmax(0,1fr);gap:0 10px}
@media (min-width:600px){.kassa-stappen .twee{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Keuzeknoppen (variant 2: korst met gouden onderrand en vinkje). */
.kassa-stappen .daglijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.kassa-stappen .blokken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.kassa-stappen .chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px;
  border-radius:10px;border:1.5px solid var(--veldrand);background:transparent;color:var(--tekst);font:600 17px/1 var(--sans);text-align:center;cursor:pointer}
.kassa-stappen .chip b{font:700 18px/1 var(--slab)}
.kassa-stappen .chip span{font-size:16px;line-height:1.1}
.kassa-stappen .chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.kassa-stappen .chip .vinkje{display:none;position:absolute;top:6px;right:6px;color:var(--goud)}
.kassa-stappen .chip:has(input:checked){background:var(--korst);border:2px solid var(--korst);color:var(--bord-tekst);font-weight:700;box-shadow:inset 0 -4px 0 var(--goud)}
.kassa-stappen .chip:has(input:checked) b{color:var(--bord-tekst)}
.kassa-stappen .chip:has(input:checked) .vinkje{display:block}
.kassa-stappen .chip:has(input:focus-visible){outline:3px solid var(--terracotta);outline-offset:2px}
.kassa-stappen .groep[aria-invalid=true] .chip{border-color:var(--terracotta-donker);border-width:2px}
.kassa-stappen .vinkje{width:14px;height:14px;flex:none}

/* Adres: gevonden regel, zoeken, niet gevonden, bezorggebied. */
.kassa-stappen .uitkomst{margin-top:12px}
.kassa-stappen .zoeken{padding:12px 0;font-size:17px;color:var(--tekst-zacht)}
.kassa-stappen .adresregel{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:12px;background:#FFFDF8}
.kassa-stappen .adresregel b{display:block;font:700 18px/1.25 var(--slab);color:var(--korst);overflow-wrap:anywhere}
.kassa-stappen .adresregel span{font-size:17px;line-height:1.35}
.kassa-stappen .adresregel .vinkje{width:20px;height:20px;color:var(--terracotta-donker)}
.kassa-stappen .melding{max-width:none;margin:0;padding:12px 14px;border-radius:12px;background:var(--papier-licht);border-left:4px solid var(--terracotta-donker);font-size:17px}
.kassa-stappen .gebied{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--papier-licht);border-left:4px solid var(--goud);font-size:17px}
.kassa-stappen .gebied.ja{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--korst)}
.kassa-stappen .gebied.ja .vinkje{width:18px;height:18px;color:var(--terracotta-donker)}
.kassa-stappen .gebied.nee{border-left-color:var(--terracotta-donker)}
.kassa-stappen .knop.klein{min-height:44px;margin-top:10px;padding:8px 16px;font-size:17px}
.kassa-stappen .tekstlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:700 17px/1.2 var(--sans);color:var(--terracotta-donker);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.kassa-stappen .tekstlink:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:4px}
.kassa-stappen .uitklap{margin-top:10px}
.kassa-stappen .uitklap summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 17px var(--sans);color:var(--terracotta-donker);cursor:pointer;list-style:none}
.kassa-stappen .uitklap summary::-webkit-details-marker{display:none}
.kassa-stappen .uitklap summary:before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1.5px solid var(--veldrand);border-radius:6px;font-size:18px;color:var(--korst)}
.kassa-stappen .uitklap[open] summary:before{content:"\2212"}
.kassa-stappen .uitklap summary:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:4px}

/* Lijstje bovenaan als er iets ontbreekt. */
.kassa-stappen .foutblok{margin:8px 0 14px;padding:12px 14px;border-radius:12px;background:var(--papier-licht);border-left:4px solid var(--terracotta-donker)}
.kassa-stappen .foutblok:focus{outline:3px solid var(--terracotta);outline-offset:2px}
.kassa-stappen .foutblok h3{margin:0;font:700 19px/1.2 var(--slab);color:var(--korst)}
.kassa-stappen .foutblok ul{margin:4px 0 0;padding-left:20px}
.kassa-stappen .foutblok a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;color:var(--terracotta-donker)}

/* Bevestiging: account aanmaken als kaartje in de stijl van .vervolg. */
body .wp-block-woocommerce-order-confirmation-create-account{padding:14px 16px;border:1.5px solid var(--lijn);border-left:4px solid var(--goud);border-radius:12px;background:var(--papier-licht)}
body .wp-block-woocommerce-order-confirmation-create-account h2{font:700 19px/1.25 var(--slab);color:var(--korst)}
body .wp-block-woocommerce-order-confirmation-create-account .wc-block-components-button{min-height:52px;border-radius:12px;background:var(--terracotta);color:#FFF7E8;font-weight:700}

/* Mijn bestellingen (WooCommerce-shortcode): kaart, velden en knoppen in de huisstijl; tabbladen als .tabs. */
/* Alle accountpagina's: minstens 32 px tussen de laatste knop of regel en de voet. */
body.woocommerce-account .account{padding-bottom:40px}
body.woocommerce-account .woocommerce-form-login,body.woocommerce-account .woocommerce-form-register{max-width:480px;margin:16px auto;padding:18px 16px 22px;background:#FFFCF6;border:1.5px solid var(--lijn);border-radius:18px;box-shadow:0 8px 20px -12px rgba(58,34,19,.3)}
body.woocommerce-account .woocommerce form .form-row input.input-text,body.woocommerce-account input.input-text{min-height:52px;padding:10px 14px;font:600 18px var(--sans);border:1.5px solid var(--veldrand);border-radius:12px;background:#FFFDF8}
body.woocommerce-account .woocommerce form .form-row label{font-size:17px;font-weight:600}
body.woocommerce-account .woocommerce-button,body.woocommerce-account .button{min-height:52px;padding:12px 22px;border:0;border-radius:12px;background:var(--terracotta);color:#FFF7E8;font:700 18px var(--sans);box-shadow:0 3px 0 var(--terracotta-donker)}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 20px;padding:0;list-style:none}
body.woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--veldrand);border-radius:10px;color:var(--tekst);text-decoration:none;font-size:17px}
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{border:2px solid var(--korst);background:var(--papier-licht);color:var(--korst);font-weight:700;box-shadow:inset 0 -4px 0 var(--goud)}
body.woocommerce-account .woocommerce-LostPassword a,body.woocommerce-account .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;min-height:44px}
/* Wachtwoordknop van WooCommerce (het oog): tikvlak van 44 x 44 px rechts in het veld, pictogram in het midden; het veld houdt rechts ruimte vrij. */
body.woocommerce-account .woocommerce form .form-row .password-input input.input-text{padding-right:52px}
body.woocommerce-account .woocommerce form .show-password-input{display:flex;align-items:center;justify-content:center;width:44px;height:44px;right:2px;border-radius:10px}
body.woocommerce-account .woocommerce form .show-password-input:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px}
body .wc-block-order-confirmation-create-account form :is(p,span,a,label),
body .wc-block-order-confirmation-create-account form .wc-block-order-confirmation-create-account-description p{font-size:16px;line-height:1.45}