/* ==========================================================================
   ZAEREEN — Ziyarat platform design system
   Powered by Oxford Travels

   Every token is --z- prefixed on purpose. The shared Oxford navbar/footer
   declare their own :root blocks that render after ours and would otherwise
   redefine generic names like --card-bg (see includes/footer_user.php, which
   drops --card-bg to 3% white and makes "solid" cards go see-through).
   Nothing in this file may be renamed to an unprefixed token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette — Raudat Tahera
   White marble, gold inlay, deep dome green. The turquoise is the tilework
   accent found across Bohra masjid interiors; it carries wayfinding and
   secondary emphasis so the gold is never asked to do two jobs at once.
   -------------------------------------------------------------------------- */

:root {
    /* --- ground & surfaces --- */
    --z-marble:       #fbf8f0;
    --z-cream:        #f4ecda;
    --z-cream-deep:   #e9dec5;
    --z-surface:      #fffdf7;
    --z-surface-2:    #f7f0e0;

    /* --- ink --- */
    --z-ink:          #17201a;
    --z-ink-2:        #4b554a;
    --z-ink-3:        #7f8a7e;

    /* --- brand: dome green --- */
    --z-green:        #0d2c22;
    --z-green-2:      #14412f;
    --z-green-3:      #1f6047;
    --z-green-soft:   #dfeae1;

    /* --- brand: gold leaf --- */
    --z-gold:         #c19a3f;
    --z-gold-deep:    #8f6f1c;
    --z-gold-light:   #e3c886;
    --z-gold-pale:    #f2e6c6;
    --z-gold-wash:    #f6efdb;
    --z-gold-leaf:    linear-gradient(135deg, #efdca7 0%, #d4b158 26%, #b08d2c 54%, #e0c67f 78%, #c19a3f 100%);

    /* --- accent: tilework turquoise --- */
    --z-teal:         #12655f;
    --z-teal-light:   #3d9a92;
    --z-teal-wash:    #e0efec;

    /* --- lines & shadow --- */
    --z-line:         #ded1b3;
    --z-line-soft:    #ebe1ca;
    /* For rules that must stay legible on the deeper cream fills — a hairline
       at --z-line disappears against --z-cream-deep at small sizes. */
    --z-line-strong:  #cbb995;
    --z-line-gold:    rgba(193, 154, 63, .42);
    --z-shadow-sm:    0 1px 2px rgba(23, 32, 26, .05);
    --z-shadow:       0 2px 6px rgba(23, 32, 26, .06), 0 14px 34px -22px rgba(13, 44, 34, .38);
    --z-shadow-lg:    0 4px 12px rgba(23, 32, 26, .07), 0 30px 62px -34px rgba(13, 44, 34, .48);

    /* --- semantic (seat status) --- */
    --z-open:         #1b6349;
    --z-open-bg:      #dfeae1;
    --z-few:          #91600f;
    --z-few-bg:       #f7ecd6;
    --z-sold:         #8a3024;
    --z-sold-bg:      #f5e3df;

    /* --- type --- */
    --z-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --z-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
    --z-arabic:  "Amiri", "Traditional Arabic", serif;

    /* --- metrics --- */
    --z-shell:   1400px;
    --z-radius:  14px;
    --z-radius-sm: 9px;

    /* The pointed keel arch, as a mask for imagery. Same profile as the
       #zArch clipPath that shapes the hero mihrab, so a photograph in a card
       niche and the mihrab itself are cut to one arch, not two. */
    --z-arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M50,0 C45.5,5 29,15 20,22.2 C6.5,32.2 0,48 0,64.2 L0,120 L100,120 L100,64.2 C100,48 93.5,32.2 80,22.2 C71,15 54.5,5 50,0 Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Ground textures
   -------------------------------------------------------------------------- */

:root {
    /* Arabesque — a fine ogee lattice with a small rosette in each cell.
       This is islimi, the flowing vegetal mode, rather than girih geometry:
       an ogee (pointed-oval) lattice with a four-petal rosette at the heart
       of every cell and a bud at each lattice point. The cusps meet at the
       tile edges, so the ogees run continuously in both directions.
       Deliberately small — 34px — so it reads as a fine damask on cream and
       as gold thread on the green bands, never as a graphic competing with
       the content. */
    --z-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23a8843a' stroke-width='1.05' opacity='0.15'%3E%3Cpath d=%22M0.00 -14.14 L2.26 -5.45 L10.00 -10.00 L5.45 -2.26 L14.14 0.00 L5.45 2.26 L10.00 10.00 L2.26 5.45 L0.00 14.14 L-2.26 5.45 L-10.00 10.00 L-5.45 2.26 L-14.14 0.00 L-5.45 -2.26 L-10.00 -10.00 L-2.26 -5.45 Z%22/%3E%3Cpath d=%22M40.00 -14.14 L42.26 -5.45 L50.00 -10.00 L45.45 -2.26 L54.14 0.00 L45.45 2.26 L50.00 10.00 L42.26 5.45 L40.00 14.14 L37.74 5.45 L30.00 10.00 L34.55 2.26 L25.86 0.00 L34.55 -2.26 L30.00 -10.00 L37.74 -5.45 Z%22/%3E%3Cpath d=%22M0.00 25.86 L2.26 34.55 L10.00 30.00 L5.45 37.74 L14.14 40.00 L5.45 42.26 L10.00 50.00 L2.26 45.45 L0.00 54.14 L-2.26 45.45 L-10.00 50.00 L-5.45 42.26 L-14.14 40.00 L-5.45 37.74 L-10.00 30.00 L-2.26 34.55 Z%22/%3E%3Cpath d=%22M40.00 25.86 L42.26 34.55 L50.00 30.00 L45.45 37.74 L54.14 40.00 L45.45 42.26 L50.00 50.00 L42.26 45.45 L40.00 54.14 L37.74 45.45 L30.00 50.00 L34.55 42.26 L25.86 40.00 L34.55 37.74 L30.00 30.00 L37.74 34.55 Z%22/%3E%3Cpath d=%22M20.00 5.86 L22.26 14.55 L30.00 10.00 L25.45 17.74 L34.14 20.00 L25.45 22.26 L30.00 30.00 L22.26 25.45 L20.00 34.14 L17.74 25.45 L10.00 30.00 L14.55 22.26 L5.86 20.00 L14.55 17.74 L10.00 10.00 L17.74 14.55 Z%22/%3E%3C/g%3E%3Cg fill='%23a8843a' opacity='0.13'%3E%3Cpath d=%22M20.00 -3.40 L23.40 0.00 L20.00 3.40 L16.60 0.00 Z%22/%3E%3Cpath d=%22M0.00 16.60 L3.40 20.00 L0.00 23.40 L-3.40 20.00 Z%22/%3E%3Cpath d=%22M40.00 16.60 L43.40 20.00 L40.00 23.40 L36.60 20.00 Z%22/%3E%3Cpath d=%22M20.00 36.60 L23.40 40.00 L20.00 43.40 L16.60 40.00 Z%22/%3E%3C/g%3E%3C/svg%3E");
    --z-pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23e3c886' stroke-width='1.05' opacity='0.085'%3E%3Cpath d=%22M0.00 -14.14 L2.26 -5.45 L10.00 -10.00 L5.45 -2.26 L14.14 0.00 L5.45 2.26 L10.00 10.00 L2.26 5.45 L0.00 14.14 L-2.26 5.45 L-10.00 10.00 L-5.45 2.26 L-14.14 0.00 L-5.45 -2.26 L-10.00 -10.00 L-2.26 -5.45 Z%22/%3E%3Cpath d=%22M40.00 -14.14 L42.26 -5.45 L50.00 -10.00 L45.45 -2.26 L54.14 0.00 L45.45 2.26 L50.00 10.00 L42.26 5.45 L40.00 14.14 L37.74 5.45 L30.00 10.00 L34.55 2.26 L25.86 0.00 L34.55 -2.26 L30.00 -10.00 L37.74 -5.45 Z%22/%3E%3Cpath d=%22M0.00 25.86 L2.26 34.55 L10.00 30.00 L5.45 37.74 L14.14 40.00 L5.45 42.26 L10.00 50.00 L2.26 45.45 L0.00 54.14 L-2.26 45.45 L-10.00 50.00 L-5.45 42.26 L-14.14 40.00 L-5.45 37.74 L-10.00 30.00 L-2.26 34.55 Z%22/%3E%3Cpath d=%22M40.00 25.86 L42.26 34.55 L50.00 30.00 L45.45 37.74 L54.14 40.00 L45.45 42.26 L50.00 50.00 L42.26 45.45 L40.00 54.14 L37.74 45.45 L30.00 50.00 L34.55 42.26 L25.86 40.00 L34.55 37.74 L30.00 30.00 L37.74 34.55 Z%22/%3E%3Cpath d=%22M20.00 5.86 L22.26 14.55 L30.00 10.00 L25.45 17.74 L34.14 20.00 L25.45 22.26 L30.00 30.00 L22.26 25.45 L20.00 34.14 L17.74 25.45 L10.00 30.00 L14.55 22.26 L5.86 20.00 L14.55 17.74 L10.00 10.00 L17.74 14.55 Z%22/%3E%3C/g%3E%3Cg fill='%23e3c886' opacity='0.075'%3E%3Cpath d=%22M20.00 -3.40 L23.40 0.00 L20.00 3.40 L16.60 0.00 Z%22/%3E%3Cpath d=%22M0.00 16.60 L3.40 20.00 L0.00 23.40 L-3.40 20.00 Z%22/%3E%3Cpath d=%22M40.00 16.60 L43.40 20.00 L40.00 23.40 L36.60 20.00 Z%22/%3E%3Cpath d=%22M20.00 36.60 L23.40 40.00 L20.00 43.40 L16.60 40.00 Z%22/%3E%3C/g%3E%3C/svg%3E");

    /* Marble veining for the pale bands — barely-there, on the scale of
       polished stone rather than a graphic. */
    --z-marble-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%230d2c22' stroke-width='.6' opacity='.045'%3E%3Cpath d='M-20 60Q60 40 120 78T290 52'/%3E%3Cpath d='M-20 140Q70 118 140 158T310 132'/%3E%3Cpath d='M-20 224Q80 202 150 240T310 214'/%3E%3Cpath d='M40 -20Q58 70 26 140T60 320'/%3E%3Cpath d='M226 -20Q244 80 212 150T246 320'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body.zaereen {
    margin: 0;
    background-color: var(--z-cream);
    background-image: var(--z-marble-tex), var(--z-pattern);
    background-size: 300px 300px, 26px 26px;
    color: var(--z-ink);
    font-family: var(--z-body);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.zaereen h1, .zaereen h2, .zaereen h3, .zaereen h4 {
    font-family: var(--z-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .005em;
    text-wrap: balance;
    margin: 0;
    color: var(--z-ink);
}

/* Buttons are excluded from the link colour on purpose.
   `.zaereen a` is (0,1,1); `.z-btn-green` is only (0,1,0), so on an <a> the
   link colour won and painted --z-green-2 (#14412f) text on the --z-green
   (#0d2c22) fill — 1.29:1, invisible. That hit every anchor styled as a
   button: "Reserve Seat" on the tour listing, "Apply for Visa" on the visa
   listing, and the card CTAs generally. A <button> is not an <a>, which is
   why the filter panel's Apply always looked right and the cards did not.
   Excluding .z-btn here lets each variant's own colour apply (#f2e9d5 on
   green, 12.3:1) instead of raising specificity variant by variant.

   :where() is what keeps this safe. A plain :not(.z-btn) would add the class's
   own weight, making this (0,2,1) — which then outranks `.z-crumb a` and
   `.z-footer a` (both (0,1,1), and both relying on source order to win), so
   the breadcrumb and every footer link turned dark green. :where() contributes
   zero specificity, so this stays exactly (0,1,1) as before and only the
   match changes, never the ranking. */
.zaereen a:not(:where(.z-btn)) { color: var(--z-green-2); text-decoration: none; }
.zaereen a:not(:where(.z-btn)):hover { color: var(--z-gold-deep); }
.zaereen img { max-width: 100%; display: block; }
.zaereen p { margin: 0 0 1em; }
.zaereen ul { margin: 0; padding: 0; list-style: none; }

.zaereen :focus-visible {
    outline: 2px solid var(--z-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.z-shell {
    width: 100%;
    max-width: var(--z-shell);
    margin: 0 auto;
    padding: 0 24px;
}

.z-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — keyboard users land here first. */
.z-skip {
    position: absolute; left: 12px; top: -60px; z-index: 999;
    background: var(--z-green); color: #fff; padding: 10px 18px;
    border-radius: 0 0 8px 8px; font-size: 14px; transition: top .18s ease;
}
.z-skip:focus { top: 0; color: #fff; }

/* ==========================================================================
   Fatemi motifs
   ========================================================================== */

/* --- Al-Aqmar medallion between two gold rules --- */
.z-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}
.z-orn::before, .z-orn::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    max-width: 190px;
    background: linear-gradient(90deg, transparent, var(--z-gold-light) 55%, var(--z-gold));
}
.z-orn::after { background: linear-gradient(270deg, transparent, var(--z-gold-light) 55%, var(--z-gold)); }

.z-orn-medallion {
    flex: none;
    display: block;
    width: 34px; height: 34px;
    color: var(--z-gold);
}
.z-orn-medallion svg { width: 100%; height: 100%; display: block; }

/* A smaller lozenge for tight spots (the hero arch rule). */
.z-orn-mark {
    flex: none;
    width: 9px; height: 9px;
    transform: rotate(45deg);
    border: 1px solid var(--z-gold);
    background: var(--z-gold-wash);
}

/* --- stepped merlon cresting (shurfa) ---
   Tiles across the top edge of a green band so the band reads as a wall.
   `width` is left to the repeat; height fixes the merlon scale. */
.z-cresting {
    position: absolute;
    left: 0; right: 0;
    height: 15px;
    width: 100%;
    display: block;
    pointer-events: none;
}
.z-cresting.is-flip { transform: scaleY(-1); }

/* The tiled version: a repeating background rather than one stretched glyph,
   so merlons keep their proportion at any viewport width. */
.z-crest-band {
    position: absolute;
    left: 0; right: 0;
    height: 16px;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: auto 16px;
    background-position: center bottom;
}
.z-crest-band.is-top {
    top: -15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 18'%3E%3Cpath d='M0,18 L0,13 L4,13 L4,8 L8,8 L8,3 L12,0 L16,3 L16,8 L20,8 L20,13 L24,13 L24,18 Z' fill='%230d2c22'/%3E%3C/svg%3E");
}
.z-crest-band.is-bottom {
    bottom: -15px;
    transform: scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 18'%3E%3Cpath d='M0,18 L0,13 L4,13 L4,8 L8,8 L8,3 L12,0 L16,3 L16,8 L20,8 L20,13 L24,13 L24,18 Z' fill='%230d2c22'/%3E%3C/svg%3E");
}

/* --- squared-Kufic frieze, used as a divider --- */
.z-kufic-rule {
    height: 15px;
    color: var(--z-gold);
    opacity: .5;
    background-repeat: repeat-x;
    background-size: auto 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M2,14 V4 H6 V10 H10 V2 H14 V14 H18 V6 H22 V14 M26,14 V2 H30 V8 H34 V4 H38 V14 H42 V6 H46 V14' fill='none' stroke='%23c19a3f' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* --- arcade panel, for decorative rails --- */
.z-arcade { width: 100%; height: 100%; display: block; color: var(--z-gold); opacity: .3; }

/* --- gold manuscript frame: a hairline inside a hairline --- */
.z-framed { position: relative; }
.z-framed::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--z-line-gold);
    border-radius: calc(var(--z-radius) - 5px);
    pointer-events: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.z-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--z-body);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 13px 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    /* Set here rather than inherited from the link rule, which no longer
       matches buttons (see .zaereen a:not(.z-btn) above). */
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.z-btn:hover { transform: translateY(-1px); }
.z-btn:active { transform: translateY(0); }

/* Gold leaf, not a flat fill: the multi-stop gradient gives the edge-catch of
   beaten leaf, which is how gold reads on Bohra masjid inlay. */
.z-btn-gold {
    background: var(--z-gold-leaf);
    color: #2a1f00;
    box-shadow: inset 0 1px 0 rgba(255, 250, 232, .5), var(--z-shadow-sm);
}
.z-btn-gold:hover {
    background: linear-gradient(135deg, #d4b158 0%, #b08d2c 40%, #8f6f1c 100%);
    color: #fffaf0;
    box-shadow: inset 0 1px 0 rgba(255, 250, 232, .28), var(--z-shadow);
}

.z-btn-green {
    background: var(--z-green);
    color: #f2e9d5;
    box-shadow: inset 0 0 0 1px rgba(227, 200, 134, .18);
}
.z-btn-green:hover { background: var(--z-green-2); color: #fffaf0; box-shadow: inset 0 0 0 1px var(--z-line-gold); }

.z-btn-outline {
    background: transparent;
    color: var(--z-green);
    border-color: var(--z-line-gold);
}
.z-btn-outline:hover {
    border-color: var(--z-gold);
    background: var(--z-gold-wash);
    color: var(--z-green);
}

.z-btn-block { width: 100%; }
.z-btn-sm { padding: 9px 18px; font-size: 13.5px; }

.z-btn .z-arrow { transition: transform .2s ease; }
.z-btn:hover .z-arrow { transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */

.z-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 40;
    padding: 14px 0;
}
.z-header.is-solid {
    position: sticky;
    top: 0;
    background: rgba(247, 240, 226, .94);
    backdrop-filter: blur(12px);
    /* No border-bottom. The rule under the nav was asked to go; the dark
       .z-pagehead directly below supplies the edge on every inner page. */
    padding: 10px 0;
}

.z-header-in {
    display: flex;
    align-items: center;
    gap: 28px;
}
/* The nav is centred in the BAR, not in the space left over. `margin:0 auto`
   alone centres it between its neighbours, and the brand (78px) and the
   actions (163px) are not the same width — so it landed some 40px left of
   true centre. Giving both sides an equal flex share fixes the midpoint. */
.z-header-in > .z-brand,
.z-header-in > .z-header-actions { flex: 1 1 0; min-width: 0; }
.z-header-in > .z-header-actions { justify-content: flex-end; }

/* --- wordmark ---
   The supplied artwork is a vertical lockup: a calligraphic teardrop above a
   blackletter "Zaereen.com". In a horizontal bar the two are set side by
   side instead, so both stay legible at header height. Sizes are driven off
   `height` with `width:auto` — the mark is 300x523 and the wordmark 760x118,
   so fixing both dimensions would squash them. */
/* The logo sits on its own dark plate so it reads as the brand rather than
   as one more icon in the row beside it — the nav marks are all dark-on-
   cream, and this is the one element that should not look like them. The
   green measures 12:1 against the bar, which is what does the separating;
   the gold hairline and the jali texture are the same treatment every
   other green surface on the site carries. */
.z-brand {
    display: flex;
    align-items: center;
    /* The link is the layout slot the nav is centred against, so it must
       stay free to take its flex share. The plate therefore lives on the
       image inside it — putting it here stretched the green across the
       whole slot (357px) instead of hugging the logo. */
    justify-content: flex-start;
}

/* The lockup is 765x742 — all but square, because the artwork stacks the
   calligraphic mark over the wordmark. In a bar this deep that caps its
   height at about 64px, and the wordmark inside it is then small; the
   tagline beside it carries the reading weight, which is why that line is
   set the size it is rather than shrunk to match the logo. */
/* 50px, giving a 66px plate with its 8px padding. At 60px the plate stood
   76px tall against nav items of 63 and My Journey of 68 — it overhung the
   row by 7px top and bottom, which is what read as the logo sitting out of
   line. Keep this in step with the nav item height if either changes. */
.z-brand-lockup {
    height: 50px;
    width: auto;
    display: block;
    flex: none;
    /* The plate: it is what stops the logo reading as one more of the
       dark-on-cream nav icons beside it. Green measures 12:1 against the
       bar, and the gold hairline plus jali texture are the treatment every
       other green surface on the site carries. */
    padding: 8px 14px;
    box-sizing: content-box;
    border-radius: var(--z-radius-sm, 10px);
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    box-shadow: inset 0 0 0 1px var(--z-line-gold);
}

/* Beside the logo now, not beneath a wordmark, so it no longer has a width
   to match and is free to be set for legibility. Deeper than
   --z-gold-deep, which measures only 4.15:1 on the header cream — under
   the 4.5:1 small text needs; this reads at 5.88:1. */
.z-brand-tag {
    font-size: 10px;
    letter-spacing: .08em;
    font-weight: 600;
    text-transform: uppercase;
    color: #7a5c12;
    /* One line. A max-width here wrapped it onto three, which beside a
       square logo read as a paragraph rather than a tagline. */
    white-space: nowrap;
}

/* --- primary nav --- */
.z-nav {
    display: flex;
    align-items: center;
    /* Air between the icon plates. Each item already has its own 10px of
       side padding, so this is the gap between plate edges rather than
       between labels. */
    gap: 12px;
    margin: 0 auto;
}
.z-nav > li { position: relative; }
.z-nav a.z-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;
    font-size: 12.5px;
    color: var(--z-ink);
    border-radius: 7px;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}
.z-nav a.z-nav-link svg { flex: none; color: var(--z-navc, var(--z-gold-deep)); }
.z-nav-label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; line-height: 1.2; }
.z-nav a.z-nav-link .z-nav-caret { opacity: .55; }
.z-nav a.z-nav-link:hover { color: var(--z-gold-deep); background: rgba(193, 154, 63, .1); }
/* On hover the whole item takes the product's colour, so the bar tells you
   what you are pointing at rather than only that you are pointing. */
.z-nav a.z-nav-link:hover { color: var(--z-navc, var(--z-gold-deep)); background: color-mix(in srgb, var(--z-navc, #c19a3f) 10%, transparent); }
.z-nav a.z-nav-link[aria-current="page"] { color: var(--z-navc, var(--z-gold-deep)); }
.z-nav a.z-nav-link[aria-current="page"]::after { background: var(--z-navc, var(--z-gold)); }
.z-nav a.z-nav-link[aria-current="page"] { color: var(--z-gold-deep); }
.z-nav a.z-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 1.5px;
    background: var(--z-gold);
}

/* --- header right --- */
.z-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.z-header-link {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    font-size: 12.5px;
    color: var(--z-ink);
    padding: 7px 12px;
    border-radius: 7px;
    white-space: nowrap;
}
.z-header-link svg { flex: none; color: var(--z-navc, var(--z-gold-deep)); }
.z-header-link:hover { color: var(--z-navc, var(--z-gold-deep)); background: color-mix(in srgb, var(--z-navc, #c19a3f) 10%, transparent); }

.z-burger {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: 50%;
    cursor: pointer;
    color: var(--z-green);
}

/* --- mobile drawer --- */
.z-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    background: var(--z-surface);
    border-left: 1px solid var(--z-line);
    box-shadow: var(--z-shadow-lg);
    z-index: 120;
    padding: 22px;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.z-drawer.is-open { transform: translateX(0); }
.z-drawer a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 12px;
    font-size: 16px;
    color: var(--z-ink);
    border-bottom: 1px solid var(--z-line-soft);
}
.z-drawer a svg {
    flex: none;
    box-sizing: content-box;
    width: 18px; height: 18px; padding: 8px;
    border-radius: 10px;
    color: var(--z-navc, var(--z-gold-deep));
    background: color-mix(in srgb, var(--z-navc, #c19a3f) 12%, transparent);
}
.z-drawer a:last-of-type { border-bottom: 0; }
.z-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.z-drawer-close {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--z-surface-2); border: 1px solid var(--z-line);
    cursor: pointer; color: var(--z-ink); font-size: 20px; line-height: 1;
}
.z-scrim {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(18, 51, 42, .45);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}
.z-scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero
   ========================================================================== */

.z-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 56px, not 150px. The 150 was clearance for the header overlaying this
       section; the homepage now carries the same sticky cream bar as every
       other page, and a sticky header takes up its own space — so that
       clearance became a gap of dead ground above the arch. */
    padding: 56px 0 110px;
    isolation: isolate;
    /* No overflow:hidden — the merlon crest hangs below the box. The bg layer
       is inset:0 and never spills, so nothing needs clipping here. */
}
.z-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.z-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(247, 240, 226, .92) 0%, rgba(247, 240, 226, .35) 26%, rgba(18, 51, 42, .30) 72%, rgba(18, 51, 42, .55) 100%);
}

/* The mihrab — a pointed keel arch, not a dome.
   border-radius can only ever round a corner, so it gives a half-round top;
   the apex has to be a real cusp. The shape therefore comes from the shared
   #zArch clipPath (see includes/zaereen/ui/header.php), and the gold outline
   is produced by stacking clipped layers rather than by a border, since a
   border would be clipped away with everything else.

   Layers, outermost first:
     .z-arch-frame   gold, 2px of padding  -> reads as the outer rule
     .z-arch         green field
     .z-arch::before gold, inset 10px      -> the inner rule
     .z-arch::after  green, inset 11px     -> leaves ::before showing as 1px
*/
.z-arch-frame {
    position: relative;
    z-index: 1;
    width: min(468px, 100%);
    padding: 2px;
    background: linear-gradient(160deg, var(--z-gold-light) 0%, var(--z-gold) 42%, var(--z-gold-deep) 100%);
    clip-path: url(#zArch);
    filter: drop-shadow(0 34px 60px rgba(4, 18, 13, .72));
}
.z-arch {
    position: relative;
    background: linear-gradient(170deg, #12392c 0%, #0b241c 62%, #081c16 100%);
    clip-path: url(#zArch);
    padding: 76px 46px 46px;
    text-align: center;
    color: #f5edda;
}
.z-arch::before,
.z-arch::after {
    content: "";
    position: absolute;
    clip-path: url(#zArch);
    pointer-events: none;
}
.z-arch::before { inset: 9px;  background: var(--z-gold); opacity: .5; }
.z-arch::after  { inset: 10px; background: linear-gradient(170deg, #12392c 0%, #0b241c 62%, #081c16 100%); }
/* Content sits above both rule layers. */
.z-arch > * { position: relative; z-index: 1; }
/* The full supplied lockup, in white, sitting inside the arch. */
.z-arch-lockup {
    height: clamp(132px, 19vw, 168px);
    width: auto;
    margin: 0 auto;
    display: block;
}
.z-arch-rule { margin: 18px auto; max-width: 210px; }
.z-arch-rule::before, .z-arch-rule::after { max-width: 80px; }

.z-arch h1 {
    font-family: var(--z-display);
    font-size: clamp(21px, 2.6vw, 26px);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ece2cc;
    margin: 0;
}
.z-arch h1 .z-accent {
    display: block;
    font-size: clamp(27px, 3.6vw, 35px);
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--z-gold-light);
    margin-top: 5px;
}
.z-arch-lede {
    font-size: 15.5px;
    line-height: 1.66;
    color: rgba(240, 232, 214, .84);
    max-width: 40ch;
    margin: 18px auto 26px;
}

/* ==========================================================================
   Hero search
   ========================================================================== */

.z-search {
    position: relative;
    z-index: 2;
    width: min(1000px, 100%);
    margin: -46px auto 0;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow-lg);
    padding: 18px;
}
.z-search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.z-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.z-field label {
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--z-ink-3);
    font-weight: 500;
}
.z-field select,
.z-field input {
    font-family: var(--z-body);
    font-size: 15px;
    color: var(--z-ink);
    background: var(--z-surface-2);
    border: 1px solid var(--z-line);
    border-radius: 8px;
    padding: 12px 13px;
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a9186' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}
.z-field input { background-image: none; padding-right: 13px; }
.z-field select:hover, .z-field input:hover { border-color: var(--z-gold-light); }

.z-quick {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--z-line-soft);
}
.z-quick-label {
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--z-ink-3);
    margin-right: 2px;
}
.z-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    font-size: 13.5px;
    color: var(--z-green);
    background: var(--z-gold-wash);
    border: 1px solid transparent;
    border-radius: 100px;
    transition: border-color .18s ease, background-color .18s ease;
}
.z-chip:hover { border-color: var(--z-gold); background: var(--z-surface); color: var(--z-green); }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

.z-section { padding: 68px 0; position: relative; }

/* Marble band: paler and cooler than the page ground, with the jali dropped
   out, so alternating sections read as polished stone panels set into a
   patterned wall. */
.z-section.is-tint {
    background-color: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border-top: 1px solid var(--z-line-gold);
    border-bottom: 1px solid var(--z-line-gold);
}

/* A green band, crested top and bottom like a parapet. */
.z-section.is-green {
    background-color: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    color: rgba(240, 233, 215, .84);
    margin: 30px 0;
}
.z-section.is-green h2, .z-section.is-green h3 { color: #fbf5e6; }

.z-section-head { text-align: center; margin-bottom: 38px; }
.z-section-head h2 {
    font-size: clamp(24px, 3.4vw, 31px);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--z-ink);
}
.z-section-head .z-orn { margin: 16px auto 0; max-width: 560px; }
.z-section-head p {
    margin: 14px auto 0;
    max-width: 58ch;
    font-size: 15.5px;
    color: var(--z-ink-2);
}

.z-section-foot { display: flex; justify-content: center; margin-top: 34px; }

/* ==========================================================================
   Tour cards
   ========================================================================== */

.z-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.z-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.z-card {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    display: flex;
    flex-direction: column;
    box-shadow: var(--z-shadow-sm);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.z-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--z-shadow-lg);
    border-color: var(--z-gold);
}

/* The image sits in a keyhole-arch niche rather than a rectangle — the
   single change that makes a grid of shrine photographs read as Fatemi.
   Padding around the mask leaves a margin of card ground visible, the way a
   niche is set into a wall. */
.z-card-media {
    position: relative;
    padding: 12px 12px 0;
    background: transparent;
}
.z-card-arch {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 4 / 4.4;
    overflow: hidden;
    background: var(--z-cream-deep);
    -webkit-mask-image: var(--z-arch-mask);
            mask-image: var(--z-arch-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.z-card-arch img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.z-card:hover .z-card-arch img { transform: scale(1.06); }

/* A gold hairline traced just outside the arch, like the painted outline
   round a real niche. Drawn as a second masked layer so it follows the
   curve exactly instead of approximating it with border-radius. */
.z-card-media::before {
    content: "";
    position: absolute;
    inset: 6px 6px 0;
    z-index: 0;
    background: var(--z-gold);
    opacity: .38;
    -webkit-mask-image: var(--z-arch-mask);
            mask-image: var(--z-arch-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
    transition: opacity .24s ease;
}
.z-card:hover .z-card-media::before { opacity: .75; }

/* The pill itself carries no positioning — it is used inline in departure
   rows as well as over card imagery, and a transform here would shift every
   inline one sideways. */
.z-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 100px;
}

/* Over an arched niche the badge centres on the base, not a corner: the
   corners are outside the masked curve, and the crown is too narrow to hold
   a label like "8 Departures" without overhanging the arch. */
.z-card-media .z-badge {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: calc(100% - 40px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(13, 44, 34, .28);
}
.z-badge-open { background: rgba(226, 239, 231, .93); color: var(--z-open); }
.z-badge-few  { background: rgba(247, 236, 214, .93); color: var(--z-few); }
.z-badge-sold { background: rgba(246, 228, 224, .93); color: var(--z-sold); }

.z-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.z-card-title {
    font-family: var(--z-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--z-ink);
    margin: 0 0 8px;
}
.z-card-route {
    font-size: 13px;
    color: var(--z-gold-deep);
    letter-spacing: .04em;
    margin: 0 0 10px;
}
.z-card-text {
    font-size: 14.5px;
    color: var(--z-ink-2);
    line-height: 1.6;
    margin: 0 0 16px;
}

.z-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; }
.z-meta li {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: var(--z-ink-2);
}
.z-meta svg { color: var(--z-gold-deep); flex: none; }

.z-price { margin-top: auto; padding-top: 4px; }
.z-price small {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-ink-3);
    margin-bottom: 2px;
}
.z-price b {
    font-family: var(--z-display);
    font-size: 27px;
    font-weight: 600;
    color: var(--z-gold-deep);
    font-variant-numeric: tabular-nums;
}
.z-price span { font-size: 13px; color: var(--z-ink-3); margin-left: 3px; }

.z-card-actions { display: flex; gap: 9px; margin-top: 16px; }
.z-card-actions .z-btn { flex: 1 1 auto; }

/* ==========================================================================
   Departure cards
   ========================================================================== */

.z-dep {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    padding: 18px 20px;
    box-shadow: var(--z-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.z-dep:hover { border-color: var(--z-gold-light); box-shadow: var(--z-shadow); transform: translateY(-2px); }

/* The date plaque is itself a little arched tablet. */
.z-dep-date {
    text-align: center;
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    color: #f2e9d5;
    border-radius: 44% 44% var(--z-radius-sm) var(--z-radius-sm) / 26% 26% var(--z-radius-sm) var(--z-radius-sm);
    padding: 16px 8px 12px;
    box-shadow: inset 0 0 0 1px var(--z-line-gold);
}
.z-dep-date .d {
    display: block;
    font-family: var(--z-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.z-dep-date .m {
    display: block;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--z-gold-light);
    margin-top: 5px;
}
.z-dep-date .y { display: block; font-size: 11px; color: rgba(242, 233, 213, .6); margin-top: 2px; }

.z-dep-main h3 {
    font-family: var(--z-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .03em;
    margin: 0 0 6px;
}
.z-dep-side { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }

/* ==========================================================================
   Departure date strip

   The horizontal rail of date tiles from b2b/quotes/ (.dep-strip / .dep-chip
   in assets/css/departure_calendar.css), in Zaereen's colours. Same division
   of labour as the original: the strip is the default view and the pinned
   "ALL" tile opens the two-month calendar beneath it.
   ========================================================================== */

/* The rail sits inside a panel rather than floating on the page ground.
   Naked on cream the whole control read as washed-out: pale tiles on a pale
   field, with nothing holding them together. The panel gives it an edge, a
   shadow and a gold rule, so it reads as one deliberate instrument. */
.z-strip-panel {
    position: relative;
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    padding: 16px 18px;
    margin-bottom: 22px;
}
.z-strip-panel::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--z-line-gold);
    border-radius: calc(var(--z-radius) - 5px);
    pointer-events: none;
}

.z-strip-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Scrollbar hidden — the arrows, the wheel and dragging all move the rail. */
.z-strip {
    display: flex;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 3px 2px;
    flex: 1 1 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.z-strip::-webkit-scrollbar { display: none; }

.z-strip-nav {
    flex: none;
    width: 30px; height: 78px;
    display: grid; place-items: center;
    border-radius: 8px;
    border: 1px solid var(--z-line-gold);
    background: var(--z-surface);
    color: var(--z-green);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.z-strip-nav:hover { background: var(--z-green); color: var(--z-gold-light); border-color: var(--z-green); }
.z-strip-nav[data-strip-scroll="-1"] svg { transform: rotate(90deg); }
.z-strip-nav[data-strip-scroll="1"]  svg { transform: rotate(-90deg); }

/* "All dates" is pinned beside the rail rather than being its first tile: it
   is the way OUT of a date filter, and a control that has scrolled out of
   sight is no use when you are twenty departures along. */
.z-dchip-fixed {
    flex: 0 0 auto;
    margin-right: 4px;
    padding-right: 10px;
    border-right: 1px dashed var(--z-line);
}

/* A tile is a torn calendar page: gold band across the head, deep green
   numeral, price beneath. The gradient and the inner highlight are what stop
   it reading as a flat rectangle at this size. */
.z-dchip {
    flex: 0 0 auto;
    width: 76px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(170deg, #fffdf7 0%, #f6efdf 100%);
    border: 1px solid var(--z-line-gold);
    box-shadow: 0 1px 2px rgba(23, 32, 26, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
    cursor: pointer;
    position: relative;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.z-dchip:hover {
    border-color: var(--z-gold);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(13, 44, 34, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* The band across the top is what makes a tile read as a torn calendar page
   rather than a button. */
/* Deep green band, gold lettering — the same relationship the page head and
   the footer use, so a tile belongs to the same building as everything else. */
.z-dchip-mon {
    flex: 0 0 auto;
    padding: 5px 0 4px;
    text-align: center;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1.2;
    color: var(--z-gold-light);
    background: var(--z-green);
    border-bottom: 1px solid var(--z-gold);
}
.z-dchip-day {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--z-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--z-green);
    font-variant-numeric: tabular-nums;
}
.z-dchip-meta {
    flex: 0 0 auto;
    padding: 0 3px 6px;
    text-align: center;
    font-size: 9.5px;
    letter-spacing: .02em;
    color: var(--z-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.z-dchip.is-active {
    background: var(--z-green);
    border-color: var(--z-green);
    box-shadow: var(--z-shadow);
}
.z-dchip.is-active .z-dchip-mon  { color: var(--z-gold-light); background: rgba(227, 200, 134, .14); border-bottom-color: rgba(227, 200, 134, .3); }
.z-dchip.is-active .z-dchip-day  { color: #fdf8ec; }
.z-dchip.is-active .z-dchip-meta { color: rgba(240, 233, 215, .72); }

.z-dchip.is-past { opacity: .45; }
.z-dchip.is-today .z-dchip-day::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 20px;
    transform: translateX(-50%);
    width: 14px; height: 1.5px;
    background: var(--z-gold);
}

/* Availability, as the same three-colour key the calendar uses. */
.z-dchip-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--z-open);
    z-index: 1;
}
.z-dchip.is-few  .z-dchip-dot { background: var(--z-few); }
.z-dchip.is-sold .z-dchip-dot { background: var(--z-sold); }
.z-dchip.is-sold { opacity: .62; }

/* The pinned tile carries an icon where the others carry a date. */
.z-dchip-all .z-dchip-day { color: var(--z-gold-deep); }
.z-dchip-all.is-open { background: var(--z-gold-wash); border-color: var(--z-gold); }

/* Both selectors stacked at the right-hand end of the rail, one above the
   other, so the dates keep the full width between the arrows.

   They used to bracket the rail and were each a tile tall (82px). Stacked,
   two of those would make the strip twice its height, so the pair shares one
   tile's height between them and the label sits tighter to its select. */
.z-strip-filters {
    flex: 0 0 auto;
    height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px dashed var(--z-line);
}
.z-strip-dest,
.z-strip-city {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.z-strip-dest label,
.z-strip-city label {
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-ink-3);
}
.z-strip-dest select,
.z-strip-city select {
    font-family: var(--z-body);
    /* Trimmed from 14px/9px padding: two of these stacked have to share the
       82px a single one used to have to itself. */
    font-size: 13px;
    color: var(--z-ink);
    background: var(--z-surface);
    border: 1px solid var(--z-line-gold);
    border-radius: 8px;
    padding: 5px 28px 5px 10px;
    min-width: 152px;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238f6f1c' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
.z-strip-dest select:hover,
.z-strip-city select:hover { border-color: var(--z-gold); }

/* A date with nothing left once the city filter is on. Dimmed rather than
   removed: the rail keeps its shape, so the dates do not jump around
   underneath the pointer when a city is picked. */
.z-dchip.is-muted { opacity: .28; pointer-events: none; }

/* A calendar day whose departures the current filters rule out. Same treatment
   as the rail tile above, so the two read as one control: dimmed and dead to
   the pointer, but still occupying its square — a month grid cannot lose a
   day without the weeks below it shifting. */
.z-cal-cell.is-muted { opacity: .26; pointer-events: none; }

/* Note bar shown while a single date is selected. */
.z-active-note {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    margin-bottom: 20px;
    border-radius: var(--z-radius-sm);
    background: var(--z-gold-wash);
    border: 1px solid var(--z-line-gold);
    font-size: 14px;
    color: var(--z-ink-2);
}
.z-active-note svg { color: var(--z-gold-deep); flex: none; }
.z-active-note strong { color: var(--z-ink); font-weight: 500; }
.z-active-note button {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--z-green-3);
    text-decoration: underline;
    cursor: pointer;
}
.z-active-note button:hover { color: var(--z-gold-deep); }

.z-dep-hidden { display: none !important; }

@media (max-width: 780px) {
    /* Arrows go: on a phone the rail is swiped, and two 30px buttons only
       steal width from the tiles. */
    .z-strip-nav { display: none; }
    .z-strip-wrap { gap: 6px; }
}

/* ==========================================================================
   Departure calendar

   Two months side by side with a centred stepper, following the control in
   b2b/quotes/ (assets/css/departure_calendar.css) — same anatomy, same URL
   contract — but redrawn in Zaereen's own palette and motifs rather than the
   portal's slate and blue. Below 900px the second month is dropped instead of
   being squeezed: seven columns of legible tiles will not fit twice on a
   phone, and this is a control people will open from a WhatsApp link.
   ========================================================================== */

/* Warm marble rather than near-white: the panel is a stone ground the day
   tiles sit on, and white made the whole calendar read as a spreadsheet. */
.z-cal {
    position: relative;
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    margin-bottom: 26px;
    overflow: hidden;
}
.z-cal::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--z-line-gold);
    border-radius: calc(var(--z-radius) - 5px);
    pointer-events: none;
}

/* --- head --- */
/* Green header bar. On a cream body a cream header gave the panel no crown —
   the whole control read as one undifferentiated pale block. */
.z-cal-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    border-bottom: 1px solid var(--z-gold);
    color: rgba(240, 233, 215, .82);
}
.z-cal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.z-cal-title-icon {
    flex: none;
    width: 38px; height: 45px;
    display: grid; place-items: center;
    color: var(--z-gold-light);
    background: rgba(227, 200, 134, .12);
    border: 1px solid rgba(227, 200, 134, .38);
    border-radius: 50% 50% 6px 6px / 58% 58% 6px 6px;
}
.z-cal-title strong {
    display: block;
    font-family: var(--z-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fbf5e6;
    line-height: 1.2;
}
.z-cal-summary { font-size: 12.5px; color: rgba(240, 233, 215, .62); }
.z-cal-summary b { color: var(--z-gold-light); font-weight: 500; }

/* The middle names what is on sale in the months on screen — the panel says
   WHAT as well as WHEN — and the month stepper moves to the right, beside the
   control that resets it. */
.z-cal-tour {
    justify-self: center;
    text-align: center;
    min-width: 0;
}
/* The headline of the panel, so it is sized like one: near-white for maximum
   separation from the green, with the gold kept for the caption under it.
   Gold-on-green at this size read as decoration rather than as a title. */
.z-cal-tour-name {
    display: block;
    font-family: var(--z-display);
    font-size: clamp(22px, 2.6vw, 31px);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fdf8ec;
    line-height: 1.12;
    text-shadow: 0 2px 10px rgba(4, 18, 13, .45);
}
/* Hairline between the name and the city, so the two read as one lockup. */
.z-cal-tour-from {
    display: block;
    margin-top: 7px;
    padding-top: 7px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--z-gold-light);
    position: relative;
}
.z-cal-tour-from:not(:empty)::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 46px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--z-gold), transparent);
}

.z-cal-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}
.z-cal-stepper { display: flex; align-items: center; gap: 10px; }
.z-cal-nav {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(227, 200, 134, .4);
    background: rgba(227, 200, 134, .1);
    color: var(--z-gold-light);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.z-cal-nav:hover:not(:disabled) { background: var(--z-gold); color: var(--z-green); border-color: var(--z-gold); }
.z-cal-nav:disabled { opacity: .35; cursor: not-allowed; }
/* The markup ships one chevron glyph; CSS points it. Doing this in CSS rather
   than JS means the arrows are correct on first paint, before any script. */
.z-cal-nav[data-step="-1"] svg { transform: rotate(90deg); }
.z-cal-nav[data-step="1"]  svg { transform: rotate(-90deg); }
.z-cal-range {
    font-family: var(--z-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fbf5e6;
    white-space: nowrap;
    min-width: 13ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- months --- */
.z-cal-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.z-cal-month { padding: 18px 20px 20px; }
/* Keyed to the class the script sets rather than to `+ .z-cal-month`. The two
   are equivalent for the two panels drawn today, but the class says which
   panel is being divided instead of inferring it from sibling position. */
.z-cal-month.is-second { border-left: 1px solid var(--z-line); }
/* The month is set, not filled: no background band. Size, the display face
   and a gold rule beneath carry the emphasis, which keeps the plaque from
   competing with the green month band on each departure tile — two filled
   green blocks a few pixels apart was the crowding this replaces. */
.z-cal-month-name {
    position: relative;
    text-align: center;
    font-family: var(--z-display);
    font-size: 20px;
    /* 700 is loaded for Cormorant Garamond in the header's font link, so this
       is a real bold cut rather than a synthesised one. */
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-green);
    padding: 2px 0 12px;
    margin-bottom: 12px;
}
.z-cal-month-name::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 92px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--z-gold), transparent);
}

.z-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
/* Weekday header as tinted chips rather than grey lettering.

   Three colours, not seven: the working week in green, Saturday in gold and
   Sunday in rose. The colour carries the distinction the eye actually wants —
   where the weekend falls — instead of decorating each column differently.

   nth-child, not first/last-child. The seven headers are children 1-7 of the
   grid, but the LAST child of .z-cal-grid is a date cell, so the previous
   `:last-child` rule for Saturday never matched anything. */
.z-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 0;
    margin-bottom: 6px;
    border-radius: 6px;
    background: var(--z-green-soft);
    color: var(--z-green);
    border: 1px solid transparent;
}
.z-cal-dow:nth-child(7) {          /* Saturday */
    background: var(--z-gold-wash);
    color: var(--z-gold-deep);
    border-color: var(--z-line-gold);
}
.z-cal-dow:nth-child(1) {          /* Sunday */
    background: var(--z-sold-bg);
    color: var(--z-sold);
    border-color: color-mix(in srgb, var(--z-sold) 26%, transparent);
}

/* --- cells --- */
/* Every day is a ruled box, not just the ones with departures. Without the
   rule the grid read as loose numbers floating in space and the eye had
   nothing to track along a week. */
.z-cal-cell {
    position: relative;
    min-height: 78px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--z-line);
    /* Warm cream, not white. The grid is a wall of small tiles, and every one
       of them white turned the panel into a spreadsheet. */
    background: var(--z-cream);
    font-variant-numeric: tabular-nums;
}
.z-cal-cell.is-blank { border: 0; background: none; }
.z-cal-num {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--z-ink-2);
    line-height: 1;
}
/* A day with nothing on it sits back into the wall; a bookable day comes
   forward, lighter and gold-edged. The two therefore differ in depth as well
   as in colour, which is what makes the departures findable at a glance.

   The border stays fully drawn on empty days. It was on --z-line-soft, which
   at this size vanished against the cream ground and left those dates looking
   like loose numbers while only the departures were boxed. Definition comes
   from the rule; emphasis comes from the fill. */
.z-cal-cell.is-empty {
    background: var(--z-cream-deep);
    border-color: var(--z-line-strong);
}
.z-cal-cell.is-past  { opacity: .45; }
.z-cal-cell.is-past .z-cal-num { color: var(--z-ink-3); }

/* Month band on the days that carry a departure — the same device the b2b
   calendar puts on its tiles, so a date lifted out of the grid still says
   which month it belongs to. */
.z-cal-mon {
    flex: 0 0 auto;
    padding: 3px 0 2px;
    text-align: center;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.2;
    color: var(--z-gold-light);
    background: var(--z-green);
    border-bottom: 1px solid var(--z-gold);
}

/* A day that actually has a departure. Gold wash, gold rule, the price under
   the date — the two facts someone scanning for a date is looking for. */
.z-cal-cell.has-dep {
    background: linear-gradient(170deg, #fffdf7 0%, #f6efdb 100%);
    border-color: var(--z-gold);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.z-cal-cell.has-dep .z-cal-num { color: var(--z-green); font-weight: 500; font-size: 17px; }
.z-cal-cell.has-dep:hover {
    transform: translateY(-2px);
    background: var(--z-surface);
    border-color: var(--z-gold);
    box-shadow: var(--z-shadow);
}
.z-cal-price {
    flex: 0 0 auto;
    padding: 0 2px 5px;
    text-align: center;
    font-size: 9.5px;
    letter-spacing: .01em;
    color: var(--z-gold-deep);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.z-cal-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--z-open);
}
.z-cal-cell.is-few  .z-cal-dot { background: var(--z-few); }
.z-cal-cell.is-sold .z-cal-dot { background: var(--z-sold); }
.z-cal-cell.is-sold { opacity: .6; }

/* Today reads as a ring, not a fill — a fill would compete with the
   departure days, which are the point of the panel. */
.z-cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--z-green); }

.z-cal-cell.is-selected {
    background: var(--z-green);
    border-color: var(--z-green);
}
.z-cal-cell.is-selected .z-cal-num   { color: var(--z-gold-light); }
.z-cal-cell.is-selected .z-cal-price { color: rgba(240, 233, 215, .75); }

/* --- footer strip --- */
.z-cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--z-line);
    background: var(--z-surface-2);
    font-size: 12.5px;
    color: var(--z-ink-2);
}
.z-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.z-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.z-cal-key { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.z-cal-key.is-open { background: var(--z-open); }
.z-cal-key.is-few  { background: var(--z-few); }
.z-cal-key.is-sold { background: var(--z-sold); }

.z-cal-none {
    padding: 26px 20px;
    text-align: center;
    color: var(--z-ink-2);
    font-size: 14.5px;
}

@media (max-width: 900px) {
    /* Seven legible tiles will not fit twice across a phone, so the second
       month is dropped rather than crushed. The stepper still walks forward
       one month at a time. */
    .z-cal-months { grid-template-columns: 1fr; }
    .z-cal-month.is-second { display: none; }
    .z-cal-head { grid-template-columns: 1fr; gap: 12px; text-align: center; }
    .z-cal-title { justify-content: center; }
    .z-cal-right { justify-self: center; flex-wrap: wrap; justify-content: center; }
    .z-cal-tour-name { font-size: 20px; }
    .z-cal-range { font-size: 17px; min-width: 0; }
}

/* ==========================================================================
   Pay in parts
   ========================================================================== */

.z-parts {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}
.z-parts-copy h2 {
    font-size: clamp(26px, 3.6vw, 36px);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.z-parts-copy p { font-size: 16px; color: rgba(240, 233, 215, .84); max-width: 52ch; }

/* Small gold label above a heading. */
.z-eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--z-gold-light);
    margin: 0 0 10px;
}
.z-section:not(.is-green) .z-eyebrow { color: var(--z-gold-deep); }

/* A marble tablet set against the green band, framed in gold. */
.z-plan {
    position: relative;
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border: 1px solid var(--z-gold);
    border-radius: var(--z-radius);
    box-shadow: 0 30px 70px -34px rgba(4, 18, 13, .8);
    padding: 26px;
}
.z-plan::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--z-line-gold);
    border-radius: calc(var(--z-radius) - 5px);
    pointer-events: none;
}
.z-plan-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-bottom: 14px; margin-bottom: 6px;
    border-bottom: 1px solid var(--z-line-soft);
}
.z-plan-head span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--z-ink-3); }
.z-plan-head b {
    font-family: var(--z-display); font-size: 27px; font-weight: 600;
    color: var(--z-green); font-variant-numeric: tabular-nums;
}
.z-plan-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--z-line-soft);
}
.z-plan-row:last-child { border-bottom: 0; }
.z-plan-seq {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-gold-wash); color: var(--z-gold-deep);
    font-size: 12px; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.z-plan-row.is-first .z-plan-seq { background: var(--z-green); color: var(--z-gold-light); }
.z-plan-label { font-size: 14.5px; color: var(--z-ink); }
.z-plan-label small { display: block; font-size: 12.5px; color: var(--z-ink-3); }
.z-plan-amt { font-size: 15px; font-weight: 500; color: var(--z-ink); font-variant-numeric: tabular-nums; }
.z-plan-note {
    margin: 16px 0 0; font-size: 12.5px; color: var(--z-ink-3);
    padding-top: 13px; border-top: 1px solid var(--z-line-soft);
}

/* ==========================================================================
   Why Zaereen
   ========================================================================== */

.z-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.z-why-item { display: flex; gap: 16px; align-items: flex-start; }
/* Arched niche rather than a circle — same device as the trust strip, one
   size up, so the two rows read as the same wall. */
.z-why-icon {
    flex: none;
    width: 56px; height: 66px;
    border-radius: 50% 50% 7px 7px / 56% 56% 7px 7px;
    border: 1px solid var(--z-gold);
    background: var(--z-surface);
    display: grid; place-items: center;
    color: var(--z-gold-deep);
    box-shadow: inset 0 0 0 3px var(--z-gold-wash);
}
.z-why-item h3 {
    font-family: var(--z-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--z-gold-deep);
    margin: 0 0 5px;
}
.z-why-item p { font-size: 14px; color: var(--z-ink-2); margin: 0; line-height: 1.58; }

/* ==========================================================================
   Destinations
   ========================================================================== */

/* Destination tiles are full keyhole arches — a row of niches. */
.z-dest {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--z-cream-deep);
    -webkit-mask-image: var(--z-arch-mask);
            mask-image: var(--z-arch-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: transform .28s ease;
}
.z-dest:hover { transform: translateY(-4px); }
.z-dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.z-dest:hover img { transform: scale(1.06); }
.z-dest::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,44,34,0) 38%, rgba(9,32,25,.9) 100%);
}
/* Gold outline following the arch, drawn as a masked backing plate. */
.z-dest-frame {
    position: relative;
    padding: 5px;
    background: var(--z-gold);
    opacity: 1;
    -webkit-mask-image: var(--z-arch-mask);
            mask-image: var(--z-arch-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: filter .24s ease;
}
.z-dest-frame:hover { filter: brightness(1.1); }
.z-dest-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 20px;
    color: #f6efdd;
}
.z-dest-cap b {
    display: block;
    font-family: var(--z-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.z-dest-cap span { font-size: 13px; color: var(--z-gold-light); }

/* ==========================================================================
   Reviews
   ========================================================================== */

.z-reviews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.z-review {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--z-shadow-sm);
}
.z-review-top { display: flex; align-items: center; gap: 12px; }
.z-review-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; flex: none;
    border: 2px solid var(--z-gold-wash);
    background: var(--z-cream-deep);
}
.z-review-who { min-width: 0; }
.z-review-who b { display: block; font-size: 13px; font-weight: 500; color: var(--z-ink-2); }
.z-stars { display: flex; gap: 2px; color: var(--z-gold); margin-top: 3px; }
.z-review q {
    font-size: 14px;
    line-height: 1.6;
    color: var(--z-ink-2);
    font-style: italic;
    quotes: "\201C" "\201D";
}
.z-review cite { font-size: 13px; font-style: normal; color: var(--z-ink); margin-top: auto; }

/* ==========================================================================
   Secondary products
   ========================================================================== */

.z-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.z-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.z-product:hover { border-color: var(--z-gold); transform: translateY(-2px); box-shadow: var(--z-shadow); }
.z-product-icon {
    flex: none; width: 46px; height: 46px; border-radius: var(--z-radius-sm);
    background: var(--z-gold-wash); color: var(--z-gold-deep);
    display: grid; place-items: center;
}
.z-product b { display: block; font-size: 15px; font-weight: 500; color: var(--z-ink); }
.z-product span { font-size: 13px; color: var(--z-ink-3); }

/* ==========================================================================
   Footer
   ========================================================================== */

/* The footer is a wall: crested along its top edge with stepped merlons, the
   way a Fatimid parapet meets the sky. margin-top leaves room for the crest,
   which sits above the block. */
.z-footer {
    position: relative;
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    color: rgba(238, 230, 213, .82);
    margin-top: 25px;
    padding: 56px 0 0;
    font-size: 14.5px;
}
.z-footer::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--z-gold), transparent);
    z-index: 2;
}
.z-footer a { color: rgba(238, 230, 213, .82); }
.z-footer a:hover { color: var(--z-gold-light); }

.z-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding-bottom: 40px;
}
.z-footer-brand p { margin: 14px 0 18px; line-height: 1.65; max-width: 30ch; font-size: 14px; }

.z-social { display: flex; gap: 9px; }
.z-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(221, 193, 124, .35);
    display: grid; place-items: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.z-social a:hover { background: var(--z-gold); border-color: var(--z-gold); color: var(--z-green); }

.z-footer h4 {
    font-family: var(--z-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fbf5e6;
    margin: 0 0 16px;
}
.z-footer-col li { margin-bottom: 9px; }
.z-footer-contact li { display: flex; gap: 11px; margin-bottom: 13px; align-items: flex-start; }
.z-footer-contact svg { color: var(--z-gold-light); flex: none; margin-top: 3px; }

.z-footer-bar {
    border-top: 1px solid rgba(221, 193, 124, .2);
    padding: 18px 0 22px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    font-size: 13px;
}
.z-salawat {
    font-family: var(--z-arabic);
    font-size: 19px;
    color: var(--z-gold-light);
    text-align: center;
    direction: rtl;
    line-height: 1.9;
}
.z-footer-bar > :last-child { text-align: right; }

/* Small "Powered by Oxford Travels" line — required beside the mark. */
.z-powered {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-ink-3);
}
.z-footer .z-powered { color: rgba(238, 230, 213, .55); }

/* ==========================================================================
   Page head (inner pages)
   ========================================================================== */

.z-pagehead {
    position: relative;
    /* Ordinary padding, NOT header clearance. Every page carrying this band
       sets $z_header_solid, and .z-header.is-solid is sticky — it takes up its
       own space in flow, so the band already starts below it. The old 134px
       was clearance for the absolute, overlaying header, and under a sticky
       one it was 134px of empty green. */
    padding: 46px 0 56px;
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    color: #f3ead6;
    margin-bottom: 15px;
}
.z-pagehead::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--z-gold), transparent);
    z-index: 2;
}
.z-pagehead h1 {
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fbf5e6;
}
.z-pagehead p { margin: 12px 0 0; color: rgba(240, 232, 214, .78); max-width: 56ch; }

.z-crumb {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(240, 232, 214, .6); margin-bottom: 14px;
}
.z-crumb a { color: var(--z-gold-light); }
.z-crumb span { opacity: .5; }

/* ==========================================================================
   Listing layout — filter rail + results
   ========================================================================== */

.z-listing { display: grid; grid-template-columns: 268px 1fr; gap: 30px; align-items: start; }

.z-filters {
    position: sticky;
    top: 84px;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    padding: 20px;
    box-shadow: var(--z-shadow-sm);
}
.z-filters h2 {
    font-family: var(--z-body);
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--z-ink-3);
    margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--z-line-soft);
}
.z-filters .z-field { margin-bottom: 15px; }
.z-filters-actions { display: flex; gap: 8px; margin-top: 4px; }
.z-filters-actions .z-btn { flex: 1 1 auto; }

.z-results-bar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.z-results-bar b { font-family: var(--z-display); font-size: 22px; font-weight: 600; }
.z-results-bar span { font-size: 14px; color: var(--z-ink-3); }

.z-filters-toggle { display: none; }

/* ==========================================================================
   Tour detail
   ========================================================================== */

.z-tourhero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 40px 0;
    margin-bottom: 15px;
    isolation: isolate;
    background: var(--z-green);
}
.z-tourhero-bg {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
}
.z-tourhero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,34,28,.72) 0%, rgba(11,34,28,.45) 40%, rgba(11,34,28,.92) 100%);
}
.z-tourhero h1 {
    font-size: clamp(28px, 4.4vw, 44px);
    letter-spacing: .035em;
    text-transform: uppercase;
    color: #fbf5e6;
    max-width: 20ch;
}

.z-tourbody { display: grid; grid-template-columns: 1fr 400px; gap: 44px; align-items: start; }

/* --- booking card --- */
.z-book {
    position: sticky;
    top: 84px;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    overflow: hidden;
}
.z-book-head {
    background: var(--z-green);
    color: #f2e9d5;
    padding: 18px 20px;
}
.z-book-head small {
    display: block; font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(240,232,214,.6);
}
.z-book-head b {
    font-family: var(--z-display); font-size: 32px; font-weight: 600;
    color: var(--z-gold-light); font-variant-numeric: tabular-nums;
}
.z-book-head span { font-size: 13px; color: rgba(240,232,214,.7); }
.z-book-body { padding: 18px 20px 20px; }
.z-book-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--z-line-soft);
    font-size: 14px;
}
.z-book-row:last-of-type { border-bottom: 0; }
.z-book-row dt { color: var(--z-ink-3); margin: 0; }
.z-book-row dd { margin: 0; color: var(--z-ink); text-align: right; font-weight: 500; }
.z-book-cta { margin-top: 16px; display: grid; gap: 9px; }
.z-book-note {
    margin: 14px 0 0; font-size: 12.5px; color: var(--z-ink-3); text-align: center;
}

/* --- section blocks --- */
.z-block { margin-bottom: 40px; scroll-margin-top: 128px; }
.z-block > h2 {
    font-size: 23px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--z-line);
    position: relative;
}
.z-block > h2::after {
    content: "";
    position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px;
    background: var(--z-gold);
}
.z-prose { color: var(--z-ink-2); font-size: 15.5px; line-height: 1.7; }
.z-prose p { margin: 0 0 .9em; }
.z-prose ul { list-style: disc; padding-left: 20px; margin: 0 0 .9em; }
.z-prose li { margin-bottom: .35em; }
.z-prose table { width: 100%; border-collapse: collapse; }
.z-prose td, .z-prose th { border: 1px solid var(--z-line); padding: 8px 10px; }

/* --- in-page section nav --- */
.z-jump {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    padding: 6px;
    margin-bottom: 32px;
    position: sticky; top: 74px; z-index: 20;
}
.z-jump::-webkit-scrollbar { display: none; }
.z-jump a {
    flex: none; padding: 8px 14px; font-size: 13.5px;
    color: var(--z-ink-2); border-radius: 6px; white-space: nowrap;
}
.z-jump a:hover { background: var(--z-gold-wash); color: var(--z-green); }

/* --- departure selector --- */
.z-depsel { display: grid; gap: 10px; }
.z-depopt {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: var(--z-surface);
    border: 1.5px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    padding: 13px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.z-depopt:hover { border-color: var(--z-gold-light); }
.z-depopt[aria-pressed="true"] {
    border-color: var(--z-gold);
    background: var(--z-gold-wash);
    box-shadow: 0 0 0 3px rgba(193,154,63,.14);
}
.z-depopt[disabled] { opacity: .55; cursor: not-allowed; }
.z-depopt-date { text-align: center; }
.z-depopt-date .d {
    display: block; font-family: var(--z-display); font-size: 25px;
    font-weight: 600; line-height: 1; color: var(--z-green);
    font-variant-numeric: tabular-nums;
}
.z-depopt-date .m {
    display: block; font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--z-gold-deep); margin-top: 3px;
}
.z-depopt-info { font-size: 14px; color: var(--z-ink-2); min-width: 0; }
.z-depopt-info b { display: block; font-size: 14.5px; font-weight: 500; color: var(--z-ink); }
.z-depopt-price {
    font-family: var(--z-display); font-size: 21px; font-weight: 600;
    color: var(--z-gold-deep); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- occupancy / hotel grade picker --- */
.z-grades { display: grid; gap: 9px; margin-top: 16px; }
.z-grade {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    background: var(--z-surface);
    cursor: pointer; font-size: 14px;
    transition: border-color .18s ease, background-color .18s ease;
}
.z-grade:hover { border-color: var(--z-gold-light); }
.z-grade input { accent-color: var(--z-green); margin: 0; }
.z-grade b { font-weight: 500; }
.z-grade .amt { font-weight: 500; color: var(--z-gold-deep); font-variant-numeric: tabular-nums; }
.z-grade:has(input:checked) { border-color: var(--z-gold); background: var(--z-gold-wash); }

/* --- itinerary day cards -------------------------------------------------
   Same anatomy as the holidays package page (header band + day pill + boxed
   body), rendered in Zaereen's marble/gold. Cards stay open: a pilgrim reads
   the whole route, they do not hunt one day. */
.z-daywise { display: grid; gap: 16px; }
.z-day-card {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(13, 44, 34, .07);
}
.z-day-head {
    position: relative;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 13px 16px 13px 22px;
    background: linear-gradient(180deg, var(--z-cream), var(--z-cream-deep));
    border-bottom: 1px solid var(--z-line);
}
/* Gold rail, the counterpart of the holidays card's green one. */
.z-day-head::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--z-gold-light), var(--z-gold-deep));
}
.z-day-icon {
    flex: none; width: 30px; height: 30px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(18, 101, 95, .12);
    border: 1px solid rgba(18, 101, 95, .22);
    color: var(--z-teal);
}
.z-day-pill {
    flex: none;
    display: inline-flex; align-items: center;
    padding: 5px 11px; border-radius: 100px;
    background: var(--z-gold-wash);
    border: 1px solid var(--z-line-gold);
    /* Green, not gold, on the gold wash: --z-gold-deep measures 4.10:1 there,
       and 11px uppercase is not large text. --z-green measures 12.9:1. */
    color: var(--z-green);
    font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.z-day-headline {
    min-width: 0; flex: 1 1 auto;
    font-family: var(--z-display); font-size: 18px; font-weight: 600;
    letter-spacing: .02em; color: var(--z-green); line-height: 1.25;
}
.z-day-city {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; color: var(--z-ink-2);
}
.z-day-city svg { color: var(--z-gold-deep); }

.z-day-body { padding: 14px 16px 16px; }
.z-day-desc {
    background: var(--z-marble);
    border: 1px solid var(--z-line);
    border-radius: 12px;
    padding: 12px 14px;
}
/* Descriptions are pasted from editors; strip any background they carry in so
   a stray inline style can never repaint this panel. */
.z-day-desc *,
.z-day-desc *::before, .z-day-desc *::after {
    background: transparent;
}
/* ~125 characters a line at the wider shell; cap the measure so the text
   stays readable while the panel itself still fills the card. */
.z-day-desc > p, .z-day-sight-list li { max-width: 88ch; }
.z-day-desc > *:first-child { margin-top: 0; }
.z-day-desc > *:last-child  { margin-bottom: 0; }

/* A day with no description opens straight on the ziyarat list; drop the
   gap so the panel does not float away from the header band. */
.z-day-body > .z-day-sight:first-child,
.z-day-body > .z-day-meals:first-child { margin-top: 0; }
.z-day-sight {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18, 101, 95, .10), rgba(18, 101, 95, .04));
    border: 1px solid rgba(18, 101, 95, .26);
}
.z-day-sight-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--z-teal);
    margin-bottom: 8px;
}
.z-day-sight-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 6px;
}
.z-day-sight-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px; line-height: 1.5; color: var(--z-ink);
}
.z-day-sight-list li::before {
    content: ""; position: absolute; left: 4px; top: .62em;
    width: 6px; height: 6px; border-radius: 2px;
    background: var(--z-gold);
    transform: translateY(-50%) rotate(45deg);
}
/* --- day card footer: date | meals | overnight city ---------------------
   A ruled strip across the bottom of each card, so the three facts a
   pilgrim scans for sit in the same place on every day. */
.z-day-foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 18px;
    padding: 11px 16px;
    border-top: 1px solid var(--z-line);
    background: var(--z-cream);
}
.z-day-when, .z-day-where {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: var(--z-ink-2);
}
.z-day-when svg, .z-day-where svg { color: var(--z-gold-deep); flex: none; }
.z-day-when b, .z-day-where b { font-weight: 600; color: var(--z-green); }
.z-day-fmeals { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.z-day-meal {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--z-teal);
}
.z-day-meal svg { color: var(--z-teal); flex: none; }
.z-day-meal.is-none { color: var(--z-ink-3); font-weight: 400; }
.z-day-body { padding-bottom: 14px; }


/* --- account menu ----------------------------------------------------------
   The name in the bar opens this. Sign out has to live somewhere, and a bar
   with no way out of an account is worse than one extra click.
   -------------------------------------------------------------------------- */
.z-acct { position: relative; }
.z-acct-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.z-acct-btn .z-acct-caret { transition: transform .2s ease; }
.z-acct-btn.is-open .z-acct-caret { transform: rotate(180deg); }
.z-acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    min-width: 244px;
    padding: 7px;
    background: var(--z-surface);
    border: 1px solid var(--z-line-strong);
    border-radius: 12px;
    box-shadow: 0 24px 54px -18px rgba(4, 18, 13, .45);
}
.z-acct-menu[hidden] { display: none; }
/* Who you are signed in as, so the menu answers that before it acts. */
.z-acct-who {
    padding: 9px 12px 11px; margin-bottom: 5px;
    border-bottom: 1px solid var(--z-line-soft);
}
.z-acct-who b { display: block; font-size: 14.5px; color: var(--z-green); }
.z-acct-who span { font-size: 11.5px; color: var(--z-ink-3); word-break: break-word; }
.z-acct-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 14px; color: var(--z-ink);
}
.z-acct-menu a svg { flex: none; color: var(--z-gold-deep); }
.z-acct-menu a:hover { background: var(--z-gold-wash); color: var(--z-green); }
/* Leaving is not the same kind of action as the rest, and reads as its own. */
.z-acct-menu a.is-out {
    margin-top: 5px; padding-top: 12px;
    border-top: 1px solid var(--z-line-soft);
    border-radius: 0 0 8px 8px;
    color: var(--z-sold);
}
.z-acct-menu a.is-out svg { color: var(--z-sold); }
.z-acct-menu a.is-out:hover { background: var(--z-sold-bg); color: var(--z-sold); }

/* --- sign in ---------------------------------------------------------------
   Zaereen own door onto the same Oxford customer record. The pitch on one
   side, the gate on the other.
   -------------------------------------------------------------------------- */
.z-login {
    display: grid; grid-template-columns: 1fr 460px;
    gap: 56px; align-items: center;
    padding: 20px 0 40px;
}
.z-login > * { min-width: 0; }
.z-login-say h1 {
    margin: 0 0 14px;
    font-family: var(--z-display); font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600; letter-spacing: .03em; color: var(--z-green);
    text-wrap: balance;
}
.z-login-say > p { margin: 0 0 20px; font-size: 15px; color: var(--z-ink-2); max-width: 52ch; }
.z-login-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.z-login-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; color: var(--z-ink);
}
.z-login-list svg { flex: none; color: var(--z-gold-deep); }
.z-login-oxford {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0; padding: 11px 14px;
    background: var(--z-green-soft); border: 1px solid rgba(27, 99, 73, .28);
    border-radius: 10px;
    font-size: 13px; color: var(--z-ink-2); max-width: 52ch;
}
.z-login-oxford svg { flex: none; color: var(--z-open); margin-top: 2px; }
.z-login-gate { min-width: 0; }

@media (max-width: 980px) {
    .z-login { grid-template-columns: 1fr; gap: 30px; }
    .z-login-say { order: 2; }
    .z-login-gate { order: 1; }
}

/* --- my journey ------------------------------------------------------------
   One card per booking: when it leaves, what it costs, what is still owed
   and what is still missing. The date block leads because that is what a
   pilgrim scans this page for.
   -------------------------------------------------------------------------- */
.z-journey-top {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.z-journey-owed {
    flex: none; text-align: right;
    padding: 10px 16px;
    background: var(--z-gold-wash); border: 1px solid var(--z-line-gold);
    border-radius: 11px;
}
.z-journey-owed small {
    display: block; font-size: 10px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase; color: var(--z-ink-3);
}
.z-journey-owed b {
    font-family: var(--z-display); font-size: 22px; font-weight: 600;
    color: #91600f; font-variant-numeric: tabular-nums;
}
.z-journey-sec {
    display: flex; align-items: center; gap: 8px;
    margin: 28px 0 14px;
    font-size: 11px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--z-gold-deep);
}
.z-journey-sec:first-of-type { margin-top: 0; }

.z-trip {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    overflow: hidden; margin-bottom: 16px;
    box-shadow: 0 10px 24px rgba(13, 44, 34, .05);
}
.z-trip-head {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--z-cream), var(--z-cream-deep));
    border-bottom: 1px solid var(--z-line);
}
/* A torn-off calendar leaf: the date is the thing being scanned for. */
.z-trip-when {
    flex: none; width: 62px; text-align: center;
    padding: 6px 0 5px;
    background: var(--z-green); color: var(--z-gold-light);
    border-radius: 9px;
}
.z-trip-when b {
    display: block; font-family: var(--z-display); font-size: 23px;
    font-weight: 600; line-height: 1; color: #fdf8ec;
    font-variant-numeric: tabular-nums;
}
.z-trip-when span { display: block; font-size: 10px; letter-spacing: .13em; }
.z-trip-when small { display: block; font-size: 9.5px; opacity: .7; }
.z-trip-what { min-width: 0; flex: 1 1 auto; }
.z-trip-what h3 {
    margin: 0 0 2px;
    font-family: var(--z-display); font-size: 19px; font-weight: 600;
    letter-spacing: .02em; color: var(--z-green);
}
.z-trip-what p { margin: 0; font-size: 13px; color: var(--z-ink-2); }
.z-trip-ref { flex: none; text-align: right; }
.z-trip-ref small {
    display: block; font-size: 9.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--z-ink-3);
}
.z-trip-ref b {
    font-family: var(--z-display); font-size: 18px; font-weight: 600;
    letter-spacing: .04em; color: var(--z-gold-deep);
    font-variant-numeric: tabular-nums;
}

.z-trip-body {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
    background: var(--z-line);
    border-bottom: 1px solid var(--z-line);
}
.z-trip-stat { padding: 11px 14px; background: var(--z-surface); }
.z-trip-stat small {
    display: block; font-size: 9.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase; color: var(--z-ink-3);
}
.z-trip-stat b { font-size: 14px; font-weight: 600; color: var(--z-green); font-variant-numeric: tabular-nums; }
.z-trip-stat b.is-owed  { color: #91600f; }
.z-trip-stat b.is-clear { color: var(--z-open); }

.z-trip-pax { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.z-trip-name {
    padding: 4px 11px; border-radius: 100px;
    background: var(--z-marble); border: 1px solid var(--z-line);
    font-size: 12.5px; color: var(--z-ink-2);
}
/* A traveller with no passport on file is the one thing holding the visa up. */
.z-trip-name.is-gap {
    background: var(--z-few-bg); border-color: rgba(145, 96, 15, .35); color: #91600f;
}

.z-trip-foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 16px; padding: 12px 18px;
}
.z-trip-todo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #91600f;
}
.z-trip-todo.is-done { color: var(--z-open); }
.z-trip-links { display: inline-flex; gap: 16px; margin-left: auto; }
.z-trip-links a {
    font-size: 13px; color: var(--z-teal);
    text-decoration: underline; text-underline-offset: 3px;
}
.z-trip-links a:hover { color: var(--z-green); }

@media (max-width: 900px) {
    .z-trip-body { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .z-trip-head { flex-wrap: wrap; }
    .z-trip-ref { margin-left: auto; }
    .z-trip-body { grid-template-columns: repeat(2, 1fr); }
    .z-trip-links { margin-left: 0; }
}

/* --- identity gate ---------------------------------------------------------
   Covers the reservation form until the mobile is verified. The form stays
   rendered behind it: the traveller blocks are what the visitor came for,
   and an empty page while a code arrives reads as a dead end.
   -------------------------------------------------------------------------- */
.z-gate {
    position: fixed; inset: 0; z-index: 60;
    display: grid; place-items: center;
    padding: 20px;
    background: rgba(11, 34, 28, .55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
/* Inline: the login page is the gate, so there is nothing to cover. */
.z-gate.is-inline {
    position: static; inset: auto; z-index: auto;
    display: block; padding: 0;
    background: none; backdrop-filter: none; overflow: visible;
}
.z-gate.is-inline .z-gate-panel { margin: 0 auto; box-shadow: var(--z-shadow); }
.z-gate-panel {
    width: 100%; max-width: 460px;
    padding: 28px 26px 22px;
    background: var(--z-surface);
    border: 1px solid var(--z-line-strong);
    border-radius: 16px;
    box-shadow: 0 30px 70px -20px rgba(4, 18, 13, .6);
    text-align: center;
}
.z-gate-mark {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--z-gold-wash); border: 1px solid var(--z-line-gold);
    color: var(--z-gold-deep); margin-bottom: 12px;
}
.z-gate-panel h2 {
    margin: 0 0 6px;
    font-family: var(--z-display); font-size: 23px; font-weight: 600;
    letter-spacing: .02em; color: var(--z-green);
}
.z-gate-note { margin: 0 0 20px; font-size: 13.5px; color: var(--z-ink-2); }
.z-gate-grid { display: grid; gap: 12px; text-align: left; }
.z-gate .z-field { display: flex; flex-direction: column; }
.z-gate .z-field > label {
    display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--z-gold-deep);
}
.z-gate .z-field > label small { letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--z-ink-3); }
.z-gate .z-field input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--z-line); border-radius: 9px;
    background: var(--z-marble); color: var(--z-ink);
    font-family: var(--z-body); font-size: 14.5px;
}
.z-gate .iti { width: 100%; display: block; }
.z-gate .z-field input:focus {
    outline: none; border-color: var(--z-gold);
    box-shadow: 0 0 0 3px rgba(193, 154, 63, .18);
}
/* One box per figure: six targets rather than one, so a mistyped digit is
   corrected where it sits instead of re-keying the code. */
.z-otp-boxes { display: flex; gap: 8px; justify-content: center; }
.z-otp-box {
    width: 48px !important; height: 56px;
    padding: 0 !important;
    text-align: center;
    font-family: var(--z-display) !important;
    font-size: 25px !important; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--z-green);
    caret-color: var(--z-gold-deep);
}
.z-otp-box:focus { border-color: var(--z-gold); background: var(--z-surface); }
/* A filled box reads as done at a glance. */
.z-otp-box:not(:placeholder-shown),
.z-otp-box:valid:not(:focus) { border-color: var(--z-line-gold); }
@media (max-width: 420px) {
    .z-otp-boxes { gap: 6px; }
    .z-otp-box { width: 40px !important; height: 50px; font-size: 21px !important; }
}
.z-gate .z-btn-block { margin-top: 16px; }
.z-gate-back {
    display: block; width: 100%; margin-top: 10px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--z-body); font-size: 13px; color: var(--z-teal);
    text-decoration: underline; text-underline-offset: 3px;
}
.z-gate-foot { margin: 18px 0 0; font-size: 12px; color: var(--z-ink-3); }
.z-gate .z-hint { display: block; margin-top: 8px; font-size: 12.5px; color: var(--z-ink-3); text-align: left; }
.z-gate .z-hint.is-bad { color: var(--z-sold); }

/* The verified customer, stated rather than asked for again. */
.z-known {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--z-green-soft);
    border: 1px solid rgba(27, 99, 73, .3);
    border-radius: 11px;
}
.z-known-tick {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-open); color: #fdf8ec;
}
.z-known b { display: block; font-size: 15px; color: var(--z-green); }
.z-known span { font-size: 13px; color: var(--z-ink-2); }
.z-known-tag {
    margin-left: auto; flex: none;
    padding: 4px 10px; border-radius: 100px;
    background: var(--z-surface); border: 1px solid rgba(27, 99, 73, .3);
    font-size: 10px; font-weight: 600; letter-spacing: .11em;
    text-transform: uppercase; color: var(--z-open);
}

/* --- reservation confirmed -------------------------------------------------
   The step after the booking is written: what was held, and what happens
   next. Reuses the reservation page's two-column shell.
   -------------------------------------------------------------------------- */
.z-done {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px;
    margin-bottom: 26px;
    background: linear-gradient(180deg, var(--z-green-soft), var(--z-surface));
    border: 1px solid rgba(27, 99, 73, .3);
    border-radius: var(--z-radius-sm);
}
.z-done-tick {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-open); color: #fdf8ec;
}
.z-done h1 {
    margin: 0 0 4px;
    font-family: var(--z-display); font-size: 26px; font-weight: 600;
    letter-spacing: .02em; color: var(--z-green);
}
.z-done p { margin: 0; font-size: 14.5px; color: var(--z-ink-2); max-width: 62ch; }
.z-done-ref {
    margin-left: auto; flex: none; text-align: right;
    padding-left: 20px; border-left: 1px solid var(--z-line);
}
.z-done-ref small {
    display: block; font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--z-ink-3);
}
.z-done-ref b {
    font-family: var(--z-display); font-size: 27px; font-weight: 600;
    letter-spacing: .04em; color: var(--z-gold-deep);
    font-variant-numeric: tabular-nums;
}

/* Numbered because these really are a sequence: we call, then the plan, then
   the documents. */
.z-steps { margin: 0; padding: 0; list-style: none; counter-reset: zstep; }
.z-steps li {
    position: relative; counter-increment: zstep;
    padding: 0 0 16px 40px;
    border-left: 1px dashed var(--z-line);
    margin-left: 13px;
}
.z-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.z-steps li::before {
    content: counter(zstep);
    position: absolute; left: -13px; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-gold-wash); border: 1px solid var(--z-line-gold);
    color: var(--z-gold-deep);
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.z-steps b { display: block; font-size: 15px; color: var(--z-green); margin-bottom: 2px; }
.z-steps span { font-size: 13.5px; color: var(--z-ink-2); }

@media (max-width: 780px) {
    .z-done { flex-wrap: wrap; gap: 14px; padding: 18px; }
    .z-done-ref { margin-left: 0; padding-left: 0; border-left: 0; text-align: left; }
}

/* --- reservation page ------------------------------------------------------
   Two columns: the traveller forms on the left, the reservation summary held
   beside them on the right. The summary reuses .z-journey wholesale so it is
   the same card the tour page shows — one set of styles, no second version to
   keep in step.
   -------------------------------------------------------------------------- */
.z-res-title {
    font-family: var(--z-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--z-green);
    margin: 0;
}
.z-res-sub { margin: 4px 0 26px; font-size: 15px; color: var(--z-ink-2); }

.z-res {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 44px;
    align-items: start;
}
.z-res > * { min-width: 0; }

.z-res-block {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(13, 44, 34, .05);
}
.z-res-block:last-child { margin-bottom: 0; }
.z-res-h {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--z-line);
    font-family: var(--z-display);
    font-size: 19px; font-weight: 600; letter-spacing: .02em;
    color: var(--z-green);
}
.z-res-h svg { color: var(--z-gold-deep); flex: none; }
.z-res-note { margin: -6px 0 16px; font-size: 13px; color: var(--z-ink-3); }

/* Twelve columns, so a field can be sized to what it holds rather than every
   field getting an equal share it does not need. */
.z-res-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 10px; }
.z-res-grid > .z-field { grid-column: span 12; }
.z-c1 { grid-column: span 1 !important; }
.z-c2 { grid-column: span 2 !important; }
.z-c3 { grid-column: span 3 !important; }
.z-c4 { grid-column: span 4 !important; }
.z-c6 { grid-column: span 6 !important; }
/* The prefix holds "Shaikh" at its longest. A 1fr track takes its own
   content as a floor, so one column sizes itself to the widest option
   plus the arrow rather than sitting at a fixed twelfth. */
.z-cp { grid-column: span 1 !important; }
/* A select's min-content is smaller than its widest option, so the track
   would otherwise shrink under "Shaikh" plus the arrow. 82px is that text
   (39px) with the arrow and padding around it. */
.z-cp select { padding-left: 9px; padding-right: 6px; }

.z-res .z-field { display: flex; flex-direction: column; min-width: 0; }
.z-res .z-field > label {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 5px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--z-gold-deep);
}
.z-res .z-field > label small {
    margin-left: 5px; letter-spacing: .04em; text-transform: none;
    font-weight: 400; color: var(--z-ink-3);
}
.z-res .z-field input,
.z-res .z-field select,
.z-res .z-field textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--z-line);
    border-radius: 9px;
    background: var(--z-marble);
    color: var(--z-ink);
    font-family: var(--z-body);
    font-size: 14px;
}
.z-res .z-field textarea { resize: vertical; }
.z-res .z-field input:focus,
.z-res .z-field select:focus,
.z-res .z-field textarea:focus {
    outline: none;
    border-color: var(--z-gold);
    box-shadow: 0 0 0 3px rgba(193, 154, 63, .18);
}
.z-res .z-field input.is-bad { border-color: var(--z-sold); }
/* Below the .z-res .z-field rules on purpose: both selectors are (0,2,0),
   so source order decides and min-width: 0 was winning, letting the track
   shrink under "Shaikh" plus its arrow. */
.z-res .z-cp { min-width: 82px; }
/* intl-tel-input wraps the input in .iti, which defaults to inline-block
   and shrinks to its content; left to itself it sat narrower than its grid
   column and opened a gap before the next field. */
.z-res .iti { width: 100%; display: block; }

/* --- one card per traveller --- */
.z-pax {
    border: 1px solid var(--z-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--z-marble);
}
.z-pax:last-child { margin-bottom: 0; }
.z-pax-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(180deg, var(--z-cream), var(--z-cream-deep));
    border-bottom: 1px solid var(--z-line);
}
.z-pax-tag {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 100px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
}
/* The three fare bands, coloured as the estimate table names them. */
.z-pax-tag.is-adult  { background: var(--z-gold-wash);        border: 1px solid var(--z-line-gold);        color: var(--z-green); }
.z-pax-tag.is-child  { background: rgba(18, 101, 95, .12);    border: 1px solid rgba(18, 101, 95, .3);     color: var(--z-teal); }
.z-pax-tag.is-infant { background: rgba(107, 59, 110, .12);   border: 1px solid rgba(107, 59, 110, .3);    color: #6b3b6e; }
.z-pax-age { font-size: 12px; color: var(--z-ink-3); }
/* The ITS sits at the far end of the header band, labelled inline so the
   row still reads as one line rather than a stray box. */
.z-pax-its { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.z-pax-its label {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--z-gold-deep); white-space: nowrap;
}
.z-pax-its input {
    width: 108px; min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--z-line);
    border-radius: 8px;
    background: var(--z-surface);
    font-family: var(--z-body); font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--z-ink);
}
.z-pax-its input:focus {
    outline: none; border-color: var(--z-gold);
    box-shadow: 0 0 0 3px rgba(193, 154, 63, .18);
}
@media (max-width: 640px) {
    /* Header wraps on a phone; the ITS takes its own line rather than
       squeezing the name badge. */
    .z-pax-head { flex-wrap: wrap; }
    .z-pax-its { margin-left: 0; flex-basis: 100%; }
    .z-pax-its input { flex: 1 1 auto; width: auto; }
}
.z-pax > .z-res-grid { padding: 14px; }
/* Inside a traveller card the fields sit as a table, so their headings
   centre over the boxes rather than hugging the left edge. */
.z-pax .z-field > label { text-align: center; justify-content: center; }
/* One hue per heading, set on the field in the markup and taken from the
   same set as the header nav and the quick-facts bar. The values below
   stay ink — ten coloured labels over ten coloured values would be a
   rainbow rather than a table. */
.z-pax .z-field > label { color: var(--z-fldc, var(--z-gold-deep)); }
/* The mark takes the heading's own colour, a shade lighter so the words
   still lead. */
.z-res .z-field > label svg { flex: none; opacity: .85; }
/* The mark costs about 18px. In the middle widths a two-twelfths column
   cannot hold "Date of Birth" plus a mark at full tracking, and a wrapped
   heading pushes its input out of line with the rest of the row. Tighten
   the heading rather than let it wrap: keeps the heading and its mark on
   one line and the inputs on one baseline. */
@media (max-width: 1240px) {
    .z-pax .z-field > label { font-size: 10px; letter-spacing: .03em; gap: 4px; }
    .z-pax .z-field > label svg { width: 12px; height: 12px; }
}

/* A ruled caption inside a traveller card, so Name and Passport read as two
   groups rather than one run of fourteen boxes. */
.z-pax-sub {
    grid-column: span 12;
    margin: 4px 0 -2px;
    padding-top: 10px;
    border-top: 1px dashed var(--z-line);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--z-teal);
}
.z-pax-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- the summary column --- */
.z-res-side { position: sticky; top: 128px; }
.z-res-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 14px;
}
.z-res-facts > div {
    padding: 8px 11px;
    background: var(--z-marble);
    border: 1px solid var(--z-line);
    border-radius: 9px;
}
.z-res-facts small {
    display: block;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--z-ink-3);
}
.z-res-facts b { font-size: 13.5px; font-weight: 600; color: var(--z-green); }

.z-res-back { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.z-res-change {
    display: inline-block; margin-top: 14px;
    font-size: 13px; color: var(--z-teal);
    text-decoration: underline; text-underline-offset: 3px;
}
.z-res-change:hover { color: var(--z-green); }

/* A refusal that has to be read before anything else on the page. */
.z-note {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--z-sold-bg);
    border: 1px solid rgba(138, 48, 36, .3);
}
.z-note svg { flex: none; color: var(--z-sold); margin-top: 2px; }
.z-note b { display: block; font-size: 15px; color: var(--z-sold); margin-bottom: 3px; }
.z-note p { margin: 0; font-size: 14px; color: var(--z-ink-2); }

@media (max-width: 1240px) {
    .z-res { grid-template-columns: 1fr 340px; gap: 30px; }
}
@media (max-width: 1080px) {
    .z-res { grid-template-columns: 1fr 300px; gap: 24px; }
}
/* Below this the summary would be narrower than the phone layout it is about
   to become, so the two columns fold and the summary leads. */
@media (max-width: 900px) {
    .z-res { grid-template-columns: 1fr; gap: 24px; }
    .z-res-side { position: static; order: -1; }
    .z-res-main { order: 1; }
}
@media (max-width: 640px) {
    .z-res-block { padding: 16px 14px; }
    .z-pax > .z-res-grid { padding: 12px; }
    /* Keep the twelve tracks and pair the fields two to a row. Halving the
       track count instead made every span-6 item spill past column six into
       implicit columns, which collapsed Prefix and Issue Date to 20px. */
    .z-c2, .z-c3 { grid-column: span 6 !important; }
    .z-cp { grid-column: span 4 !important; }
    .z-c4, .z-c6 { grid-column: span 12 !important; }
    .z-res-facts { grid-template-columns: 1fr; }
}

/* --- plan your journey -----------------------------------------------------
   The booking card from holidays/package.php: port, date, pax, category tiles
   and a live Person / Rate / No-Pax / Total estimate. Same anatomy, Zaereen's
   marble and gold rather than the dark slate.
   -------------------------------------------------------------------------- */
.z-journey {
    position: sticky;
    top: 128px;
    background: var(--z-surface);
    border: 1px solid var(--z-line-strong);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(13, 44, 34, .10);
}
.z-journey-head {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 18px;
    background: var(--z-green);
    color: var(--z-gold-light);
    font-family: var(--z-display);
    font-size: 16px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
}
.z-journey-head svg { color: var(--z-gold); }
.z-journey-body { padding: 18px 16px 20px; }

.z-jfield { margin-bottom: 15px; }
.z-jfield > label {
    display: flex; align-items: center; gap: 6px;
    height: 18px; line-height: 18px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--z-gold-deep);
    margin-bottom: 7px;
}
.z-jfield > label svg { color: var(--z-gold-deep); }
.z-jfield > label.is-adults  { color: var(--z-green-3); }
.z-jfield > label.is-adults svg  { color: var(--z-green-3); }
.z-jfield > label.is-children { color: var(--z-gold-deep); }

/* Departure port — one sector per departure, so this states rather than asks. */
.z-jport {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    background: var(--z-gold-wash);
    border: 1px solid var(--z-line-gold);
    border-radius: 10px;
}
.z-jtick {
    flex: none; width: 19px; height: 19px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--z-green); color: var(--z-gold-light);
}
.z-jport b { font-size: 15px; font-weight: 600; color: var(--z-green); }

/* Travel Date | Adults | Children, one line. The date takes a slightly wider
   share because "05 Sep 2026" is longer than a two-digit stepper. */
.z-jrow {
    display: grid;
    grid-template-columns: 1.18fr 1fr 1fr;
    gap: 10px 8px;
    align-items: start;
    margin-bottom: 15px;
}
.z-jrow .z-jfield { margin-bottom: 0; }
/* Grid children default to min-width:auto, so the date select and the
   steppers push the 1fr columns past the card instead of shrinking. */
.z-jrow > .z-jfield { min-width: 0; }
.z-jselect { min-width: 0; max-width: 100%; }
.z-jqty .z-qty { min-width: 0; }
.z-jqty .z-qty { width: 100%; justify-content: space-between; gap: 3px; padding: 3px; }
.z-jqty .z-qty-input { flex: 1 1 auto; min-width: 0; }
.z-jqty .z-qty-btn { width: 26px; height: 26px; }
.z-jfield > label { white-space: nowrap; }

.z-jselect {
    width: 100%;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--z-line);
    border-radius: 10px;
    background: var(--z-cream);
    color: var(--z-ink);
    font-family: var(--z-body);
    font-size: 14px;
    cursor: pointer;
}
.z-jselect:focus-visible { outline: 2px solid var(--z-gold-deep); outline-offset: 1px; }

/* One age row per child; without an age the fare band cannot be decided. */
/* The card reuses the modal's chip row, but twelve chips will not sit
   beside a label in a 368px card: the label goes above and the chips take
   the full width, one row of twelve. */
.z-journey .z-age-row {
    display: block;
    margin: 0 0 12px;
}
.z-journey .z-age-row:last-child { margin-bottom: 0; }
.z-journey .z-age-label {
    flex: none;
    margin-bottom: 6px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--z-ink-3);
}
.z-journey .z-age-selector {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
}
.z-journey .z-age-option { flex: none; height: 28px; font-size: 11px; padding: 0; }
/* At 340px and 300px the card cannot hold twelve chips on a line; below
   900px it is full width and can again. */
@media (max-width: 1240px) {
    .z-journey .z-age-selector { grid-template-columns: repeat(6, 1fr); gap: 5px; }
    .z-journey .z-age-option { height: 30px; font-size: 12px; }
}
@media (max-width: 900px) {
    .z-journey .z-age-selector { grid-template-columns: repeat(12, 1fr); gap: 4px; }
    .z-journey .z-age-option { height: 30px; font-size: 12px; }
}
@media (max-width: 440px) {
    .z-journey .z-age-selector { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

/* --- package category tiles --- */
.z-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.z-cat {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px;
    min-width: 0;
    padding: 10px 4px;
    border: 1px solid var(--z-line);
    border-radius: 12px;
    background: var(--z-cream);
    color: var(--z-ink-2);
    font-family: var(--z-body);
    font-size: 10px; font-weight: 600;
    letter-spacing: .03em; text-align: center; line-height: 1.25;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease;
}
.z-cat svg { color: var(--z-gold-deep); }
.z-cat:hover { border-color: var(--z-line-gold); background: var(--z-gold-wash); color: var(--z-green); }
.z-cat.is-active {
    background: linear-gradient(135deg, var(--z-gold-light), var(--z-gold));
    border-color: var(--z-gold);
    color: var(--z-green);
    box-shadow: 0 8px 18px rgba(193, 154, 63, .28);
}
.z-cat.is-active svg { color: var(--z-green); }
.z-cat:focus-visible { outline: 2px solid var(--z-gold-deep); outline-offset: 2px; }

/* --- the estimate table --- */
.z-paytable {
    margin: 16px 0 0;
    border: 1px solid var(--z-line-strong);
    border-radius: 12px;
    overflow: hidden auto;
}
/* Money strings do not wrap, so four natural columns set a min-content
   wider than a 300px card. Fixed layout makes the columns obey. */
.z-paytable table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.z-paytable thead th {
    padding: 9px 6px;
    background: var(--z-green);
    color: var(--z-gold-light);
    font-size: 10px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    text-align: center;
}
.z-paytable tbody td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--z-line);
    text-align: right;
    color: var(--z-ink);
}
.z-paytable thead th.th-person { width: 26%; }
.z-paytable thead th.th-rate   { width: 28%; }
.z-paytable thead th.th-qty    { width: 18%; }
.z-paytable thead th.th-total  { width: 28%; }
/* The count is centred in the body too, under its centred heading. */
.z-paytable tbody td.qty { text-align: center; }
.z-paytable tbody td { overflow-wrap: anywhere; }
.z-paytable tbody td.item {
    text-align: left;
    font-weight: 600;
    color: var(--z-green);
}
/* The bed band is an icon, not words, so the column stays short. */
.z-paytable td.item {
    display: flex; align-items: center; gap: 6px;
}
.z-paytable .item-mark {
    flex: none;
    display: inline-flex; align-items: center;
    color: var(--z-teal);
}

/* Column rules as well as row rules, so Person / Rate / No-Pax / Total read
   as a ruled grid rather than four drifting numbers. Adjacent-sibling
   selectors, so no rule hangs off the last column against the border. */
.z-paytable th + th,
.z-paytable td + td { border-left: 1px solid var(--z-line); }
.z-paytable tfoot td + td { border-left-color: var(--z-line-gold); }
.z-paytable thead th + th { border-left-color: rgba(227, 200, 134, .30); }
.z-paytable tbody tr:last-child td { border-bottom: 0; }
/* The total is the table's last row, so it takes the same cells, the same
   padding and the same right edge as the figures above it. The gold band
   carries the emphasis the pill used to. */
.z-paytable tfoot td {
    padding: 12px 6px;
    background: var(--z-gold-wash);
    border-top: 2px solid var(--z-gold);
}
.z-paytable tfoot td.foot-label {
    text-align: right;
    font-size: 11px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    /* A quiet caption beside the figure, not a second heading. 6.8:1. */
    color: var(--z-ink-2);
}
.z-paytable tfoot td.foot-total {
    text-align: right;
    font-family: var(--z-display);
    font-size: 17px; font-weight: 600;
    color: var(--z-few);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The card narrows to 340px then 300px between these widths, and "No/Pax"
   is 47px of heading: at a 264px table an 18% column leaves 35px for it.
   Shift width off the name column and tighten the tracking there. */
@media (max-width: 1240px) {
    /* "No/Pax" is 47px of heading; at a 264px table 18% leaves 35px for it.
       Shift width from the name column and tighten the tracking. */
    .z-paytable thead th.th-person { width: 25%; }
    .z-paytable thead th.th-rate   { width: 28%; }
    .z-paytable thead th.th-qty    { width: 19%; }
    .z-paytable thead th.th-total  { width: 28%; }
    .z-paytable thead th { letter-spacing: .04em; padding: 9px 3px; }
    .z-paytable tbody td { padding: 10px 3px; }
    .z-paytable tfoot td { padding: 11px 3px; }
    .z-paytable tfoot td.foot-total { font-size: 14px; }
}
/* Below 900px the card is full width again, so the table goes back. */
@media (max-width: 900px) {
    /* Card is full width again here, so the table returns to its own widths. */
    .z-paytable thead th.th-person { width: 26%; }
    .z-paytable thead th.th-rate   { width: 28%; }
    .z-paytable thead th.th-qty    { width: 18%; }
    .z-paytable thead th.th-total  { width: 28%; }
    .z-paytable thead th { letter-spacing: .11em; padding: 9px 6px; }
    .z-paytable tbody td { padding: 10px 6px; }
    .z-paytable tfoot td { padding: 12px 6px; }
    .z-paytable tfoot td.foot-total { font-size: 17px; }
}
@media (max-width: 440px) {
    /* "No/Pax" is 47px of heading; at a 264px table 18% leaves 35px for it.
       Shift width from the name column and tighten the tracking. */
    .z-paytable thead th.th-person { width: 25%; }
    .z-paytable thead th.th-rate   { width: 28%; }
    .z-paytable thead th.th-qty    { width: 19%; }
    .z-paytable thead th.th-total  { width: 28%; }
    .z-paytable thead th { letter-spacing: .04em; padding: 9px 3px; }
    .z-paytable tbody td { padding: 10px 3px; }
    .z-paytable tfoot td { padding: 11px 3px; }
    .z-paytable tfoot td.foot-total { font-size: 14px; }
}

.z-jmeal {
    display: flex; align-items: center; gap: 9px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 101, 95, .10), rgba(18, 101, 95, .04));
    border: 1px solid rgba(18, 101, 95, .26);
}
.z-jmeal[hidden] { display: none; }
.z-jmeal-ico {
    flex: none; width: 22px; height: 22px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(18, 101, 95, .14); color: var(--z-teal);
}
.z-jmeal-label {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--z-teal);
}
.z-jmeal b { font-size: 13px; color: var(--z-ink); font-weight: 500; }

/* Enquiry and Booking share the row; the PDF sits beside them as a compact
   third action rather than competing with the two that convert. */
.z-jcta { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; margin-top: 16px; }
.z-jcta .z-jpdf { padding-left: 11px; padding-right: 11px; gap: 5px; }
.z-jcta .z-jpdf span { font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.z-jcta .z-btn { width: 100%; justify-content: center; }
.z-jcta .z-btn-block { grid-column: 1 / -1; }
.z-jcta > * { min-width: 0; }

/* The card drops to 340px then 300px below these widths; three fields and
   four tiles stop fitting, so both rows fold. */
@media (max-width: 1240px) {
    .z-jrow { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .z-jcta { grid-template-columns: auto 1fr; }
    .z-jcta > *:last-child { grid-column: 1 / -1; }
    .z-jdate { grid-column: 1 / -1; }
    .z-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .z-cat { padding: 12px 8px; font-size: 11.5px; letter-spacing: .07em; }
    .z-jqty .z-qty { gap: 6px; padding: 4px; }
    .z-jqty .z-qty-btn { width: 30px; height: 30px; }
}
/* Stacked below 900px, where the card is full width again — both rows have
   room for the wide arrangement once more. */
@media (max-width: 900px) {
    .z-jrow { grid-template-columns: 1.18fr 1fr 1fr; gap: 10px 8px; }
    .z-jcta { grid-template-columns: auto 1fr 1fr; }
    .z-jcta > *:last-child { grid-column: auto; }
    .z-jdate { grid-column: auto; }
    .z-cats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .z-cat { padding: 10px 4px; font-size: 10px; letter-spacing: .03em; }
}
@media (max-width: 560px) {
    .z-jrow { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .z-jcta { grid-template-columns: auto 1fr; }
    .z-jcta > *:last-child { grid-column: 1 / -1; }
    .z-jdate { grid-column: 1 / -1; }
    .z-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .z-cat { padding: 12px 8px; font-size: 11.5px; letter-spacing: .07em; }
}

/* --- policies rail ---------------------------------------------------------
   The Important Information block on activities/activity_detail.php: a column
   of topics on the left, the chosen one on the right. Same anatomy, Zaereen's
   marble and gold instead of the dark glass.
   -------------------------------------------------------------------------- */
.z-polbox { display: flex; align-items: flex-start; gap: 22px; }

.z-polnav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.z-polnav-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--z-line);
    border-radius: 12px;
    background: var(--z-cream);
    color: var(--z-ink);
    font-family: var(--z-body);
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* The library's chevron points down; a quarter turn makes it point into the
   pane it opens, as the reference's fa-chevron-right does. */
.z-polnav-item svg { flex: none; transform: rotate(-90deg); color: var(--z-gold-deep); opacity: .55; }
.z-polnav-item:hover {
    background: var(--z-gold-wash);
    border-color: var(--z-line-gold);
    color: var(--z-green);
    transform: translateX(4px);
}
.z-polnav-item.is-active {
    background: linear-gradient(135deg, var(--z-gold-light), var(--z-gold));
    border-color: var(--z-gold);
    color: var(--z-green);
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(193, 154, 63, .26);
    transform: none;
}
.z-polnav-item.is-active svg { color: var(--z-green); opacity: .85; }
.z-polnav-item:focus-visible { outline: 2px solid var(--z-gold-deep); outline-offset: 2px; }

.z-polpanes {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 22px;
    background: var(--z-marble);
    border: 1px solid var(--z-line);
    border-radius: 14px;
}
.z-polpane { animation: zPolIn .38s ease-out; }
.z-polpane[hidden] { display: none; }
/* Two classes deep on purpose: the base ".zaereen h3" rule is (0,1,1) and
   would otherwise win and paint this --z-ink instead of the brand green. */
.z-polpanes .z-polpane-title {
    font-family: var(--z-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--z-green);
    margin: 0 0 14px;
}
.z-polpane > *:last-child { margin-bottom: 0; }
.z-polpane .z-prose p, .z-polpane .z-prose li { max-width: 88ch; }
@keyframes zPolIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .z-polpane { animation: none; }
    .z-polnav-item:hover { transform: none; }
}

/* The rail eats a column the inclusions grid also wants; below this the two
   lists stack rather than each getting half of a half. */
@media (max-width: 1040px) {
    .z-polnav { flex-basis: 190px; }
    .z-polnav-item { padding: 12px 13px; font-size: 14px; }
}
/* Phones: the rail lies down above the pane and swipes. */
@media (max-width: 780px) {
    .z-polbox { flex-direction: column; gap: 14px; }
    .z-polnav {
        flex: 1 1 auto; width: 100%;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .z-polnav::-webkit-scrollbar { display: none; }
    .z-polnav-item { width: auto; white-space: nowrap; }
    .z-polnav-item:hover { transform: none; }
    .z-polnav-item svg { display: none; }
    .z-polpanes { width: 100%; padding: 16px; }
}

/* --- disclosure accordion (policies, FAQs) --- */
.z-acc {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.z-acc > summary {
    display: flex; align-items: center; gap: 16px;
    padding: 15px 18px; cursor: pointer; list-style: none;
}
.z-acc > summary::-webkit-details-marker { display: none; }
.z-acc > summary::after {
    content: ""; margin-left: auto; flex: none;
    width: 9px; height: 9px;
    border-right: 1.6px solid var(--z-ink-3);
    border-bottom: 1.6px solid var(--z-ink-3);
    transform: rotate(45deg); transition: transform .22s ease;
}
.z-acc[open] > summary::after { transform: rotate(-135deg); }
.z-acc[open] > summary { background: var(--z-gold-wash); }
.z-acc-title { min-width: 0; }
.z-acc-title b {
    display: block; font-family: var(--z-display); font-size: 18px;
    font-weight: 600; letter-spacing: .03em; color: var(--z-ink);
}
.z-acc-title span { font-size: 13px; color: var(--z-ink-3); }
.z-acc-body { padding: 4px 18px 18px; }

.z-tag {
    font-size: 11.5px; letter-spacing: .05em;
    padding: 3px 10px; border-radius: 100px;
    background: var(--z-green-soft, var(--z-surface-2));
    border: 1px solid var(--z-line);
    color: var(--z-ink-2);
}

/* --- inclusion / exclusion lists --- */
.z-incex { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.z-list li {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 8px 0; font-size: 14.5px; color: var(--z-ink-2);
    border-bottom: 1px solid var(--z-line-soft);
}
.z-list li:last-child { border-bottom: 0; }
.z-list svg { flex: none; margin-top: 3px; }
.z-list.is-in svg { color: var(--z-open); }
.z-list.is-out svg { color: var(--z-sold); }

/* --- stays --- */
.z-stays { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.z-stay {
    background: var(--z-surface); border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm); padding: 16px;
}
.z-stay b {
    display: block; font-family: var(--z-display); font-size: 20px;
    font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--z-ink);
}
.z-stay span { font-size: 13.5px; color: var(--z-gold-deep); }

/* --- flight legs --- */
.z-leg {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
    background: var(--z-surface); border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm); padding: 16px 18px; margin-bottom: 10px;
}
.z-leg-end b {
    display: block; font-family: var(--z-display); font-size: 22px;
    font-weight: 600; color: var(--z-ink); letter-spacing: .04em;
}
.z-leg-end span { font-size: 13px; color: var(--z-ink-3); }
.z-leg-mid { text-align: center; color: var(--z-gold-deep); font-size: 12px; }
.z-leg-mid svg { display: block; margin: 0 auto 3px; }
.z-leg:last-child { margin-bottom: 0; }
.z-leg-end:last-child { text-align: right; }

/* ==========================================================================
   Mobile sticky reserve bar
   ========================================================================== */

.z-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--z-surface);
    border-top: 1px solid var(--z-line);
    box-shadow: 0 -6px 24px -12px rgba(18, 51, 42, .5);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    gap: 14px;
    align-items: center;
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.z-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--z-surface);
    border: 1px dashed var(--z-line);
    border-radius: var(--z-radius);
    color: var(--z-ink-2);
}
.z-empty b { display: block; font-family: var(--z-display); font-size: 21px; color: var(--z-ink); margin-bottom: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Between the full-width card and the narrow one, so the reading column
   does not pinch just above the 1080px breakpoint. */
@media (max-width: 1240px) {
    .z-tourbody { grid-template-columns: 1fr 340px; gap: 32px; }
}

@media (max-width: 1080px) {
    .z-nav { display: none; }
    .z-burger { display: flex; }
    .z-header-actions .z-header-link { display: none; }
    .z-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .z-why { grid-template-columns: repeat(2, 1fr); }
    .z-reviews { grid-template-columns: repeat(3, 1fr); }
    .z-products { grid-template-columns: repeat(2, 1fr); }
    .z-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .z-parts { grid-template-columns: 1fr; gap: 32px; }
    .z-listing { grid-template-columns: 220px 1fr; gap: 22px; }
    .z-tourbody { grid-template-columns: 1fr 300px; gap: 26px; }
}

/* Below this the two page columns leave the reading side narrower than
   the single-column phone layout it is about to become. */
@media (max-width: 900px) {
    .z-tourbody { grid-template-columns: 1fr; gap: 26px; }
    .z-journey { position: static; }
}

@media (max-width: 780px) {
    body.zaereen { font-size: 15.5px; }
    .z-shell { padding: 0 16px; }
    .z-section { padding: 48px 0; }

    .z-hero { min-height: 0; padding: 120px 0 90px; }
    /* The clipPath scales itself; only the interior padding needs to come in. */
    .z-arch { padding: 56px 26px 34px; }
    .z-arch::before { inset: 7px; }
    .z-arch::after  { inset: 8px; }

    .z-search { margin-top: -28px; padding: 15px; }
    .z-search-grid { grid-template-columns: 1fr; gap: 11px; }
    .z-search-grid .z-btn { width: 100%; }


    .z-grid-4, .z-grid-3 { grid-template-columns: 1fr; }
    .z-why { grid-template-columns: 1fr; gap: 22px; }
    .z-reviews { grid-template-columns: 1fr; }
    .z-products { grid-template-columns: 1fr; }

    .z-dep { grid-template-columns: 72px 1fr; gap: 14px; }
    .z-dep-side { grid-column: 1 / -1; text-align: left; align-items: stretch; flex-direction: row; justify-content: space-between; }

    .z-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .z-footer-bar { grid-template-columns: 1fr; text-align: center; }
    .z-footer-bar > :last-child { text-align: center; }

    .z-sticky { display: flex; }
    body.zaereen.has-sticky { padding-bottom: 76px; }

    .z-pagehead { padding: 96px 0 32px; }

    /* Filters collapse behind a toggle rather than pushing results off-screen. */
    .z-listing { grid-template-columns: 1fr; gap: 18px; }
    .z-filters { position: static; }
    .z-filters-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .z-filters[hidden] { display: none; }

    /* Detail page: the booking card stops being a rail and becomes a block
       above the content, with the sticky bar carrying the primary action. */
    .z-tourbody { grid-template-columns: 1fr; gap: 24px; }
    .z-book { position: static; }
    .z-tourhero { min-height: 200px; padding: 30px 0; }
    .z-jump { top: 0; }

    .z-depopt { grid-template-columns: 52px 1fr; gap: 12px; }
    .z-depopt-price { grid-column: 2; text-align: left; }
    .z-incex { grid-template-columns: 1fr; gap: 20px; }
    .z-day-head { padding: 12px 12px 12px 18px; gap: 8px; }
    .z-day-headline { font-size: 16px; }
    .z-day-body { padding: 12px 12px 12px; }
    .z-day-foot { padding: 10px 12px; gap: 8px 12px; }
    .z-day-when, .z-day-where, .z-day-meal { font-size: 12.5px; }
    .z-leg { grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 14px; }
    .z-leg-end b { font-size: 18px; }
}

/* Horizontal scroll rails on phones — cards keep their width and swipe. */
@media (max-width: 780px) {
    .z-rail-mobile {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scrollbar-width: none;
    }
    .z-rail-mobile::-webkit-scrollbar { display: none; }
    .z-rail-mobile > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* The head sits on green, so its outline button inverts too. */
.z-cal-head .z-btn-outline {
    color: var(--z-gold-light);
    border-color: rgba(227, 200, 134, .4);
    background: rgba(227, 200, 134, .1);
}
.z-cal-head .z-btn-outline:hover { background: var(--z-gold); color: var(--z-green); border-color: var(--z-gold); }

/* Below 780px the bracketing selectors stack above and below the rail rather
   than squeezing it — two dropdowns plus seven-day tiles will not share a
   phone's width. */
@media (max-width: 780px) {
    .z-strip-wrap { flex-wrap: wrap; }
    .z-strip-dest,
    .z-strip-city {
        height: auto;
        width: 100%;
        order: 3;
        padding: 0;
        margin: 0;
        border: 0;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .z-strip-dest { order: 0; margin-bottom: 10px; }
    .z-strip-city { order: 3; margin-top: 10px; }
    .z-strip-dest select,
    .z-strip-city select { flex: 1 1 auto; min-width: 0; }
    .z-strip { order: 1; }
}

/* ==========================================================================
   Enquiry modal — opens when a date is clicked
   ========================================================================== */

.z-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.z-modal[hidden] { display: none; }

.z-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 28, 22, .62);
    backdrop-filter: blur(3px);
}

.z-modal-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border: 1px solid var(--z-gold);
    border-radius: var(--z-radius);
    box-shadow: 0 40px 90px -30px rgba(4, 18, 13, .8);
}

.z-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(227, 200, 134, .4);
    background: rgba(227, 200, 134, .12);
    color: var(--z-gold-light);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}
.z-modal-close:hover { background: var(--z-gold); color: var(--z-green); border-color: var(--z-gold); }

/* Green head, matching the calendar panel it opens from. */
.z-modal-head {
    padding: 16px 22px 15px;
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    border-bottom: 1px solid var(--z-gold);
    text-align: center;
}
.z-modal-head h2 {
    font-family: var(--z-display);
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fdf8ec;
    margin: 4px 0 0;
}
.z-modal-facts {
    display: flex;
    justify-content: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13px;
    color: rgba(240, 233, 215, .72);
}
.z-modal-facts span { display: inline-flex; align-items: center; gap: 6px; }
.z-modal-facts svg { color: var(--z-gold-light); }
.z-modal-facts b { color: var(--z-gold-light); font-weight: 500; }

.z-modal-body { padding: 14px 18px 16px; }
/* Layout lives in the flex block further down — a six-column grid reserved a
   full column per field, which left dead space beside the narrow ones. These
   declarations are gone rather than overridden so there is one place to look. */
.z-modal-grid .z-field input,
.z-modal-grid .z-field select,
.z-modal-grid .z-field textarea {
    font-family: var(--z-body);
    font-size: 15px;
    color: var(--z-ink);
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: 8px;
    padding: 9px 11px;
    width: 100%;
    resize: vertical;
}
.z-modal-grid .z-field input:focus,
.z-modal-grid .z-field select:focus,
.z-modal-grid .z-field textarea:focus { border-color: var(--z-gold); outline: none; }
.z-req { color: var(--z-sold); }

.z-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--z-line-soft);
}
.z-modal-note { margin: 0; font-size: 12.5px; color: var(--z-ink-3); max-width: 34ch; }

@media (max-width: 620px) {
    .z-modal { padding: 0; align-items: flex-end; }
    .z-modal-panel { max-height: 92vh; border-radius: var(--z-radius) var(--z-radius) 0 0; }
    .z-modal-grid { grid-template-columns: repeat(2, 1fr); }
    .z-modal-grid .z-col-2, .z-modal-grid .z-col-3 { grid-column: 1 / -1; }
    .z-modal-foot { flex-direction: column; align-items: stretch; }
    .z-modal-foot .z-btn { width: 100%; }
}

/* Outcome banner after a departure enquiry. */
.z-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin: 20px 0 -6px;
    border-radius: var(--z-radius-sm);
    font-size: 15px;
    line-height: 1.5;
}
.z-flash svg { flex: none; margin-top: 2px; }
.z-flash b { display: block; margin-top: 3px; font-weight: 500; letter-spacing: .04em; }
.z-flash.is-ok  { background: var(--z-open-bg); border: 1px solid var(--z-open); color: var(--z-open); }
.z-flash.is-bad { background: var(--z-sold-bg); border: 1px solid var(--z-sold); color: var(--z-sold); }

/* ==========================================================================
   Enquiry form: pax steppers, child ages, phone

   Follows the Itinerary PDF card in b2b/holidays/ (.pdf-qty / .age-option):
   minus / zero-padded count / plus, colour-coded per pax type, with a row of
   age buttons per child. Redrawn in Zaereen's palette.
   ========================================================================== */

.z-title-field { min-width: 0; }
.z-pax-field label { display: flex; align-items: baseline; gap: 6px; }
.z-pax-field label small {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--z-ink-3);
}
.z-pax-field label.is-adults   { color: var(--z-green-3); }
.z-pax-field label.is-children { color: var(--z-gold-deep); }
.z-pax-field label.is-infants  { color: var(--z-teal); }

.z-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: 8px;
    padding: 4px;
}
/* The glyphs are drawn, not typed: a text "+" sits off-centre at this size
   and shifts with the font stack. */
.z-qty-btn {
    position: relative;
    flex: none;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    background: var(--z-green-3);
    transition: filter .15s ease;
}
.z-qty-btn::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 2px;
    background: #fff;
    border-radius: 1px;
}
.z-qty-plus::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 11px;
    background: #fff;
    border-radius: 1px;
}
.z-qty-btn:hover  { filter: brightness(1.12); }
.z-qty-btn:active { filter: brightness(.9); }

.z-qty[data-target="zeAdults"]  .z-qty-btn { background: var(--z-green-3); }
.z-qty[data-target="zeChildren"] .z-qty-btn { background: var(--z-gold-deep); }
.z-qty[data-target="zeInfants"]  .z-qty-btn { background: var(--z-teal); }
/* Booking card steppers, coded the same way as the enquiry form. */
.z-qty[data-target="zPlanAdults"]   .z-qty-btn { background: var(--z-green-3); }
.z-qty[data-target="zPlanChildren"] .z-qty-btn { background: var(--z-gold-deep); }

.z-qty-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    /* The display face sits high in a default line box, so the digits
       drifted above centre in the stepper. Pin the box. */
    height: 26px;
    line-height: 26px;
    font-family: var(--z-display) !important;
    font-size: 21px !important;
    font-weight: 600;
    color: var(--z-ink);
    font-variant-numeric: tabular-nums;
    padding: 0 !important;
    cursor: default;
}
.z-qty-input:focus { outline: none; }

/* --- child ages --- */
.z-ages[hidden] { display: none; }
.z-age-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.z-age-label {
    flex: 0 0 66px;
    font-size: 12.5px;
    color: var(--z-ink-2);
}
.z-age-selector {
    display: flex;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}
.z-age-option {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    border: 1px solid var(--z-line);
    border-radius: 7px;
    background: var(--z-surface);
    color: var(--z-ink-2);
    font-family: var(--z-body);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.z-age-option:hover { border-color: var(--z-gold); color: var(--z-green); }
.z-age-option.is-active {
    background: var(--z-gold-deep);
    border-color: var(--z-gold-deep);
    color: #fffaf0;
}

/* --- ITS validation --- */
.z-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--z-ink-3); }
.z-hint.is-bad { color: var(--z-sold); }
.z-modal-grid .z-field input.is-bad { border-color: var(--z-sold); }

/* --- intl-tel-input, fitted to the Zaereen field --- */
.z-modal-grid .iti { width: 100%; display: block; }
.z-modal-grid .iti__flag-container { z-index: 2; }
.z-modal-grid .iti--separate-dial-code .iti__selected-flag {
    background: var(--z-surface-2);
    border-radius: 8px 0 0 8px;
    border-right: 1px solid var(--z-line);
}
.z-modal-grid .iti--separate-dial-code .iti__selected-dial-code {
    font-size: 14px;
    color: var(--z-ink-2);
}
.z-modal-grid .iti__country-list {
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: 8px;
    box-shadow: var(--z-shadow-lg);
    color: var(--z-ink);
}
.z-modal-grid .iti__country.iti__highlight { background: var(--z-gold-wash); }
.z-modal-grid .iti__dial-code { color: var(--z-ink-3); }

/* Every date now carries its month and weekday, not only the bookable ones.
   The band therefore has to stop being a departure marker: it is green with
   gold lettering on a day that has a departure, and a quiet cream strip on a
   day that does not, so the hierarchy survives being applied to all 61 cells. */
.z-cal-cell.is-empty .z-cal-mon {
    background: var(--z-surface-2);
    color: var(--z-ink-3);
    border-bottom-color: var(--z-line-strong);
    font-weight: 500;
}

/* Weekday under the number. Redundant with the column header on a desktop,
   but the column is what gets lost when a single date is quoted in a
   screenshot or read out over the phone. */
.z-cal-dow-mini {
    flex: 0 0 auto;
    padding: 0 2px 4px;
    text-align: center;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--z-ink-3);
    line-height: 1;
}
.z-cal-cell.has-dep .z-cal-dow-mini { color: var(--z-green-3); }
.z-cal-cell.is-selected .z-cal-dow-mini { color: rgba(240, 233, 215, .7); }

/* The number takes the space left between the month band and the labels under
   it, and centres in that space. An earlier `flex: 0 0 auto` here pinned it
   directly beneath the band instead, which left every date sitting high in
   its box with the slack collecting at the bottom. */
.z-cal-num {
    flex: 1 1 auto;
    padding: 3px 0 1px;
    min-height: 0;
}
.z-cal-cell.has-dep .z-cal-price { padding-top: 1px; }

/* Compact enquiry form: labels and field chrome tightened so the whole thing
   fits a laptop viewport without scrolling. */
.z-modal-grid .z-field label {
    font-size: 10px;
    letter-spacing: .1em;
    margin-bottom: 3px;
}
.z-modal-grid .z-field { gap: 3px; }
.z-modal-grid .z-pax-field .z-qty { padding: 3px; }
.z-modal-grid .z-pax-field .z-qty-btn { width: 26px; height: 26px; }
.z-modal-head h2 { font-size: clamp(19px, 2.6vw, 24px); }
.z-modal-facts { margin-top: 9px; font-size: 12.5px; }
.z-age-row { margin-top: 6px; }
.z-age-option { height: 28px; font-size: 11.5px; }
.z-modal-note { font-size: 12px; }

/* --------------------------------------------------------------------------
   Enquiry form: inputs sized to what they hold

   A field stretched to its grid column tells the visitor nothing about what
   goes in it. An 8-digit ITS and a 10-digit Indian mobile now get boxes that
   are visibly that long, and the pax steppers stop spanning a third of the
   form for a two-character number.
   -------------------------------------------------------------------------- */

.z-modal-grid .z-field label {
    display: flex;
    align-items: center;
    gap: 5px;
}
.z-modal-grid .z-field label svg { color: var(--z-gold-deep); flex: none; }
.z-pax-field label.is-adults  svg { color: var(--z-green-3); }
.z-pax-field label.is-children svg { color: var(--z-gold-deep); }
.z-pax-field label.is-infants svg { color: var(--z-teal); }

/* ch units: the box is as wide as the digits it accepts, plus padding. */
#zeIts { max-width: 13ch; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#zeTitle { max-width: 11ch; }
#zeMobile { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Compact steppers: a fixed, narrow control rather than one that fills the
   column. Three of these across a row now read as a set of counters. */
.z-modal-grid .z-pax-field .z-qty {
    max-width: 112px;
    gap: 4px;
    padding: 3px;
}
.z-modal-grid .z-pax-field .z-qty-btn { width: 25px; height: 25px; border-radius: 5px; }
.z-modal-grid .z-pax-field .z-qty-btn::before { width: 9px; }
.z-modal-grid .z-pax-field .z-qty-plus::after { height: 9px; }

@media (max-width: 620px) {
    /* On a phone the columns collapse, so let the boxes use the width. */
    #zeIts, #zeTitle { max-width: none; }
    .z-modal-grid .z-pax-field .z-qty { max-width: none; }
}

/* --------------------------------------------------------------------------
   Enquiry form: rows sized to content, not to a fixed column grid

   Capping the input widths left the grid still reserving a full column for
   each narrow field, so an 8-digit ITS box sat in a third of the row with the
   rest of that third empty. Flex rows let each field take only what it needs
   and hand the slack to the one field on the line that should grow.
   -------------------------------------------------------------------------- */

.z-modal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
/* Fixed-width fields: the box IS the field, so no column is reserved. */
.z-modal-grid .z-c2 { flex: 0 0 auto; width: 128px; }   /* ITS, 8 digits   */
.z-modal-grid .z-c1 { flex: 0 0 auto; width: 92px;  }   /* prefix          */
.z-modal-grid .z-c3 { flex: 1 1 210px; min-width: 0; }  /* name/mobile/email */
.z-modal-grid .z-c6 { flex: 1 1 100%; }
.z-modal-grid .z-pax-field { flex: 0 0 auto; width: 124px; }

/* The caps above now do the sizing; these would fight them. */
#zeIts, #zeTitle { max-width: none; }
.z-modal-grid .z-pax-field .z-qty { max-width: none; }

@media (max-width: 620px) {
    .z-modal-grid .z-c2,
    .z-modal-grid .z-c1,
    .z-modal-grid .z-pax-field { flex: 1 1 100px; width: auto; }
    .z-modal-grid .z-c3 { flex: 1 1 100%; }
}

/* Adults / Children / Infant occupy a line of their own. As loose siblings in
   the wrapping flex row they rode up beside Email whenever the panel was wide
   enough, which left a ragged, unbalanced line. */
.z-pax-row {
    flex: 1 1 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Pax steppers: centred heading, and a counter box only as wide as the two
   digits it ever holds. The input was flex-growing to fill the field, which
   left a two-character number floating in a box sized for a name.

   One width declaration, not two. An earlier pair here set 124px and then
   98px on the same selector, with a mobile override sitting between them —
   media queries add no specificity, so the later desktop rule was winning on
   phones until a second mobile block was added to undo it. */
.z-pax-row .z-pax-field { flex: 0 0 auto; width: 98px; }
.z-pax-row .z-pax-field label {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
/* Minus | number | plus, evenly distributed and on one optical line.

   space-between rather than center: the buttons pin to the two ends of the
   control and the number holds the middle, so all three steppers align with
   each other regardless of whether the count is one digit or two.

   The number needs an explicit height and line-height. Without them its
   content box is sized by the display face's own metrics — which are much
   taller than the 24px buttons — and `align-items: center` then centres a
   box whose glyph does not sit in the middle of it, so the digit rode high
   against the buttons. */
.z-pax-row .z-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px;
    max-width: none;
}
.z-pax-row .z-qty-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 16px !important;
    font-variant-numeric: tabular-nums;
}
.z-pax-row .z-qty-btn { flex: 0 0 auto; width: 24px; height: 24px; }

@media (max-width: 620px) {
    .z-pax-row .z-pax-field { flex: 1 1 90px; width: auto; }
}

/* Mobile and Email sit side by side with no dead air between them.

   The phone field used to grow like any other, while the control inside it
   was capped to the selected country's digit count — so the field kept the
   leftover width as blank space and pushed Email away. The field now hugs
   the control (which the country JS sizes), and Email takes the remainder. */
.z-modal-grid .z-phone-field { flex: 0 0 auto; }
.z-modal-grid .z-phone-field .iti { width: 24ch; max-width: none; }

@media (max-width: 620px) {
    .z-modal-grid .z-phone-field { flex: 1 1 100%; }
    .z-modal-grid .z-phone-field .iti { width: 100%; }
}

/* --------------------------------------------------------------------------
   Availability carried by the whole date tile, not just its dot

   Seats available / Few seats left / Sold out now colour the cell background,
   its border and its month band, so a month can be read for availability at a
   glance instead of hunting for six-pixel dots. The dot stays as the key that
   ties a tile back to the legend.

   The status classes are already applied by both renderers (`is-open`,
   `is-few`, `is-sold`), so this is presentation only.
   -------------------------------------------------------------------------- */

.z-cal-cell.has-dep.is-open {
    background: linear-gradient(170deg, #f2f8f4 0%, var(--z-open-bg) 100%);
    border-color: color-mix(in srgb, var(--z-open) 42%, transparent);
}
.z-cal-cell.has-dep.is-open .z-cal-num,
.z-cal-cell.has-dep.is-open .z-cal-dow-mini { color: var(--z-open); }
.z-cal-cell.has-dep.is-open .z-cal-price { color: var(--z-open); }
.z-cal-cell.has-dep.is-open .z-cal-mon {
    background: var(--z-open);
    color: #f2f8f4;
    border-bottom-color: color-mix(in srgb, var(--z-open) 60%, #000);
}

.z-cal-cell.has-dep.is-few {
    background: linear-gradient(170deg, #fdf6e8 0%, var(--z-few-bg) 100%);
    border-color: color-mix(in srgb, var(--z-few) 45%, transparent);
}
.z-cal-cell.has-dep.is-few .z-cal-num,
.z-cal-cell.has-dep.is-few .z-cal-dow-mini { color: var(--z-few); }
.z-cal-cell.has-dep.is-few .z-cal-price { color: var(--z-few); }
.z-cal-cell.has-dep.is-few .z-cal-mon {
    background: var(--z-few);
    color: #fdf6e8;
    border-bottom-color: color-mix(in srgb, var(--z-few) 60%, #000);
}

.z-cal-cell.has-dep.is-sold {
    background: linear-gradient(170deg, #fbf0ed 0%, var(--z-sold-bg) 100%);
    border-color: color-mix(in srgb, var(--z-sold) 40%, transparent);
    opacity: .78;                      /* still legible, clearly not for sale */
}
.z-cal-cell.has-dep.is-sold .z-cal-num,
.z-cal-cell.has-dep.is-sold .z-cal-dow-mini { color: var(--z-sold); }
.z-cal-cell.has-dep.is-sold .z-cal-price { color: var(--z-sold); text-decoration: line-through; }
.z-cal-cell.has-dep.is-sold .z-cal-mon {
    background: var(--z-sold);
    color: #fbf0ed;
    border-bottom-color: color-mix(in srgb, var(--z-sold) 60%, #000);
}

/* Hover keeps the status hue rather than washing back to gold. */
.z-cal-cell.has-dep.is-open:hover { border-color: var(--z-open); background: #eaf4ee; }
.z-cal-cell.has-dep.is-few:hover  { border-color: var(--z-few);  background: #faf0dd; }
.z-cal-cell.has-dep.is-sold:hover { border-color: var(--z-sold); background: var(--z-sold-bg); }

/* The selected day still overrides everything — it is the strongest state. */
.z-cal-cell.is-selected,
.z-cal-cell.is-selected:hover { background: var(--z-green); border-color: var(--z-green); }

/* --------------------------------------------------------------------------
   Tour detail: gallery, and sub-blocks under a merged heading
   -------------------------------------------------------------------------- */


/* Sections folded under a shared heading: they keep their own titles but drop
   to a subordinate level, so the page has one h2 per nav entry rather than
   nine competing ones. */
.z-subhead {
    font-family: var(--z-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--z-green);
    margin: 0 0 14px;
}
.z-block-sub {
    margin-bottom: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--z-line-gold);
}
.z-block-sub > .z-subhead { margin-top: 0; }
.z-block > .z-subhead:not(:first-of-type) { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Tour detail tabs

   The file-folder bar from holidays/package.php (.content-tabs-nav / .tab-btn),
   in Zaereen's palette: tabs sit on the content, the active one joins it.
   -------------------------------------------------------------------------- */

.z-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 14px;
    margin: 0;
    /* Visible, not a scroll container: the active tab overhangs the bar by 1px
       to paint out the panel's top border, and overflow-x:auto would clip
       exactly that pixel. The six tabs fit every desktop width; only the phone
       breakpoint below turns the bar back into a scroller. */
    overflow: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 75px;
    z-index: 20;
    background: var(--z-cream);
}
.z-tabs::-webkit-scrollbar { display: none; }

.z-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 12px;
    border: 1px solid var(--z-line-strong);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    /* One step darker than the bar behind them, so an unselected tab reads as
       recessed against the near-white panel it opens. */
    background: var(--z-cream-deep);
    color: var(--z-ink-2);
    font-family: var(--z-body);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.z-tab svg { color: var(--z-gold-deep); flex: none; }
.z-tab:hover { background: var(--z-gold-wash); color: var(--z-green); border-color: var(--z-line-gold); }

/* The active tab is the same green as the page heads and reaches 1px into the
   panel below, covering its top border — that overlap is what makes the tab
   and its content read as one box rather than two stacked things. */
.z-tab.is-active {
    background: var(--z-green);
    border-color: var(--z-green);
    color: #fdf8ec;
    z-index: 2;
    margin-bottom: -1px;
    padding-bottom: 13px;
}
.z-tab.is-active svg { color: var(--z-gold-light); }

/* Narrower desktops: tighten the tabs so the row still fits on one line
   and the overlap survives. Below 780px the bar becomes a scroller. */
@media (max-width: 1040px) {
    .z-tab { padding: 10px 12px 11px; font-size: 13px; gap: 6px; }
    .z-tab.is-active { padding-bottom: 12px; }
}

/* --- the panel the tabs open ------------------------------------------- */
.z-tabpanel {
    position: relative;
    background: var(--z-surface);
    border: 1px solid var(--z-line-strong);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(13, 44, 34, .07);
    padding: 26px 26px 28px;
}

/* The blocks a tab owns; hidden ones use [hidden], which the reset honours. */
.z-block[hidden] { display: none; }

/* The tab is the section's heading now — the h2 inside would say it twice.
   Sub-headings (.z-subhead) stay: those name parts, not the whole tab. */
.z-tabpanel .z-block.z-block-first > h2:not(.z-subhead) { display: none; }
.z-tabpanel .z-block.z-block-last { margin-bottom: 0; }

@media (max-width: 780px) {
    .z-tabs { top: 0; padding: 0 10px; overflow-x: auto; overflow-y: hidden; }
    .z-tab { padding: 9px 13px 10px; font-size: 13px; }
    .z-tab.is-active { padding-bottom: 10px; margin-bottom: 0; }
    .z-tab svg { display: none; }
    .z-tabpanel { padding: 18px 14px 20px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   Gallery — main image with a thumbnail strip

   Follows .gallery-container-v2 / .main-image-wrapper / .thumb-item in
   holidays/package.php: one large frame, thumbnails under it that swap what
   is shown, active thumb marked.
   -------------------------------------------------------------------------- */

.z-gal {
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    padding: 10px;
    position: relative;
}
.z-gal::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--z-line-gold);
    border-radius: calc(var(--z-radius) - 4px);
    pointer-events: none;
}

.z-gal-main {
    position: relative;
    display: block;
    border-radius: var(--z-radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    margin-bottom: 10px;
    background: var(--z-cream-deep);
    /* Sized to the viewport, not to a fixed ratio: a tall image used to push
       the thumbnail strip below the fold, so the gallery never showed as one
       piece. clamp keeps it readable on a laptop and on a large monitor. */
    height: clamp(240px, 46vh, 520px);
}
.z-gal-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.z-gal-main:hover img { transform: scale(1.04); }

.z-gal-zoom {
    position: absolute;
    right: 14px; bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(9, 32, 25, .68);
    backdrop-filter: blur(5px);
    color: var(--z-gold-light);
    font-size: 12.5px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.z-gal-main:hover .z-gal-zoom { opacity: 1; }

.z-gal-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.z-gal-strip::-webkit-scrollbar { display: none; }

.z-gal-thumb {
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--z-cream-deep);
    cursor: pointer;
    opacity: .68;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.z-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-gal-thumb:hover { opacity: 1; transform: translateY(-2px); }
.z-gal-thumb.is-active { opacity: 1; border-color: var(--z-gold); }

@media (max-width: 780px) {
    .z-gal-main { height: clamp(200px, 34vh, 320px); }
    .z-gal-thumb { width: 74px; }
}

/* The gallery pane has no heading, so it should not carry the heading's
   bottom rule or the block's top padding — the frame is the section. */
#gallery.z-block > h2 { display: none; }
#gallery.z-block { margin-bottom: 30px; }

/* Thumbnails: show as many as fit rather than a fixed count, and keep the
   strip on one line so the main image and the strip read as one unit. */
.z-gal-strip { scroll-snap-type: x proximity; }
.z-gal-thumb { scroll-snap-align: start; }



/* --------------------------------------------------------------------------
   Gallery alignment — measured fixes

   1. The left column was resolving 1214px inside a 1192px body, so the gallery
      overhung the tab bar by 22px. Grid and flex children default to
      `min-width: auto`, which refuses to shrink below their content: the
      12-thumb strip was setting that floor. min-width:0 lets the column
      match its container.

   2. `object-fit: contain` was pillarboxing. The photographs are ~16:9
      (800x463) and the frame was 1192x414 — a 2.88 box holding a 1.73 image,
      so it rendered 715px wide with green bars either side. The frame now
      carries the images' own ratio and fills it.
   -------------------------------------------------------------------------- */

.z-tourbody > div,
.z-tourbody > aside { min-width: 0; }

.z-gal-main {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 56vh;
    background: var(--z-cream-deep);
}
.z-gal-main img { object-fit: cover; }

@media (max-width: 780px) {
    .z-gal-main { aspect-ratio: 4 / 3; max-height: 42vh; }
}

/* The frame spans the full width; the height is chosen, not derived.

   With `aspect-ratio: 16/9` AND a max-height, the height cap won and the
   WIDTH shrank to preserve the ratio — the image rendered 896px inside a
   1170px frame, leaving 274px of dead space on the right. A fixed ratio and
   a height cap cannot both hold, so the ratio goes: width is 100%, height is
   clamped to the viewport, and `cover` trims top and bottom evenly. */
.z-gal-main {
    aspect-ratio: auto;
    width: 100%;
    height: clamp(260px, 44vh, 460px);
    max-height: none;
}
.z-gal-main img { object-fit: cover; object-position: center; }

@media (max-width: 780px) {
    .z-gal-main { aspect-ratio: auto; height: clamp(200px, 32vh, 300px); }
}

/* --------------------------------------------------------------------------
   Compact calendar — for the 804px column on the tour detail page

   Two months share 802px there, so a day cell is 47px wide against the ~85px
   it gets on the homepage. At that width the cells were 47x78 — far taller
   than wide — and the price line ("₹1,00,000") could not fit at all. The
   compact variant drops the price, tightens the height and shrinks the type
   so a cell reads square-ish again.
   -------------------------------------------------------------------------- */

.z-cal.is-compact .z-cal-cell { min-height: 54px; }
.z-cal.is-compact .z-cal-price { display: none; }
.z-cal.is-compact .z-cal-mon { font-size: 7.5px; letter-spacing: .08em; padding: 2px 0 1px; }
.z-cal.is-compact .z-cal-num { font-size: 13px; padding: 2px 0 0; }
.z-cal.is-compact .z-cal-cell.has-dep .z-cal-num { font-size: 15px; }
.z-cal.is-compact .z-cal-dow-mini { font-size: 7.5px; letter-spacing: .06em; padding-bottom: 3px; }
.z-cal.is-compact .z-cal-grid { gap: 4px; }
.z-cal.is-compact .z-cal-month { padding: 14px 14px 16px; }
.z-cal.is-compact .z-cal-month-name { font-size: 16px; padding-bottom: 9px; margin-bottom: 9px; }
.z-cal.is-compact .z-cal-dow { font-size: 9px; padding: 4px 0; letter-spacing: .04em; }
.z-cal.is-compact .z-cal-dot { width: 5px; height: 5px; top: 4px; right: 4px; }

/* Head: title left, month stepper right, on one line.

   Stacking all three parts made it 190px tall — nearly a third of the panel
   before a single date showed. The tour name goes entirely: on a tour page it
   repeats the hero heading and the Ex-city already in the meta line, so it was
   costing a row to say what the page had said twice. */
.z-cal.is-compact .z-cal-head {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-align: left;
}
.z-cal.is-compact .z-cal-tour { display: none; }
.z-cal.is-compact .z-cal-title { justify-content: flex-start; }
.z-cal.is-compact .z-cal-title strong { font-size: 16px; }
.z-cal.is-compact .z-cal-title-icon { width: 32px; height: 38px; }
.z-cal.is-compact .z-cal-right { justify-self: end; }
.z-cal.is-compact .z-cal-range { font-size: 15px; min-width: 0; }
.z-cal.is-compact .z-cal-nav { width: 30px; height: 30px; }

/* Below 900px the second month is already hidden, so the cells get the full
   width back and the compact squeeze is no longer needed. */
@media (max-width: 900px) {
    .z-cal.is-compact .z-cal-cell { min-height: 62px; }
    .z-cal.is-compact .z-cal-price { display: block; }
}

/* --------------------------------------------------------------------------
   Quick facts bar — under the hero, above the tabs

   The .pkg-fact-item strip from holidays/package.php: icon, small label,
   value. Wraps rather than scrolls, so nothing is hidden off the right edge
   on a narrow window.
   -------------------------------------------------------------------------- */

.z-facts {
    position: relative;
    background: var(--z-marble);
    background-image: var(--z-marble-tex);
    background-size: 300px 300px;
    border-bottom: 1px solid var(--z-line-gold);
    padding: 16px 0;
}
.z-facts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 26px;
}
.z-fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 26px;
    border-right: 1px solid var(--z-line);
}
.z-fact:last-child { border-right: 0; padding-right: 0; }
.z-fact-icon {
    flex: none;
    width: 34px; height: 40px;
    display: grid; place-items: center;
    color: var(--z-factc, var(--z-green));
    background: var(--z-gold-wash);
    border: 1px solid var(--z-line-gold);
    border-radius: 50% 50% 5px 5px / 58% 58% 5px 5px;
}
/* Each fact takes its own hue from --z-factc, set per item in the markup and
   matching the header nav so the page reads as one set. Green remains the
   fallback: the muted --z-ink-3 this replaced sat near 2.6:1 at 10px
   uppercase, legible only if you already knew what it said. */
.z-fact h6 {
    color: var(--z-factc, var(--z-green));
    margin: 0 0 3px;
    font-family: var(--z-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.z-fact p {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--z-ink);
    line-height: 1.25;
    white-space: nowrap;
}


/* Inclusions as icon chips, one per included item. */
.z-fact-inc-row { display: flex; flex-wrap: wrap; gap: 5px; }
.z-fact-inc-chip {
    width: 27px; height: 27px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: var(--z-green-soft);
    border: 1px solid color-mix(in srgb, var(--z-open) 26%, transparent);
    color: var(--z-open);
}

@media (max-width: 900px) {
    .z-fact { border-right: 0; padding-right: 0; }
    .z-facts-row { gap: 14px 22px; }
    .z-fact p { white-space: normal; }
}


/* Traveller Details: two columns, labels on the first row and counts beneath,
   with the child ages beside the count. A rule between the columns stands in
   for the pipe, so the two read as a pair rather than a list. */
.z-fact-pax-grid {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 2px 0;
}
.z-fact-pax-grid .k {
    font-size: 11px;
    color: var(--z-ink-3);
    padding: 0 12px;
}
.z-fact-pax-grid .v {
    font-size: 15px;
    font-weight: 500;
    color: var(--z-ink);
    font-variant-numeric: tabular-nums;
    padding: 0 12px;
    white-space: nowrap;
}
.z-fact-pax-grid .k:first-child,
.z-fact-pax-grid .v:nth-of-type(1) { padding-left: 0; }
/* The divider sits on the second column so it runs between the two. */
.z-fact-pax-grid .k:nth-child(2),
.z-fact-pax-grid .v:nth-of-type(2) { border-left: 1px solid var(--z-line); }
.z-fact-pax-grid .v small {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--z-gold-deep);
}

/* Traveller sub-labels follow the section heading, one step lighter so the
   hierarchy still reads: heading > label > value. */
.z-fact-pax-grid .k { color: var(--z-green-3); font-weight: 500; }

/* --------------------------------------------------------------------------
   VISA CARDS  (zaereen/visas.php)

   The card itself is the shared .z-card from the tour listing — same arch,
   same body, same actions — so the two listings stay one design. Only the
   country flag is new: it sits opposite the type badge, which already owns
   the top-left corner.
   -------------------------------------------------------------------------- */
.z-visa-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: block;
    width: 38px;
    height: 27px;
    border-radius: 4px;
    overflow: hidden;
    /* Flags carry their own colours, several of them near-white. The ring and
       shadow keep a white flag from dissolving into a pale photograph. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 2px 8px rgba(0, 0, 0, .32);
}
.z-visa-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   DEPARTURE LIST — card view and line view
   ==========================================================================
   Both views render from ONE markup (includes/zaereen/ui/departure_card.php).
   Card view is the base, so zaereen/departures.php — which has no view switch
   and therefore no data-view attribute — gets the cards without opting in.
   Line view is the [data-view="line"] override.

   The trick that makes line view a real table: .z-dep-main and .z-dep-side
   become display:contents there, which promotes their children to grid items
   of .z-dep. The row then has nine cells that line up under the headings in
   departure_head.php. Both must carry the SAME grid template.
   -------------------------------------------------------------------------- */
.z-deplist { display: grid; gap: 14px; counter-reset: zdep; }
.z-dep { counter-increment: zdep; }

/* Row number, drawn from the counter so filtered-out rows leave no gaps:
   a display:none element does not increment a CSS counter. */
.z-dep-sn { display: none; }
.z-dep-sn::before { content: counter(zdep) "."; }

.z-dep-acts { display: flex; gap: 8px; align-items: center; }

/* WhatsApp enquiry, in that brand's own green rather than Zaereen's. */
.z-dep-wa {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #25d366;
    border: 1px solid #1fb855;
    transition: filter .18s ease;
}
.z-dep-wa:hover { filter: brightness(.92); }

/* --- card view (base) ---------------------------------------------------
   Title on its own line, the facts wrapping beneath it. The facts are
   siblings of the title rather than a list, because line view needs each one
   promotable to its own column. */
.z-dep-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.z-dep-tour { flex: 0 0 100%; margin: 0; }
.z-dep-main > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--z-ink-2);
    min-width: 0;
}
.z-dep-main > span svg { color: var(--z-gold-deep); flex: none; }

/* --- line view ----------------------------------------------------------
   One bordered slab of hairline-separated rows, so a long list scans as a
   table rather than a stack of floating cards. */
.z-dep-head { display: none; }

.z-deplist[data-view="line"] {
    gap: 0;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    overflow: hidden;
    box-shadow: var(--z-shadow-sm);
}

/* The one template both the headings and every row are laid out on. */
.z-deplist[data-view="line"] .z-dep-head,
.z-deplist[data-view="line"] .z-dep {
    display: grid;
    grid-template-columns:
        36px                  /*  1 S/N           */
        minmax(120px, 1.3fr)  /*  2 Destination   */
        minmax(88px, 1fr)     /*  3 Airline       */
        minmax(88px, 1fr)     /*  4 Sector        */
        104px                 /*  5 Departure     */
        72px                  /*  6 Duration      */
        100px                 /*  7 Seat Status   */
        /* Sized for "₹1,00,000/-" at 15px bold plus the cell's padding. At
           98px the figure was clipping — the column people actually read. */
        118px                 /*  8 Starting From */
        /* One column per action. Each is the button plus the cell's own
           10px padding either side; too narrow and a button wraps, which
           doubles the height of every row in the table. */
        84px                  /*  9 PDF           */
        124px                 /* 10 Book Now      */
        108px;                /* 11 Enquiry       */
    /* No gap: the column rules ARE the separation, and a gap would leave the
       vertical lines floating away from the cells they divide. Cells stretch
       so each rule runs the full height of the row. */
    gap: 0;
    align-items: stretch;
}
/* The Book track is a fixed width, NOT auto. An auto track sizes to its own
   content, and the header's short "BOOK" is far narrower than a row's three
   buttons — so the two grids resolved different free space and every fr
   column drifted out of line with its heading. */

.z-deplist[data-view="line"] .z-dep-head {
    padding: 0;
    background: var(--z-cream-deep);
    border-bottom: 1px solid var(--z-line-gold);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--z-green);
}

.z-deplist[data-view="line"] .z-dep {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--z-line);
    border-radius: 0;
    box-shadow: none;
}

/* --- the gridlines ------------------------------------------------------
   Every cell, in the heading band and in each row, carries its own padding
   and a rule down its right edge. Listed explicitly rather than with `> *`
   because .z-dep-main and .z-dep-side are display:contents here — the real
   cells are their children, which no child selector on .z-dep can reach. */
.z-deplist[data-view="line"] .z-dep-head > span,
.z-deplist[data-view="line"] .z-dep-sn,
.z-deplist[data-view="line"] .z-dep-date,
.z-deplist[data-view="line"] .z-dep-dest,
.z-deplist[data-view="line"] .z-dep-air,
.z-deplist[data-view="line"] .z-dep-from,
.z-deplist[data-view="line"] .z-dep-days,
.z-deplist[data-view="line"] .z-dep-seats,
.z-deplist[data-view="line"] .z-dep-side .z-price,
.z-deplist[data-view="line"] .z-dep-act {
    display: flex;
    align-items: center;
    /* Every column centred, headings included — the table is read down its
       columns, and a centred column keeps its heading over its values whatever
       the values happen to be. */
    justify-content: center;
    text-align: center;
    min-width: 0;
    padding: 9px 10px;
    border-right: 1px solid var(--z-line);
}
/* The row's last cell closes on the table's own border. */
.z-deplist[data-view="line"] .z-dep-head > span:last-child,
.z-deplist[data-view="line"] .z-dep-act { border-right: 0; }

/* The buttons stay on one line. Wrapping them is what made every row twice
   the height it needed. */
.z-deplist[data-view="line"] .z-dep-act { flex-wrap: nowrap; }

/* The tour title is an h3, and `.zaereen h3` (0,1,1) outranks `.z-dep-tour`
   (0,1,0), so the margin reset in the card rule never reached it — leaving a
   6px gap that stopped its column rule short of the row border. Scoping to
   the list wins the cascade without an !important. */
.z-deplist .z-dep-tour { margin: 0; }

/* The heading band's rules are the stronger gold, matching its bottom edge. */
.z-deplist[data-view="line"] .z-dep-head > span { border-right-color: var(--z-line-gold); }

/* The price used to hang right; every column is centred now, so the rule that
   pushed it (and its heading, by column index) to the edge is gone. */
.z-deplist[data-view="line"] .z-dep:last-child { border-bottom: 0; }
/* No lift: rows that rise off a joined slab tear it apart. */
.z-deplist[data-view="line"] .z-dep:hover {
    transform: none;
    box-shadow: none;
    background: var(--z-cream);
}

/* Promote the two wrappers' children to cells of the row. */
.z-deplist[data-view="line"] .z-dep-main,
.z-deplist[data-view="line"] .z-dep-side { display: contents; }

/* display is set by the cell rule above; repeating it here as `block` would
   undo the flex box the column rule needs. */
.z-deplist[data-view="line"] .z-dep-sn {
    font-family: var(--z-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--z-gold-deep);
    font-variant-numeric: tabular-nums;
}

/* --- column order -------------------------------------------------------
   The markup is in the order card view needs (date plaque first, then the
   title and its facts, then price and buttons). The table wants a different
   sequence, so line view reorders the grid items rather than the HTML — that
   way one markup keeps serving both views.

   These MUST match the heading order in departure_head.php. */
.z-deplist[data-view="line"] .z-dep-sn     { order: 1; }
.z-deplist[data-view="line"] .z-dep-dest   { order: 2; }
.z-deplist[data-view="line"] .z-dep-air    { order: 3; }
.z-deplist[data-view="line"] .z-dep-from   { order: 4; }
.z-deplist[data-view="line"] .z-dep-date   { order: 5; }
.z-deplist[data-view="line"] .z-dep-days   { order: 6; }
.z-deplist[data-view="line"] .z-dep-seats  { order: 7; }
.z-deplist[data-view="line"] .z-dep-side .z-price { order: 8; }
.z-deplist[data-view="line"] .z-dep-act-pdf  { order: 9; }
.z-deplist[data-view="line"] .z-dep-act-book { order: 10; }
.z-deplist[data-view="line"] .z-dep-act-enq  { order: 11; }

/* The table is headed by Destination, so the tour title steps aside — and it
   MUST be hidden, not merely unstyled: an extra visible child is a tenth grid
   item in a nine-track row, which pushes every cell out from under its
   heading. Its name is not lost; it is the tooltip on the destination cell,
   and the Book column still links to that specific tour. */
.z-deplist[data-view="line"] .z-dep-tour { display: none; }

/* --- long form vs short form --------------------------------------------
   Card view takes the roomy wording, the table the compact one. */
.z-dep-from .s,
.z-dep-days .s,
.z-dep-seats .s { display: none; }

.z-deplist[data-view="line"] .z-dep-from .t,
.z-deplist[data-view="line"] .z-dep-days .t,
.z-deplist[data-view="line"] .z-dep-seats .t { display: none; }
.z-deplist[data-view="line"] .z-dep-from .s,
.z-deplist[data-view="line"] .z-dep-days .s { display: block; }
.z-deplist[data-view="line"] .z-dep-seats .s { display: inline-block; }

/* The plaque's three lines give way to one full date with the year. */
.z-dep-date .full { display: none; }
.z-deplist[data-view="line"] .z-dep-date .d,
.z-deplist[data-view="line"] .z-dep-date .m { display: none; }
.z-deplist[data-view="line"] .z-dep-date .full {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    color: var(--z-green);
}

/* The arched plaque flattens to a plain date. The inset box-shadow that draws
   its hairline frame has to go too, or the date keeps a stray box around it
   once the green ground is gone.

   Note what is NOT reset here: padding. This rule sits after the cell rule
   above, so a `padding: 0` would strip the Departure cell's padding and drop
   its column rule straight onto the text. */
.z-deplist[data-view="line"] .z-dep-date {
    color: var(--z-green);
    background: none;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
}
.z-deplist[data-view="line"] .z-dep-date .y { display: none; }

/* Every cell is one line and clips rather than growing the row. The clipping
   lives on .t, not on the cell: the cell is a flex box so its column rule can
   stretch, and text-overflow has no effect on a flex container. */
.z-deplist[data-view="line"] .z-dep-dest .t,
.z-deplist[data-view="line"] .z-dep-air .t,
.z-deplist[data-view="line"] .z-dep-from .s,
.z-deplist[data-view="line"] .z-dep-days .s {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Destination is the column the eye lands on, so it keeps the weight the tour
   title had. */
.z-deplist[data-view="line"] .z-dep-dest { font-size: 14px; color: var(--z-green); font-weight: 500; }
/* The icons earn their space in a card; in a headed column they only crowd
   the value the heading already names. */
.z-deplist[data-view="line"] .z-dep-dest svg,
.z-deplist[data-view="line"] .z-dep-air svg,
.z-deplist[data-view="line"] .z-dep-from svg,
.z-deplist[data-view="line"] .z-dep-days svg { display: none; }
.z-deplist[data-view="line"] .z-dep-air,
.z-deplist[data-view="line"] .z-dep-from,
.z-deplist[data-view="line"] .z-dep-days { font-size: 13px; }

/* Scoped to .s, not to every .z-badge in the cell. Targeting .z-badge matched
   the long-form badge too, and at equal specificity this rule sits after the
   one hiding it — so both wordings rendered, reading
   "48 SEATS AVAILABLE AVAILABLE". */
.z-deplist[data-view="line"] .z-dep-seats .z-badge.s { display: inline-block; }

/* --- tinted columns -----------------------------------------------------
   Airline and Departure get a wash of the brand green, as the reference table
   tints its own. Two strengths of one hue rather than two colours: the point
   is to group the flight facts, not to introduce a second palette. Kept light
   so the ink on them stays the same colour it is everywhere else in the row —
   a dark fill would need its own light text and a contrast check per status.

   These sit on the cells, not the row, so the hover wash still shows through
   the untinted columns either side. */
.z-deplist[data-view="line"] .z-dep-air  { background: rgba(27, 99, 73, .06); }
.z-deplist[data-view="line"] .z-dep-date { background: rgba(27, 99, 73, .13); }

/* --- Seat Status as a filled cell ---------------------------------------
   Following the reference table, where the status is a solid block of colour
   rather than a small pill — it is the column people scan the table for, and
   a filled cell reads down a long list at a glance.

   Zaereen's own status colours, not the reference's neon: --z-open / --z-few
   / --z-sold, each measured against white text (7.44, 5.46 and 8.30:1). The
   pill inside loses its own ground so the colour is the cell, not a chip
   floating in one. */
.z-deplist[data-view="line"] .z-dep-seats { padding: 0; }
.z-deplist[data-view="line"] .z-dep-seats .z-badge.s {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-self: stretch;
    padding: 9px 8px;
    border-radius: 0;
    background: var(--z-open);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
}
.z-deplist[data-view="line"] .z-dep-seats .z-badge-few.s  { background: var(--z-few); }
.z-deplist[data-view="line"] .z-dep-seats .z-badge-sold.s { background: var(--z-sold); }

/* Price loses its caption: the column heading says "Starting From". Padding
   and alignment come from the cell rule above — setting them again here would
   strip the cell's padding and collapse its column rule onto the text.

   It is the figure people came to the table for, so it carries more weight
   than the cells around it and never wraps: the track is sized for
   "₹1,00,000/-" in full, and nowrap makes a clipped column obvious in testing
   instead of quietly breaking the amount across two lines. */
.z-deplist[data-view="line"] .z-dep-side .z-price { margin: 0; white-space: nowrap; }
.z-deplist[data-view="line"] .z-price b {
    font-size: 15px;
    font-weight: 700;
    color: var(--z-green);
    font-variant-numeric: tabular-nums;
}
/* The "/-" is part of the figure in a table, hidden on a card. */
.z-price .sfx { display: none; }
.z-deplist[data-view="line"] .z-price .sfx { display: inline; }
.z-deplist[data-view="line"] .z-price small,
.z-deplist[data-view="line"] .z-price span { display: none; }
/* (the 14px rule that stood here is superseded by the weightier one above) */

/* --- narrow screens -----------------------------------------------------
   The nine columns need 1070px before the shell's padding, so the strip's
   script forces card view below 1180px and the control that picks line view
   goes with it. Keep this breakpoint and LINE_MIN in departure_strip.php in
   step, or the switch offers a view the table cannot fit into. */


/* ==========================================================================
   TRAVELLER REVIEWS — story cards
   ==========================================================================
   Follows Traveler Stories on holidays/destination_detail.php: the
   travellers' own photograph, who they are, four figures, then their words,
   with the rating and a View button on a footer rail. Same arrangement, built
   from Zaereen's tokens instead of that page's navy and orange.
   -------------------------------------------------------------------------- */
.z-storywrap { position: relative; }

.z-stories {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* overflow-x:auto computes overflow-y to auto as well, so the cards' hover
       lift and their shadow would both be clipped at the rail's edges. The
       padding is the room they move into. */
    padding: 6px 2px 12px;
}
.z-stories::-webkit-scrollbar { display: none; }

/* Arrows: centred on the photograph rather than the whole card, which puts
   them where the eye already is and clear of the footer buttons. */
.z-story-nav {
    position: absolute;
    top: 112px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    color: var(--z-green);
    background: var(--z-surface);
    border: 1px solid var(--z-line-gold);
    border-radius: 50%;
    box-shadow: var(--z-shadow-sm);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.z-story-nav.is-prev { left: -14px; }
.z-story-nav.is-next { right: -14px; }
.z-story-nav.is-prev svg { transform: rotate(90deg); }
.z-story-nav.is-next svg { transform: rotate(-90deg); }
.z-story-nav:hover:not(:disabled) { background: var(--z-green); color: var(--z-gold-light); border-color: var(--z-green); }
.z-story-nav:focus-visible { outline: 2px solid var(--z-gold); outline-offset: 2px; }
.z-story-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
/* Nothing to scroll: the arrows are not just disabled, they are gone. */
.z-storywrap.is-static .z-story-nav { display: none; }

.z-story {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--z-surface);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    overflow: hidden;
    box-shadow: var(--z-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.z-story:hover { border-color: var(--z-gold-light); box-shadow: var(--z-shadow); transform: translateY(-2px); }

/* --- photograph --------------------------------------------------------- */
.z-story-pic {
    position: relative;
    height: 200px;
    border-bottom: 2px solid var(--z-gold);
    background: var(--z-cream-deep);
}
.z-story-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.z-story-flag,
.z-story-rate {
    position: absolute;
    top: 10px;
    z-index: 2;
    border-radius: 6px;
    /* The photographs are group shots in daylight; a plain badge would sit on
       whatever happens to be behind it, so both carry their own dark ground. */
    background: rgba(18, 51, 42, .72);
    backdrop-filter: blur(3px);
}
.z-story-flag { left: 10px; padding: 3px; line-height: 0; }
.z-story-flag img { display: block; border-radius: 3px; width: 30px; height: 20px; object-fit: cover; }
.z-story-rate { right: 10px; padding: 5px 7px; line-height: 0; color: var(--z-gold-light); }

/* --- body --------------------------------------------------------------- */
.z-story-body { padding: 16px 16px 4px; display: flex; flex-direction: column; flex: 1 1 auto; }

.z-story-body h3 {
    font-family: var(--z-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--z-gold-deep);
    margin: 0 0 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--z-line);
    /* Two lines, clamped AND reserved: clamping alone stops a long name
       running away, but a one-line name still sat higher than a two-line one
       beside it and knocked every row below out of alignment across the rail. */
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.z-story-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 13px;
}
.z-story-stats > div { text-align: center; min-width: 0; }
.z-story-stats .v {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--z-green);
    min-width: 0;
}
.z-story-stats .v svg { color: var(--z-gold-deep); flex: 0 0 auto; }
.z-story-stats .v b {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.z-story-stats small {
    display: block;
    margin-top: 2px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-ink-3);
}

.z-story-body blockquote {
    display: flex;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--z-ink-2);
}
.z-story-q { flex: 0 0 auto; margin-top: 2px; color: var(--z-gold); }
.z-story-body blockquote span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- footer ------------------------------------------------------------- */
.z-story-foot {
    margin-top: auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--z-line-gold);
    background: var(--z-cream);
}
.z-story-foot-rate small,
.z-story-foot-price small {
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-ink-3);
    margin-bottom: 3px;
}
.z-story-foot-rate .z-stars { color: var(--z-gold); }

/* Review with no photograph of its own and no tour picture behind it. */
.z-story-initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--z-display);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--z-gold-light);
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
}

/* ==========================================================================
   ENQUIRY POPUP — WhatsApp code step
   ==========================================================================
   Shown once a code has been sent, between the form fields and the footer.
   Reuses .z-otp-box from the sign-in gate so the two code inputs behave and
   look the same wherever a visitor meets one.
   -------------------------------------------------------------------------- */
.z-eotp {
    margin: 4px 0 0;
    padding: 14px 16px;
    border-top: 1px solid var(--z-line-gold);
    background: var(--z-cream);
}
.z-eotp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--z-green);
}
.z-eotp-head b { display: block; font-size: 14px; }
.z-eotp-head span {
    display: block;
    font-size: 12.5px;
    color: var(--z-ink-3);
    font-variant-numeric: tabular-nums;
}
.z-eotp .z-otp-boxes { display: flex; gap: 8px; flex-wrap: wrap; }
.z-eotp-msg {
    margin: 9px 0 10px;
    font-size: 12.5px;
    color: var(--z-ink-2);
    min-height: 1em;
}
/* --z-sold rather than a raw red, so the one failure colour is used
   everywhere: 8.30:1 on the cream ground. */
.z-eotp-msg.is-bad { color: var(--z-sold); font-weight: 600; }


/* --- strip filter labels, in colour --------------------------------------
   Each takes the colour its own idea already carries elsewhere in the design,
   rather than three arbitrary hues: Destination the red of the Destination
   tile on the facts bar, Departure City the green of the "From" tile, and
   View the violet the account rail uses. All three measure above 7:1 on the
   marble ground, which matters at 9.5px.
   -------------------------------------------------------------------------- */
.z-strip-dest label,
.z-strip-city label { font-weight: 700; }
.z-strip-dest label { color: #8a3024; }
.z-strip-city label { color: #1f6047; }

/* Page-head spacing. The lockup that used to sit on the right of this band
   has been removed, and with it the right-hand padding that kept the
   heading clear of it — the text now has the full width again. */
.z-pagehead h1 { margin: 14px 0 10px; }
.z-pagehead p  { margin: 0; max-width: 62ch; }

/* --- three action columns ------------------------------------------------
   Card view keeps them as one button row; line view flattens the wrapper so
   each becomes its own headed column.
   -------------------------------------------------------------------------- */
.z-deplist[data-view="line"] .z-dep-acts { display: contents; }
.z-dep-act { display: inline-flex; align-items: center; }
.z-dep-act .z-btn { white-space: nowrap; }
.z-dep-act-off { color: var(--z-ink-3); }

/* Headings carry the same mark the fact does on a card. */
.z-dep-head > span { gap: 5px; }
.z-dep-head > span svg { flex: none; opacity: .85; }

/* --- coloured column headings --------------------------------------------
   Each heading takes the colour its own idea carries elsewhere in the design
   — Destination the red of the Destination tile on the facts bar, Sector the
   green of the "From" tile, and so on — rather than eleven arbitrary hues.

   Every one measures at least 5.15:1 on the heading band's cream, which
   matters at 9.5px bold. Two candidates were darkened to get there: the amber
   for Seat Status (4.43 -> 5.33) and the orange for Enquiry (4.44 -> 5.45).
   The icon inherits the colour with the text.
   -------------------------------------------------------------------------- */
.z-dep-head > span:nth-child(1)  { color: #1b4d3e; }  /* S/N           */
.z-dep-head > span:nth-child(2)  { color: #8a3024; }  /* Destination   */
.z-dep-head > span:nth-child(3)  { color: #6b3b6e; }  /* Airline       */
.z-dep-head > span:nth-child(4)  { color: #1f6047; }  /* Sector        */
.z-dep-head > span:nth-child(5)  { color: #2a4d8f; }  /* Departure     */
.z-dep-head > span:nth-child(6)  { color: #12655f; }  /* Duration      */
.z-dep-head > span:nth-child(7)  { color: #7a4f07; }  /* Seat Status   */
.z-dep-head > span:nth-child(8)  { color: #7a5c12; }  /* Starting From */
.z-dep-head > span:nth-child(9)  { color: #54407e; }  /* PDF           */
.z-dep-head > span:nth-child(10) { color: #1b6349; }  /* Book Now      */
.z-dep-head > span:nth-child(11) { color: #8f3f0c; }  /* Enquiry       */
.z-dep-head > span svg { opacity: 1; }

/* The mobile drawer still heads itself with the wordmark alone — it is a
   narrow panel, and the square lockup would eat the top of it. This is the
   only remaining use of .z-brand-word, kept for that one place. */
.z-brand-word {
    height: 19px;
    width: auto;
    display: block;
}

/* ==========================================================================
   PAGE HEAD — homepage variant
   ==========================================================================
   The listing pages use this band as a section label, so they keep it tight.
   The homepage uses it as the top of the site, so it gets more air above and
   below, a larger heading, and the second half of that heading in gold.

   Scoped with .is-home so tours / departures / visas are untouched.
   -------------------------------------------------------------------------- */
.z-pagehead.is-home { padding: 92px 0 104px; }

/* Centred, and the heading on one line. The 20ch measure and the block
   accent below were what split it across two. */
.z-pagehead.is-home .z-shell { text-align: center; }

.z-pagehead.is-home h1 {
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.2;
    margin: 0 0 18px;
}

/* The turn of the sentence, in gold. Measures 8.90:1 on this ground — the
   deeper --z-gold would sit at 5.68:1, which is fine for a heading but reads
   as muddy against the cream half beside it. */
/* Inline, so it stays part of the same line rather than starting a new one. */
.z-pagehead.is-home h1 .z-accent {
    display: inline;
    color: var(--z-gold-light);
}

.z-pagehead.is-home p {
    font-size: 16.5px;
    line-height: 1.65;
    max-width: 62ch;
    margin-inline: auto;
    /* Warmer and brighter than the band's default body colour, so the lede
       reads as part of the headline rather than as small print under it. */
    color: rgba(251, 245, 230, .88);
}

/* On a phone the band should not push the search form off the first screen. */
@media (max-width: 700px) {
    .z-pagehead.is-home { padding: 56px 0 64px; }
}

/* ==========================================================================
   NAV ICONS — a tinted plate behind each mark
   ==========================================================================
   The icons were bare 1.6-weight strokes on cream: correct, but thin, and at
   20px they read as faint outlines rather than as part of the design. Each
   now sits on a soft plate of its own colour, which is what gives the row its
   weight without making the icons themselves heavier or larger.

   Applied to the svg directly — there is no wrapper element, and padding plus
   a background on an <svg> box is well supported.
   -------------------------------------------------------------------------- */
.z-nav a.z-nav-link svg,
.z-header-link > svg {
    box-sizing: content-box;
    padding: 7px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--z-navc, #c19a3f) 13%, transparent);
    /* A touch more weight than the 1.6 the icon set ships, so the strokes
       hold up against the tint behind them. */
    stroke-width: 1.75;
    transition: background-color .18s ease, transform .18s ease;
}

/* The plate deepens on hover and for the current page, so the row has a
   visible state rather than only a colour change in the label. */
.z-nav a.z-nav-link:hover svg,
.z-header-link:hover > svg {
    background: color-mix(in srgb, var(--z-navc, #c19a3f) 24%, transparent);
    transform: translateY(-1px);
}
.z-nav a.z-nav-link[aria-current="page"] svg,
.z-header-link[aria-current="page"] > svg {
    background: color-mix(in srgb, var(--z-navc, #c19a3f) 26%, transparent);
}

/* The label sits closer now that the mark has a body of its own. */
.z-nav a.z-nav-link { gap: 4px; padding: 5px 10px; }

/* The plate already carries the hover; the block tint behind the whole link
   on top of it was two backgrounds doing one job. */
.z-nav a.z-nav-link:hover { background: transparent; }

/* Dates open on a group flight, shown on the card so the answer does not need
   another page load. */
.z-flight-dates {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.z-flight-dates li {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--z-green);
    background: var(--z-cream-deep);
}

/* ==========================================================================
   VISA CARD — the three figures and the footer
   ==========================================================================
   Following the Oxford visa card: what the visa is, how long it lasts and
   what it costs, set out as a labelled row rather than buried in a meta list.
   Same shape as the review card's stats, so the two read as one system.
   -------------------------------------------------------------------------- */
.z-cardfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 2px 0 12px;
    padding: 11px 0;
    border-top: 1px solid var(--z-line);
    border-bottom: 1px solid var(--z-line);
}
.z-cardfacts > div { text-align: center; min-width: 0; }
.z-cardfacts .v {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--z-green);
    min-width: 0;
}
.z-cardfacts .v svg { color: var(--z-gold-deep); flex: 0 0 auto; }
.z-cardfacts .v b {
    font-size: 12.5px;
    font-weight: 600;
    /* One line, clipped — a long visa type must not push the three cells out
       of step with the card beside it. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.z-cardfacts small {
    display: block;
    margin-top: 3px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-ink-3);
}

/* The estimated issue date, which is what most people are actually asking. */
.z-cardnote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--z-ink-2);
}
.z-cardnote svg { color: var(--z-gold-deep); flex: none; }
.z-cardnote b { color: var(--z-green); font-weight: 600; }

/* Apply takes the room; WhatsApp is the square beside it. */
.z-cardacts { display: flex; align-items: center; gap: 8px; }
.z-cardacts .z-btn { flex: 1 1 auto; text-align: center; }

/* ==========================================================================
   VISA CARD — full photograph, no arch
   ==========================================================================
   The shared .z-card crops its image into the keel-arch mask, inset 12px and
   in a tall 4/4.4 portrait. The visa card follows the Oxford layout instead:
   the whole photograph, edge to edge across the top of the card.

   Three things have to go together, or the result is an arch with its corners
   showing: the mask on the image, the mask on the gold plate behind it
   (.z-card-media::before, which is arch-shaped in its own right), and the
   padding that insets both from the card edge.
   -------------------------------------------------------------------------- */
.z-card.is-flat .z-card-media {
    padding: 0;
    overflow: hidden;
    /* The card clips its own corners, so the photo meets them cleanly. */
    border-radius: var(--z-radius) var(--z-radius) 0 0;
}
.z-card.is-flat .z-card-media::before { display: none; }

.z-card.is-flat .z-card-arch {
    /* Landscape, as the reference sets it — a portrait crop of a skyline
       throws away the half of the picture that identifies the place. */
    aspect-ratio: 16 / 10;
    border-radius: 0;
    -webkit-mask-image: none;
            mask-image: none;
}

/* ==========================================================================
   PAGER
   ==========================================================================
   Shared by every Zaereen listing. Numbers, with the current one filled, and
   a chevron at each end that greys out rather than disappearing — a control
   that vanishes at the first and last page makes the row jump as you move
   through it.
   -------------------------------------------------------------------------- */
.z-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--z-line);
}

.z-pager-n,
.z-pager-step {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--z-line-gold);
    background: var(--z-surface);
    color: var(--z-ink);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.z-pager-n:hover,
.z-pager-step:hover { border-color: var(--z-gold); color: var(--z-green); background: var(--z-cream); }

.z-pager-n.is-current {
    color: #f7f0e2;
    background: var(--z-green);
    border-color: var(--z-green);
    font-weight: 600;
}

/* Ends of the run: present, but plainly not clickable. */
.z-pager-step.is-off { opacity: .32; }
.z-pager-step.is-off:hover { border-color: var(--z-line-gold); color: var(--z-ink); background: var(--z-surface); }

.z-pager-prev { transform: rotate(90deg); }
.z-pager-next { transform: rotate(-90deg); }

.z-pager-gap { padding: 0 2px; color: var(--z-ink-3); }

.z-pager-n:focus-visible,
.z-pager-step:focus-visible { outline: 2px solid var(--z-gold); outline-offset: 2px; }

/* --- visa card: centred name, lifted off the page -------------------------
   The country is the card's subject, so it sits centred over the three
   figures below it rather than hanging off the left edge.

   The ground is --z-surface (#fffdf7), NOT --z-cream: body.zaereen paints
   --z-cream, so a cream card was the same colour as the page behind it and
   the edge disappeared.

   Two light surfaces separate by LIGHTNESS, not hue — measured against the
   page, near-white steps furthest (1.16:1) while the pale sage tints that
   look more 'contrasting' actually measure worse (1.05 and 1.01), because
   they sit at almost the same luminance. The gold hairline and a deeper
   shadow do the rest of the work the colour cannot. */
.z-card.is-flat {
    background: var(--z-surface);
    border-color: var(--z-line-gold);
    box-shadow: 0 6px 18px rgba(18, 51, 42, .09);
}

.z-card.is-flat .z-card-title {
    text-align: center;
    /* The rule under the title spans the card, so centring the text without
       this leaves it looking off-centre against a full-width line. */
    width: 100%;
}

/* The facts row sits on the card ground, so its divider lines need to read
   against cream rather than against white. */
.z-card.is-flat .z-cardfacts {
    border-top-color: var(--z-line-gold);
    border-bottom-color: var(--z-line-gold);
}

/* --- visa card: the type badge opposite the flag --------------------------
   The flag sits top-right, so the badge takes the top-left corner rather than
   the bottom-centre the shared card uses. The two then bracket the top of the
   photograph instead of competing for the same edge.

   `bottom` and `transform` are reset explicitly: the shared rule centres the
   badge with translateX(-50%), and leaving that in place would pull the badge
   half its own width off the left edge of the card.
   -------------------------------------------------------------------------- */
.z-card.is-flat .z-card-media .z-badge {
    top: 12px;
    left: 12px;
    bottom: auto;
    transform: none;
    /* Smaller than the shared badge: it is a label on a photograph here, not
       the card's headline, and the country name below carries that job. */
    font-size: 9.5px;
    letter-spacing: .06em;
    padding: 4px 9px;
    max-width: calc(100% - 24px - 46px);   /* clear of the flag opposite */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ==========================================================================
   NAV MEGA MENU — the Holidays destinations
   ==========================================================================
   Opened by hover AND :focus-within, so it works from the keyboard with no
   script. The panel is always in the DOM; only its visibility changes, which
   is what keeps every destination reachable to a crawler and a screen reader.

   visibility is deliberately NOT transitioned. It is a discrete property, so
   Chrome flips it at the midpoint of the duration and the panel stays hidden
   for the first half of every open — the bug that made the earlier submenu
   feel unresponsive. opacity does the fade.
   -------------------------------------------------------------------------- */
/* static, NOT relative: the panel is positioned against .z-header-in (the
   shell) so it spans the page width. Anchored to the nav item instead, a
   1090px panel centred on Holidays ran 130px off the left edge of a
   1237px viewport. */
.z-nav > li.has-menu { position: static; }
.z-header-in { position: relative; }

.z-mega {
    position: absolute;
    top: 100%;
    /* Anchored to the shell's left edge and sized to its content, rather
       than stretched across the full width — five columns in a 1400px panel
       were being given ~270px each and the space showed. max-width keeps it
       inside the shell however many regions the map grows to. */
    left: 0;
    right: auto;
    width: max-content;
    max-width: 100%;
    transform: translateY(4px);
    z-index: 60;
    padding: 20px 24px 16px;
    /* A 1040px panel hung off a nav item near the right edge would run off
       screen; the clamp keeps it inside the shell either way. */
    background: var(--z-surface);
    border: 1px solid var(--z-line-gold);
    border-radius: var(--z-radius);
    box-shadow: 0 18px 44px rgba(18, 51, 42, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.z-nav > li.has-menu:hover > .z-mega,
.z-nav > li.has-menu:focus-within > .z-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
/* Bridges the gap between the trigger and the panel, so the hover is not lost
   on the way down. */
.z-nav > li.has-menu > .z-mega::before {
    content: "";
    position: absolute;
    inset: -10px 0 auto 0;
    height: 10px;
}

.z-mega-cols {
    display: grid;
    /* Each column as wide as it needs and no wider. 1fr tracks split the
       panel evenly, which padded every column out to the width of the
       longest destination name in the menu. */
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: start;
    /* Columns are max-content, so this gap is the only space between them. */
    gap: 0 32px;
    /* Wide enough for five regions, capped so it cannot run past the shell on
       a laptop; the grid rewraps below that. */
}
.z-mega-col h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-navc, var(--z-gold-deep));
}
.z-mega-col ul { list-style: none; margin: 0 0 14px; padding: 0; }
.z-mega-col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--z-ink);
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease;
}
/* icon, then the name taking the room, then the count pinned right. */
/* Each destination sets its own --z-navc, so the mark carries that colour
   rather than the menu's. Full strength: these are the point of the row, not
   a watermark behind it. */
.z-mega-col a svg { flex: 0 0 auto; color: var(--z-navc, var(--z-gold-deep)); }
.z-mega-col a em {
    flex: 1 1 auto;
    min-width: 0;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.z-mega-col a span {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--z-ink-3);
    font-variant-numeric: tabular-nums;
}
.z-mega-col a:hover svg { opacity: 1; }

/* Drawer destinations carry the same mark. */
.z-drawer a.is-sub svg { opacity: .8; }
.z-mega-col a:hover {
    color: var(--z-navc, var(--z-gold-deep));
    background: color-mix(in srgb, var(--z-navc, #c19a3f) 10%, transparent);
}
.z-mega-col a:hover span { color: inherit; }

.z-mega-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--z-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--z-green);
}
.z-mega-all:hover { color: var(--z-gold-deep); }

/* Drawer: destinations as indented plain links. */
.z-drawer a.is-sub { padding-left: 34px; font-size: 13.5px; }

@media (max-width: 1100px) {
    .z-mega { display: none; }
}

/* --- destination tiles: plain photograph -----------------------------------
   The arch mask and the gold arch plate behind it both go, and the crop turns
   from 3/4 portrait to landscape — the same treatment the cards carry, so the
   homepage and the listings read as one site.

   Both masks have to go together: removing only the tile's would leave the
   plate's arch showing behind a square photograph.
   -------------------------------------------------------------------------- */
.z-dest-frame.is-flat {
    -webkit-mask-image: none;
            mask-image: none;
    padding: 0;
    background: none;
    border-radius: var(--z-radius);
    overflow: hidden;
    border: 1px solid var(--z-line);
    box-shadow: 0 6px 18px rgba(18, 51, 42, .09);
}
.z-dest-frame.is-flat::before,
.z-dest-frame.is-flat::after { display: none; }

.z-dest.is-flat {
    aspect-ratio: 16 / 11;
    border-radius: 0;
    -webkit-mask-image: none;
            mask-image: none;
}

/* --- hotel cards: the brand green ----------------------------------------
   Neither near-white nor the chocolate sat right against the cream page.
   This is the ground the header plate, the page-head band and the footer
   already use, so every listing card reads as part of the site rather than a
   fourth surface colour — and it is a real contrast: 11.65:1 against the page,
   where white managed 1.16 and the chocolate 1.25.

   A dark ground inverts every text colour on the card, so each is restated
   here rather than inherited: title cream 12.60:1, values 11.23:1, the
   small uppercase labels in gold-light at 8.40:1. All well clear of AA.
   -------------------------------------------------------------------------- */
.z-card.is-deep {
    background: var(--z-green);
    background-image: var(--z-pattern-dark);
    background-size: 26px 26px;
    border-color: var(--z-line-gold);
}
.z-card.is-deep .z-card-title { color: #fbf5e6; }
.z-card.is-deep .z-card-route { color: rgba(240, 232, 214, .78); }

.z-card.is-deep .z-cardfacts {
    border-top-color: rgba(227, 200, 134, .28);
    border-bottom-color: rgba(227, 200, 134, .28);
}
.z-card.is-deep .z-cardfacts .v { color: #f0e8d6; }
.z-card.is-deep .z-cardfacts .v svg { color: var(--z-gold-light); }
.z-card.is-deep .z-cardfacts small { color: var(--z-gold-light); }

.z-card.is-deep .z-cardnote { color: rgba(240, 232, 214, .82); }
.z-card.is-deep .z-cardnote svg { color: var(--z-gold-light); }
.z-card.is-deep .z-cardnote b { color: #fbf5e6; }

/* z-meta and z-price belong to the tours and flights cards, which the light
   ground had until now. Same inversion as the facts strip above. */
.z-card.is-deep .z-meta li { color: rgba(240, 232, 214, .86); }
.z-card.is-deep .z-meta svg { color: var(--z-gold-light); }
.z-card.is-deep .z-price small { color: var(--z-gold-light); }
.z-card.is-deep .z-price b { color: #fbf5e6; }
.z-card.is-deep .z-price span { color: rgba(240, 232, 214, .72); }

/* The outline button is drawn for a light ground; on green it needs the
   gold edge and light text or it disappears. */
.z-card.is-deep .z-btn-outline {
    color: #f0e8d6;
    border-color: rgba(227, 200, 134, .55);
}

/* --- orange button ---------------------------------------------------------
   Oxford's own #ff9800, the orange its cards already use.

   DARK text on it, not white. White on orange is the usual accessibility trap
   here: it measures 2.16:1 on this shade, and no orange dark enough to carry
   white (which needs 4.5) still reads as orange. Dark ink gives 7.75:1.
   -------------------------------------------------------------------------- */
.z-btn-orange {
    background: #ff9800;
    border: 1px solid #e0850a;
    color: #17201a;
    font-weight: 600;
}
.z-btn-orange:hover {
    background: #ffa726;
    border-color: #ff9800;
    color: #17201a;
}
.z-btn-orange svg { color: currentColor; }

/* --- .z-story as a product card --------------------------------------------
   The holiday listing uses the review card from /zaereen/ rather than a
   lookalike: same photo slot with its gold edge, same centred gold title over
   a hairline, same stats strip, same beige footer with the gold button.

   Only three things differ, and they are the three a package has that a review
   does not. `flex: 0 0 300px` on .z-story is for the horizontal rail; inside
   .z-grid-3 it is inert, because grid items are not flex items.
   -------------------------------------------------------------------------- */

/* A package has three facts, not a review's four. Padding the strip out to
   four with an invented column would be worse than a narrower one. */
.z-story-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Where the footer carries stars on a review, it carries the price here.
   Not --z-gold-deep: that is tuned for the card ground and drops to 4.01
   on the darker footer beige. This shade holds 5.02 there. */
.z-story-foot-price b {
    display: block;
    font-family: var(--z-display);
    font-size: 17px;
    font-weight: 700;
    color: #7d6015;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* Both were --z-ink-3, which measures 3.06 on the footer beige — under AA
   for an 8.5px label. --z-green takes them to 12.75. */
.z-story-foot-price small { color: var(--z-green); }
.z-story-foot-price .sub { font-size: 13px; color: var(--z-green); font-weight: 600; }

/* The duration plate, top-right, where a review shows its stars. */
.z-story-rate.is-text {
    font-family: var(--z-body, inherit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    padding: 6px 9px;
    color: var(--z-gold-light);
}

/* --- the detail line on a product card --------------------------------------
   "Cities : Munnar | Thekkady" on a holiday, "Area :" on a hotel, "Next
   departure :" on a tour. The bar is a CSS separator rather than part of the
   text so it can be dimmed — the values are the content, the bar is
   punctuation, and at the same weight the line reads as a wall of pipes.
   -------------------------------------------------------------------------- */
.z-story-line {
    margin: 0 0 13px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--z-ink-2);
    /* Two lines, reserved: a two-city tour and a six-city tour must leave
       their footers on the same line across a row. */
    min-height: calc(2 * 1.5em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.z-story-line .lbl {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--z-gold-deep);
}
/* :not(.lbl) on the LEFT side: the first city follows the label and must not
   be given a leading bar. Only a city that follows another city gets one. */
.z-story-line span:not(.lbl) + span::before {
    content: "| ";
    /* Not --z-line-strong: that is a border colour and lands at 1.89 on the
       card, so the bars vanished and the line read as loose words. 3.08
       keeps them legible while still subordinate to the names at 7.65. */
    color: #b08d2c;
}

/* --- product card title -----------------------------------------------------
   Bigger and dark, where a review card keeps the small gold name. Scoped to
   .is-product for exactly that reason: on /zaereen/ the traveller's name is
   meant to read as a caption, but a package name is the card's headline and
   people scan a grid of them.

   min-height stays in em, so reserving two lines follows the new size.
   -------------------------------------------------------------------------- */
.z-story.is-product .z-story-body h3 {
    /* Not the display serif: Cormorant Garamond is loaded at 400-700 and 700
       is its heaviest cut, so "bolder" there can only be a synthesised smear.
       Jost 700 is a real weight, and a package name in a scanned grid is UI
       rather than editorial. */
    font-family: var(--z-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    /* Dark brown rather than the brand green: 11.5:1 on the card. */
    color: #4a3418;
}

/* A tour card carries two actions where the others carry one: the tour page
   and the departure list are different destinations, and dropping either
   would cost a route the old card had. */
.z-story-foot-acts { display: flex; align-items: center; gap: 6px; flex: none; }

/* A review's four stats are short by nature — a number, a rating, a place. A
   product's are not: "Azerbaijan Baku Tours", "International", "Tourist Visa".
   The shared rule ellipsises them, which hides the value with no sign that
   anything was cut, so on a product card they wrap instead. */
.z-story.is-product .z-story-stats .v {
    align-items: flex-start;
}
.z-story.is-product .z-story-stats .v svg { margin-top: 3px; }
.z-story.is-product .z-story-stats .v b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}