#hakoFilterPanel{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,420px);max-width:100%;height:100dvh;max-height:100dvh;padding:0;border:0;background:var(--card);color:var(--ink);box-shadow:-8px 0 28px #0002;overflow:hidden}
#hakoFilterPanel::backdrop{background:#0004}
#hakoFilterPanel[open]{animation:hako-filter-enter .22s ease-out}
@keyframes hako-filter-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#hakoFilterPanel[open]{animation:none}}
#hakoFilterForm{height:100%;display:flex;flex-direction:column;margin:0}
.hako-filter-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:calc(16px + var(--safe-t,env(safe-area-inset-top,0px))) max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--rule2)}
.hako-filter-head h2{margin:0;font-size:18px;font-weight:700}
.hako-filter-body{flex:1;min-height:0;overflow:auto;padding:4px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px))}
.hako-filter-body section{padding:10px 0;border-bottom:0}
.hako-filter-body h3{margin:0 0 6px;font-size:14px;letter-spacing:0}
.hako-select{position:relative}.hako-select:after{content:"";position:absolute;right:16px;top:18px;width:7px;height:7px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(45deg);pointer-events:none}
.hako-select select{appearance:none;width:100%;height:46px;padding:0 38px 0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.hako-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer}.hako-check input{width:20px;height:20px;accent-color:var(--ticket-action)}
.hako-capacity{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px}.hako-capacity-range{align-self:end;display:flex;align-items:center;justify-content:center;height:46px;font-size:18px;color:var(--sub)}.hako-capacity label>span{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}.hako-capacity label>div{display:flex;align-items:center;gap:8px}.hako-capacity input{width:0;min-width:0;flex:1;height:46px;box-sizing:border-box;border:1px solid var(--rule);border-radius:8px;padding:0 10px;background:var(--card);color:var(--ink);font-size:16px}.hako-capacity label>div>span{font-size:12px}
.hako-filter-help{color:var(--sub);font-size:11px;line-height:1.8;margin:6px 0 0}#filterError{font-size:12px;color:#c33;margin:10px 0 0}
.hako-filter-footer{flex:none;padding:16px max(20px,env(safe-area-inset-right,0px)) calc(16px + var(--safe-b,env(safe-area-inset-bottom,0px))) max(20px,env(safe-area-inset-left,0px));border-top:1px solid var(--rule2);background:var(--card)}


.hako-filter-body section:has(#filterVisited) h3{margin-bottom:0}
.hako-filter-body section:has(#filterVisited) .hako-check{margin-top:-4px}
/* Shared search/list/map surface, matching the approved compact mock. */
#app{position:relative}
#tools #onlyV,#tools #onlyVMob,#tools #filterBtn,#tools #qDone,#tools #resetFilters{display:none!important}
#app #tools .tab{padding-top:6px;padding-bottom:5px}
@media(max-width:860px){#app #tools .tab{padding-top:7px;padding-bottom:6px}}
#app #tools>.tabrow:has(#tabsT){border-bottom:1px solid var(--rule2)}
#tools #mobileFilterActions{display:flex!important;position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:none;height:49px;box-sizing:border-box;padding:6px 16px;gap:8px;align-items:center;background:var(--card);border:0}
#tools #mobileFilterActions>.searchwrap{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;flex:1 1 0;width:0;min-width:0;min-height:37px;height:37px;margin:0;padding:0 9px;border:1px solid var(--rule);border-radius:999px;box-shadow:none;background:var(--card);z-index:auto}
#tools #mobileFilterActions #q{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:35px;box-sizing:border-box;padding:0 0 0 21px;font-size:16px;line-height:normal;letter-spacing:0;border-radius:0}
#tools #mobileFilterActions #q::placeholder{color:transparent;opacity:0}
.hako-search-hint{position:absolute;inset:0 9px 0 30px;display:flex;align-items:center;pointer-events:none;color:var(--sub);font-size:12px;line-height:1;white-space:nowrap;overflow:hidden}
.searchwrap:not(:has(#q:placeholder-shown)) .hako-search-hint{display:none}
#tools .hako-search-circle{position:relative;flex:0 0 33px;width:33px;height:33px;min-height:33px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--ticket-action,#2c2e33);color:#fff;cursor:pointer;box-shadow:none;transform:none}
#tools .hako-search-circle:hover,#tools .hako-search-circle:active{filter:brightness(.94)}
#tools .hako-search-circle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#hakoFilterButton svg circle{fill:var(--ticket-action,#2c2e33)}
#hakoFilterButton.has-filters:after{content:"";position:absolute;right:0;top:0;width:7px;height:7px;background:var(--accent-pop);border:2px solid var(--card);border-radius:50%}
#hakoSortOptions{position:fixed;z-index:10000;width:240px;box-sizing:border-box;padding:8px;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 10px 32px #0002}
#hakoSortOptions[hidden]{display:none}.hako-sort-title{padding:6px 10px;color:var(--sub);font-size:11px;font-weight:700}
#hakoSortOptions label{display:flex;align-items:center;gap:10px;min-height:39px;padding:4px 10px;font-size:14px;border-radius:8px;cursor:pointer;box-sizing:border-box;background:transparent}
#hakoSortOptions input{width:17px;height:17px;margin:0;accent-color:var(--ink)}
body.hako-search-active #app #tools{position:absolute;top:var(--hako-tools-top,50px);left:0;right:0;width:100%;background:var(--card);z-index:500;transition:opacity .15s ease,transform .15s ease,visibility .15s;transform:translateY(0);opacity:1;visibility:visible;border-bottom:0}
body.hako-search-active #app #tools.hako-tools-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px)}
body.hako-search-active #app #list{padding-top:var(--hako-tools-height,140px);scroll-padding-top:var(--hako-tools-height,140px);padding-bottom:145px;overflow-anchor:none}
#list .hako-venue-count{position:static;text-align:right;padding:6px 16px;font-size:10px;line-height:1.4;letter-spacing:.08em;color:var(--sub);background:var(--card);border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
body.hako-map-view #app #list{display:none!important}
body.hako-map-view #app #map{display:block!important;position:absolute!important;left:0;right:0;top:var(--hako-tools-height,140px);bottom:0;width:auto;height:auto}
body.hako-map-view #app main{position:relative;display:block}
body.hako-map-view #app #tools{visibility:visible;opacity:1;transform:none}
@media(max-width:860px){#app #list .row.has-venue-thumbnail{padding-right:92px}#list .row .venue-list-thumbnail{width:64px;height:48px;max-height:calc(100% - 12px)}}
@media(prefers-reduced-motion:reduce){body.hako-search-active #app #tools{transition:none}}
@media(min-width:861px){body.hako-search-active .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:520px;height:59px;min-height:59px;box-sizing:border-box;padding:4px;z-index:900;background:var(--card);border:1px solid var(--rule);border-radius:999px;box-shadow:0 5px 24px #0002}body.hako-search-active .mobile-nav :is(button,a){display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:49px;gap:2px;padding:3px 0;border:0;background:transparent;color:var(--ink);text-decoration:none}body.hako-search-active .mobile-nav .navicon{display:flex;position:relative;align-items:center;justify-content:center;width:28px;height:24px;flex:0 0 24px}body.hako-search-active .mobile-nav .navlabel{font-size:9px;line-height:14px}}

#hakoSortOptions input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}