/* page styles: packages.html */
/* page-scoped: centers this page's masthead (crumb/label/title) — the
       shared .mast/.mast__inner classes are left alone for other pages. */
    .mast__inner{align-items:center;text-align:center}

    /* pkgCard — the same card used on cairo.html, nile-cruises-and-dahabiyas.html,
       desert.html, beaches.html, hot-deals-for-locals.html and religious.html,
       reused here as the one format for every journey we run, gathered in
       one searchable catalog instead of scattered one category per page. */
    .pkgGrid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
    @media (max-width:980px){.pkgGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:640px){.pkgGrid{grid-template-columns:1fr}}

    .pkgCard{
      position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
      background:var(--ink-lift);border-radius:16px;overflow:hidden;
      box-shadow:0 1px 2px rgba(0,0,0,.16),0 14px 30px rgba(0,0,0,.22);
      transition:transform .4s var(--ease),box-shadow .4s var(--ease);
    }
    .pkgCard:hover{transform:translateY(-3px)}
    .pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgba(0,0,0,.26)}
    .pkgCard__badge{
      position:absolute;top:14px;right:14px;z-index:2;
      background:var(--gold);color:var(--ink);font-size:10px;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
    }
    .pkgCard__photo{height:150px;background-size:cover;background-position:center;flex:none}
    .pkgCard__photo--placeholder{
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
      background:repeating-linear-gradient(135deg,rgb(var(--gold-rgb) / .10) 0 10px,rgb(var(--gold-rgb) / .04) 10px 20px);
      border-bottom:1px solid rgb(var(--gold-rgb) / .3);
    }
    .pkgCard__photo--placeholder svg{width:24px;height:24px;color:var(--gold);opacity:.8}
    .pkgCard__photo--placeholder span{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.85}
    body.theme-light .pkgCard__photo--placeholder{background:repeating-linear-gradient(135deg,rgb(var(--deep-rgb) / .05) 0 10px,rgb(var(--deep-rgb) / .02) 10px 20px)}
    .pkgCard__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
    .pkgCard__tag{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
    .pkgCard__name{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
    .pkgCard__meta{
      display:flex;gap:10px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--haze-dim);
    }
    .pkgCard__desc{font-size:12.5px;line-height:1.55;color:var(--haze);flex:1;margin:1px 0 0}
    .pkgCard__price{margin:2px 0 0;font-size:11px;color:var(--haze-dim)}
    .pkgCard__price strong{display:block;margin-top:1px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
    .pkgCard__cta{
      margin-top:8px;display:block;text-align:center;padding:10px;border-radius:9px;
      background:var(--deep);color:#fff;font-size:11.5px;font-weight:700;
      transition:opacity .3s var(--ease);
    }
    .pkgCard--featured .pkgCard__cta{background:var(--gold);color:var(--ink)}
    .pkgCard:hover .pkgCard__cta{opacity:.9}

    body.theme-light .pkgCard{background:#fff;box-shadow:0 1px 2px rgb(var(--deep-rgb) / .05),0 14px 30px rgb(var(--deep-rgb) / .08)}
    body.theme-light .pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgb(var(--deep-rgb) / .13)}
    body.theme-light .pkgCard__name{color:var(--ink)}
    body.theme-light .pkgCard__meta{color:var(--muted)}
    body.theme-light .pkgCard__desc{color:var(--muted-2)}
    body.theme-light .pkgCard__price strong{color:var(--ink)}

    /* catalog filters — a left-hand rail, the way a real filtered-listing
       page (not a top pill bar) reads: category, trip length and budget
       stacked as one set of choices, all click-or-drag, nothing typed.
       A card must clear all three to show. */
    .catalogLayout{
      display:grid;grid-template-columns:236px 1fr;gap:36px;align-items:start;
      padding:clamp(24px,3.5vw,40px) 0 clamp(28px,3.6vw,40px);
    }
    @media (max-width:860px){.catalogLayout{grid-template-columns:1fr}}

    /* the sidebar sticks under the nav and, past that point, scrolls
       inside its own box rather than dragging the whole page down with
       it — long as the filter list ever gets, the results column keeps
       its own scroll and the two never fight over one scrollbar. */
    .catalogSidebar{
      display:flex;flex-direction:column;gap:28px;
      position:sticky;top:calc(var(--navh,84px) + 20px);
      max-height:calc(100vh - var(--navh,84px) - 40px);
      overflow-y:auto;overscroll-behavior:contain;
      padding-right:10px;margin-right:-10px;
      scrollbar-width:thin;scrollbar-color:rgb(var(--gold-rgb) / .45) transparent;
    }
    .catalogSidebar::-webkit-scrollbar{width:6px}
    .catalogSidebar::-webkit-scrollbar-track{background:transparent}
    .catalogSidebar::-webkit-scrollbar-thumb{background:rgb(var(--gold-rgb) / .45);border-radius:999px}
    .catalogSidebar::-webkit-scrollbar-thumb:hover{background:rgb(var(--gold-rgb) / .7)}
    body.theme-light .catalogSidebar{scrollbar-color:rgb(var(--deep-rgb) / .3) transparent}
    body.theme-light .catalogSidebar::-webkit-scrollbar-thumb{background:rgb(var(--deep-rgb) / .3)}
    body.theme-light .catalogSidebar::-webkit-scrollbar-thumb:hover{background:rgb(var(--deep-rgb) / .5)}
    @media (max-width:860px){
      .catalogSidebar{position:static;max-height:none;overflow:visible;padding-right:0;margin-right:0}
    }

    /* mobile-only "Filters" toggle — on desktop the sidebar just sits there
       fully open, but that same stack of four groups eats the whole first
       screen on a phone before you ever see a package. Below 860px it
       collapses behind one pill; tapping it extends the panel open rather
       than navigating anywhere. The grid-rows 0fr/1fr swap animates a
       height nothing has actually measured, so it can't jump or clip. */
    .catalogFilterToggle{display:none}
    .catalogFilterPanel__inner{display:flex;flex-direction:column;gap:32px}
    @media (max-width:860px){
      .catalogSidebar{gap:0}
      .catalogFilterToggle{
        width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
        padding:13px 16px;border-radius:12px;border:1px solid var(--line-strong);
        background:var(--ink-lift);color:var(--paper);
        font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
        cursor:pointer;
      }
      body.theme-light .catalogFilterToggle{background:#fff;border-color:rgb(var(--deep-rgb) / .15);color:var(--ink)}
      .catalogFilterToggle__badge{
        display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
        padding:0 5px;border-radius:999px;background:var(--gold);color:var(--ink);
        font-size:10px;font-weight:800;letter-spacing:0;
      }
      .catalogFilterToggle__chev{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
      .catalogFilterToggle[aria-expanded="true"] .catalogFilterToggle__chev{transform:rotate(180deg)}

      .catalogFilterPanel{
        display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);
      }
      .catalogFilterPanel__inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:28px}
      .catalogFilterToggle[aria-expanded="true"] + .catalogFilterPanel{grid-template-rows:1fr;margin-top:14px}
    }

    .catalogGroup__title{
      margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.18em;
      text-transform:uppercase;color:var(--haze-dim);
    }
    .catalogGroup__hint{font-weight:500;letter-spacing:0;text-transform:none;opacity:.75}
    body.theme-light .catalogGroup__title{color:#7A9093}

    /* selected filter — deep blue rather than the bright gold, which is
       harsh against the pale page background */
    body.theme-light .catalogSidebar .filter[aria-pressed="true"],
    body.theme-light .catalogSidebar .filter[aria-pressed="true"]:hover{
      background:var(--deep);border-color:var(--deep);color:#fff;
    }

    .catalogFilters{display:flex;flex-direction:column;gap:6px}
    .catalogFilters .filter{width:100%;text-align:left;border-radius:10px}
    .catalogFilters--duration .filter,
    .catalogFilters--travelers .filter{color:var(--haze-dim)}
    .filter--sm{padding:8px 12px;font-size:9.5px;letter-spacing:.14em}
    body.theme-light .catalogFilters--duration .filter,
    body.theme-light .catalogFilters--travelers .filter{color:#7A9093}
    @media (max-width:860px){
      .catalogFilters{flex-direction:row;flex-wrap:wrap}
      .catalogFilters .filter{width:auto;text-align:center;border-radius:999px}
    }

    /* catalogSub — "Destinations" as a <details> disclosure rather than a
       plain filter button: opening it is itself a choice (see everything
       under Destinations), and the list inside narrows further to one
       place. Native <details>/<summary> gives the expand/collapse for
       free; JS only reads which button was clicked. */
    .catalogSub{margin:0}
    .catalogSub__toggle{
      display:flex;align-items:center;justify-content:space-between;gap:8px;
      list-style:none;
    }
    .catalogSub__toggle::-webkit-details-marker{display:none}
    .catalogSub__chev{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
    .catalogSub[open] .catalogSub__chev{transform:rotate(180deg)}
    .catalogSub__list{
      display:flex;flex-direction:column;gap:5px;
      margin:6px 0 0;padding-left:14px;
      border-left:1px solid var(--line-strong);
    }
    body.theme-light .catalogSub__list{border-color:rgb(var(--deep-rgb) / .15)}
    .catalogSub__list .filter{color:var(--haze-dim)}
    body.theme-light .catalogSub__list .filter{color:#7A9093}

    /* priceSlider — two native range inputs stacked on one track; each
       input is pointer-events:none except at its own thumb, so both
       handles stay independently draggable without any z-index juggling
       in JS. Values are an approximate USD figure so EGP-priced trips
       (Hajj, Umrah, the local deals) sit on the same one scale as the
       dollar-priced ones — the actual price on each card is unchanged. */
    .priceSlider__values{
      display:flex;justify-content:space-between;margin:0 0 14px;
      font-size:12.5px;font-weight:700;color:var(--paper);
    }
    body.theme-light .priceSlider__values{color:var(--ink)}
    .priceSlider__control{position:relative;height:20px}
    .priceSlider__track{
      position:absolute;left:2px;right:2px;top:8px;height:4px;border-radius:2px;
      background:var(--line-strong);
    }
    body.theme-light .priceSlider__track{background:rgb(var(--deep-rgb) / .15)}
    .priceSlider__range{position:absolute;top:0;height:4px;border-radius:2px;background:var(--gold)}
    .priceSlider__input{
      position:absolute;top:0;left:0;width:100%;height:20px;margin:0;
      -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;
    }
    .priceSlider__input:last-of-type{z-index:2}
    .priceSlider__input::-webkit-slider-thumb{
      -webkit-appearance:none;appearance:none;pointer-events:auto;
      width:16px;height:16px;border-radius:50%;background:var(--gold);
      border:2px solid var(--ink-lift);box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;
    }
    .priceSlider__input::-moz-range-thumb{
      pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--gold);
      border:2px solid var(--ink-lift);box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;
    }
    .priceSlider__input::-webkit-slider-runnable-track{background:transparent}
    .priceSlider__input::-moz-range-track{background:transparent}
    body.theme-light .priceSlider__input::-webkit-slider-thumb{border-color:#fff}
    body.theme-light .priceSlider__input::-moz-range-thumb{border-color:#fff}

    .catalogResults{display:flex;flex-direction:column;gap:16px;min-width:0}
    .catalogCount{margin:0;font-size:12px;color:var(--haze-dim)}
    .catalogCount strong{color:var(--paper);font-weight:700}
    body.theme-light .catalogCount{color:#7A9093}
    body.theme-light .catalogCount strong{color:var(--ink)}

    .pkgCard[hidden]{display:none}