/* ==========================================================================
   Club Ambiance search widget ("Ontdek top-horeca")
   Delivered as a design handoff; every class is prefixed .cas / .cas__ so it
   cannot collide with, or be broken by, the rest of the site CSS.
   main.min.css already declares Futura 500 and 700 — only the two weights the
   widget adds are declared here.
   ========================================================================== */

@font-face{font-family:"Futura";src:url("../fonts/Futura-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-Heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---- widget scope ---- */
.cas{--cas-ink:#1e1d1b;--cas-soft:#6b6b6b;--cas-line:#e4e2dd;
  box-sizing:border-box;width:100%;padding:28px 24px;
  font-family:"Futura",-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.cas *,.cas *::before,.cas *::after{box-sizing:border-box}

/* The .cas prefix cannot shield the widget from element selectors, and
   Bootstrap's reboot ships `button:focus{outline:5px auto -webkit-focus-ring-color}`
   — which fires on mouse clicks too, boxing every option the visitor ticks.
   Drop that ring and put a deliberate one back for keyboard users only.
   `.cas button:focus` outranks `button:focus`, so load order does not matter. */
.cas button:focus,
.cas input:focus,
.cas a:focus{outline:none}
.cas button:focus-visible,
.cas input:focus-visible,
.cas a:focus-visible{outline:2px solid var(--cas-ink);outline-offset:2px}
/* the chips sit on the black panel, where ink is invisible */
.cas .cas__chip:focus-visible{outline-color:#fff}

.cas__panel{max-width:1240px;margin:0 auto;background:#000;border-radius:28px;
  padding:clamp(32px,4.5vw,64px) clamp(22px,4.5vw,58px);text-align:center;position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}

.cas__eyebrow{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#fff}
.cas__title{margin:0 auto;font-family:"Futura",system-ui,sans-serif;font-weight:800;
  font-size:clamp(26px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;color:#fff}
.cas__lead{margin:18px auto 32px;font-size:clamp(13px,1.55vw,21px);font-weight:600;line-height:1.5;
  color:rgba(255,255,255,.92);max-width:none}

/* search row */
.cas__row{display:flex;align-items:stretch;justify-content:center;gap:12px;
  width:100%;max-width:1000px;margin:0 auto;flex-wrap:nowrap}
.cas__bar{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;background:#fff;
  border-radius:14px;box-shadow:0 24px 60px -30px rgba(0,0,0,.55);min-height:70px}

.cas__cityWrap{position:relative;flex:0 0 auto;display:flex}
.cas__city{display:flex;align-items:center;gap:9px;padding:0 24px;background:transparent;
  border:none;border-right:1px solid var(--cas-line);border-radius:14px 0 0 14px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--cas-ink);white-space:nowrap;
  transition:background .15s}
.cas__city:hover{background:#f2f1ee}
.cas__chev{transition:transform .2s ease}
.cas__cityWrap[data-open="true"] .cas__chev{transform:rotate(180deg)}

.cas__menu{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:40;width:240px;
  max-height:300px;overflow-y:auto;background:#fff;border:1px solid var(--cas-line);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.35);padding:8px;text-align:left}
.cas__cityWrap[data-open="true"] .cas__menu{display:block}
.cas__menuLabel{margin:6px 12px 9px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--cas-ink)}
.cas__opt{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:none;
  border-radius:9px;background:transparent;cursor:pointer;font:inherit;font-size:14px;
  color:var(--cas-ink);text-align:left}
.cas__opt:hover{background:#f2f1ee}
.cas__opt[aria-selected="true"]{background:#f2f1ee;font-weight:700}

.cas__field{flex:1;display:flex;align-items:center;padding:0 22px;min-width:0;margin:0}
.cas__input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:"Futura",-apple-system,Helvetica,Arial,sans-serif;font-size:15px;color:var(--cas-ink)}
.cas__input::placeholder{color:#9a9a97}

.cas__submit{margin:9px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 34px;background:var(--cas-ink);color:#fff;border:none;border-radius:10px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:transform .15s cubic-bezier(.22,.61,.36,1)}
.cas__submit:hover{transform:translateY(-1px)}

.cas__tool{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;min-width:108px;padding:0 18px;min-height:70px;background:#fff;
  border:none;border-radius:14px;box-shadow:0 24px 60px -30px rgba(0,0,0,.55);cursor:pointer;
  font:inherit;color:var(--cas-ink);transition:transform .15s cubic-bezier(.22,.61,.36,1)}
.cas__tool:hover{transform:translateY(-2px)}
.cas__tool span{font-size:13px;font-weight:600;letter-spacing:.2px}
.cas__tool[aria-expanded="true"]{outline:2px solid var(--cas-ink);outline-offset:-2px}
.cas__count{position:absolute;top:8px;right:10px;min-width:19px;height:19px;padding:0 5px;
  border-radius:40px;background:var(--cas-ink);color:#fff;font-size:11px;font-weight:700;
  display:none;align-items:center;justify-content:center}
.cas__toolWrap{position:relative;flex:0 0 auto;display:flex}
.cas__toolWrap[data-count]:not([data-count="0"]) .cas__count{display:flex}

/* city confirmation toast (geolocation) */
.cas__geo{position:fixed;right:24px;bottom:24px;transform:translateY(12px);z-index:200;
  width:min(400px,calc(100vw - 32px));background:#fff;border-radius:18px;padding:22px 24px;text-align:left;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:opacity .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
.cas__geo[data-open="true"]{opacity:1;transform:translateY(0);pointer-events:auto}
.cas__geoTop{display:flex;align-items:flex-start;gap:13px}
.cas__geoIcon{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--cas-ink);
  display:flex;align-items:center;justify-content:center}
.cas__geoTitle{margin:0;font-family:"Futura",-apple-system,Helvetica,Arial,sans-serif;font-weight:800;
  font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--cas-ink)}
.cas__geoBody{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--cas-soft)}
.cas__geoBtns{display:flex;gap:10px;margin-top:18px}
.cas__geoYes{flex:1;min-height:46px;padding:0 18px;background:var(--cas-ink);color:#fff;border:none;
  border-radius:40px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase}
.cas__geoNo{flex:1;min-height:46px;padding:0 18px;background:#fff;color:var(--cas-ink);
  border:1px solid var(--cas-ink);border-radius:40px;cursor:pointer;font:inherit;font-size:12px;
  font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.cas__geoNo:hover{background:var(--cas-ink);color:#fff}

/* filter panel — floats below the black panel, never grows it */
.cas__panelWrap{position:absolute;left:0;right:0;top:100%;z-index:60;
  padding:0 clamp(22px,4.5vw,58px);pointer-events:none}
.cas__filters{display:none;max-width:1000px;margin:14px auto 0;background:#fff;border-radius:18px;
  text-align:left;pointer-events:auto;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);overflow:hidden}
.cas__filters[data-open="true"]{display:block}
.cas__fBody{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-height:min(60vh,520px);overflow-y:auto}
.cas__fCol{padding:26px 18px 22px}
.cas__fCol + .cas__fCol{border-left:1px solid var(--cas-line)}
.cas__fGroup + .cas__fGroup{margin-top:26px}
.cas__fLabel{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--cas-ink)}
.cas__fSub{margin:16px 0 9px;font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--cas-ink)}
.cas__fList{display:flex;flex-direction:column;gap:2px}
.cas__check{display:flex;align-items:center;gap:11px;padding:9px 0;background:none;border:none;
  cursor:pointer;font:inherit;font-size:15px;color:var(--cas-ink);text-align:left}
.cas__check:hover{opacity:.65}
.cas__box{flex:0 0 17px;width:17px;height:17px;border-radius:5px;border:1.6px solid #cfccc4;
  background:#fff;display:flex;align-items:center;justify-content:center}
.cas__box svg{display:none}
.cas__check[aria-pressed="true"] .cas__box{background:var(--cas-ink);border-color:var(--cas-ink)}
.cas__check[aria-pressed="true"] .cas__box svg{display:block}
.cas__check[aria-pressed="true"]{font-weight:600}
.cas__radio{flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1.6px solid #cfccc4;
  display:flex;align-items:center;justify-content:center}
.cas__radio i{width:8px;height:8px;border-radius:50%;background:transparent}
.cas__check[data-single][aria-pressed="true"] .cas__radio{border-color:var(--cas-ink)}
.cas__check[data-single][aria-pressed="true"] .cas__radio i{background:var(--cas-ink)}
.cas__pills{display:flex;flex-wrap:wrap;gap:8px}

/* kenmerken dropdown inside the search bar */
.cas__ddWrap{position:relative;flex:0 0 auto;display:flex;border-left:1px solid var(--cas-line)}
.cas__dd{display:flex;align-items:center;gap:9px;padding:0 20px;background:transparent;border:none;
  cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;color:var(--cas-ink);white-space:nowrap;
  transition:background .15s}
.cas__dd:hover{background:#f2f1ee}
.cas__ddCount{min-width:19px;height:19px;padding:0 5px;border-radius:40px;background:var(--cas-ink);
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cas__ddCount[hidden]{display:none}
.cas__ddWrap[data-open="true"] .cas__chev{transform:rotate(180deg)}
.cas__ddMenu{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:280px;
  background:#fff;border:1px solid var(--cas-line);border-radius:14px;padding:8px;text-align:left;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
.cas__ddWrap[data-open="true"] .cas__ddMenu{display:block}
.cas__ddList{max-height:288px;overflow-y:auto;padding:0 4px}
.cas__ddList::-webkit-scrollbar{width:6px}
.cas__ddList::-webkit-scrollbar-thumb{background:#d6d3cc;border-radius:8px}

/* scrollable pill group — lets a long list live in a small window */
.cas__scrollPills{position:relative}
.cas__find{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:9px 13px;
  border:1px solid var(--cas-line);border-radius:10px;background:#fff}
.cas__find input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:inherit;font-size:14.5px;color:var(--cas-ink)}
.cas__find input::placeholder{color:#a8a49b}
.cas__pillScroll{max-height:132px;overflow-y:auto;padding:2px 2px 10px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
.cas__pillScroll::-webkit-scrollbar{width:6px}
.cas__pillScroll::-webkit-scrollbar-thumb{background:#d6d3cc;border-radius:8px}
.cas__pillScroll[data-expanded="true"]{max-height:none;-webkit-mask-image:none;mask-image:none}
.cas__pill[hidden]{display:none}
.cas__more{margin-top:6px;background:none;border:none;padding:0;cursor:pointer;font:inherit;
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--cas-ink);
  border-bottom:1px solid var(--cas-ink)}
.cas__empty{margin:4px 0 0;font-size:13px;color:var(--cas-soft)}
.cas__pill{padding:9px 16px;border-radius:40px;border:1px solid var(--cas-line);background:#fff;
  color:var(--cas-ink);cursor:pointer;font:inherit;font-size:15px;font-weight:400;transition:all .15s}
.cas__pill:hover{border-color:var(--cas-ink)}
.cas__pill[aria-pressed="true"]{background:var(--cas-ink);color:#fff;border-color:var(--cas-ink)}
.cas__gmRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:15px;font-weight:700;color:var(--cas-ink)}
.cas__stars{display:flex;align-items:center;gap:7px}
.cas__star{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--cas-line);border-radius:12px;background:#fff;cursor:pointer;padding:0;
  transition:all .15s cubic-bezier(.22,.61,.36,1)}
.cas__star svg{fill:none;stroke:var(--cas-ink);stroke-width:1.5}
.cas__star:hover{border-color:var(--cas-ink)}
.cas__star[data-on="true"]{background:var(--cas-ink);border-color:var(--cas-ink)}
.cas__star[data-on="true"] svg{fill:#fff;stroke:#fff}
.cas__starAll{margin-left:auto;background:none;border:none;padding:0;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;color:var(--cas-soft);text-decoration:underline;text-underline-offset:3px}
.cas__starAll:hover{color:var(--cas-ink)}
.cas__range{width:100%;accent-color:var(--cas-ink);cursor:pointer;height:22px}
.cas__scale{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#a8a49b}
.cas__fFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px;border-top:1px solid var(--cas-line);background:#faf9f7}
.cas__clear{background:none;border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--cas-soft);text-decoration:underline;text-underline-offset:3px}
.cas__clear:hover{color:var(--cas-ink)}
.cas__apply{min-height:50px;padding:0 34px;background:var(--cas-ink);color:#fff;border:none;
  border-radius:40px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;transition:transform .15s cubic-bezier(.22,.61,.36,1)}
.cas__apply:hover{transform:translateY(-1px)}

/* popular chips */
.cas__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.cas__chipsLabel{font-size:12px;color:#fff;letter-spacing:1px;
  text-transform:uppercase;padding-top:7px;margin-right:4px}
.cas__chip{padding:7px 15px;border:1px solid rgba(255,255,255,.4);border-radius:40px;
  font-size:12.5px;font-weight:500;color:#fff;text-decoration:none;transition:all .15s}
.cas__chip:hover{background:#fff;color:var(--cas-ink);border-color:#fff}

/* mobile: stack, full-width CTAs, 48px targets */
@media(max-width:919px){
  .cas{padding:20px 16px}
  .cas__panel{border-radius:22px;padding:32px 20px}
  .cas__row{flex-wrap:wrap;gap:10px}
  .cas__bar{flex:1 1 100%;flex-wrap:wrap;min-height:0;padding:8px}
  .cas__city{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--cas-line);
    border-radius:0;min-height:52px;justify-content:flex-start}
  .cas__menu{width:100%}
  .cas__field{flex:1 1 100%;min-height:52px;padding:0 12px}
  .cas__cityWrap,
  .cas__ddWrap{flex:1 1 100%}
  .cas__ddWrap{border-left:none;border-bottom:1px solid var(--cas-line)}
  .cas__dd{width:100%;min-height:52px;justify-content:flex-start}
  .cas__ddMenu{left:0;right:auto;width:100%}
  .cas__submit{flex:1 1 100%;margin:8px 0 0;min-height:52px}
  .cas__toolWrap,
  .cas__row > .cas__tool{flex:1 1 calc(50% - 5px)}
  .cas__toolWrap .cas__tool{width:100%}
  .cas__tool{min-height:56px}
  .cas__chips{justify-content:flex-start}
  .cas__fBody{grid-template-columns:1fr;max-height:min(64vh,600px)}
  .cas__panelWrap{padding:0 16px}
  .cas__fCol + .cas__fCol{border-left:none;border-top:1px solid var(--cas-line)}
  .cas__fFoot{flex-direction:column-reverse;align-items:stretch}
  .cas__apply{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .cas *{transition:none!important;transform:none!important}
}