/* ============================================================================
   JOHNS GO KERALA — TOUR LISTING STYLES  (assets/css/pages/tour.css)
   ----------------------------------------------------------------------------
   Loaded ONLY by views/tour.blade.php via @push('styles').

   BLOCKS IN THIS FILE:
     .tour-search-summary -> what the visitor searched for (chips + result count)
     .tour-empty-state    -> "nothing matched" panel for a filtered search
     .tour-filter-link    -> sidebar row that sets one search criterion

   RULES FOR FUTURE SECTIONS:
     - Never style generic names (.title, .content, .btn, a, h3...).
     - Give every new section its own block name: .tour-pagination__*, etc.
     - Shared components (buttons, cards, sliders) belong in main.css only.
   ============================================================================ */

/* =========================================================
   SEARCH SUMMARY  (.tour-search-summary)
   Confirms the criteria the hero search bar handed over, and lets the
   visitor drop a single one without starting again.
========================================================= */
.tour-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #fff7f4;
  border: 1px solid #ffdfd4;
  border-radius: 14px;
}

.tour-search-summary__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.tour-search-summary__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6b6b6b;
  white-space: nowrap;
}
.tour-search-summary__eyebrow i {
  color: #ff4b25;
  font-size: 13px;
}

.tour-search-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-search-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  background: #ffffff;
  border: 1px solid #ffd3c5;
  border-radius: 30px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #2f2f2f;
}

.tour-search-summary__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffe6de;
  color: #ff4b25;
  font-size: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tour-search-summary__chip-remove:hover {
  background: #ff4b25;
  color: #ffffff;
}

.tour-search-summary__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.tour-search-summary__count {
  color: #6b6b6b;
}

.tour-search-summary__clear {
  font-weight: 600;
  color: #ff4b25;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.tour-search-summary__clear:hover {
  color: #d8381a;
}

/* =========================================================
   EMPTY STATE  (.tour-empty-state)
   Shown only when criteria were applied — an untouched listing keeps
   the theme's original placeholder card.
========================================================= */
.tour-empty-state {
  padding: 60px 24px;
  background: #fafafa;
  border: 1px dashed #e0e0e0;
  border-radius: 16px;
  text-align: center;
}

.tour-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 50%;
  color: #ff4b25;
  font-size: 24px;
}

.tour-empty-state__title {
  margin-bottom: 10px;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 600;
  color: #1b1b1b;
}

.tour-empty-state__text {
  max-width: 520px;
  margin: 0 auto 26px;
  color: #6b6b6b;
}

.tour-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* =========================================================
   SIDEBAR FILTER ROWS  (.tour-filter-link)
   The whole row is the click target; the checkbox inside is only a
   state indicator, so pointer events pass straight through to the link.
========================================================= */
.tour-filter-link {
  text-decoration: none;
  cursor: pointer;
}
.tour-filter-link .checkbox-area,
.tour-filter-link .checkbox-area input {
  pointer-events: none;
}
.tour-filter-link:hover .text-color,
.tour-filter-link.is-active .text-color {
  color: #ff4b25;
}
.tour-filter-link.is-active {
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 767px) {
  .tour-search-summary {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .tour-search-summary__meta {
    width: 100%;
    justify-content: space-between;
  }
  .tour-empty-state {
    padding: 44px 18px;
  }
  .tour-empty-state__title {
    font-size: 22px;
  }
}