/* zwemschool-lessen: lesrooster (Pro-block bento-30 als block-port), lesgeld en meeneemlijst,
   adres en tijden, de gedeelde proeflesdemo en de bal uit orbital-type.
   Alles gescoped onder .msm-zwemschool-lessen. */
.msm-zwemschool-lessen{--zls-p:var(--m-primary,#ef6e4a);--zls-bg:var(--m-bg,#dfeff0);--zls-ink:var(--m-ink,#123b45);--zls-s:var(--m-surface,#f8ffff);--zls-mu:var(--m-muted,#53747b);--zls-a:var(--m-accent2,#2f7f8c);--zls-l:var(--m-line,#c2dcdf);--zls-fd:var(--m-font-display,"Baloo 2","Segoe UI",system-ui,sans-serif);--zls-fb:var(--m-font-body,"Noto Sans","Segoe UI",system-ui,sans-serif);--zls-ease:cubic-bezier(0.22,1,0.36,1);position:relative;scroll-margin-top:112px;padding:clamp(56px,8vw,104px) 0;background:var(--zls-bg);color:var(--zls-ink);font-family:var(--zls-fb);font-size:16px;line-height:1.5}
.msm-zwemschool-lessen *{box-sizing:border-box}
.msm-zwemschool-lessen [hidden]{display:none!important}
.msm-zwemschool-lessen .zls-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.msm-zwemschool-lessen .zls-wrap{width:min(1180px,100% - 32px);margin:0 auto}
.msm-zwemschool-lessen #tijden,.msm-zwemschool-lessen #proefles{scroll-margin-top:112px}

/* kop met de bal */
.msm-zwemschool-lessen .zls-head{display:grid;grid-template-columns:140px minmax(0,1fr);gap:28px;align-items:center;max-width:860px;margin:0 0 32px}
.msm-zwemschool-lessen .zls-orb{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--zls-s) 0,color-mix(in srgb,var(--zls-a) 85%,var(--zls-ink)) 72%);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--zls-ink) 55%,transparent);overflow:hidden}
.msm-zwemschool-lessen .zls-orb-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--zls-s);font:700 15px/1 var(--zls-fd);letter-spacing:.14em;text-transform:uppercase}
.msm-zwemschool-lessen .zls-orb.is-live .zls-orb-fallback{display:none}
.msm-zwemschool-lessen .zls-orb.is-live{background:color-mix(in srgb,var(--zls-a) 92%,var(--zls-ink))}
.msm-zwemschool-lessen .zls-orb .orbital-type{position:absolute;inset:0;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden}
.msm-zwemschool-lessen .zls-orb .orbital-type__content{position:relative;z-index:10;width:100%;height:100%}
.msm-zwemschool-lessen .zls-kicker{margin:0 0 8px;color:var(--zls-a);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.msm-zwemschool-lessen .zls-title{margin:0;font:700 clamp(34px,5vw,58px)/1.04 var(--zls-fd);letter-spacing:-.015em;color:var(--zls-ink);text-wrap:balance}
.msm-zwemschool-lessen .zls-intro{margin:12px 0 0;max-width:60ch;color:var(--zls-mu);font-size:18px}

/* bento-30 (block-port): kaart met ingeschoven venster */
.msm-zwemschool-lessen .zls-card{position:relative;display:flex;min-height:380px;width:100%;flex-direction:column;overflow:hidden;border-radius:24px;border:1px solid var(--zls-l);background:var(--zls-s)}
.msm-zwemschool-lessen .zls-stage{position:relative;min-height:220px;flex:1;padding:12px 12px 0}
.msm-zwemschool-lessen .zls-window{display:flex;min-height:100%;flex-direction:column;overflow:hidden;border-radius:12px;border:1px solid var(--zls-l);background:var(--zls-s);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -12px rgba(0,0,0,.12)}
.msm-zwemschool-lessen .zls-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--zls-l) 60%,transparent)}
.msm-zwemschool-lessen .zls-filters{display:flex;flex-wrap:wrap;gap:6px 16px}
.msm-zwemschool-lessen .zls-filtergroup{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.msm-zwemschool-lessen .zls-filterlabel{margin-right:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-pill{min-height:28px;padding:2px 10px;border:0;border-radius:999px;background:transparent;color:var(--zls-mu);font:600 12px/1.4 var(--zls-fb);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.msm-zwemschool-lessen .zls-pill:hover{background:color-mix(in srgb,var(--zls-ink) 6%,transparent);color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-pill[aria-pressed="true"]{background:var(--zls-ink);color:var(--zls-s)}
.msm-zwemschool-lessen .zls-pill:focus-visible,.msm-zwemschool-lessen .zls-sort:focus-visible,.msm-zwemschool-lessen .zls-rowbtn:focus-visible,.msm-zwemschool-lessen .zls-search:focus-visible{outline:2px solid var(--zls-a);outline-offset:2px}
.msm-zwemschool-lessen .zls-searchwrap{position:relative;display:inline-flex;align-items:center}
.msm-zwemschool-lessen .zls-searchwrap svg{position:absolute;left:10px;width:14px;height:14px;fill:none;stroke:var(--zls-mu);stroke-width:2;stroke-linecap:round;pointer-events:none}
.msm-zwemschool-lessen .zls-search{min-height:28px;width:180px;padding:2px 10px 2px 30px;border:1px solid var(--zls-l);border-radius:999px;background:var(--zls-s);color:var(--zls-ink);font:500 12px/1.4 var(--zls-fb)}
.msm-zwemschool-lessen .zls-tablewrap{overflow-x:auto}
.msm-zwemschool-lessen .zls-table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left}
.msm-zwemschool-lessen .zls-caption{padding:6px 12px 0;text-align:left;font-size:11px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-table th{padding:6px 12px;font-size:11px;font-weight:600;color:var(--zls-mu);vertical-align:bottom}
.msm-zwemschool-lessen .zls-th-les{width:30%}
.msm-zwemschool-lessen .zls-th-groep{width:13%}
.msm-zwemschool-lessen .zls-th-dag{width:13%}
.msm-zwemschool-lessen .zls-th-tijd{width:11%}
.msm-zwemschool-lessen .zls-th-duur{width:11%}
.msm-zwemschool-lessen .zls-th-plekken{width:22%}
.msm-zwemschool-lessen .zls-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:color .15s}
.msm-zwemschool-lessen .zls-sort:hover{color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-sorticon{display:inline-flex;width:10px;height:10px;opacity:.4}
.msm-zwemschool-lessen .zls-sorticon svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msm-zwemschool-lessen th[aria-sort="ascending"] .zls-sorticon,.msm-zwemschool-lessen th[aria-sort="descending"] .zls-sorticon{opacity:1}
.msm-zwemschool-lessen .zls-table tbody tr{border-top:1px solid color-mix(in srgb,var(--zls-l) 60%,transparent);font-size:13px;transition:background-color .15s;cursor:pointer}
.msm-zwemschool-lessen .zls-table tbody tr:hover{background:color-mix(in srgb,var(--zls-bg) 60%,var(--zls-s))}
.msm-zwemschool-lessen .zls-table td{padding:8px 12px;vertical-align:middle;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-table td:first-child{color:var(--zls-ink);font-weight:600}
.msm-zwemschool-lessen .zls-rowbtn{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.msm-zwemschool-lessen .zls-rowbtn:hover{color:var(--zls-p)}
.msm-zwemschool-lessen .zls-status{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--zls-a) 12%,transparent);color:var(--zls-a);font-size:11px;font-weight:600;white-space:nowrap}
.msm-zwemschool-lessen tr[data-status="bijna vol"] .zls-status{background:color-mix(in srgb,var(--zls-p) 14%,transparent);color:color-mix(in srgb,var(--zls-p) 80%,var(--zls-ink))}
.msm-zwemschool-lessen tr[data-status="wachtlijst"] .zls-status{background:color-mix(in srgb,var(--zls-ink) 10%,transparent);color:var(--zls-ink)}
.msm-zwemschool-lessen tr[data-status="op aanvraag"] .zls-status{background:color-mix(in srgb,var(--zls-mu) 14%,transparent);color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-bar{display:block;height:4px;margin:6px 0 0;border-radius:2px;background:color-mix(in srgb,var(--zls-ink) 8%,transparent);overflow:hidden}
.msm-zwemschool-lessen .zls-barfill{display:block;height:100%;width:0;border-radius:2px;background:var(--zls-a);transition:width .3s}
.msm-zwemschool-lessen tr[data-status="bijna vol"] .zls-barfill{background:var(--zls-p)}
.msm-zwemschool-lessen tr[data-status="wachtlijst"] .zls-barfill{background:var(--zls-ink)}
.msm-zwemschool-lessen .zls-barnote{display:block;margin-top:2px;font-size:10px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-empty{margin:0;padding:16px 12px;font-size:13px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid color-mix(in srgb,var(--zls-l) 60%,transparent);font-size:11px;color:var(--zls-mu);font-variant-numeric:tabular-nums}
.msm-zwemschool-lessen .zls-foot-right{font-weight:600;color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-chart{display:flex;min-height:160px;flex:1;flex-direction:column;margin:12px 12px 32px;padding:12px;border-radius:8px;background:color-mix(in srgb,var(--zls-bg) 60%,var(--zls-s))}
.msm-zwemschool-lessen .zls-chartlabel{margin:0;font-size:11px;font-weight:600;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-bars{display:flex;min-height:96px;flex:1;align-items:flex-end;gap:8px;margin-top:16px}
.msm-zwemschool-lessen .zls-bars:empty{display:none}
.msm-zwemschool-lessen .zls-barcol{position:relative;min-height:96px;flex:1;align-self:stretch}
.msm-zwemschool-lessen .zls-barcol-track{position:absolute;left:0;right:0;top:0;bottom:20px}
.msm-zwemschool-lessen .zls-barcol-fill{position:absolute;left:0;right:0;bottom:0;min-height:4px;border-radius:6px 6px 0 0;background:color-mix(in srgb,var(--zls-a) 45%,var(--zls-bg));transition:height .3s}
.msm-zwemschool-lessen .zls-barcol[data-status="bijna vol"] .zls-barcol-fill{background:color-mix(in srgb,var(--zls-p) 60%,var(--zls-bg))}
.msm-zwemschool-lessen .zls-barcol[data-status="wachtlijst"] .zls-barcol-fill{background:color-mix(in srgb,var(--zls-ink) 55%,var(--zls-bg))}
.msm-zwemschool-lessen .zls-barcol-name{position:absolute;left:0;right:0;bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:9px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-cardtext{padding:8px 24px 24px}
.msm-zwemschool-lessen .zls-cardtitle{margin:0;font:600 18px/1.3 var(--zls-fd);letter-spacing:-.01em;color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-cardintro{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--zls-mu)}

/* feiten, meeneemlijst, adres */
.msm-zwemschool-lessen .zls-facts{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.msm-zwemschool-lessen .zls-facts li{padding:12px 16px;border-left:4px solid var(--zls-p);border-radius:0 12px 12px 0;background:var(--zls-s);font-size:15px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-facts strong{color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-bring{margin:40px 0 0}
.msm-zwemschool-lessen .zls-subtitle{margin:0 0 16px;font:700 clamp(24px,3vw,32px)/1.1 var(--zls-fd);color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-bringlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.msm-zwemschool-lessen .zls-bringlist li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid var(--zls-l);border-radius:16px;background:var(--zls-s);font-size:14px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-bringlist strong{color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-bringlist img{display:block;width:72px;height:72px;object-fit:contain}
.msm-zwemschool-lessen .zls-address{margin:32px 0 0;max-width:72ch;font-size:16px;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-address strong{color:var(--zls-ink)}
.msm-zwemschool-lessen .zls-booking{margin:40px 0 0;padding:clamp(20px,3vw,36px);border:1px solid var(--zls-l);border-radius:24px;background:var(--zls-s)}
.msm-zwemschool-lessen .zls-booking:focus{outline:none}

/* mobiel: rijen worden kaarten */
@media (max-width:767px){
.msm-zwemschool-lessen .zls-head{grid-template-columns:88px minmax(0,1fr);gap:16px}
.msm-zwemschool-lessen .zls-orb{width:88px;height:88px}
.msm-zwemschool-lessen .zls-orb-fallback{font-size:10px}
.msm-zwemschool-lessen .zls-intro{font-size:16px}
.msm-zwemschool-lessen .zls-card{border-radius:18px}
.msm-zwemschool-lessen .zls-stage{padding:8px 8px 0}
.msm-zwemschool-lessen .zls-toolbar{flex-direction:column;align-items:stretch}
.msm-zwemschool-lessen .zls-search{width:100%}
.msm-zwemschool-lessen .zls-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.msm-zwemschool-lessen .zls-table,.msm-zwemschool-lessen .zls-table tbody,.msm-zwemschool-lessen .zls-table tr,.msm-zwemschool-lessen .zls-table td,.msm-zwemschool-lessen .zls-caption{display:block;width:100%}
.msm-zwemschool-lessen .zls-caption{padding:8px 12px 4px}
.msm-zwemschool-lessen .zls-table tbody tr{padding:10px 12px}
.msm-zwemschool-lessen .zls-table td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}
.msm-zwemschool-lessen .zls-table td::before{content:attr(data-label);flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zls-mu)}
.msm-zwemschool-lessen .zls-table td:first-child{font-size:15px}
.msm-zwemschool-lessen .zls-table td:last-child{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"label status" "bar bar" "note note";align-items:center;column-gap:12px}
.msm-zwemschool-lessen .zls-table td:last-child::before{grid-area:label}
.msm-zwemschool-lessen .zls-table td:last-child .zls-status{grid-area:status;justify-self:end}
.msm-zwemschool-lessen .zls-bar{grid-area:bar}
.msm-zwemschool-lessen .zls-barnote{grid-area:note}
.msm-zwemschool-lessen .zls-bars{gap:4px}
.msm-zwemschool-lessen .zls-barcol-name{font-size:8px}
.msm-zwemschool-lessen .zls-bringlist{grid-template-columns:1fr}
.msm-zwemschool-lessen .zls-booking{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
.msm-zwemschool-lessen .zls-pill,.msm-zwemschool-lessen .zls-sort,.msm-zwemschool-lessen .zls-table tbody tr,.msm-zwemschool-lessen .zls-barfill,.msm-zwemschool-lessen .zls-barcol-fill{transition:none}
}