/* zonnestudio-tijden: block-port van ReactBitsPro Blocks/forms-9 (opening hours with per-day intervals) en
   ReactBitsPro Blocks/cta-10 (floating join card), plus ReactBitsPro Components/glitch-text (origineel) op de h2.
   Tailwind vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens, de app-ui-theme-klassen van forms-9
   (frame, rules, buttons, select, switch) als eigen regels met dezelfde maten: frame rounded 10 px met rand ink/10,
   kop px 16/20 py 16, werkbalk py 14, dagrijen px 16/20 py 12 gescheiden door lijnen ink/8, schakelaar 36 x 20
   met duim 16 die 16 px schuift, tijdkeuzes h 32 rounded 6 met rand ink/12, knoppen h 28/32 rounded 6 14/16 px,
   scrolgebied max 404 px met vervagende randen van 32 px (120 ms, ease [0.2,0,0,1]), voet met statusregel en
   twee knoppen. cta-10: kaart max-w 1024 rounded 24 met rand, grid 1 kolom en 5fr/7fr vanaf 768 px, padding 8,
   beeldvak 4:5 (vanaf md min 440 px) rounded 16, tekstkolom p 24/40 gap 20 met kop 24/30/36 px, tekst 14/16 px en
   een invoerrij in een pill (p 4, rand) met keuze en knop. Entree van de kaart in module.js. */
.msm-zonnestudio-tijden{--zt-p:var(--m-primary,#d9633d);--zt-bg:var(--m-bg,#f0ede7);--zt-ink:var(--m-ink,#20282a);--zt-s:var(--m-surface,#faf7f1);--zt-mu:var(--m-muted,#666e70);--zt-a:var(--m-accent2,#2c3335);--zt-l:var(--m-line,#dcd6cb);--zt-ease:cubic-bezier(.22,1,.36,1);--zt-ui:cubic-bezier(.2,0,0,1);--zt-ink8:color-mix(in srgb,var(--zt-ink) 8%,transparent);--zt-ink10:color-mix(in srgb,var(--zt-ink) 10%,transparent);--zt-ink12:color-mix(in srgb,var(--zt-ink) 12%,transparent);--zt-ink32:color-mix(in srgb,var(--zt-ink) 32%,transparent);--zt-ink50:color-mix(in srgb,var(--zt-ink) 50%,transparent);--zt-ink66:color-mix(in srgb,var(--zt-ink) 66%,var(--zt-s));--zt-ink80:color-mix(in srgb,var(--zt-ink) 80%,var(--zt-s));box-sizing:border-box;scroll-margin-top:112px;width:100%;padding:48px 16px;background:var(--zt-bg);color:var(--zt-ink);font-family:var(--m-font-body,'DM Sans',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-zonnestudio-tijden *{box-sizing:border-box}
@media (min-width:640px){.msm-zonnestudio-tijden{padding:64px 24px}}
@media (min-width:1024px){.msm-zonnestudio-tijden{padding:80px 32px}}
.msm-zonnestudio-tijden .zt-wrap{width:100%;max-width:1400px;margin:0 auto}
.msm-zonnestudio-tijden .zt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* kop */
.msm-zonnestudio-tijden .zt-head{display:flex;flex-direction:column;gap:14px;max-width:820px;margin-bottom:40px}
.msm-zonnestudio-tijden .zt-kicker{margin:0;color:var(--zt-mu);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.msm-zonnestudio-tijden .zt-title{position:relative;margin:0;font:700 clamp(30px,4.4vw,52px)/1.05 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.025em;color:var(--zt-ink)}
.msm-zonnestudio-tijden #vragen-privacy{scroll-margin-top:112px}

/* glitch-text: echte h2 transparant zodra het canvas tekent; originele glitch-text.css gescoped zonder min-height 400 */
.msm-zonnestudio-tijden .zt-title.is-glitch{color:transparent}
.msm-zonnestudio-tijden .zt-glitch{position:absolute;display:block;z-index:1}
.msm-zonnestudio-tijden .zt-glitch .glitch-text-container{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.msm-zonnestudio-tijden .zt-glitch .glitch-text-canvas{width:100%;height:100%;display:block;cursor:default;touch-action:auto;letter-spacing:normal}

/* twee kolommen: links de vaste gegevens, rechts Jouw week */
.msm-zonnestudio-tijden .zt-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media (min-width:1024px){.msm-zonnestudio-tijden .zt-cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.msm-zonnestudio-tijden .zt-info{display:flex;flex-direction:column;gap:16px;max-width:520px}
.msm-zonnestudio-tijden .zt-h3{margin:0;font:600 20px/1.25 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.015em;color:var(--zt-ink)}
.msm-zonnestudio-tijden .zt-address,.msm-zonnestudio-tijden .zt-note,.msm-zonnestudio-tijden .zt-privacy p{margin:0;color:var(--zt-ink80);font-size:15px;line-height:1.6}
.msm-zonnestudio-tijden .zt-hours{width:100%;border-collapse:collapse;font-size:15px}
.msm-zonnestudio-tijden .zt-hours caption{margin-bottom:6px;color:var(--zt-mu);font-size:12px;font-weight:500;letter-spacing:.14em;text-align:left;text-transform:uppercase}
.msm-zonnestudio-tijden .zt-hours th,.msm-zonnestudio-tijden .zt-hours td{padding:10px 0;border-top:1px solid var(--zt-l);text-align:left;vertical-align:top}
.msm-zonnestudio-tijden .zt-hours th{font-weight:500;color:var(--zt-ink)}
.msm-zonnestudio-tijden .zt-hours td{color:var(--zt-ink80);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:16px}
.msm-zonnestudio-tijden .zt-hours tr:last-child th,.msm-zonnestudio-tijden .zt-hours tr:last-child td{border-bottom:1px solid var(--zt-l)}
.msm-zonnestudio-tijden .zt-privacy{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--zt-l)}

/* forms-9: frame */
.msm-zonnestudio-tijden .zt-planner{width:100%;max-width:760px}
.msm-zonnestudio-tijden .zt-planner[hidden]{display:none}
.msm-zonnestudio-tijden .zt-frame{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--zt-ink10);border-radius:10px;background:var(--zt-s);color:var(--zt-ink)}
.msm-zonnestudio-tijden .zt-frame-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--zt-ink8)}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-frame-head{padding:16px 20px}}
.msm-zonnestudio-tijden .zt-frame-text{min-width:0}
.msm-zonnestudio-tijden .zt-frame-title{margin:0;font-family:inherit;font-size:16px;font-weight:500;line-height:20px;letter-spacing:-.015em}
.msm-zonnestudio-tijden .zt-frame-desc{margin:2px 0 0;color:var(--zt-ink80);font-size:13px;line-height:18px}
.msm-zonnestudio-tijden .zt-total{flex:0 0 auto;text-align:right}
.msm-zonnestudio-tijden .zt-caption{margin:0;color:var(--zt-ink66);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.msm-zonnestudio-tijden .zt-total-val{margin:0;font-size:14px;font-weight:500;line-height:16px;font-variant-numeric:tabular-nums}
.msm-zonnestudio-tijden .zt-toolbar{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-bottom:1px solid var(--zt-ink8)}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-toolbar{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 20px}}
.msm-zonnestudio-tijden .zt-toolbar-text{margin:0;min-width:0;color:var(--zt-ink66);font-size:13px;line-height:18px}

/* knoppen: transition 120 ms ease [0.2,0,0,1], active scale .98; secondary rand ink/12, primary gevuld in de inktkleur */
.msm-zonnestudio-tijden .zt-btn{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;white-space:nowrap;user-select:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:16px;border-radius:6px;transition:color .12s var(--zt-ui),background-color .12s var(--zt-ui),border-color .12s var(--zt-ui),box-shadow .12s var(--zt-ui),scale .12s var(--zt-ui),filter .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-btn:active:not(:disabled){scale:.98;transition-duration:.06s}
.msm-zonnestudio-tijden .zt-btn:focus-visible,.msm-zonnestudio-tijden .zt-switch:focus-visible,.msm-zonnestudio-tijden .zt-select:focus-visible,.msm-zonnestudio-tijden .zt-icon-btn:focus-visible,.msm-zonnestudio-tijden .zt-cta-select:focus-visible,.msm-zonnestudio-tijden .zt-cta-btn:focus-visible{outline:2px solid var(--zt-p);outline-offset:2px}
.msm-zonnestudio-tijden .zt-btn:disabled{cursor:not-allowed}
.msm-zonnestudio-tijden .zt-btn-md{height:32px;gap:8px;padding:0 16px}
.msm-zonnestudio-tijden .zt-btn-sm{height:28px;gap:6px;padding:0 12px}
.msm-zonnestudio-tijden .zt-btn-secondary{border:1px solid var(--zt-ink12);background:var(--zt-s);color:var(--zt-ink);box-shadow:0 1px 2px -1px rgba(0,0,0,.12)}
.msm-zonnestudio-tijden .zt-btn-secondary:hover:not(:disabled){border-color:var(--zt-ink32);background:color-mix(in srgb,var(--zt-ink) 3%,var(--zt-s))}
.msm-zonnestudio-tijden .zt-btn-secondary:active:not(:disabled){box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.msm-zonnestudio-tijden .zt-btn-secondary:disabled{border-color:var(--zt-ink8);color:color-mix(in srgb,var(--zt-ink) 40%,transparent);box-shadow:none}
.msm-zonnestudio-tijden .zt-btn-primary{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--zt-ink) 84%,white),color-mix(in srgb,var(--zt-ink) 94%,black));color:var(--zt-bg);box-shadow:inset 0 2px 0 -1px rgba(255,255,255,.2),inset 0 -2px 0 -1px rgba(0,0,0,.3),inset 0 0 0 1px color-mix(in srgb,var(--zt-ink) 88%,black),0 1px 1px rgba(0,0,0,.22),0 2px 5px -2px rgba(0,0,0,.3)}
.msm-zonnestudio-tijden .zt-btn-primary:hover:not(:disabled){filter:brightness(1.1)}
.msm-zonnestudio-tijden .zt-btn-primary:active:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zt-ink) 88%,black),inset 0 1px 2px rgba(0,0,0,.42)}
.msm-zonnestudio-tijden .zt-btn-primary:disabled{opacity:.4;box-shadow:none}
.msm-zonnestudio-tijden .zt-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--zt-ink);cursor:pointer;transition:background-color .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-icon-btn:hover:not(:disabled){background:color-mix(in srgb,var(--zt-ink) 5%,transparent)}
.msm-zonnestudio-tijden .zt-icon-btn:active:not(:disabled){background:var(--zt-ink8)}
.msm-zonnestudio-tijden .zt-icon-btn:disabled{color:color-mix(in srgb,var(--zt-ink) 40%,transparent);cursor:not-allowed}

/* scrolgebied max-h 404 met vervagende randen */
.msm-zonnestudio-tijden .zt-scroll-wrap{position:relative}
.msm-zonnestudio-tijden .zt-scroll{max-height:404px;overflow-y:auto}
.msm-zonnestudio-tijden .zt-rows{display:flex;flex-direction:column}
.msm-zonnestudio-tijden .zt-day{padding:12px 16px;border-top:1px solid var(--zt-ink8)}
.msm-zonnestudio-tijden .zt-day:first-child{border-top:0}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-day{padding:12px 20px}}
.msm-zonnestudio-tijden .zt-fade{position:absolute;left:0;right:0;height:32px;pointer-events:none;opacity:0;transition:opacity .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-fade-top{top:0;background:linear-gradient(to bottom,var(--zt-s),transparent)}
.msm-zonnestudio-tijden .zt-fade-bottom{bottom:0;background:linear-gradient(to top,var(--zt-s),transparent)}
.msm-zonnestudio-tijden .zt-fade.is-on{opacity:1}

/* dagrij: schakelaar, naam w 96, meta rechts */
.msm-zonnestudio-tijden .zt-day-head{display:flex;align-items:center;gap:12px}
.msm-zonnestudio-tijden .zt-day-name{flex:0 0 auto;width:96px;font-size:14px;font-weight:500;line-height:16px}
.msm-zonnestudio-tijden .zt-day-meta{flex:0 0 auto;margin-left:auto;color:var(--zt-ink66);font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.msm-zonnestudio-tijden .zt-switch{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--zt-s);box-shadow:inset 0 0 0 1px var(--zt-ink50),0 1px 2px -1px rgba(0,0,0,.12);cursor:pointer;transition:background-color .12s var(--zt-ui),box-shadow .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-switch:hover[aria-checked="false"]{box-shadow:inset 0 0 0 1px var(--zt-ink)}
.msm-zonnestudio-tijden .zt-switch:active[aria-checked="false"]{background:var(--zt-ink8)}
.msm-zonnestudio-tijden .zt-switch[aria-checked="true"]{background:var(--zt-ink);box-shadow:inset 0 0 0 1px transparent}
.msm-zonnestudio-tijden .zt-thumb{display:block;width:16px;height:16px;border-radius:999px;background:var(--zt-ink80);pointer-events:none;transition:translate .12s var(--zt-ui),background-color .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-switch[aria-checked="true"] .zt-thumb{translate:16px 0;background:var(--zt-bg)}
/* tijdvakken: mt 12, space-y 8; rij flex gap 8 met twee keuzes, 'tot' en de verwijderknop */
.msm-zonnestudio-tijden .zt-intervals{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.msm-zonnestudio-tijden .zt-intervals[hidden]{display:none}
.msm-zonnestudio-tijden .zt-iv{display:flex;align-items:center;gap:8px}
.msm-zonnestudio-tijden .zt-iv-to{flex:0 0 auto;color:var(--zt-ink66);font-size:13px;line-height:18px}
.msm-zonnestudio-tijden .zt-select{display:inline-flex;flex:1 1 0;min-width:0;height:32px;padding:0 32px 0 12px;border:1px solid var(--zt-ink12);border-radius:6px;background:var(--zt-s) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320282a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") no-repeat right 10px center/16px 16px;color:var(--zt-ink);font-family:inherit;font-size:14px;font-weight:500;line-height:16px;box-shadow:0 1px 2px -1px rgba(0,0,0,.12);cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .12s var(--zt-ui),box-shadow .12s var(--zt-ui)}
.msm-zonnestudio-tijden .zt-select:hover{border-color:var(--zt-ink32)}
.msm-zonnestudio-tijden .zt-select:focus-visible{border-color:var(--zt-ink);box-shadow:0 0 0 3px var(--zt-ink8);outline:none}
.msm-zonnestudio-tijden .zt-select[aria-invalid="true"]{border-color:var(--zt-p)}
.msm-zonnestudio-tijden .zt-error{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--zt-p);font-size:13px;line-height:18px}
.msm-zonnestudio-tijden .zt-error svg{flex:0 0 auto;margin-top:1px}
.msm-zonnestudio-tijden .zt-add{align-self:flex-start}

/* voet: statusregel en knoppen */
.msm-zonnestudio-tijden .zt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 16px;border-top:1px solid var(--zt-ink8)}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-foot{padding-left:20px}}
.msm-zonnestudio-tijden .zt-status{margin:0;color:var(--zt-ink66);font-size:13px;line-height:18px}
.msm-zonnestudio-tijden .zt-actions{display:flex;align-items:center;gap:8px}
.msm-zonnestudio-tijden .zt-result{margin:16px 0 0;padding:14px 16px;border:1px solid var(--zt-l);border-radius:10px;background:color-mix(in srgb,var(--zt-p) 8%,var(--zt-s));color:var(--zt-ink);font-size:15px;line-height:1.55}
.msm-zonnestudio-tijden .zt-result[hidden]{display:none}

/* cta-10: zwevende kaart */
.msm-zonnestudio-tijden .zt-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:1024px;margin:64px auto 0;padding:8px;overflow:hidden;border:1px solid var(--zt-l);border-radius:24px;background:var(--zt-s)}
@media (min-width:768px){.msm-zonnestudio-tijden .zt-cta{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.msm-zonnestudio-tijden .zt-cta-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:var(--zt-bg)}
@media (min-width:768px){.msm-zonnestudio-tijden .zt-cta-media{aspect-ratio:auto;min-height:440px}}
.msm-zonnestudio-tijden .zt-cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.msm-zonnestudio-tijden .zt-cta-body{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:24px}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-body{padding:40px}}
.msm-zonnestudio-tijden .zt-cta-title{margin:0;font:600 24px/1.15 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.025em;color:var(--zt-ink)}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-title{font-size:30px}}
@media (min-width:768px){.msm-zonnestudio-tijden .zt-cta-title{font-size:36px}}
.msm-zonnestudio-tijden .zt-cta-text{margin:0;max-width:448px;color:var(--zt-mu);font-size:14px;line-height:1.625}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-text{font-size:16px}}
.msm-zonnestudio-tijden .zt-cta-form{display:flex;flex-direction:column;gap:8px;max-width:448px}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-form{flex-direction:row;align-items:center;gap:0;padding:4px;border:1px solid var(--zt-l);border-radius:999px;background:var(--zt-bg)}}
.msm-zonnestudio-tijden .zt-cta-select{flex:1 1 auto;min-width:0;padding:12px 40px 12px 16px;border:1px solid var(--zt-l);border-radius:999px;background:var(--zt-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320282a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px;color:var(--zt-ink);font-family:inherit;font-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-select{padding:10px 36px 10px 16px;border:0;border-radius:0;background-color:transparent}}
.msm-zonnestudio-tijden .zt-cta-btn{flex:0 0 auto;padding:12px 20px;border:0;border-radius:999px;background:var(--zt-ink);color:var(--zt-bg);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .15s}
@media (min-width:640px){.msm-zonnestudio-tijden .zt-cta-btn{padding:10px 20px}}
.msm-zonnestudio-tijden .zt-cta-btn:hover{opacity:.9}
.msm-zonnestudio-tijden .zt-cta-note{margin:0;color:var(--zt-mu);font-size:12px}

@media (prefers-reduced-motion:reduce){
  .msm-zonnestudio-tijden .zt-btn,.msm-zonnestudio-tijden .zt-switch,.msm-zonnestudio-tijden .zt-thumb,.msm-zonnestudio-tijden .zt-fade,.msm-zonnestudio-tijden .zt-select,.msm-zonnestudio-tijden .zt-icon-btn,.msm-zonnestudio-tijden .zt-cta-btn{transition:none}
  .msm-zonnestudio-tijden .zt-btn:active:not(:disabled){scale:1}
}