/* Zo'ndag Boekingen – boekscherm en aanvraagformulier.
   Lettertype erft van het thema. Kleuren zijn aan te passen via deze variabelen. */
.zb{
  --zb-kaart:#f7f4ea; --zb-tekst:#2a2318; --zb-zacht:#6b6455; --zb-lijn:#e3ddcc;
  --zb-geel:#f7f27e; --zb-oranje:#cf7d3a; --zb-oranje-licht:#f3d9c0; --zb-turquoise:#79d9dc; --zb-fout:#a33a2a;
  color:var(--zb-tekst); font-size:16px; line-height:1.5; max-width:1140px; margin:0 auto; container:zb / inline-size;
}
.zb *{box-sizing:border-box}
.zb button{font-family:inherit}
.zb-stappen{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;background:var(--zb-tekst);padding:6px;border-radius:999px;width:max-content;max-width:100%}
.zb-stap{display:flex;align-items:center;gap:8px;color:#fff;opacity:.55;font-weight:600;font-size:15px;padding:4px 14px 4px 4px;border-radius:999px}
.zb-stap i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);font-style:normal;font-size:14px}
.zb-stap.aan{opacity:1}
.zb-stap.aan i{background:var(--zb-geel);color:var(--zb-tekst)}
.zb-stap.klaar{opacity:.85;cursor:pointer}
@container zb (max-width:600px){.zb-stap span{display:none}.zb-stap.aan span{display:inline}}
.zb-raster{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
@container zb (max-width:820px){.zb-raster{grid-template-columns:1fr}}
.zb-paneel{background:var(--zb-kaart);padding:24px}
@container zb (max-width:520px){.zb-paneel{padding:18px}}
.zb-paneel h2{font-size:20px;font-weight:800;text-transform:uppercase;margin:0 0 14px;letter-spacing:.02em;color:var(--zb-tekst)}
.zb-paneel section+section{border-top:1px solid var(--zb-lijn);margin-top:22px;padding-top:22px}
.zb-teller-rij{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:12px}
.zb-teller-rij small,.zb small.zb-uitleg{display:block;color:var(--zb-zacht);font-size:13px}
.zb-teller{display:flex;align-items:center;border:1px solid var(--zb-lijn);border-radius:999px;background:#fff;flex:none}
.zb-teller button{width:36px;height:36px;border:0;background:none;font-size:20px;font-weight:800;cursor:pointer;color:var(--zb-tekst);padding:0}
.zb-teller button:disabled{opacity:.25;cursor:default}
.zb-teller span{min-width:26px;text-align:center;font-weight:800}
.zb select.zb-veld,.zb input.zb-veld,.zb textarea.zb-veld{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--zb-lijn);background:#fff;color:var(--zb-tekst);border-radius:0;margin:0}
.zb-datums{display:grid;grid-template-columns:1fr 1fr;position:relative}
@container zb (max-width:520px){.zb-datums{grid-template-columns:1fr}}
.zb-datum{border:1px solid var(--zb-lijn);background:#fff;padding:10px 14px;cursor:pointer;text-align:left;font:inherit;color:var(--zb-tekst);border-radius:0}
.zb-datum small{display:block;font-size:12px;color:var(--zb-zacht)}
.zb-datum b{font-weight:600}
.zb-datum.open{outline:2px solid var(--zb-tekst);outline-offset:-2px}
.zb-datum:disabled{cursor:not-allowed;opacity:.5}
.zb-pop{position:absolute;top:100%;left:0;z-index:50;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:16px;width:min(340px,100%);margin-top:4px}
.zb-pop.rechts{left:auto;right:0}
@container zb (max-width:520px){.zb-pop.rechts{left:0;right:auto}}
.zb-pop-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:800;text-transform:capitalize}
.zb-pop-kop button{border:0;background:none;font-size:22px;cursor:pointer;width:36px;height:36px;color:var(--zb-tekst);padding:0}
.zb-pop-kop button:disabled{opacity:.2;cursor:default}
.zb-dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.zb-dagen .wd{font-size:12px;color:var(--zb-zacht);padding-bottom:4px;border-bottom:1px solid var(--zb-lijn);margin-bottom:4px}
.zb-dag{height:38px;display:grid;place-items:center;border-radius:50%;font-size:15px;color:#c5c0b4}
.zb-dag.kan{color:var(--zb-tekst);font-weight:800;cursor:pointer}
.zb-dag.kan:hover{background:var(--zb-oranje-licht)}
.zb-dag.gekozen{background:var(--zb-oranje);color:#fff}
.zb-dag.tussen{background:var(--zb-oranje-licht);border-radius:4px}
.zb-pop .zb-uitleg{margin:10px 0 0}
.zb-regels{font-size:13px;color:var(--zb-zacht);margin:10px 0 0}
.zb-seizoenen{font-size:13px;color:var(--zb-zacht);margin-top:10px}
.zb-seizoenen summary{cursor:pointer;font-weight:600;color:var(--zb-tekst)}
.zb-seizoenen ul{margin:6px 0 0;padding-left:18px}
.zb-vink{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-weight:600;cursor:pointer}
.zb-vink input{margin-top:5px}
.zb-vink small{display:block;color:var(--zb-zacht);font-weight:400}
.zb-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zb-velden .breed{grid-column:1/-1}
@container zb (max-width:520px){.zb-velden{grid-template-columns:1fr}}
.zb label.zb-lbl{font-size:13px;color:var(--zb-zacht);display:block;margin-bottom:2px}
.zb-knoppen{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.zb-knop{background:var(--zb-geel);color:var(--zb-tekst);border:0;padding:13px 26px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;border-radius:999px;text-decoration:none;display:inline-block}
.zb-knop.terug{background:transparent;border:2px solid var(--zb-tekst)}
.zb-knop:disabled{opacity:.5;cursor:wait}
.zb-melding{color:var(--zb-fout);font-weight:600;font-size:14px;margin-top:10px}
.zb-melding:empty{display:none}
.zb-zij{background:var(--zb-oranje);color:#fff;padding:24px;position:sticky;top:16px}
.zb-zij h2{font-size:20px;font-weight:800;margin:0 0 12px;text-transform:uppercase;color:#fff}
.zb-regel{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:15px}
.zb-regel>span:last-child{white-space:nowrap;text-align:right}
.zb-regel.sub{font-size:13px;opacity:.85;padding:0 0 3px 10px}
.zb-regel.korting{color:var(--zb-geel);font-weight:600}
.zb-streep{border-top:1px solid rgba(255,255,255,.45);margin:12px 0}
.zb-bon{margin:14px 0 6px}
.zb-bonrij{display:flex;gap:8px}
.zb-bonrij .zb-veld{flex:1;text-transform:uppercase;letter-spacing:.05em}
.zb-bonrij .zb-knop{white-space:nowrap}
.zb-totaal{display:flex;justify-content:space-between;font-weight:800;font-size:24px}
.zb-zij .zb-klein{font-size:13px;opacity:.9;margin:12px 0 0}
.zb-aanvraag-blok{margin-top:24px;background:var(--zb-turquoise);padding:20px;font-weight:600}
.zb-aanvraag-blok h3{margin:0 0 4px;font-size:20px;font-weight:800}
.zb-aanvraag-blok a{display:inline-block;margin-top:10px;background:var(--zb-tekst);color:#fff;padding:9px 18px;border-radius:999px;text-decoration:none;font-weight:800}
.zb-verborgen{display:none!important}
.zb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.zb-status{background:var(--zb-kaart);padding:32px;max-width:640px;margin:0 auto;text-align:center}
.zb-status h2{font-size:26px;font-weight:800;margin:0 0 10px}
.zb-keuze{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@container zb (max-width:520px){.zb-keuze{grid-template-columns:1fr}}
.zb-keuze label{display:block;background:#fff;border:2px solid var(--zb-lijn);padding:14px;cursor:pointer;font-weight:700}
.zb-keuze label small{display:block;font-weight:400;color:var(--zb-zacht)}
.zb-keuze input{margin-right:6px}
.zb-keuze label:has(input:checked){border-color:var(--zb-oranje)}

/* Bescherming tegen thema-stijlen (bijv. Hello Elementor kleurt knoppen roze bij hover/focus). */
.zb button,.zb button:hover,.zb button:focus,.zb button:active{text-transform:none;letter-spacing:normal;box-shadow:none;text-decoration:none;font-family:inherit;line-height:1.4}
.zb .zb-datum,.zb .zb-datum:hover,.zb .zb-datum:focus,.zb .zb-datum:active{background:#fff;color:var(--zb-tekst);border:1px solid var(--zb-lijn);border-radius:0}
.zb .zb-datum:hover{border-color:var(--zb-tekst)}
.zb .zb-teller button,.zb .zb-teller button:hover,.zb .zb-teller button:focus,.zb .zb-teller button:active,
.zb .zb-pop-kop button,.zb .zb-pop-kop button:hover,.zb .zb-pop-kop button:focus,.zb .zb-pop-kop button:active{background:none;color:var(--zb-tekst);border:0;border-radius:0}
.zb .zb-knop,.zb .zb-knop:hover,.zb .zb-knop:focus,.zb .zb-knop:active{background:var(--zb-geel);color:var(--zb-tekst);border:0;border-radius:999px}
.zb .zb-knop:hover{filter:brightness(.96)}
.zb .zb-knop.terug,.zb .zb-knop.terug:hover,.zb .zb-knop.terug:focus,.zb .zb-knop.terug:active{background:transparent;border:2px solid var(--zb-tekst);color:var(--zb-tekst)}
.zb :focus-visible{outline:2px solid var(--zb-tekst);outline-offset:2px}
/* Ruimte boven het boekscherm (voor een vaste kopbalk); in te stellen met [zondag_boeken boven="160"]. */
.zb{padding-top:var(--zb-boven,0px)}
.zb-zij{top:calc(var(--zb-boven,0px) + 16px)}

/* Aanmeldblok zolang boeken dicht is: grote kop, rustige achtergrond, gele knop zoals op de rest van de site */
.zb-dicht .zb-paneel{border:0;border-radius:28px;padding:clamp(28px,5vw,56px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.zb-dicht .zb-dicht-titel{font-family:"Clash Grotesk",sans-serif;font-weight:700;font-size:clamp(2rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.01em;text-transform:none;color:#3a2410;margin:0 0 .5em}
.zb-dicht .zb-dicht-tekst p{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;margin:0 0 .8em;max-width:46em}
.zb-dicht .gform_wrapper{margin-top:1.4em}
.zb-dicht .gform_wrapper input[type=text],.zb-dicht .gform_wrapper input[type=email]{background:#fff;border:2px solid #3a2410;border-radius:12px;padding:14px 16px;font-size:1.05rem}
.zb-dicht .gform_wrapper .gform_footer input[type=submit],.zb-dicht .gform_wrapper .gform_footer button,.zb-dicht .gform_wrapper .gform-button{background:#f9f871!important;color:#000!important;border:0!important;border-radius:80px!important;padding:18px 36px!important;font-family:"Clash Grotesk",sans-serif!important;font-size:1.15rem!important;font-weight:700!important;cursor:pointer;width:auto;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.zb-dicht .gform_wrapper .gform_footer input[type=submit]:hover,.zb-dicht .gform_wrapper .gform-button:hover{filter:brightness(.95)}
.zb-dicht .gform_wrapper .zb-klein,.zb-dicht .gform_wrapper .gfield_html p{font-size:.9rem;opacity:.85;margin-top:.6em}
.zb-dicht .gform_confirmation_message{font-size:1.2rem;font-weight:600}
@media (max-width:767px){.zb-dicht .gform_wrapper .gform_footer input[type=submit],.zb-dicht .gform_wrapper .gform-button{width:100%!important}}