/* =========================
   Root + Global Layout
========================= */
:root{ --drawer-top:0px; --drawer-bottom:0px; --drawer-width:360px; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }

/* =========================
   Quick Search Bar
========================= */
.qs-bar{ display:flex; gap:8px; align-items:center; margin-top:2px }
.qs-input{
  width:100%; max-width:520px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--border,#2a2f3a); background:var(--bg-2,#0f1318); color:var(--text,#e5e7eb);
  outline:none; height:30px; line-height:18px; font-size:13px;
}
.qs-hint{ font-size:12px; color:#94a3b8 }

/* =========================
   Drawer Shell
========================= */
.search-drawer{
  position:fixed; left:0;
  top:var(--drawer-top); bottom:var(--drawer-bottom);
  width:18vw; min-width:300px; max-width:460px;
  background:#101114; color:#e5e7eb; z-index:500;
  transform:translateX(-105%);
  transition:transform .28s ease-out, box-shadow .28s ease-out;
  box-shadow:0 0 0 rgba(0,0,0,0);
  overflow-y:auto;
}
.search-drawer.open{ transform:translateX(0); box-shadow:24px 0 48px rgba(0,0,0,.36) }

/* =========================
   Drawer Content Blocks
========================= */
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #22252b;gap:12px}
.drawer-header h2{margin:0;font-size:1.1rem;font-weight:600;flex:1}
#drawer-close{
  flex-shrink:0;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border,#2a2f3a);
  border-radius:10px;
  background:var(--bg-2,#1a1d24);
  color:var(--text,#e5e7eb);
  font-size:1.1rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
#drawer-close:hover{
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.4);
  color:#f87171;
}
#drawer-close:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.block-label{display:block;font-weight:600;margin:14px 0 8px}
.filter-block{padding:10px 16px}
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #30343b;border-radius:999px;padding:6px 10px;cursor:pointer}
.chip input{accent-color:#4f46e5}
.check-all{grid-column:1/-1;font-weight:600}
.price-slider{
  position:relative;
  margin:6px 4px 12px;
  height:8px;
  background:rgba(148,163,184,.26);
  border:1px solid rgba(148,163,184,.45);
  border-radius:999px;
}
.price-slider.ui-widget.ui-widget-content{
  background-color:rgba(148,163,184,.18);
  background-image:none;
  border:1px solid rgba(148,163,184,.45);
  border-radius:999px;
}
.price-slider.ui-slider-horizontal{
  height:8px;
}
.price-slider .ui-slider-range{
  background:linear-gradient(90deg,#ef4444,#dc2626);
  border-radius:999px;
  border:0;
}
.price-slider .ui-slider-handle{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:#f87171;
  border:2px solid #ef4444;
  box-shadow:0 4px 12px rgba(239,68,68,.35), 0 0 0 1px rgba(255,255,255,.25) inset;
  transition:box-shadow .12s ease, transform .12s ease, background-color .12s ease;
  cursor:pointer;
  box-sizing:border-box;
  z-index:2;
}
.price-slider.ui-slider-horizontal .ui-slider-handle{
  top:50%;
  margin-left:0;
}

.price-slider .ui-slider-handle:hover{
  background:#fb7185;
  box-shadow:0 6px 14px rgba(239,68,68,.45), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.price-slider .ui-slider-handle:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(239,68,68,.35), 0 4px 12px rgba(239,68,68,.45);
}
.price-slider .ui-slider-handle:active{
  transform:translate(-50%,-50%) scale(1.05);
}
.price-readout{display:flex;gap:8px;align-items:center}
.price-readout input{width:100%;background:#0f1115;color:#e5e7eb;border:1px solid #30343b;padding:6px 8px;border-radius:8px}
.drawer-footer{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;padding:10px 16px;background:#0d0f13;border-top:1px solid #22252b}
.drawer-footer button{padding:8px 12px;border-radius:10px;border:1px solid #30343b;background:#1a1e24;color:#e5e7eb;cursor:pointer}
.btn-inline{padding:6px 10px;border:1px solid #30343b;border-radius:8px;background:#1a1e24;color:#e5e7eb;cursor:pointer}
.chips.summary{margin-top:8px;gap:6px;display:flex;flex-wrap:wrap}
.chips.summary .chip{padding:4px 8px}

/* =========================
   Type Flyout (docked to drawer)
========================= */
.type-flyout{
  position:fixed; z-index:5000;
  top:var(--drawer-top); bottom:var(--drawer-bottom);
  left:var(--drawer-width);
  width: min(max-content, calc(100vw - var(--drawer-width) - 16px));
  min-width: 320px;
  background:#0f1115; color:#e5e7eb; border-left:1px solid #22252b;
  box-sizing:border-box; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateX(8px);
  transition:transform .18s ease-out, opacity .18s ease-out, box-shadow .18s ease-out;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.type-flyout.open{ opacity:1; pointer-events:auto; transform:translateX(0); box-shadow:24px 0 48px rgba(0,0,0,.32) }

.tf-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #22252b}
.tf-actions{display:flex;gap:8px;align-items:center}
.tf-search{width:220px;max-width:38vw;background:#0f1115;color:#e5e7eb;border:1px solid #30343b;padding:6px 8px;border-radius:8px}
.tf-btn{padding:6px 10px;border-radius:8px;border:1px solid #30343b;background:#1a1e24;color:#e5e7eb;cursor:pointer}
.tf-btn.subtle{opacity:.85}
.tf-columns{display:grid;grid-template-columns:220px 1fr;height:calc(100% - 52px);max-width:100%;overflow:hidden;box-sizing:border-box}
.tf-groups{border-right:1px solid #22252b;overflow:auto;padding:8px}
.tf-group{display:block;width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:none;color:#e5e7eb;cursor:pointer}
.tf-group.is-active{background:#171a20;border-color:#30343b}
.tf-items{padding:8px;display:flex;flex-direction:column;height:100%;min-width:0}
.tf-all{display:inline-flex;gap:8px;align-items:center;margin:4px 2px 10px 2px;padding:6px 10px;border:1px solid #30343b;border-radius:8px;width:max-content}
.tf-grid{
  flex:1; overflow:auto; overscroll-behavior:contain;
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(11, min-content);
  grid-auto-columns: minmax(220px, 1fr);
  gap:6px 18px; align-content:start; min-width:0;
}
.tf-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;user-select:none}
.tf-item input{margin:0}
.tf-item.is-on{background:#171a20;border-color:#30343b}

/* =========================
   Pulltab (Search Button)
========================= */
/* Closed: peek from viewport edge */
#drawer-pull{
  position:fixed; z-index:30100;
  bottom: calc(16px + var(--drawer-bottom));
  left:-28px;                         /* peek when CLOSED */
  transform: rotate(90deg);
  transform-origin:center;
  padding:10px 14px;
  border-radius:10px 10px 0 0;
  border:1px solid #30343b;
  background:#1a1e24; color:#e5e7eb; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition: box-shadow .2s ease, background .15s ease; /* remove left transition to avoid lag */
}
#drawer-pull:hover{ box-shadow:0 6px 22px rgba(0,0,0,.45); background:#20252e; }

/* Open: dock to drawer’s right edge with same overlap */
body.drawer-open #drawer-pull{ left: calc(var(--drawer-width) - 28px); }

/* Small screens */
@media (max-width:720px){
  #drawer-pull{ left:-20px; padding:9px 12px; }
  body.drawer-open #drawer-pull{ left: calc(var(--drawer-width) - 20px); }
}


:root{
  --drawer-top: 0px;
  --drawer-bottom: 0px;
  --drawer-width: 360px;
  --pulltab-offset: 120px; /* ↑ raise this to move the tab higher */
}

#drawer-pull{
  position: fixed;
  z-index: 5000;
  bottom: calc(var(--drawer-bottom) + var(--pulltab-offset));
  left: -26px;
  transform: rotate(90deg);
  transform-origin: center;
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;
  border: 1px solid #30343b;
  background: #1a1e24;
  color: #e5e7eb;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: box-shadow .2s ease, background .15s ease; /* remove left transition to avoid lag */
}
/* Hide drawer-pull when mobile "More" menu is open */
@media (max-width:720px){
  body.mobile-menu-open #drawer-pull,
  body:has(.wb-mobile-drawer.open) #drawer-pull{
    display: none !important;
  }
}

/* when the drawer is open, it still docks to the right edge */
body.drawer-open #drawer-pull{
  left: calc(var(--drawer-width) - 28px);
}

/* optional: slightly different offset on small screens */
@media (max-width:720px){
  :root{ --pulltab-offset: 96px; }
  #drawer-pull{ left:-20px; padding:9px 12px; }
  body.drawer-open #drawer-pull{ left: calc(var(--drawer-width) - 28px); }
}