/* Sticky filter bar */
.tours__bar {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--text);
  color:var(--surface);
  padding:.95rem 3rem;
  display:flex;
  align-items:center;
  gap:1.8rem;
  border-bottom:3px solid var(--accent);
  box-shadow:0 8px 24px rgba(44,64,67,.18);
  flex-wrap:wrap
}

.tours__bar-group {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:300px
}

.tours__bar-group.is-individual,
.tours__bar-group.is-tags {
  flex:0 0 auto;
  min-width:0
}

/* «Индивидуальный тур» bar button — scrolls to the individual-tour CTA. The empty
   label above (in markup) keeps it level with the chips/tags controls. */
.tours__individual-btn {
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  /* Based on .tours__dd-btn's vertical box, trimmed 1px shorter (.5px off top+bottom). */
  padding:calc(.5rem - .5px) .95rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  background:var(--accent);
  color:var(--text);
  border:1px solid var(--accent);
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s
}

.tours__individual-btn:hover {
  background:transparent;
  color:var(--accent)
}

/* «Фильтры» button group — mobile-only (desktop uses inline chips/dropdowns). */
.tours__bar-group.is-filters {
  display:none;
  flex:0 0 auto;
  min-width:0
}

.tours__bar-label {
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-muted);
  font-weight:700;
  margin-bottom:.45rem
}

.tours__chips {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap
}

.tours__chip {
  padding:.45rem .95rem;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  background:transparent;
  color:var(--border);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s
}

.tours__chip .n {
  opacity:.55;
  margin-left:5px
}

.tours__chip.is-on {
  background:var(--accent);
  color:var(--text);
  border-color:var(--accent)
}

.tours__chip:hover:not(.is-on) {
  border-color:var(--accent);
  color:var(--accent)
}

/* Custom checkbox dropdown — used by the tag filter (all viewports) and the region
   filter on mobile (where chips are hidden). Multi-select via checkboxes. */
.tours__dd {
  position:relative
}

.tours__dd-btn {
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:9rem;
  box-sizing:border-box;
  padding:.5rem .9rem;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  background:transparent;
  color:var(--surface);
  border:1px solid rgba(255,255,255,.22);
  outline:none;
  cursor:pointer;
  text-align:left
}

.tours__dd-text {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.tours__dd.is-active .tours__dd-btn {
  border-color:var(--accent);
  color:var(--accent)
}

.tours__dd-caret {
  flex:0 0 auto;
  width:10px;
  height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FEAD60'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .2s
}

.tours__dd.is-open .tours__dd-caret {
  transform:rotate(180deg)
}

.tours__dd-panel {
  position:absolute;
  z-index:60;
  top:calc(100% + .4rem);
  left:0;
  min-width:100%;
  max-height:min(60vh,320px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(44,64,67,.24);
  padding:.35rem;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent
}

.tours__dd-panel::-webkit-scrollbar {
  width:8px
}

.tours__dd-panel::-webkit-scrollbar-track {
  background:transparent
}

.tours__dd-panel::-webkit-scrollbar-thumb {
  background:var(--border);
  border-radius:4px
}

/* Static dropdowns (inside the mobile filters popup): always-open inline list. */
.tours__dd--static .tours__dd-panel {
  position:static;
  max-height:none;
  border:none;
  box-shadow:none;
  padding:0
}

.tours__dd--static .tours__dd-opt {
  white-space:normal;
  font-size:15px;
  padding:.6rem .25rem
}

/* Collapsed options: only the first 3 show until «Показать все» expands the section. */
.tours__dd--static .tours__dd-opt--extra {
  display:none
}

.tours__filters-section.is-expanded .tours__dd--static .tours__dd-opt--extra {
  display:flex
}

.tours__more-toggle {
  display:inline-flex;
  align-items:center;
  margin-top:.4rem;
  padding:.25rem .25rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent);
  background:transparent;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px
}

.tours__more-toggle[hidden] {
  display:none
}

.tours__dd-opt {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .55rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  cursor:pointer
}

.tours__dd-opt:hover {
  background:rgba(254,173,96,.16)
}

.tours__dd-opt--all {
  border-bottom:1px solid var(--border);
  margin-bottom:.2rem
}

.tours__dd-opt input {
  accent-color:var(--accent);
  width:14px;
  height:14px;
  margin:0;
  cursor:pointer;
  flex:0 0 auto
}

/* «Фильтры» button (mobile) */
.tours__filters-btn {
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  background:transparent;
  color:var(--surface);
  border:1px solid rgba(255,255,255,.22);
  outline:none;
  cursor:pointer
}

.tours__filters-btn.is-active {
  border-color:var(--accent);
  color:var(--accent)
}

.tours__filters-btn svg {
  flex:0 0 auto
}

.tours__filters-count[hidden] {
  display:none
}

/* Out of flow (corner badge) so the button keeps a fixed width whether it shows or not. */
.tours__filters-count {
  position:absolute;
  top:-.45rem;
  right:-.45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.15rem;
  height:1.15rem;
  padding:0 .3rem;
  font-size:.62rem;
  font-weight:700;
  line-height:1;
  color:var(--text);
  background:var(--accent);
  border-radius:999px
}

/* Mobile filters popup */
.tours__filters {
  position:fixed;
  inset:0;
  z-index:120
}

.tours__filters[hidden] {
  display:none
}

.tours__filters-backdrop {
  position:absolute;
  inset:0;
  background:rgba(44,64,67,.55);
  opacity:0;
  transition:opacity .25s
}

.tours__filters.is-open .tours__filters-backdrop {
  opacity:1
}

.tours__filters-panel {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  max-height:85vh;
  background:var(--surface);
  border-top:3px solid var(--accent);
  border-radius:16px 16px 0 0;
  box-shadow:0 -12px 40px rgba(44,64,67,.3);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1)
}

.tours__filters.is-open .tours__filters-panel {
  transform:translateY(0)
}

.tours__filters-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.3rem;
  border-bottom:1px solid var(--border)
}

.tours__filters-title {
  font-family:var(--serif,var(--sans));
  font-size:1.15rem;
  font-weight:700;
  color:var(--text)
}

.tours__filters-x {
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  height:2.2rem;
  margin-right:-.5rem;
  background:transparent;
  border:none;
  color:var(--text);
  cursor:pointer
}

.tours__filters-body {
  overflow-y:auto;
  padding:.5rem 1.3rem 1rem
}

.tours__filters-section {
  padding:1rem 0
}

.tours__filters-section + .tours__filters-section {
  border-top:1px solid var(--border)
}

.tours__filters-section .tours__bar-label {
  display:block;
  color:var(--accent-muted);
  margin-bottom:.6rem
}

.tours__filters-foot {
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:1rem 1.3rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--border)
}

.tours__filters-reset {
  padding:.35rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--text-muted,var(--text));
  background:transparent;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px
}

.tours__filters-apply {
  width:100%;
  padding:.9rem;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text);
  background:var(--accent);
  border:none;
  cursor:pointer
}

body.tours-noscroll {
  overflow:hidden
}

@media(max-width:780px) {
  .tours__bar {
    padding:.85rem 1.2rem;
    gap:1rem
  }
  .tours__bar-group {
    min-width:0
  }
}

/* Mobile: region + tags collapse into the «Фильтры» popup; bar shows the button
   (left) + sort (right) on one row. */
@media(max-width:680px) {
  .tours__bar {
    flex-wrap:nowrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:.7rem;
    padding:.75rem 1rem
  }
  .tours__bar-group.is-region,
  .tours__bar-group.is-tags {
    display:none
  }
  /* «Фильтры» pinned left; «Индивидуальный тур» pinned right, shrinks if space is tight. */
  .tours__bar-group.is-filters {
    display:flex;
    flex:0 0 auto
  }
  .tours__bar-group.is-individual {
    flex:0 1 auto;
    min-width:0
  }
  .tours__individual-btn {
    font-size:.62rem;
    /* Taller vertical padding offsets the smaller font so the button matches the
       «Фильтры» button / tags dropdown height (both 13px text + .5rem padding). */
    padding:.62rem .8rem
  }
  .tours__filters-btn {
    font-size:13px;
    padding:.5rem .75rem;
    gap:.4rem
  }
  .tours__filters-btn svg {
    width:14px;
    height:14px
  }
  /* Custom buttons aren't native inputs, so a smaller size won't trigger iOS zoom;
     drop the desktop-measured fixed width so the dropdown sizes to content. */
  .tours__dd-btn {
    min-width:0 !important;
    font-size:13px;
    padding:.5rem .7rem
  }
  .tours__dd-opt {
    font-size:15px;
    padding:.5rem .55rem
  }
}

/* Results header (count + search) */
.tours__head {
  max-width:1300px;
  margin:0 auto;
  padding:2.5rem 3rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:3px solid var(--text);
  gap:1.5rem;
  flex-wrap:wrap;
  box-sizing:content-box
}

.tours__head-kicker {
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin-bottom:.4rem
}

.tours__head h2 {
  font-family:var(--display);
  font-weight:400;
  font-size:2.6rem;
  line-height:1;
  margin:0;
  letter-spacing:.005em;
  color:var(--text)
}

.tours__search {
  position:relative;
  width:300px;
  max-width:100%
}

.tours__search svg {
  position:absolute;
  left:.85rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text);
  pointer-events:none
}

.tours__search input {
  padding:.65rem 1rem .65rem 2.4rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.95rem;
  background:transparent;
  border:1px solid var(--text);
  outline:none;
  width:100%;
  color:var(--text)
}

@media(max-width:780px) {
  .tours__head {
    padding:2rem 1.2rem 1.2rem
  }
  .tours__head h2 {
    font-size:2rem
  }
  .tours__search {
    width:100%
  }
}

/* Individual-tour CTA card — styles shared with the single-tour page live in theme.css
   (.tours__cta-card etc.); here it just spans the full grid width. */
.tours__grid .tours__cta-card {
  grid-column:1/-1;
  margin:.8rem 0
}

/* Show-more button + "shown / total" counter */
.tours__more {
  max-width:1300px;
  margin:1.5rem auto 2.5rem;
  padding:1.6rem 3rem 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  box-sizing:content-box
}

.tours__more.hidden {
  display:none
}

.tours__more-btn {
  padding:.85rem 1.6rem;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  background:transparent;
  color:var(--text);
  border:1px solid var(--text);
  cursor:pointer;
  transition:background .2s,color .2s;
  display:inline-flex;
  align-items:center;
  gap:.55rem
}

.tours__more-btn:hover {
  background:var(--text);
  color:#fff
}

.tours__more-arrow {
  transition:transform .2s
}

.tours__more-btn:hover .tours__more-arrow {
  transform:translateX(3px)
}

.tours__more-note {
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600
}

.tours__more-note strong {
  color:var(--text);
  font-weight:700
}

@media(max-width:780px) {
  .tours__more {
    padding:1.6rem 1.2rem 0
  }
}

.tours__empty {
  max-width:1300px;
  margin:0 auto;
  padding:4rem 3rem;
  text-align:center;
  font-family:var(--serif);
  font-style:normal;
  font-size:1.2rem;
  color:var(--text-muted);
  box-sizing:content-box
}

.tours__empty.hidden {
  display:none
}