/* ============================================================================
   Everjoy Filter UI — shared styles for all browse pages
   ============================================================================ */

/* --- Scrim ------------------------------------------------------------- */
.sheet-scrim[hidden]{display:none!important;}
.sheet-scrim{
  position:fixed; inset:0;
  z-index:20000;
  background:rgba(2,17,37,.45);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; transition:opacity .18s ease;
}
html.sheet-open .sheet-scrim{ opacity:1; }
html.sheet-open{ overflow:hidden; }

/* --- Panel: mobile bottom sheet; desktop modal ------------------------ */
.filters-panel{
  position:fixed; z-index:20010;
  width:100vw; height:100dvh;
  background:#fff; border-radius:0;
  box-shadow:0 -10px 30px rgba(2,17,37,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:max(12px, env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  will-change:transform,opacity;
}
.filters-panel.is-open,
html.sheet-open .filters-panel{
  opacity:1; visibility:visible; pointer-events:auto;
}

@media (min-width:961px){
  .filters-panel{
    width:min(720px,96vw);
    height:auto;
    max-height:min(86vh,880px);
    border-radius:16px;
    padding:18px 20px 12px;
    box-shadow:0 20px 60px rgba(2,17,37,.22);

    /* Center the modal on desktop */
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
}


/* --- Header inside panel ---------------------------------------------- */
#filtersTitle{
  font:700 18px/1.2 "Poppins", system-ui; margin:2px 36px 10px 2px; color:#0f172a; outline:none;
}
#filtersClose{
  position:absolute; top:12px; right:12px; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
}
#filtersClose:hover{ background:#f8fafc; }

/* --- Sections + collapsibles (optional) -------------------------------- */
.filter-section{
  border:1px solid #eef2f7; border-radius:14px; padding:10px 12px; margin:10px 0 12px; background:#fff;
}
.filter-section .filter-heading{ display:none; }
.filter-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:none; border:0; padding:8px 6px 6px;
  font:600 14.5px/1.2 "Poppins", system-ui; color:#0f172a; cursor:pointer;
}
.filter-toggle .chev{ width:20px; height:20px; transform:rotate(-90deg); transition:transform .18s ease; opacity:.8; }
.filter-toggle[aria-expanded="true"] .chev{ transform:rotate(0); opacity:1; }
.filter-body{ padding:8px 4px 10px; }

/* --- Segmented control ------------------------------------------------- */
.seg{ display:inline-flex; gap:6px; padding:4px; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc; }
.seg-btn{ appearance:none; background:none; border:0; padding:8px 10px; border-radius:9px; font:600 13px/1 "Poppins", system-ui; color:#0f172a; }
.seg-btn.is-active{ background:#0c7dd2; color:#fff; }
.seg-btn:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }

/* --- Sliders ----------------------------------------------------------- */
.budget-row,.capacity-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
}
.budget-row .min,.capacity-row .min,.budget-row .max,.capacity-row .max{
  font:600 12px/1 "Poppins", system-ui; color:#334155;
}
input[type="range"]{ flex:1; height:28px; background:transparent; }
input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:#e5e7eb; }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #0c7dd2; margin-top:-6px; box-shadow:0 1px 3px rgba(0,0,0,.1);
}
input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background:#e5e7eb; }
input[type="range"]::-moz-range-progress{ height:6px; border-radius:999px; background:#0c7dd2; }
input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #0c7dd2; }

/* --- Dropdowns (multi-select) ----------------------------------------- */
.ej-dd{ margin-top:6px; position:relative; }
.ej-dd-toggle{
  width:100%; min-height:44px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  font:600 14px/1.2 "Poppins", system-ui; color:#0f172a; cursor:pointer;
}
.ej-dd-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border-radius:12px; border:1px solid #e5e7eb; box-shadow:0 8px 30px rgba(2,17,37,.10);
  padding:8px 6px; max-height:48vh; overflow:auto; z-index:20050;
}
.ej-dd-menu[hidden]{ display:none !important; }
.multisel-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; font:500 14px/1.2 "Poppins", system-ui; }
.multisel-opt input{ width:16px; height:16px; }

/* 2-column menus on wide */
@media (min-width:720px){
  #cuisineMenu,#dietMenu,#servicesMenu,#barMenu,#catMenu,#vendorCatMenu,#rentalTypesMenu,#serviceTypeMenu,#amenitiesMenu{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:8px;
  }
}

/* --- Sticky footer actions inside sheet -------------------------------- */
.filter-actions{
  position:sticky; bottom:-1px; display:flex; gap:8px; justify-content:flex-end;
  padding:12px; margin-top:6px; border-top:1px solid #eef2f7; background:#fff;
}

/* --- Pills -------------------------------------------------------------- */
.filter-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.filter-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid #e5e7eb; border-radius:999px; background:#fff;
  font:600 12.5px/1 "Poppins", system-ui; color:#0f172a;
}
.filter-pill:hover{ background:#f8fafc; }
.filter-pill.clear-all{ background:#eaf3ff; border:1px dashed #cfe1ff; color:#0f172a; }
.filter-pill.clear-all:hover{ background:#dbeafe; border-color:#b6d4fe; }

/* --- Small gates -------------------------------------------------------- */
@media (min-width:961px){ #mbFilterToggle { display:none !important; } }
body:not(.pills-armed)   #filterPills { display:none !important; }
body:not(.pills-applied) #filterPills .pill--budget { display:none !important; }

/* Utility (if not in global.css) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }