/* ======================================================================
   SPLENDOR SAFARI — SIDEBAR FILTERS (v2, matches updated tours table)
   - Sticky on desktop (below navbar)
   - Mobile slide-in drawer
   - Supports Category (budget, mid-luxury, luxury, premium) + other tags
   - Harmonized with tour-cards.css palette & typography
   ====================================================================== */

/* --------------------------- Design Tokens --------------------------- */
:root{
  --ink:#243041;              /* deep navy text */
  --ink-2:#596275;            /* muted meta */
  --brand:#2e8b57;            /* emerald accents */
  --brand-600:#237a48;
  --accent:#e4d964;           /* soft gold for chips/cues */
  --border:#e7ecea;
  --card:#ffffff;
  --bg:#f7faf9;

  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;

  --fs-xxs:.78rem;
  --fs-xs:.86rem;
  --fs-sm:.92rem;

  --shadow-soft:0 6px 22px rgba(0,0,0,.06);
  --speed:.22s;
  --font:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* ----------------------------- Layout Wrap --------------------------- */
/* If your page already defines .tours-grid-layout, keep only one copy. */
.tours-grid-layout{
  display:grid;
  grid-template-columns:285px 1fr;
  gap:34px;
  max-width:1300px;
  margin:20px auto 44px;
  align-items:start;
  padding:0 16px;
}
@media (max-width:1100px){
  .tours-grid-layout{ grid-template-columns:1fr; gap:0; padding:0 2vw; margin:16px auto 28px; }
}

/* ------------------------------- Sidebar ----------------------------- */
.sidebar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
  padding:18px 14px;
  font-family:var(--font);
  font-size:var(--fs-sm);
  color:var(--ink);
  position:sticky;            /* desktop sticky */
  top:90px;                   /* sits under navbar; adjust to your navbar height */
  align-self:start;
  height:fit-content;
  min-width:0; max-width:295px;
  z-index:90;
  transition:box-shadow var(--speed), border-color var(--speed), transform var(--speed);
}

/* Header */
.sidebar-title{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:1rem; color:var(--brand-600); margin-bottom:12px;
}
.sidebar-title .fa{ color:var(--accent); font-size:1.1em; }

/* Groups */
.filter-group{
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--border);
}
.filter-group:last-child{ border-bottom:none; padding-bottom:0; }

.filter-label{
  display:flex; align-items:center; gap:8px;
  font-weight:600; color:var(--brand-600);
  font-size:.95rem; margin-bottom:8px;
}
.filter-label .fa{ color:var(--accent); }

/* Checklist (multi-select) */
.filter-list{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
}
.filter-list label{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-sm); color:var(--ink-2);
  cursor:pointer; padding:6px 6px; border-radius:8px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.filter-list label:hover{ background:#f7fbf7; }
.filter-list input[type="checkbox"]{
  accent-color:var(--brand);
  transform:scale(1.08);
}

/* Tag chips for Category preview (optional helper class if you echo selected tags) */
.selected-chips{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
}
.selected-chips .chip{
  background:#f6faf6; border:1px solid var(--border); color:var(--ink-2);
  padding:2px 8px; border-radius:999px; font-size:var(--fs-xxs); font-weight:600;
}

/* Inputs (Price/Duration) */
.price-slider-row{ display:flex; align-items:center; gap:8px; }
.price-slider-row input,
.sidebar input[type="text"],
.sidebar input[type="number"]{
  font-size:var(--fs-sm); color:var(--ink-2);
  background:#f7faf8; border:1px solid var(--border);
  padding:8px 10px; border-radius:10px; outline:none;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.price-slider-row input:focus,
.sidebar input[type="text"]:focus,
.sidebar input[type="number"]:focus{
  border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px rgba(228,217,100,.25);
}

/* Reset/Apply button */
.apply-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(90deg, var(--accent) 82%, #fff9be 100%);
  color:var(--brand-600); border:none;
  font-weight:700; font-size:.95rem;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:background var(--speed), color var(--speed), transform var(--speed);
}
.apply-btn:hover{ background:var(--brand); color:#fff; transform:translateY(-1px); }

/* ------------------------- Mobile Slide-In --------------------------- */
.sidebar-toggle-btn{
  display:none;
  position:relative; margin:0 0 12px 0;
  background:var(--accent); color:var(--brand-600);
  border:none; border-radius:999px; font-weight:700; font-size:1rem;
  padding:9px 18px; box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer;
  transition:background var(--speed), transform var(--speed);
}
.sidebar-toggle-btn .fa{ margin-right:8px; }
.sidebar-toggle-btn:hover{ background:#ffec7a; transform:translateY(-1px); }

.sidebar-close-btn{
  display:none; position:absolute; top:10px; right:12px;
  background:none; border:none; color:var(--brand-600);
  font-size:1.25rem; cursor:pointer; z-index:2;
}

@media (max-width:1100px){
  .sidebar-toggle-btn{ display:inline-flex; align-items:center; }

  .sidebar{
    position:fixed; top:0; left:0; height:100vh;
    max-width:94vw; width:84vw; margin:0; border-radius:0 16px 16px 0;
    transform:translateX(-110%);
    transition:transform .33s cubic-bezier(.43,.9,.35,1.03), box-shadow .2s;
    box-shadow:0 0 0 100vw rgba(0,0,0,0.25); /* backdrop */
    overflow-y:auto; z-index:1200;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 0 100vw rgba(0,0,0,0.38); }
  .sidebar-close-btn{ display:block; }
  .sidebar-title{ margin-top:28px; }
}
body.sidebar-open{ overflow:hidden; }

/* ----------------------- Visual Category Aids ----------------------- */
/* Optional colored dots next to category items (use via <span class="dot ...">) */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.dot.budget{ background:#6bbf59; }       /* gentle green */
.dot.mid-luxury{ background:#4a89dc; }   /* sapphire */
.dot.luxury{ background:#9b59b6; }       /* amethyst */
.dot.premium{ background:#e67e22; }      /* amber */

/* If you label <label> with .is-category, give it a slightly richer hover */
.filter-list label.is-category:hover{ background:#fbfdfb; transform:translateX(1px); }

/* ------------------------------ A11y ------------------------------- */
.sidebar :focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset:3px; border-radius:8px;
}

/* ------------------------------ Tiny ------------------------------- */
@media (max-width:600px){
  .sidebar{ font-size:.9rem; padding:12px 12px 18px; }
  .filter-label{ font-size:.9rem; }
  .apply-btn{ font-size:.9rem; padding:8px 14px; }
}

/* ----------------------- Optional: compact mode ---------------------- */
/* Add .sidebar--compact to sidebar for denser layout (if needed) */
.sidebar.sidebar--compact{ padding:12px 12px; }
.sidebar.sidebar--compact .filter-group{ margin-bottom:12px; padding-bottom:8px; }
.sidebar.sidebar--compact .filter-list label{ padding:4px 6px; }

/* ----------------------- Optional: subtle separators ----------------- */
.filter-group .subtle-note{
  font-size:var(--fs-xxs); color:var(--ink-2); opacity:.85; margin-top:6px;
}

/* ----------------------- Helper: sticky compensation ----------------- */
/* If you need extra push below a taller navbar, override via: */
/* .sidebar{ top:calc(var(--nav-height, 72px) + 18px); } */

/* Updated sidebar-filters.css for mobile-friendliness */

/* Sidebar */
.sidebar {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 80px;
  transition: left 0.3s ease;
}

.sidebar-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-label {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.filter-list label {
  display: block;
  margin-bottom: 5px;
}

.price-slider-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.apply-btn {
  width: 100%;
  background: #dc3545;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Mobile sidebar toggle */
.sidebar-toggle-btn {
  display: none;
  background: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .sidebar-toggle-btn {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    transition: left 0.3s ease;
  }

  .sidebar.open {
    left: 0;
  }

  .sidebar-close-btn {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

/*
 * Keep the desktop/tablet filter panel within the visible viewport.
 * An explicit height creates a real scroll container. The sidebar's existing
 * sticky position remains unchanged, while the mouse wheel scrolls its filter
 * items whenever the pointer is over the aside.
 */
@media (min-width: 769px) {
  .sidebar {
    height: calc(100vh - 96px);     /* 80px sticky offset + 16px bottom space */
    overflow-y: scroll;             /* Always make the aside a scroll container */
    overscroll-behavior: contain;   /* Keep wheel/touch scrolling in the aside */
  }
}

/*
 * Destinations only: use two equal columns to reduce this section's height.
 * The compact, full-width labels keep every destination neat and readable.
 */
#acc-destinations #destinationsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#acc-destinations #destinationsList .chip-check {
  display: block;
  min-width: 0;
  margin: 0;
}

#acc-destinations #destinationsList .chip-lbl {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  padding: 4px 5px;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: nowrap;
}