/* all-tours.css — styles for all-tours.html
   Elite Egypt Tours
*/

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --gold: #0FB1A2;
      --gold-light: #3FC4B7;
      --gold-pale: #E8F8F7;
      --gold-border: #9FD6C7;
      --dark: #0A2340;
      --mid: #0E2D50;
      --text: #5A6B7A;
      --muted: #B8BEC6;
      --border: #E8EAED;
      --white: #FFFFFF;
      --bg: #F4F5F7;
      --success: #22C55E;
      --error: #EF4444;
      --radius: 16px;
      --trans: .22s ease;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Cairo', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ───────────── NAV ───────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--dark);
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      transition: opacity .25s ease, transform .38s cubic-bezier(.34,1.56,.64,1);
    }
    .nav-logo:hover { opacity: .9; transform: scale(1.03); }
    .nav-logo-img {
      height: 56px;
      width: auto;
      max-width: 210px;
      object-fit: contain;
      display: block;
      filter: brightness(1.25) contrast(1.1) drop-shadow(0 0 10px rgba(15,177,162,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    }

    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links a {
      font-family: 'Cairo', sans-serif;
      font-size: 14px;
      color: rgba(255,255,255,.6);
      text-decoration: none;
      transition: color .2s;
    }
    .nav-links a:hover { color: #0FB1A2; }

    .nav-cta {
      display: inline-block;
      padding: 10px 22px;
      background: linear-gradient(135deg, #0FB1A2, #3FC4B7);
      color: #fff;
      font-family: 'Cairo', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(201,168,76,.35);
      transition: transform .2s, box-shadow .2s;
    }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(201,168,76,.5); }

    @media (max-width: 680px) {
      .nav-links { display: none; }
      nav { padding: 0 20px; }
    }

    /* ───────────── PAGE HEADER ───────────── */
    .page-header {
      background: var(--dark);
      padding: 56px 40px 52px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .header-glow {
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 300px;
      background: radial-gradient(ellipse at center, rgba(201,168,76,.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .header-pill {
      display: inline-block;
      background: rgba(201,168,76,.14);
      border: 1px solid rgba(201,168,76,.32);
      color: var(--gold-light);
      font-family: 'Cairo', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 100px;
      margin-bottom: 16px;
      position: relative;
    }

    .page-header h1 {
      font-family: 'Cairo', sans-serif;
      font-size: clamp(28px, 4vw, 44px);
      color: #fff;
      font-weight: 700;
      line-height: 1.22;
      margin-bottom: 12px;
      position: relative;
    }

    .page-header > p {
      font-family: 'Cairo', sans-serif;
      font-size: 15px;
      color: rgba(255,255,255,.55);
      max-width: 480px;
      margin: 0 auto 28px;
      line-height: 1.6;
      position: relative;
    }

    /* Search bar */
    .search-bar {
      max-width: 540px;
      margin: 0 auto;
      display: flex;
      gap: 10px;
      position: relative;
    }

    .search-input-wrap {
      flex: 1;
      position: relative;
    }

    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .search-input {
      width: 100%;
      height: 50px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      padding: 0 18px 0 44px;
      font-family: 'Cairo', sans-serif;
      font-size: 14px;
      color: #fff;
      outline: none;
      transition: border-color var(--trans), background var(--trans);
    }
    .search-input::placeholder { color: rgba(255,255,255,.4); }
    .search-input:focus { border-color: var(--gold); background: rgba(255,255,255,.12); }

    .search-btn {
      height: 50px;
      padding: 0 24px;
      background: linear-gradient(135deg, #0FB1A2, #3FC4B7);
      color: #fff;
      font-family: 'Cairo', sans-serif;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(201,168,76,.35);
      transition: transform var(--trans), box-shadow var(--trans);
      white-space: nowrap;
    }
    .search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,.5); }

    /* ───────────── MAIN LAYOUT ───────────── */
    .main-layout {
      max-width: 1280px;
      margin: 0 auto;
      padding: 36px 32px 72px;
      display: grid;
      grid-template-columns: 288px 1fr;
      gap: 28px;
      align-items: start;
    }

    /* ───────────── FILTER SIDEBAR ───────────── */
    .filter-sidebar {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 4px 24px rgba(26,26,46,.07);
      position: sticky;
      top: 88px;
      overflow: hidden;
    }

    .sidebar-header {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sidebar-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Cairo', sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--dark);
    }

    .clear-all-btn {
      font-family: 'Cairo', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--gold);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 8px;
      display: none;
      transition: background var(--trans);
    }
    .clear-all-btn:hover { background: var(--gold-pale); }
    .clear-all-btn.visible { display: block; }

    .filter-block {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
    }
    .filter-block:last-child { border-bottom: none; }

    .filter-block-title {
      font-family: 'Cairo', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
    }

    /* Destination pills */
    .dest-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .dest-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border: 1.5px solid var(--border);
      border-radius: 100px;
      font-family: 'Cairo', sans-serif;
      font-size: 12.5px;
      color: var(--text);
      cursor: pointer;
      user-select: none;
      transition: border-color var(--trans), background var(--trans), color var(--trans);
      background: transparent;
    }
    .dest-pill:hover { border-color: var(--gold); color: var(--dark); }
    .dest-pill.active {
      background: var(--gold-pale);
      border-color: var(--gold);
      font-weight: 600;
      color: var(--dark);
    }

    .pill-check {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--gold);
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .dest-pill.active .pill-check { display: flex; }

    /* Price range slider */
    .price-labels {
      display: flex;
      justify-content: space-between;
      font-family: 'Cairo', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 10px;
    }

    .price-labels span.gold { color: var(--gold); }

    .slider-container {
      position: relative;
      height: 6px;
      background: var(--border);
      border-radius: 100px;
      margin: 18px 0 8px;
      user-select: none;
    }

    .slider-fill {
      position: absolute;
      height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      border-radius: 100px;
      top: 0;
      pointer-events: none;
    }

    .slider-thumb {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--white);
      border: 2.5px solid var(--gold);
      cursor: grab;
      box-shadow: 0 2px 8px rgba(201,168,76,.3);
      z-index: 2;
      transition: box-shadow var(--trans), transform .15s;
    }
    .slider-thumb:hover { box-shadow: 0 4px 14px rgba(201,168,76,.5); transform: translate(-50%, -50%) scale(1.1); }
    .slider-thumb:active { cursor: grabbing; }

    /* Duration rows */
    .duration-rows { display: flex; flex-direction: column; gap: 2px; }

    .duration-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      transition: background var(--trans);
    }
    .duration-row:hover { background: var(--gold-pale); }
    .duration-row.active { background: var(--gold-pale); }

    .custom-cb {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 2px solid var(--border);
      background: var(--white);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: background var(--trans), border-color var(--trans);
    }
    .duration-row.active .custom-cb { background: var(--gold); border-color: var(--gold); }

    .cb-check { display: none; }
    .duration-row.active .cb-check { display: block; }

    .dur-label-wrap { flex: 1; display: flex; flex-direction: column; }
    .dur-main { font-family: 'Cairo', sans-serif; font-size: 13.5px; color: var(--text); }
    .duration-row.active .dur-main { font-weight: 600; color: var(--dark); }
    .dur-sub { font-family: 'Cairo', sans-serif; font-size: 11.5px; color: var(--muted); }

    /* Rating rows */
    .rating-rows { display: flex; flex-direction: column; gap: 2px; }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 10px;
      cursor: pointer;
      border: 1.5px solid transparent;
      user-select: none;
      transition: background var(--trans), border-color var(--trans);
    }
    .rating-row:hover { background: var(--gold-pale); }
    .rating-row.active { background: var(--gold-pale); border-color: var(--gold-border); }

    .stars-wrap { display: flex; gap: 2px; flex-shrink: 0; }
    .rating-label { font-family: 'Cairo', sans-serif; font-size: 13px; color: var(--text); }
    .rating-row.active .rating-label { font-weight: 600; color: var(--dark); }
    .rating-sub { font-family: 'Cairo', sans-serif; font-size: 11px; color: var(--muted); margin-left: auto; }

    /* ───────────── RIGHT COLUMN ───────────── */

    /* Toolbar */
    .toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    #resultsCount {
      font-family: 'Cairo', sans-serif;
      font-size: 14px;
      color: var(--muted);
      flex: 1;
    }
    #resultsCount strong { color: var(--dark); }

    .sort-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sort-label {
      font-family: 'Cairo', sans-serif;
      font-size: 13px;
      color: var(--muted);
    }

    .sort-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: 1.5px solid var(--border);
      border-radius: 100px;
      background: var(--white);
      font-family: 'Cairo', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: border-color var(--trans), color var(--trans), background var(--trans);
    }
    .sort-btn:hover { border-color: var(--gold); color: var(--dark); }
    .sort-btn.active {
      background: var(--dark);
      border-color: var(--dark);
      color: var(--white);
      font-weight: 600;
    }
    .sort-btn.active svg { stroke: var(--gold); }
    .sort-btn svg { transition: transform var(--trans), stroke var(--trans); }
    .sort-btn.asc svg.sort-icon { transform: rotate(180deg); }

    .view-toggle { display: flex; gap: 4px; }

    .view-btn {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: border-color var(--trans), background var(--trans);
    }
    .view-btn svg { stroke: var(--muted); transition: stroke var(--trans); }
    .view-btn:hover { border-color: var(--gold); }
    .view-btn.active { background: var(--dark); border-color: var(--dark); }
    .view-btn.active svg { stroke: var(--gold); }

    /* Active chips */
    #activeChips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
      min-height: 0;
    }

    @keyframes chipIn {
      from { opacity: 0; transform: scale(.88); }
      to   { opacity: 1; transform: scale(1); }
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px 5px 14px;
      background: var(--gold-pale);
      border: 1px solid var(--gold-border);
      border-radius: 100px;
      font-family: 'Cairo', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--dark);
      animation: chipIn .2s ease;
    }

    .chip-remove {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(201,168,76,.25);
      border: none;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background var(--trans);
      flex-shrink: 0;
      padding: 0;
    }
    .chip-remove:hover { background: rgba(201,168,76,.5); }

    /* ───────────── TOUR CARDS ───────────── */
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #toursGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    #toursGrid.list-view {
      grid-template-columns: 1fr;
    }

    #toursGrid.list-view .tour-card {
      flex-direction: row;
    }

    #toursGrid.list-view .card-img {
      width: 200px;
      min-width: 200px;
      height: auto;
    }

    @media (max-width: 560px) {
      #toursGrid.list-view .tour-card {
        flex-direction: column;
      }
      #toursGrid.list-view .card-img {
        width: 100%;
        height: 172px;
      }
    }

    .tour-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 4px 22px rgba(26,26,46,.07);
      transition: transform var(--trans), box-shadow var(--trans);
      display: flex;
      flex-direction: column;
      animation: cardIn .3s ease both;
    }
    .tour-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 40px rgba(26,26,46,.14);
    }

    /* Card image */
    .card-img {
      height: 172px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--dark), var(--mid));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-emoji-bg {
      font-size: 52px;
      line-height: 1;
      position: relative;
      z-index: 1;
      transition: transform .4s ease;
    }
    .tour-card:hover .card-emoji-bg { transform: scale(1.05); }

    .card-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(26,26,46,.5) 0%, transparent 55%);
      pointer-events: none;
    }

    .card-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      font-family: 'Cairo', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 100px;
      z-index: 2;
    }
    .card-badge.hot  { background: var(--error); color: var(--white); }
    .card-badge.best { background: var(--success); color: var(--white); }
    .card-badge.new  { background: var(--gold); color: var(--dark); }

    .price-tag {
      position: absolute;
      bottom: 10px;
      left: 12px;
      background: var(--white);
      border-radius: 8px;
      padding: 4px 10px;
      font-family: 'Cairo', sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--dark);
      box-shadow: 0 2px 10px rgba(0,0,0,.2);
      z-index: 2;
      display: flex;
      align-items: baseline;
      gap: 3px;
    }
    .price-per { font-size: 11px; color: var(--muted); font-weight: 400; }

    .heart-btn {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,.9);
      border: none;
      cursor: pointer;
      display: grid;
      place-items: center;
      backdrop-filter: blur(4px);
      transition: transform var(--trans), background var(--trans), box-shadow var(--trans);
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .heart-btn:hover { transform: scale(1.1); }
    .heart-btn.liked { background: #FFF0F0; }
    .heart-btn .heart-svg { transition: fill var(--trans), stroke var(--trans); }
    .heart-btn.liked .heart-svg { fill: var(--error); stroke: var(--error); }

    /* Card inner */
    .card-inner {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .card-body {
      padding: 16px 16px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-dest {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'Cairo', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .card-title {
      font-family: 'Cairo', sans-serif;
      font-size: 16px;
      color: var(--dark);
      line-height: 1.3;
      font-weight: 600;
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-family: 'Cairo', sans-serif;
      font-size: 12.5px;
      color: var(--muted);
    }
    .meta-item { display: flex; align-items: center; gap: 5px; }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tag-pill {
      font-family: 'Cairo', sans-serif;
      font-size: 11.5px;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border);
      padding: 2px 9px;
      border-radius: 100px;
    }

    .card-footer {
      padding: 11px 16px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-added {
      font-family: 'Cairo', sans-serif;
      font-size: 12px;
      color: var(--muted);
    }
    .card-added strong { font-weight: 600; color: var(--dark); }

    .book-btn {
      padding: 8px 18px;
      background: linear-gradient(135deg, var(--gold), #0D9E91);
      color: var(--white);
      font-family: 'Cairo', sans-serif;
      font-size: 13px;
      font-weight: 600;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(201,168,76,.3);
      transition: transform var(--trans), box-shadow var(--trans);
    }
    .book-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(201,168,76,.45); }

    /* Empty state */
    #emptyState {
      grid-column: 1 / -1;
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 72px 24px;
      gap: 16px;
    }
    #emptyState.visible { display: flex; }

    .empty-icon {
      width: 72px;
      height: 56px;
      background: var(--gold-pale);
      border: 2px solid var(--gold-border);
      border-radius: 50%;
      display: grid;
      place-items: center;
    }

    #emptyState h3 {
      font-family: 'Cairo', sans-serif;
      font-size: 22px;
      color: var(--dark);
    }

    #emptyState p {
      font-family: 'Cairo', sans-serif;
      font-size: 14.5px;
      color: var(--muted);
      max-width: 340px;
      line-height: 1.6;
    }

    .reset-all-btn {
      padding: 11px 28px;
      background: var(--dark);
      color: var(--white);
      font-family: 'Cairo', sans-serif;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      transition: background var(--trans);
    }
    .reset-all-btn:hover { background: var(--mid); }

    /* ───────────── FOOTER ───────────── */
    footer {
      background: var(--dark);
      padding: 22px 40px;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-copy { font-family: 'Cairo', sans-serif; font-size: 13px; color: rgba(255,255,255,.45); }
    .footer-links { display: flex; gap: 16px; }
    .footer-links a {
      font-family: 'Cairo', sans-serif;
      font-size: 12.5px;
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color var(--trans);
    }
    .footer-links a:hover { color: rgba(255,255,255,.7); }

    /* ───────────── RESPONSIVE ───────────── */
    @media (max-width: 1024px) {
      #toursGrid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 860px) {
      .main-layout {
        grid-template-columns: 1fr;
        padding: 24px 20px 56px;
      }
      .filter-sidebar { position: static; }
    }

    @media (max-width: 560px) {
      #toursGrid { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .page-header { padding: 40px 20px 36px; }
      .search-bar { flex-direction: column; }
      /* sort text always visible */
    }

    /* ── Nav padding on mobile ── */
    @media (max-width: 480px) {
      nav { padding: 0 16px; height: 64px; }
      .nav-cta { padding: 8px 14px; font-size: 0.8rem; }
    }

    /* ── Mobile filter toggle button ── */
    .mobile-filter-toggle {
      display: none;
    }

    
    @media (max-width: 860px) {
      /* Show the filter toggle button on mobile */
      .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--dark);
        color: var(--white);
        font-family: 'Cairo', sans-serif;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 100px;
        cursor: pointer;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(10,35,64,.2);
        transition: background var(--trans), transform var(--trans);
      }
      .mobile-filter-toggle:hover {
        background: var(--mid);
        transform: translateY(-1px);
      }
      .mobile-filter-toggle svg {
        stroke: var(--gold);
        flex-shrink: 0;
      }
      /* Keep sort text visible but make buttons compact */
      .sort-wrap {
        flex-wrap: wrap;
        gap: 6px;
      }
      .sort-btn {
        padding: 7px 12px;
        font-size: 12px;
      }
    }

    /* ── Sidebar filter: collapsed by default on mobile ── */
    @media (max-width: 860px) {
      .filter-sidebar {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
      }
      .filter-sidebar.open { max-height: 2000px; }
    }

    /* ── Tour cards: 2 cols from 640px to 860px ── */
    @media (max-width: 860px) and (min-width: 561px) {
      #toursGrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    }

    /* ── Very small phones ── */
    @media (max-width: 360px) {
      #toursGrid { grid-template-columns: 1fr; gap: 12px; }
      .toolbar { gap: 8px; }
      .page-header { padding: 32px 14px 28px; }
      .page-header h1 { font-size: 1.5rem; }
    }

/* ================================================================
   RTL (Arabic) OVERRIDES - Mobile fixes
   ================================================================ */

/* RTL - reverse sort bar direction */
[dir="rtl"] .toolbar {
  direction: rtl;
}

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

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

[dir="rtl"] .search-bar {
  direction: rtl;
}

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

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

/* ================================================================
   MOBILE SORT BUTTONS FIX
   ================================================================ */

/* Make sure sort button text never disappears on small screens */
@media (max-width: 860px) {
  .sort-text {
    display: inline !important;
    white-space: nowrap;
  }

  .sort-btn {
    white-space: nowrap;
    min-width: auto;
  }

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

@media (max-width: 480px) {
  /* Sort buttons: show text + icon always */
  .sort-text {
    display: inline !important;
    font-size: 12px;
  }

  .sort-btn {
    padding: 7px 11px;
    gap: 5px;
    font-size: 12px;
  }

  /* Search input on mobile */
  .search-input {
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* RTL mobile fixes */
  [dir="rtl"] .search-icon {
    left: auto;
    right: 14px;
  }

  [dir="rtl"] .search-input {
    padding-right: 44px !important;
    padding-left: 18px !important;
    text-align: right;
  }
}