/* ================================================================
   TOURS.CSS — Redesigned Tour Cards + Sort & Filter UI
   Elite Egypt Tours
   Depends on: design-system.css, main.css (loaded before this)
   ================================================================ */

/* ================================================================
   1. TOURS SECTION SHELL
   ================================================================ */
#tours {
  background: #F4F5F7;
}

/* ================================================================
   2. TOURS TOOLBAR  (search · sort · badge filters)
   ================================================================ */
.tours-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 18px 22px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* ── Live search ── */
.tours-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
  display: flex;
  align-items: center;
  background: #fafafa;
  border: 2px solid #ececec;
  border-radius: 50px;
  transition: border-color 0.25s;
}

.tours-search-wrap:focus-within {
  border-color: #0FB1A2;
  background: #fff;
}

.tours-search-wrap .search-icon {
  flex-shrink: 0;
  padding: 0 6px 0 12px;
  font-size: 0.9rem;
  color: #aaa;
  pointer-events: none;
  line-height: 1;
}

.tours-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px 10px 4px;
  border: none;
  border-radius: 50px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #0A2340;
  outline: none;
  background: transparent;
}

.tours-search-input::placeholder { color: #bbb; }
.tours-search-input:focus { outline: none; }

/* ── Sort dropdown ── */
.tours-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tours-sort-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7f8c8d;
  white-space: nowrap;
}

.tours-sort-select {
  padding: 10px 36px 10px 14px;
  border: 2px solid #ececec;
  border-radius: 50px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #0A2340;
  outline: none;
  cursor: pointer;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.25s;
}

.tours-sort-select:focus { border-color: #0FB1A2; }

/* ── Badge filter toggles ── */
.tours-badge-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.badge-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid #ececec;
  background: #fafafa;
  color: #7f8c8d;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
}

.badge-toggle .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.badge-toggle[data-badge="popular"] .dot   { background: #e84040; }
.badge-toggle[data-badge="new-badge"] .dot { background: #27ae60; }

.badge-toggle.active {
  border-color: currentColor;
}

.badge-toggle[data-badge="popular"].active {
  background: rgba(232, 64, 64, 0.10);
  color: #c0392b;
  border-color: #e84040;
}

.badge-toggle[data-badge="new-badge"].active {
  background: rgba(39, 174, 96, 0.10);
  color: #1e8449;
  border-color: #27ae60;
}

.badge-toggle.active .dot { opacity: 1; }

/* ── Result count ── */
.tours-result-count {
  font-size: 0.82rem;
  color: #aaa;
  white-space: nowrap;
  margin-left: auto;
}

/* ================================================================
   3. DESTINATION FILTER PILLS
   ================================================================ */
.tour-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.filter-btn {
  background: #fff;
  border: 2px solid #e8e0d8;
  color: #7f8c8d;
  padding: 9px 22px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.22s ease;
  letter-spacing: 0.2px;
}

.filter-btn:hover {
  border-color: #0FB1A2;
  color: #0FB1A2;
  background: rgba(15, 177, 162, 0.06);
}

.filter-btn.active {
  background: linear-gradient(135deg, #0FB1A2, #3FC4B7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 177, 162, 0.35);
}

/* ================================================================
   4. TOURS GRID
   ================================================================ */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 28px;
  align-items: stretch; /* equal-height rows */
}

/* ================================================================
   5. TOUR CARD
   ================================================================ */
.tour-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;   /* stretches body to fill card height */
  position: relative;
}

.tour-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
}

/* Subtle top-border accent on hover */
.tour-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0FB1A2, #3FC4B7);
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 2;
}

.tour-card:hover::before { opacity: 1; }

/* ================================================================
   6. CARD IMAGE
   ================================================================ */
.tour-img {
  position: relative;
  height: 210px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e0d8; /* fallback bg while loading */
}

.tour-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
  display: block;
}

.tour-card:hover .tour-img img {
  transform: scale(1.09);
}

/* Image fallback — shown when img fails to load */
.tour-img-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(135deg, #e8f5f4, #d4eeec);
  color: #5A6B7A;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tour-img-fallback .fallback-icon {
  font-size: 2.8rem;
  opacity: 0.6;
}

.tour-img img.img-error {
  display: none;
}

.tour-img img.img-error + .tour-img-fallback {
  display: flex;
}

/* Dark overlay gradient at image bottom */
.tour-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(0,0,0,0.28));
  pointer-events: none;
}

/* ================================================================
   7. CARD BADGES
   ================================================================ */
.tour-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 13px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tour-badge.popular {
  background: rgba(220, 50, 50, 0.88);
  color: #fff;
  box-shadow: 0 2px 8px rgba(220,50,50,0.40);
}

.tour-badge.popular::before { content: '🔥 '; font-size: 0.78rem; }

.tour-badge.new-badge {
  background: rgba(30, 160, 100, 0.88);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30,160,100,0.38);
}

.tour-badge.new-badge::before { content: '✦ '; font-size: 0.72rem; }

/* ================================================================
   8. FAVOURITE BUTTON
   ================================================================ */
.tour-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 0.22s ease, transform 0.2s ease;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  line-height: 1;
}

.tour-fav:hover {
  transform: scale(1.14);
}

/* Active / favourited state */
.tour-fav.fav-active {
  background: rgba(220, 50, 50, 0.12);
  box-shadow: 0 2px 10px rgba(220, 50, 50, 0.30);
}

/* Pop animation on toggle */
@keyframes fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}

.tour-fav.fav-pop { animation: fav-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ================================================================
   9. CARD BODY
   ================================================================ */
.tour-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1; /* fills remaining card height for equal-height cards */
}

.tour-dest {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5A6B7A;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.tour-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0A2340;
  margin-bottom: 10px;
  line-height: 1.35;
}

.tour-meta {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tour-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #7f8c8d;
  font-weight: 500;
}

/* ── Rating row ── */
.tour-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}

.stars {
  display: inline-flex;
  gap: 1px;
}

.star {
  color: #FFC857;
  font-size: 0.82rem;
  line-height: 1;
}

.star.half   { opacity: 0.6; }
.star.empty  { color: #d5d5d5; }

.rating-num {
  font-weight: 800;
  color: #0A2340;
  font-size: 0.88rem;
}

.rating-count {
  color: #a0a0a0;
  font-size: 0.78rem;
}

/* ── Push footer to bottom ── */
.tour-body-spacer { flex: 1; }

/* ================================================================
   10. CARD FOOTER
   ================================================================ */
.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(10, 35, 64, 0.07);
  padding-top: 14px;
  margin-top: auto;
}

.tour-price {}

.price-from {
  font-size: 0.72rem;
  color: #aaa;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0FB1A2;
  line-height: 1.1;
  font-family: 'Cairo', sans-serif;
}

.price-num span {
  font-size: 0.82rem;
  font-weight: 500;
  color: #bbb;
  margin-left: 1px;
}

.btn-tour {
  background: linear-gradient(135deg, #0FB1A2, #3FC4B7);
  color: #0A2340;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 14px rgba(15, 177, 162, 0.30);
  white-space: nowrap;
}

.btn-tour:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(15, 177, 162, 0.48);
}

/* ================================================================
   11. EMPTY / NO RESULTS STATE
   ================================================================ */
.tours-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: #bbb;
}

.tours-empty .empty-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 18px;
  opacity: 0.55;
}

.tours-empty p {
  font-size: 1.05rem;
  font-weight: 600;
  color: #c0b0a0;
  margin-bottom: 8px;
}

.tours-empty small {
  font-size: 0.85rem;
  color: #ccc;
}

/* ================================================================
   12. CARD ENTRANCE ANIMATION (staggered)
   ================================================================ */
@keyframes card-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-card {
  animation: card-in 0.40s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger via nth-child (up to 12) */
.tour-card:nth-child(1)  { animation-delay: 0.04s; }
.tour-card:nth-child(2)  { animation-delay: 0.09s; }
.tour-card:nth-child(3)  { animation-delay: 0.14s; }
.tour-card:nth-child(4)  { animation-delay: 0.19s; }
.tour-card:nth-child(5)  { animation-delay: 0.24s; }
.tour-card:nth-child(6)  { animation-delay: 0.29s; }
.tour-card:nth-child(7)  { animation-delay: 0.34s; }
.tour-card:nth-child(8)  { animation-delay: 0.39s; }
.tour-card:nth-child(9)  { animation-delay: 0.44s; }
.tour-card:nth-child(10) { animation-delay: 0.49s; }
.tour-card:nth-child(11) { animation-delay: 0.54s; }
.tour-card:nth-child(12) { animation-delay: 0.59s; }

/* ================================================================
   13. RTL OVERRIDES
   ================================================================ */
[dir="rtl"] .tours-search-wrap {
  flex-direction: row-reverse;
}

[dir="rtl"] .tours-search-wrap .search-icon {
  padding: 0 12px 0 6px;
}

[dir="rtl"] .tours-search-input {
  padding-left: 4px;
  padding-right: 4px;
  text-align: right;
}

[dir="rtl"] .tour-badge {
  left: auto;
  right: 14px;
}

[dir="rtl"] .tour-fav {
  right: auto;
  left: 14px;
}

/* ================================================================
   14. RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .tours-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px;
  }

  .tours-search-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .tours-sort-wrap {
    justify-content: space-between;
  }

  .tours-sort-select {
    flex: 1;
    min-width: 0;
  }

  .tours-badge-filters {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tours-result-count {
    margin-left: 0;
    font-size: 0.82rem;
  }
}

/* On very narrow screens, reorganise toolbar into 2-column rows */
@media (max-width: 480px) {
  .tours-toolbar {
    padding: 14px 14px;
    gap: 10px;
    border-radius: 12px;
  }

  .tours-sort-wrap {
    width: 100%;
    justify-content: space-between;
  }

  .tours-badge-filters {
    width: 100%;
  }

  .tours-result-count {
    display: block;
    width: 100%;
    text-align: right;
  }
}

@media (max-width: 580px) {
  .tours-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tour-img {
    height: 190px;
  }

  .tour-filters {
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .tours-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tour-img { height: 170px; }
  .tour-body { padding: 14px 14px 16px; }
  .tour-title { font-size: 0.95rem; }
}
/* ── Mobile Explicit Visibility Fixes ──────── */
@media (max-width: 767px) {
  /* Ensure Sort label is always visible */
  .tours-sort-label {
    display: inline !important;
    font-size: 0.80rem;
    white-space: nowrap;
    color: #7f8c8d;
    font-weight: 600;
  }
  
  /* Ensure search input text is visible */
  .tours-search-input {
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
    font-size: 0.85rem;
  }
  
  /* Ensure sort select text is visible */
  .tours-sort-select {
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
    font-size: 0.85rem;
  }
  
  /* Badge toggle text */
  .badge-toggle {
    color: #7f8c8d;
    font-size: 0.80rem;
  }
  
  /* Popular/New text visible */
  .badge-toggle:not(.active) {
    color: #7f8c8d !important;
    -webkit-text-fill-color: #7f8c8d !important;
  }
}

/* ================================================================
   EXTRA MOBILE RTL FIXES - Sort & Search visibility
   ================================================================ */

/* RTL tour sort wrap */
[dir="rtl"] .tours-sort-wrap {
  direction: rtl;
  flex-direction: row-reverse;
}

[dir="rtl"] .tours-sort-label {
  direction: rtl;
}

[dir="rtl"] .tours-sort-select {
  direction: rtl;
  text-align: right;
}

/* Mobile sort label: never disappear */
@media (max-width: 767px) {
  .tours-sort-label {
    display: inline !important;
    font-size: 0.80rem;
    white-space: nowrap;
    color: #7f8c8d;
  }

  .tours-sort-select {
    font-size: 16px !important; /* Prevent iOS zoom */
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
  }

  .tours-search-input {
    font-size: 16px !important; /* Prevent iOS zoom */
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
  }

  /* RTL sort on mobile */
  [dir="rtl"] .tours-sort-wrap {
    flex-direction: row-reverse;
    direction: rtl;
  }

  /* RTL search on mobile */
  [dir="rtl"] .tours-search-input {
    text-align: right;
    direction: rtl;
  }
}

/* ================================================================
   ANDROID CHROME FIX — Sort Select & Search Input Visibility
   Added: 2026-05-01
   Fix 1: tours-sort-select SVG background arrow hides text on Android
   Fix 2: tours-sort-label always visible on all Android browsers
   Fix 3: search input text always visible
================================================================ */

/* Android Chrome fix: remove SVG background on sort select */
@media (max-width: 767px) {
  /* Fix sort select - remove custom SVG arrow that conflicts on Android */
  .tours-sort-select {
    background-image: none !important;
    background: #fafafa !important;
    padding: 10px 14px !important;
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
    font-size: 16px !important; /* prevents iOS auto-zoom */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    min-width: 140px;
    max-width: 100%;
  }

  /* Ensure sort label is always visible on Android */
  .tours-sort-label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #7f8c8d !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Ensure sort wrap items are visible */
  .tours-sort-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Fix search input */
  .tours-search-input {
    color: #0A2340 !important;
    -webkit-text-fill-color: #0A2340 !important;
    font-size: 16px !important; /* prevents iOS auto-zoom */
    opacity: 1 !important;
  }

  /* Badge toggle text always visible */
  .badge-toggle {
    color: #7f8c8d !important;
    -webkit-text-fill-color: #7f8c8d !important;
    font-size: 0.80rem !important;
    opacity: 1 !important;
  }

  .badge-toggle[data-badge="popular"].active {
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
  }

  .badge-toggle[data-badge="new-badge"].active {
    color: #1e8449 !important;
    -webkit-text-fill-color: #1e8449 !important;
  }
}