/* Toggle switch (iOS style) */
.switch{ position:relative; display:inline-block; width:40px; height:22px; }
.switch input{ display:none; }
.slider{
  position:absolute; inset:0; background:#e9eef3; border-radius:999px;
  transition:.2s;
}
.slider:before{
  content:""; position:absolute; height:18px; width:18px; left:2px; top:2px;
  background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s;
}
.switch input:checked + .slider{ background:#127782; }
.switch input:checked + .slider:before{ transform:translateX(18px); }

/* Chips scroller */
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
.chip{
  border:1px solid #dfe6ea; background:#fff; border-radius:999px;
  padding:.35rem .65rem; font-weight:600; white-space:nowrap;
}
.chip.active{ border-color:#127782; color:#127782; }

/* Result card tweaks */
.result-card{ border:1px solid #e9edf0; border-radius:14px; }
.spec-pill{ background:#f3f6f9; border:1px solid #e6eaee; border-radius:999px; padding:.15rem .5rem; }
.btn-teal{ background:#127782; border:0; }
.btn-teal:hover{ background:#0f6a72; }

/* Keep the left filter nicely boxed */
.filters .accordion-button{ padding:.65rem 0; }

/* Media ratio on small screens */
@media (max-width: 767.98px){
  .result-media{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
}


/* Navbar height offset (adjust to your header height) */
:root{ --nav-offset: 80px; }  /* try 72–96px depending on your navbar */

/* Sticky left sidebar on desktop */
@media (min-width: 992px){
  .filters-pin{
    position: sticky;           /* sticks within its column */
    top: var(--nav-offset);     /* clears your navbar */
    max-height: calc(100vh - var(--nav-offset) - 12px);
    overflow: auto;             /* sidebar itself scrolls if taller */
    border-radius: 12px;
  }

  /* Optional: slimmer scrollbar inside the panel */
  .filters-pin::-webkit-scrollbar{ width: 8px; }
  .filters-pin::-webkit-scrollbar-thumb{
    background: #dfe6ea; border-radius: 999px;
  }
}

/* On mobile, behave normally */
@media (max-width: 991.98px){
  .filters-pin{
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* base chip */
.chip{
  border:1px solid #dfe6ea;
  background:#fff;
  color:#0f172a;
  padding:.35rem .65rem;
  border-radius:999px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}

/* on click/active -> white text */
.chip.active{
  background:#127782;
  border-color:#127782;
  color:#fff !important;
}
.chip.active i{ color:#fff; }             /* icons inherit white too */
.chip:focus-visible{ box-shadow:0 0 0 .2rem rgba(18,119,130,.25); }



:root{ --nav-offset: 80px; } /* adjust if your navbar is taller/shorter */

@media (min-width: 992px){
  .filters-pin{
    position: sticky;
    top: var(--nav-offset);
    max-height: calc(100vh - var(--nav-offset) - 12px);
    overflow: auto;
    border-radius: 12px;
  }
}
@media (max-width: 991.98px){
  .filters-pin{
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* === Offcanvas: layout & sizing === */
#filtersOffcanvas{
  width: min(92vw, 420px);              /* comfy width on phones/tablets */
}
@media (min-width: 576px){
  #filtersOffcanvas{ width: 420px; }
}

/* Sticky header inside the drawer */
#filtersOffcanvas .offcanvas-header{
  position: sticky; top: 0; z-index: 2;
  background:#fff; border-bottom:1px solid #eef1f4;
}

/* Body spacing and subtle separators */
#filtersOffcanvas .offcanvas-body{
  padding-top: .75rem; padding-bottom: 1rem;
}
#filtersOffcanvas hr{
  margin: .5rem 0 1rem; border-color:#eef1f4;
}

/* === Toggles (the iOS-style switch you already use) === */
#filtersOffcanvas .switch{ transform: scale(.92); }  /* slightly smaller in drawer */
#filtersOffcanvas .slider{ background:#e9eef3; }
#filtersOffcanvas .switch input:checked + .slider{ background:#127782; }

/* === Accordion styling (mobile-friendly) === */
#filtersOffcanvas .accordion-item{
  border-bottom:1px solid #eef1f4;
}
#filtersOffcanvas .accordion-button{
  padding:.65rem 0;
  font-weight:600;
  color:#0f172a;
  background:#fff;
  box-shadow:none;
}
#filtersOffcanvas .accordion-button:not(.collapsed){
  color:#127782;
  background:#f7fbfb;                   /* soft teal wash */
}
#filtersOffcanvas .accordion-button:focus{
  box-shadow: none;                      /* remove blue glow */
}
#filtersOffcanvas .accordion-button::after{
  /* keep Bootstrap chevron but make it subtler */
  filter: saturate(0) opacity(.6);
}
#filtersOffcanvas .accordion-body{
  padding:.5rem 0 1rem;
}

/* === Checkboxes & quick options === */
#filtersOffcanvas .form-check{
  margin:.35rem 0;
}
#filtersOffcanvas .form-check-input{
  width:1.05rem; height:1.05rem;
  border-color:#cfd6da;
  cursor:pointer;
}
#filtersOffcanvas .form-check-input:checked{
  background-color:#127782;
  border-color:#127782;
}
#filtersOffcanvas .btn.btn-sm.btn-outline-secondary{
  border-color:#d9e1e5; color:#0f172a; font-weight:600;
  border-radius:.6rem; padding:.35rem .6rem;
}
#filtersOffcanvas .btn.btn-sm.btn-outline-secondary:hover{
  background:#eef5f6; border-color:#cfe4e6;
}

/* === Apply button pinned at bottom of the drawer === */
#filtersOffcanvas .offcanvas-body > .btn-teal:last-child{
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: .75rem;
  box-shadow: 0 -6px 16px rgba(0,0,0,.06);
  border-radius:.65rem;
}

/* Your theme button if not defined */
.btn-teal{ background:#127782; color:#fff; border:0; }
.btn-teal:hover{ background:#0f6a72; color:#fff; }