/* BASE — hidden feel */
::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.08);
  border-radius:20px;
  transition: all 0.3s ease;
}

/* 🔥 FULL WIDTH FIX (kills white gap issue) */
html, body{
  overflow-x:hidden;
}

/* DIM WHEN NOT HOVERED */
body:not(:hover)::-webkit-scrollbar-thumb{
  background:transparent;
}

/* SHOW ON HOVER */
body:hover::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.25);
}

/* ACTIVE DRAG */
::-webkit-scrollbar-thumb:active{
  background:rgba(0,0,0,0.4);
}


.browse-page{

padding-top:60px;

}

.browse-title{
font-size:32px;
margin-bottom:20px;
letter-spacing:-0.5px;
}

/* ADD SUBTEXT */
.browse-sub{
font-size:14px;
color:var(--text-gray);
margin-bottom:20px;
}
/* SEARCH */

.browse-search{

position:relative;

max-width:600px;

margin-bottom:20px;

}

.browse-search-input{

width:100%;

}

/* SEARCH SUGGESTIONS */

.search-suggestions{

position:absolute;

top:100%;

left:0;

width:100%;

background:white;

border:1px solid var(--border);

border-radius:12px;

margin-top:6px;

overflow:hidden;

display:none;

z-index:20;

}

.suggestion-item{

padding:10px 14px;

cursor:pointer;

display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

width:100%;
border:none;
background:transparent;
text-align:left;

}

.suggestion-item:hover{

background:#f3f4f6;

}

.suggestion-item small{
font-size:11px;
color:#64748b;
}

.suggestion-title{
padding:12px 14px 8px;
font-size:12px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
color:#64748b;
}

.suggestion-empty{
padding:14px;
font-size:13px;
color:#64748b;
}

/* FILTERS */

.browse-filters{

display:flex;

gap:12px;

margin-bottom:30px;

flex-wrap:wrap;

}

.filter-select{

padding:10px 14px;

border-radius:10px;

border:1px solid var(--border);

background:white;

cursor:pointer;

}

.listing-grid{

margin-top:20px;
display: grid;
gap: 16px;

}

.filter-scroll{
overflow-x:auto;
padding-bottom:10px;
}

.filter-bar{
display:flex;
gap:12px;
flex-wrap:nowrap;
}

/* ===============================
   FILTER OVERLAY
================================ */

.filter-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(255, 255, 255, 0.25);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(18px);

display:none;
align-items:center;
justify-content:center;

padding:20px;

z-index:5000;

/* ✅ THIS FIXES BACKGROUND SCROLL */
overflow:auto;
}

.filter-overlay.active{
display:flex;
}


/* ===============================
   FILTER PANEL (WIDER + SCROLLABLE)
================================ */

.filter-panel{
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);

  border-radius:24px;

  width:95%;
  max-width:420px;

  padding:16px;

  box-shadow:0 30px 80px rgba(0,0,0,0.2);
}


/* ===============================
   FILTER OPTIONS
================================ */

.filter-option{
  padding:10px 12px;
  border-radius:999px;

  font-size:12px;

  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.6);

  transition: all .2s ease;
}

/* hover */
.filter-option:hover{
  background:white;
  transform:translateY(-1px);
}

/* active */
.filter-option.active{
  background:#111;
  color:white;
  border-color:#111;
}

/* ===============================
   REMOVE BROKEN SCROLL
================================ */

.filter-section{
  margin-bottom:18px;
}

.filter-section label{
  font-size:12px;
  color:#6b7280;
  margin-bottom:8px;
  display:block;
}

/* GRID OPTIONS (NOT LONG LIST) */
.filter-section{
  display:grid;
  gap:8px;
}

/* 2 column layout */
.filter-section button{
  flex:1;
}

.filter-actions{
  position:sticky;
  bottom:0;

  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px);

  padding-top:12px;
  margin-top:10px;

  display:flex;
  gap:10px;
}

.filter-actions .btn{
  flex:1;
  border-radius:14px;
}

.filter-panel::-webkit-scrollbar {
width:6px;
}

.filter-panel::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.2);
border-radius:10px;
}

.filter-panel::-webkit-scrollbar-track {
background:transparent;
}

/* ===============================
   MORE FILTERS BUTTON
================================ */

.more-filters-wrap{
margin:12px 0 18px;
}

.more-filters-btn{
display:flex;
align-items:center;
gap:8px;
background:none;
border:none;
font-size:13px;
color:#6b7280;
cursor:pointer;
padding:6px 2px;
opacity:.75;
}

.more-filters-btn:hover{
opacity:1;
}

.filter-lines{
display:flex;
flex-direction:column;
gap:3px;
}

.filter-lines span{
display:block;
height:2px;
background:#6b7280;
border-radius:2px;
}

.filter-lines span:nth-child(1){
width:20px;
}

.filter-lines span:nth-child(2){
width:14px;
}

.filter-lines span:nth-child(3){
width:8px;
}


.filter-text{
font-size:11px;
color:#6b7280;
white-space:nowrap;
}



.browse-listings-container{
  margin-bottom: 60px; /* space before footer */
  padding-bottom: 20px;
  position: relative;
}

/* subtle divider line */
.browse-listings-container::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:40px;

  background:linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.08),
    transparent
  );
}