/* ============================================================
   SEWALOK – Nearby Filters (PURE GRINDR STYLE • AQUA BLUE 2025)
   Path: buddyx-child/nearbye-filters/nearby-filters.css
============================================================ */

:root{
  --sl-bg: #0b0b0d;
  --sl-surface: #0f1115;
  --sl-text: #e6eef6;
  --sl-muted: #9aa4af;
  --sl-accent: #06b6d4; /* AQUA BLUE GRINDR THEME */
  --sl-accent-glow: rgba(6,182,212,0.35);
  --sl-pill-bg: #14161a;
  --sl-shadow: 0 8px 22px rgba(6,182,212,0.15);
  --sl-radius: 14px;
  --sl-gap: 9px;
  --sl-trans: all .15s ease;
}

/* Wrapper */
#sl-filters-wrapper{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--sl-bg);
  padding:10px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  position:relative;
  z-index:30;
}

/* Scroll area */
#sl-filters-scroll{
  display:flex;
  gap:var(--sl-gap);
  padding:6px 14px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
}
#sl-filters-scroll::-webkit-scrollbar{ display:none; }

/* Pill Buttons */
.sl-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px 16px;
  min-height:40px;
  font-size:14px;
  font-weight:800;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background:var(--sl-pill-bg);
  color:var(--sl-text);
  cursor:pointer;
  user-select:none;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:var(--sl-trans);
  box-shadow:0 3px 12px rgba(0,0,0,0.25);
}

/* Hover */
.sl-filter-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(6,182,212,0.22);
}

/* Focus */
.sl-filter-btn:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(6,182,212,0.24), 0 6px 20px rgba(0,0,0,0.45);
}

/* Active / Pressed */
.sl-filter-btn.active,
.sl-filter-btn[aria-pressed="true"]{
  background:var(--sl-accent);
  color:#041018;
  border-color:rgba(255,255,255,0.12);
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 0 12px var(--sl-accent-glow),
    0 6px 24px rgba(6,182,212,0.3);
}

/* Disabled */
.sl-filter-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Map Explorer – Special Glow */
.sl-filter-btn[data-filter="map"]{
  background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.1);
}

.sl-filter-btn[data-filter="map"].active{
  background:var(--sl-accent);
  box-shadow:
    0 0 14px var(--sl-accent-glow),
    0 10px 30px rgba(6,182,212,0.35);
}

/* Summary Line */
.sl-filters-summary{
  margin-top:6px;
  padding:4px 14px;
  font-size:13px;
  color:var(--sl-muted);
  display:none;
}

/* Slider Popup */
.sl-slider-popup{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:99999;
}

/* Slider Box (Glass Card) */
.sl-slider-box{
  width:100%;
  max-width:420px;
  margin:0;
  padding:18px 18px 24px 18px;
  background:rgba(20,22,26,0.85);
  border-radius:18px 18px 0 0;
  box-shadow:0 -4px 25px rgba(0,0,0,0.5);
  color:var(--sl-text);
}

/* Title */
.sl-slider-box h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  text-align:center;
}

/* Range */
.sl-slider-box input[type="range"]{
  width:100%;
  margin:10px 0;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  -webkit-appearance:none;
}

.sl-slider-box input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--sl-accent);
  box-shadow:0 4px 14px rgba(6,182,212,0.3);
  cursor:pointer;
}

/* Value Text */
#sl-dist-val,
#sl-age-min-val,
#sl-age-max-val{
  text-align:center;
  margin-bottom:10px;
  font-size:15px;
  font-weight:800;
}

/* Action Buttons */
.sl-slider-actions{
  display:flex;
  gap:12px;
  margin-top:14px;
}

.sl-slider-actions button{
  flex:1;
  padding:10px 14px;
  border:none;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:var(--sl-trans);
}

#sl-apply-distance,
#sl-apply-age{
  background:var(--sl-accent);
  color:#041018;
}

#sl-cancel-distance,
#sl-cancel-age{
  background:transparent;
  color:var(--sl-text);
  border:1px solid rgba(255,255,255,0.12);
}

.sl-slider-actions button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(6,182,212,0.25);
}

/* Mobile Tweaks */
@media (max-width:480px){
  #sl-filters-scroll{
    padding:6px 10px;
    gap:8px;
  }
  .sl-filter-btn{
    font-size:13px;
    padding:7px 14px;
  }
}