/*
 * ZAEREEN — crawlable hotel destination pages
 * (/zaereen/hotels/<country>-hotels/<city>-hotels/<hotel>)
 *
 * Loaded AFTER zaereen.css, so these rules win where they overlap. It only
 * adds what the theme has no component for: the destination link lists, the
 * hotel detail layout and the pager. Cards, buttons, pageheads, crumbs and
 * the grid all come from zaereen.css — this sheet must never restyle them,
 * or the TBO pages would drift away from the curated hotel listing.
 *
 * Zaereen is ONE LIGHT THEME (the header declares color-scheme: light), so
 * everything here is written for the cream surface. No dark-mode variants.
 */

.zh-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.zh-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 14px;
    background: var(--z-card, #fffdf7);
    text-decoration: none;
    color: var(--z-ink, #23301f);
    font-family: var(--z-body, inherit);
    font-size: .95rem;
    font-weight: 600;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.zh-links a:hover {
    transform: translateY(-2px);
    border-color: var(--z-gold, #b9975b);
    box-shadow: 0 12px 26px rgba(35, 48, 31, .10);
}
.zh-links b {
    font-size: .8rem;
    font-weight: 700;
    color: var(--z-gold, #b9975b);
    background: rgba(185, 151, 91, .12);
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap;
}

/* Star filter chips ------------------------------------------------- */
/* ONE CHIP PER LINE, and each one carries its own count, so the widths are
   never equal and a wrapping row would read as a broken grid rather than a
   scale. Stacked, they line up on the left and read top to bottom from the
   highest rating down. */
.zh-stars-pick {
    display: flex;
    flex-direction: column;
    /* stretch, not flex-start: shrink-wrapped pills came out 93px to 103px
       depending on how many digits the count had, so five of them stacked
       made a ragged right edge and put every figure in a different place.
       Full width, label left and count right, they line up with each other
       and with the amenity rows in the next group down. */
    align-items: stretch;
    gap: 6px;
}
.zh-star-chip { cursor: pointer; }
/* The checkbox itself is hidden but still focusable and still submitted --
   the visible chip is its label, so keyboard and screen readers keep
   working. display:none would take it out of the form entirely. */
.zh-star-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.zh-star-chip span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Same shared-rule reset as the amenity rows below: a chip is a <label>
       in a .z-field, so it arrives uppercase at .13em tracking. */
    letter-spacing: normal;
    text-transform: none;
    padding: 7px 13px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: var(--z-ink, #23301f);
    transition: all .15s ease;
}
.zh-star-chip.is-on span,
.zh-star-chip input:checked + span {
    background: var(--z-green, #12332a);
    border-color: var(--z-green, #12332a);
    color: #fff;
}
/* The count is context, not the label: lighter and un-italicised, so "5
   Star" still leads and the figure sits behind it. */
.zh-star-chip em {
    font-style: normal;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--z-ink-3, #7f8a7e);
}
.zh-star-chip.is-on span em,
.zh-star-chip input:checked + span em {
    color: rgba(255, 255, 255, .74);
}
.zh-star-chip input:focus-visible + span {
    outline: 2px solid var(--z-gold, #b9975b);
    outline-offset: 2px;
}

/* Filter panel: heading, groups, count badge ------------------------- */
/* .z-filters and .z-filters h2 (the sticky sidebar shell and its section
   label) already exist in zaereen.css for the curated listing's own
   filter form - this sheet only adds what that form never needed: a
   number badge beside "Filters" once something is actually selected, and a
   rule between one filter group and the next so five stacked .z-field
   blocks read as separate questions rather than one long form. */
.z-filters h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zh-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--z-green, #12332a);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.zh-filter-group {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--z-line-soft, #ece4d2);
}
/* Type-ahead panel under the two text filters. Positioned against a wrapper
   rather than the .z-field, so the label above it is never overlapped. */
.zh-suggest-wrap { position: relative; }
.zh-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 232px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 10px;
    background: var(--z-surface, #fffdf7);
    box-shadow: 0 16px 34px -14px rgba(11, 34, 28, .38);
    scrollbar-width: thin;
}
.zh-suggest[hidden] { display: none !important; }
.zh-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-family: var(--z-body, inherit);
    font-size: .84rem;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: var(--z-ink-2, #4b554a);
    cursor: pointer;
}
/* The mark keeps its place against the first line of a name that wraps. */
.zh-suggest-item svg {
    flex: none;
    margin-top: 2px;
    color: var(--z-gold-deep, #8a6d34);
}
.zh-suggest-item > span { min-width: 0; }
/* The part of the row that matched what was typed. */
.zh-suggest-item b { font-weight: 700; color: var(--z-green, #12332a); }
.zh-suggest-item:hover,
.zh-suggest-item.is-active {
    background: rgba(185, 151, 91, .16);
    color: var(--z-ink, #23301f);
}

/* Price range. Two plain number boxes rather than a slider: a slider needs
   a known min and max, and this page only learns prices for the cards on
   screen, a moment after paint. */
.zh-price-pick {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zh-price-pick input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 8px;
    background: #fff;
    font-family: var(--z-body, inherit);
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    color: var(--z-ink, #23301f);
}
.zh-price-pick input:focus {
    outline: none;
    border-color: var(--z-gold, #b9975b);
    box-shadow: 0 0 0 3px rgba(185, 151, 91, .14);
}
.zh-price-dash { flex: none; color: var(--z-ink-3, #7f8a7e); }
.zh-price-note {
    margin: 8px 0 0;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--z-ink-3, #7f8a7e);
}

/* The price range hides cards rather than re-querying. .z-story sets its
   own display, which outweighs the browser's own [hidden] rule, so the
   attribute needs saying again here or a "hidden" card stays on screen. */
.z-story[hidden] { display: none !important; }

/* Scoped to this form by id: .z-filters-actions is shared with every other
   Zaereen listing rail, and only this one has a scrolling amenity list
   above it that needs a visible edge to stop against. */
#zFilters .z-filters-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--z-line, #e4ddcc);
}
.zh-filter-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.zh-filter-group > label {
    display: block;
    margin-bottom: 9px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--z-ink, #23301f);
}
.z-filters input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 8px;
    font-size: .88rem;
    font-family: var(--z-body, inherit);
    color: var(--z-ink, #23301f);
    background: #fff;
}
.z-filters input[type="text"]:focus {
    outline: none;
    border-color: var(--z-gold, #b9975b);
    box-shadow: 0 0 0 3px rgba(185, 151, 91, .14);
}

/* Amenities checklist - built from THIS city's own top facilities
   (TboHotelRepository::getCityFacilities()), each with the count the
   reference OTA sidebars all show, so a visitor can tell "free wifi" from
   "airport shuttle" (a handful of hotels) before ticking either. Plain
   checkboxes, not the star row's pill chips: a facility name runs to two
   or three words and a pill wide enough for "Free valet parking" stops
   reading as a compact filter. */
.zh-fac-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 300px;
    overflow-y: auto;
    /* Room for the thumb so it never sits on top of a count. */
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--z-line, #e4ddcc) transparent;
}
.zh-fac-list::-webkit-scrollbar { width: 6px; }
.zh-fac-list::-webkit-scrollbar-track { background: transparent; }
.zh-fac-list::-webkit-scrollbar-thumb {
    background: var(--z-line, #e4ddcc);
    border-radius: 999px;
}
.z-filters .zh-fac-item {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    /* A TICK ROW IS A <label> INSIDE A .z-field, so zaereen.css's shared
       `.z-field label` was styling it as the small uppercase cap that sits
       ABOVE a control: 11px, .13em tracking, capitals. At that tracking
       "Smoke-free property" does not fit the rail and was being cut to
       "SMOKE-FREE PR...", which is how a list of readable amenities turned
       into a column of truncated shouting. Undone here rather than by
       narrowing the shared rule, which every other Zaereen form uses - the
       same fix, for the same reason, as .z-fr-filters .z-fx-check. */
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    /* Pulled out to the panel's edges so the hover band spans the rail
       rather than starting at the tick. */
    padding: 6px;
    margin: 0 -6px;
    border-radius: 7px;
    transition: background-color .12s ease;
}
.zh-fac-item:hover { background: rgba(185, 151, 91, .1); }
.zh-fac-item input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.zh-fac-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    transition: all .12s ease;
}
.zh-fac-item input:checked + .zh-fac-box {
    background: var(--z-green, #12332a);
    border-color: var(--z-green, #12332a);
    color: #fff;
}
.zh-fac-item input:focus-visible + .zh-fac-box {
    outline: 2px solid var(--z-gold, #b9975b);
    outline-offset: 2px;
}
/* Wraps to a second line rather than truncating. The rail is 268px and some
   of TBO's facility names are four words; an amenity a visitor cannot read
   is an amenity they will not tick. */
.zh-fac-name {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    font-size: .85rem;
    /* Set here as well as on the row: text-transform and letter-spacing are
       inherited, so the name picks them up from whatever won on the label. */
    letter-spacing: normal;
    text-transform: none;
    color: var(--z-ink-2, #4b554a);
}
.zh-fac-item input:checked ~ .zh-fac-name {
    font-weight: 700;
    color: var(--z-green, #12332a);
}
.zh-fac-n {
    flex: none;
    align-self: flex-start;
    padding-top: 1px;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: var(--z-ink-3, #7f8a7e);
}
/* The tick keeps its place against the FIRST line of a name that wraps. */
.zh-fac-item .zh-fac-box { align-self: flex-start; margin-top: 1px; }

/* No rate for the default two-night check the page quietly runs after paint
   (see the script at the foot of seo_city.php).

   THE CLASS CARRIES NO APPEARANCE AT ALL. It used to dim the card to .62,
   which read across a grid as a grey patch over some cards and not others -
   and since the check runs after paint, the patch appeared a moment after
   the page had already settled, which looks like a fault rather than a
   statement. It is only a sorting handle now: the script sets style.order
   from it so priced cards lead, and the card itself looks exactly like
   every other card, hover included.

   "No rooms for THESE two default nights" was never worth marking anyway -
   it is not "never bookable", and the card still opens the hotel's own page
   where any other date is one click away. */

/* Hotel detail ------------------------------------------------------ */
.zh-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}
.zh-shot {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--z-card, #fffdf7);
    border: 1px solid var(--z-line, #e4ddcc);
}
.zh-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.zh-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.zh-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--z-line, #e4ddcc);
    cursor: pointer;
    background: var(--z-card, #fffdf7);
    transition: border-color .15s ease;
}
.zh-thumbs img:hover { border-color: var(--z-gold, #b9975b); }

.zh-aside {
    background: var(--z-card, #fffdf7);
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 18px;
    padding: 22px;
    align-self: start;
    position: sticky;
    top: 96px;
}
.zh-aside h2 {
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--z-green, #12332a);
}
.zh-aside-note {
    font-size: .86rem;
    line-height: 1.65;
    color: var(--z-muted, #6d7566);
    margin: 0 0 16px;
}
.zh-aside .z-btn { width: 100%; text-align: center; }
.zh-aside-back { margin-top: 10px; }

/* Fact lists -------------------------------------------------------- */
.zh-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.zh-facts li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--z-line, #e4ddcc);
    font-size: .88rem;
}
.zh-facts li:last-child { border-bottom: 0; }
.zh-facts span { color: var(--z-muted, #6d7566); }
.zh-facts b { color: var(--z-ink, #23301f); text-align: right; font-weight: 600; }
.zh-facts.is-wide li { display: grid; grid-template-columns: 140px 1fr; }
.zh-facts.is-wide b { text-align: left; }

/* Panels ------------------------------------------------------------ */
.zh-panel {
    background: var(--z-card, #fffdf7);
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 18px;
    padding: 24px 26px;
    margin-bottom: 20px;
}
.zh-panel h2 {
    font-size: 1.15rem;
    margin: 0 0 14px;
    color: var(--z-green, #12332a);
}
.zh-panel h2 small { color: var(--z-muted, #6d7566); font-size: .8rem; font-weight: 500; }
.zh-prose { font-size: .93rem; line-height: 1.85; color: var(--z-ink, #23301f); }
.zh-prose p { margin: 0 0 12px; }
.zh-more { font-size: .84rem; color: var(--z-muted, #6d7566); margin: 14px 0 0; }

.zh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zh-chip {
    padding: 7px 13px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    color: var(--z-ink, #23301f);
}

/* Pager -------------------------------------------------------------- */
.zh-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.zh-pager a, .zh-pager span {
    padding: 9px 15px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: var(--z-ink, #23301f);
    font-size: .87rem;
}
.zh-pager a:hover { border-color: var(--z-gold, #b9975b); }
.zh-pager .is-current {
    background: var(--z-green, #12332a);
    border-color: var(--z-green, #12332a);
    color: #fff;
    font-weight: 700;
}

.zh-empty {
    text-align: center;
    padding: 56px 20px;
    background: var(--z-card, #fffdf7);
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 18px;
    color: var(--z-muted, #6d7566);
}
.zh-empty h1, .zh-empty h2 { color: var(--z-green, #12332a); margin-bottom: 10px; font-size: 1.35rem; }

/* The card photo keeps its box even while an image is retried or has
   failed, so cards in a row stay aligned. */
.z-story-pic img { background: var(--z-card, #fffdf7); }

@media (max-width: 900px) {
    .zh-detail-top { grid-template-columns: 1fr; }
    .zh-aside { position: static; }
}

/* Rate row in the Plan Your Stay panel.
   detail.php fills this slot with a computed estimate from the hotel row's
   per_night_adult_price; a TBO hotel has no such row, so this states the
   fact instead of leaving a gap where a number belongs. */
.zh-rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    margin: 4px 0 14px;
    border: 1px dashed var(--z-line, #e4ddcc);
    border-radius: 12px;
    background: rgba(185, 151, 91, .07);
}
.zh-rate span {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-muted, #6d7566);
    font-weight: 700;
}
.zh-rate b {
    font-family: var(--z-display, inherit);
    font-size: 1.15rem;
    color: var(--z-green, #12332a);
}

/* Region groups on the destination hub ------------------------------- */
/* One column per region, each sized to its own content.
   align-items:start is what makes that true -- grid items stretch to the
   tallest row by default, which would give Asia's 12 countries the same
   height as Oceania's 2 and leave a column of empty card. */
/* MULTI-COLUMN, not grid. Grid lays items out in ROWS, so a row holding
   New South Wales (292 destinations) alongside Kangaroo Island (1) is as
   tall as New South Wales -- leaving a screen-and-a-half of empty cream
   under the short cards. align-items:start fixed the stretching but not
   the row height, because the row still reserves that space.

   Multicol has no rows: sections flow down one column and continue in the
   next, so a one-line card is followed immediately by the next section.
   column-width lets the count follow the viewport; the 4 caps it so the
   columns stay readable on a wide monitor. */
.zh-regiongrid {
    columns: 290px 4;
    column-gap: 18px;
}
.zh-region {
    /* Keep a state and its cities together in one column. The
       inline-block + width pair is what makes break-inside actually hold;
       on its own it is ignored by some engines. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;

    /* Multicol has no row gap, so the margin provides it. */
    margin: 0 0 18px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 16px;
    background: var(--z-card, #fffdf7);
    padding: 14px 14px 10px;
}
.zh-region-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 1.02rem;
    color: var(--z-green, #12332a);
    margin: 0 0 8px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--z-line, #e4ddcc);
}
.zh-region-head small {
    font-size: .72rem;
    font-weight: 600;
    color: var(--z-muted, #6d7566);
    font-family: var(--z-body, inherit);
}

/* Compact country rows inside a region column.
   The default .zh-links is a grid of bordered 260px cards, which cannot
   also be a dense list -- so this overrides it to a plain single column of
   text rows. Every border, shadow and lift is removed: at this density the
   card treatment is what made the old layout so tall, and a row that lifts
   on hover in a list of 40 is noise rather than feedback. */
.zh-links.is-compact {
    grid-template-columns: 1fr;
    gap: 0;
}
.zh-links.is-compact a {
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: .88rem;
    font-weight: 600;
    gap: 10px;
    transition: background-color .15s ease;
}
.zh-links.is-compact a:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: rgba(185, 151, 91, .12);
}
.zh-links.is-compact li + li {
    border-top: 1px solid rgba(228, 221, 204, .55);
}
/* Smaller than the 30px flag on the country cards: at this row height the
   full-size one is taller than the name beside it. */
.zh-links.is-compact .hs-flag {
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
}
.zh-links.is-compact b {
    font-size: .72rem;
    padding: 2px 8px;
}

/* Country row with flag on the destination hub ----------------------- */
.zh-country {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;   /* lets a long country name ellipsis instead of pushing the count out */
}
.zh-country em {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    /* text-overflow: ellipsis does nothing without this - the missing
       declaration meant a long name WRAPPED instead of truncating, so that
       one row grew taller than its neighbours and the count badges beside
       every row stopped lining up down the column. */
    white-space: nowrap;
}
/* "More hotels by destination" teaser (zaereen/hotels/index.php) --------
   Was three loose inline style="" attributes on the heading, the
   sub-paragraph and the CTA - each one-off, none reusable, and the CTA's
   own <p style="margin-top:16px"> put an arbitrary gap above a button with
   nothing tying its spacing to the grid above it. Real classes instead, so
   this block's spacing comes from one place and matches the rest of the
   page's rhythm rather than a number picked by eye. */
.zh-more-head {
    margin: 0 0 18px;
}
.zh-more-head h2 {
    margin: 0 0 6px;
}
.zh-more-head p {
    margin: 0;
    color: var(--z-muted, #6d7566);
    font-size: .92rem;
}
.zh-more-cta {
    margin-top: 20px;
}

/* Fixed box, so a row whose flag fails to load still lines up with its
   neighbours instead of the name jumping left. */
.hs-flag {
    width: 30px;
    height: 20px;
    flex: 0 0 30px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(35, 48, 31, .25);
    display: block;
}

/* City thumbnail on the country page --------------------------------- */
/* Wider than the flag box it sits in the place of, because this is a
   photo rather than a 3:2 flag. Fixed size either way so rows align. */
.zh-citypic {
    width: 46px;
    height: 34px;
    flex: 0 0 46px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--z-line, #e4ddcc);
}
/* Placeholder for a city whose hotels have no photo: keeps the name in
   the same column as every other row. */
.zh-citypic.is-blank { background: var(--z-line, #e4ddcc); opacity: .5; }

/* Numbered city lists on the country page (is-numbered) -----------------
   Replaces .zh-citypic above: that thumbnail cost a per-city database
   lookup on every cache miss (see TboHotelRepository::getCountryCityCounts,
   2026-09) and, on a country with no hotel photo for a given city, rendered
   as an empty grey box that looked broken rather than simply blank. A
   fixed-width index number sits in the exact spot the photo used to, so
   rows still line up, but it costs nothing to compute and is never wrong. */
.zh-links.is-numbered .zh-serial {
    width: 26px;
    flex: 0 0 26px;
    text-align: right;
    font-size: .8rem;
    font-weight: 700;
    color: var(--z-ink-3, #7f8a7e);
    background: transparent;
    border-radius: 0;
    padding: 0;
    white-space: nowrap;
}


/* Bound the height of a state's city list ---------------------------- */
/* Australia's states run from 1 destination (Kangaroo Island) to 358
   (Other), and New South Wales alone is ~6,300px of rows. Left to grow,
   the four columns balance at roughly 9,100px and the page is nine
   screens tall no matter how it is packed -- the earlier grid holes were
   only half the problem.
   Capping the list makes every box a similar size, which is what lets the
   columns pack tightly, and takes the page from ~9,100px to ~1,400px.
   The rows are still in the HTML, so every city keeps its crawlable link
   -- this hides nothing from Google, it only stops one state from being
   taller than the other nine combined. */
.zh-links.is-compact {
    max-height: 460px;
    overflow-y: auto;
    /* Stops a scroll that reaches the end of this list from carrying on
       and jumping the whole page. */
    overscroll-behavior: contain;
}
/* A quiet scrollbar: the default chrome one is wide enough to crowd the
   hotel count sitting at the right edge of every row. */
.zh-links.is-compact::-webkit-scrollbar {
    width: 6px;
}
.zh-links.is-compact::-webkit-scrollbar-thumb {
    background: rgba(185, 151, 91, .45);
    border-radius: 999px;
}
.zh-links.is-compact::-webkit-scrollbar-track {
    background: transparent;
}
.zh-links.is-compact {
    scrollbar-width: thin;
    scrollbar-color: rgba(185, 151, 91, .45) transparent;
}

/* Rating row + address under the hotel title ------------------------- */
/* Both sit inside .z-pagehead, the dark green band, so colours are keyed
   off .z-pagehead p rather than the body ink -- page tokens would render
   this near-black on green. */

.zh-headrate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 10px 0 0;
}
.zh-headstars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--z-gold, #b9975b);
}
/* The gold is applied to the SVG stroke/fill via currentColor; without
   this the icons inherit the band's cream and vanish into the text. */
.zh-headstars svg { color: inherit; }
.zh-headtype {
    font-size: .95rem;
    font-weight: 600;
    color: rgba(240, 232, 214, .9);
}

/* The address line, directly under the rating. It overrides
   .z-pagehead p's 56ch cap: a full postal address with a pin code runs
   past it and would wrap after a few words. */
.zh-headaddr {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 0 0;
    max-width: 78ch;
    font-size: .96rem;
    color: rgba(240, 232, 214, .86);
}
/* Own line-height on the icon so it sits against the first line of a
   wrapped address rather than drifting to the middle of the block. */
.zh-headaddr svg { flex: 0 0 auto; margin-top: 3px; opacity: .8; }

/* Live rate on a city-page card ------------------------------------- */
/* The figure replaces "On dates" once the rate lookup returns.

   DARK GREEN, NOT GOLD. Gold (#c19a3f) on the near-white card measures
   about 2.6:1 -- under AA even for large text -- and the fare was the
   one number on the card nobody could read. --z-green is what
   zaereen.css already uses for a real price (.z-story-foot-price b), so
   this matches the curated listing instead of inventing a treatment.

   The script also strips the .sub class when a live rate lands, which
   is what stopped the theme muting it; these values restate the result
   so the card does not depend on that alone. */
.z-story-foot-price .zh-card-rate.is-live {
    color: var(--z-green, #0d2c22);
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.zh-rate-notice {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-left: 3px solid var(--z-gold, #b9975b);
    border-radius: 10px;
    background: var(--z-card, #fffdf7);
    font-size: .86rem;
    color: var(--z-muted, #6d7566);
}

/* ==========================================================================
   City listing: view toggles, Compare, Save, the map
   (zaereen/hotels/views/seo_city.php)
   ========================================================================== */

.z-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.zh-view-toggles { display: flex; align-items: center; gap: 10px; flex: none; }
#zhMapToggle.is-on {
    background: var(--z-green, #12332a);
    border-color: var(--z-green, #12332a);
    color: #fff;
}
.zh-viewmode {
    display: inline-flex;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 999px;
    overflow: hidden;
}
.zh-viewmode button {
    padding: 8px 16px;
    border: 0;
    background: #fff;
    font-family: var(--z-body, inherit);
    font-size: .85rem;
    font-weight: 600;
    color: var(--z-ink, #23301f);
    cursor: pointer;
}
.zh-viewmode button + button { border-left: 1px solid var(--z-line, #e4ddcc); }
.zh-viewmode button.is-on {
    background: var(--z-green, #12332a);
    color: #fff;
}

/* --- Compare and Save, over the card image ---------------------------- */
/* .z-story-pic is already position:relative (zaereen.css), and already
   carries the flag (top-left) and the star badge (top-right) at top:10px -
   these sit BELOW that row rather than replacing it, so neither overlaps
   the mark already there. */
.zh-compare-pill {
    position: absolute;
    top: 44px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 30, 20, .18);
    font-size: .78rem;
    font-weight: 600;
    color: var(--z-ink, #23301f);
    cursor: pointer;
}
.zh-compare-pill input {
    width: 15px;
    height: 15px;
    accent-color: var(--z-green, #12332a);
    margin: 0;
}
.zh-save-btn {
    position: absolute;
    top: 44px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 30, 20, .18);
    color: var(--z-ink-3, #7f8a7e);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.zh-save-btn:hover { transform: scale(1.06); }

/* Neither view offers Compare any more, and Save takes the star badge's
   own top:10px spot in both (the star count is already shown in the
   Category stat lower on the card, so the badge was redundant up here
   regardless of layout). Scoped to #zhGrid specifically, NOT the bare
   .z-story/.z-grid-3 classes - those are shared with zaereen/hotels/
   index.php's curated listing, which carries neither a Compare pill nor a
   Save button and must not lose its own star badge to a rule written for
   this page only. */
#zhGrid .zh-compare-pill { display: none; }
#zhGrid .z-story-rate { display: none; }
#zhGrid .zh-save-btn { top: 10px; }
.zh-save-btn svg { fill: none; stroke: currentColor; }
.zh-save-btn.is-saved {
    color: #d94f4f;
}
.zh-save-btn.is-saved svg { fill: currentColor; }
.zh-save-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* The "Saved to My next trip" toast. Anchored to the card body (the save
   button's own parent), not the button itself, so it reads under the
   title rather than as a tooltip glued to a 32px circle. */
.zh-saved-note {
    position: relative;
    margin: -2px 0 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(18, 51, 42, .08);
    color: var(--z-green, #12332a);
    font-size: .78rem;
    font-weight: 600;
}

.zh-card-addr {
    margin: 0 0 8px;
    font-size: .8rem;
    color: var(--z-muted, #6d7566);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zh-card-maplink {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--z-green-3, #1f6047);
    text-decoration: underline;
    cursor: pointer;
}

/* --- List view ----------------------------------------------------------
   Same cards, same data, no second template: .is-list only changes how
   .z-grid-3 and .z-story lay themselves out. A visitor's choice, not a
   server-rendered mode, per the reasoning in the script - a crawler and a
   visitor with JavaScript off both get the grid, which is a complete page
   either way. */
.z-grid-3.is-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.z-grid-3.is-list .z-story {
    flex-direction: row;
    align-items: stretch;
    /* THE FIXED 300px ROW WAS THIS.
       zaereen.css sets .z-story { flex: 0 0 300px } for the horizontal
       story rail, where 300px is a WIDTH because that rail is a flex row.
       This list is a flex COLUMN, so the very same declaration reads as a
       fixed 300px HEIGHT that neither grows nor shrinks - every row came
       out exactly 300px tall whatever was in it, which is where both the
       dead space inside short rows and the squeeze on tall ones came from.
       Grid view never saw it: .z-grid-3 is a CSS grid, and flex shorthands
       do not apply to grid items. */
    flex: 0 0 auto;
    /* The row is a flex item of the results column, and a flex item will not
       shrink below its own content unless it is told it may. Without this a
       long description forced the row wider than the column it sits in, and
       the price panel went off the right-hand edge of the page - which also
       made a list row visibly wider than the three grid cards it replaces.
       Grid and list now occupy exactly the same width. */
    min-width: 0;
}
.z-grid-3.is-list .z-story-pic {
    flex: 0 0 260px;
    /* STRETCHES with the row, and the photograph inside it is absolutely
       positioned so that stretching costs nothing.
       Neither of the two obvious values works on its own. height:auto alone
       let the photograph's own aspect ratio decide the row's height, and a
       tall portrait plate then dragged the whole row down with it. A fixed
       210px stopped that, but the body beside it carries an address, a
       distance line, two lines of description, the amenity marks and the
       three stats, which comes to more than 210px - so the row was taller
       than the plate and left a band of empty card under the photograph.
       Fixing the IMG rather than the box is what breaks the tie: the box
       takes its height from its siblings, the photograph fills whatever
       that turns out to be, and its intrinsic proportions never enter the
       layout at all. */
    height: auto;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-right: 2px solid var(--z-gold, #b9975b);
}
.z-grid-3.is-list .zh-card-hero {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.z-grid-3.is-list .zh-card-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.z-grid-3.is-list .z-story-body {
    flex: 1 1 auto;
    /* min-width for the same reason as the row above: this is the item that
       actually holds the long text, so it is the one that would otherwise
       refuse to shrink. */
    min-width: 0;
    /* flex-start, NOT space-between. space-between only does anything when
       the body is shorter than the row, and what it does then is push the
       first and last lines apart and leave a hole in the middle - which is
       exactly the "broken empty gap" this row started out with. The photo
       column sets the floor for the row; the text simply stacks from the
       top of it. */
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 16px;
}
/* A list row is one line of name, not two. The grid card reserves 2.6em so
   a one-line name and a two-line name beside it still line up across a row
   of cards; in a list there is nothing beside it to line up with, and the
   reserved second line was pure height on every card. */
/* The name gets its own band across the head of the row, bled out to the
   body's edges by negative margins (the card clips them - .z-story is
   overflow:hidden). Gold wash rather than a flat fill, closed by the same
   gold hairline the card already used, so the row reads as a titled panel
   instead of a paragraph that happens to start with a bold line.
   The name turns deep green here: it is gold-deep by default, which has
   nothing to hold against a gold ground. */
.z-grid-3.is-list .z-story-body h3 {
    min-height: 0;
    margin: -10px -16px 10px;
    padding: 11px 16px;
    background: linear-gradient(180deg, rgba(185, 151, 91, .17), rgba(185, 151, 91, .05));
    border-bottom: 1px solid var(--z-gold-light, #e6d3a3);
    color: var(--z-green, #12332a);
}
/* Grid view: the wrapper is not there at all as far as layout is concerned,
   so the grid card stacks exactly as it always did. */
.zh-card-foot-meta { display: contents; }
/* List view: the amenity marks and the three stats are one band across the
   foot of the row. They were two stacked lines, the marks hugging the left
   and the stats spread thinly across the full width beneath them, with the
   leftover height sitting empty underneath both. margin-top:auto drops the
   band to the bottom of the text column, so a tall photograph is met by
   content at the same line rather than by empty space. */
.z-grid-3.is-list .zh-card-foot-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: auto;
    padding-top: 4px;
    min-width: 0;
}
/* max-content, not three equal fractions: spread across the full row the
   three stats sat marooned with huge gaps between them. */
.z-grid-3.is-list .z-story-stats {
    grid-template-columns: repeat(3, max-content);
    gap: 22px;
    margin: 0;
}
/* Address and distance are both "where it is", so they share a line the way
   the reference row does, instead of spending two on it. */
.z-grid-3.is-list .zh-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    min-width: 0;
}
/* The grid card truncates the address to one line because its column is
   narrow. A list row is not, so the address wraps instead - truncating it
   here was also cutting off the "Show on map" button that sits at its end. */
.z-grid-3.is-list .zh-card-addr {
    min-width: 0;
    margin-bottom: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.z-grid-3.is-list .z-story-foot {
    flex: 0 0 200px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    /* THE BLANK BOX IN THE TOP RIGHT CORNER WAS THIS.
       The base card is a COLUMN, where margin-top:auto is what pushes the
       price strip down to the foot of a card. Turned on its side into a row,
       that same auto margin became a cross-axis one - it pinned the price
       column to the bottom edge of the row and let it shrink to its own
       content, so the cream panel only covered the last 80px or so and the
       rest of the column was bare card. */
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--z-line-soft, #ece4d2);
}
@media (max-width: 780px) {
    /* A 260px photo beside a squeezed body is the one place list view
       reads worse than grid on a phone - back to a stacked card below
       this width regardless of the visitor's own choice. */
    .z-grid-3.is-list .z-story { flex-direction: column; }
    .z-grid-3.is-list .z-story-pic { flex-basis: auto; height: 180px; min-height: 0; border-right: 0; border-bottom: 2px solid var(--z-gold, #b9975b); }
    .z-grid-3.is-list .z-story-body { justify-content: flex-start; }
    /* Back to a column, so margin-top:auto goes back to meaning "sit at the
       foot of the card" rather than "pin to the bottom edge of the row". */
    .z-grid-3.is-list .z-story-foot { flex-basis: auto; flex-direction: row; align-items: center; justify-content: space-between; margin-top: auto; border-left: 0; border-top: 1px solid var(--z-line-soft, #ece4d2); }
}

/* --- List view: the thumbnail strip -------------------------------------
   The rest of the photographs we already hold for this hotel, under the main
   plate, as every reference list row shows them. Hidden in grid view, where
   a 300px card has no width to spend on them. */
.zh-card-gallery { display: none; }
#zhGrid.is-list .zh-card-gallery {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    background: var(--z-cream-deep, #efe7d6);
}
#zhGrid.is-list .zh-card-gallery > a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
#zhGrid.is-list .zh-card-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#zhGrid.is-list .zh-card-gallery .is-viewall span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(18, 51, 42, .62);
    color: var(--z-gold-light, #e6d3a3);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.15;
}
@media (max-width: 780px) {
    /* AFTER the rules above, not up with the rest of the stacked-card
       overrides: this selector and the one that turns the strip on weigh
       exactly the same, so whichever is written last wins, and the mobile
       rule placed earlier in the file lost silently.
       180px of plate split four ways is four unreadable stamps - the
       stacked card shows the one photograph, like the grid card it now
       resembles. */
    #zhGrid.is-list .zh-card-gallery { display: none; }
}

/* Short description + the distance/transit line, list view's own extra
   content that the grid card has no room for. */
.zh-card-desc {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--z-muted, #6d7566);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zh-card-dist {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--z-ink-3, #7f8a7e);
}
.zh-card-dist svg { flex: none; }
.zh-card-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* One mark per amenity rather than its written name - see the markup, and
   zaereen_facility_icons(). The name is on the title/aria-label, so nothing
   is lost to anyone hovering or listening. */
.zh-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 999px;
    background: var(--z-card, #fffdf7);
    font-size: .74rem;
    font-weight: 600;
    color: var(--z-green, #12332a);
    white-space: nowrap;
}
.zh-card-chip svg { display: block; }
/* "+12", the facilities this row did not have a mark for. A count, so it
   needs room to grow sideways where a single mark does not. */
.zh-card-chip.is-more {
    width: auto;
    min-width: 30px;
    padding: 0 9px;
    color: var(--z-green-3, #1f6047);
    font-variant-numeric: tabular-nums;
}

/* List view only. A grid card's tighter column already spends its width
   on the name and the three stats below - the description, the distance
   line and the facility chips are what a LIST row's freed-up width buys,
   the same way the reference this was built from spends it. */
#zhGrid:not(.is-list) .zh-card-dist,
#zhGrid:not(.is-list) .zh-card-desc,
#zhGrid:not(.is-list) .zh-card-chips {
    display: none;
}

/* --- Compare bar and modal --------------------------------------------- */
.zh-compare-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: var(--z-green, #12332a);
    box-shadow: 0 -8px 22px rgba(10, 20, 15, .2);
}
.zh-compare-bar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    color: #fdf8ec;
    font-size: .92rem;
    font-weight: 600;
}
.zh-compare-bar-acts { display: flex; gap: 10px; }

.zh-compare-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(11, 34, 28, .62);
    backdrop-filter: blur(3px);
}
.zh-compare-modal[hidden] { display: none !important; }
.zh-compare-box {
    width: 100%;
    max-width: 1040px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--z-surface, #fffdf7);
    border: 1px solid var(--z-line-strong, #cbb995);
    border-radius: 14px;
    box-shadow: 0 30px 70px -20px rgba(4, 18, 13, .6);
    overflow: hidden;
}
.zh-compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--z-cream, #f4ecda), var(--z-cream-deep, #e9dec5));
    border-bottom: 1px solid var(--z-line, #e4ddcc);
}
.zh-compare-head h2 { margin: 0; font-size: 16px; }
.zh-compare-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}
.zh-compare-grid { display: grid; gap: 16px; }
.zh-compare-col {
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.zh-compare-col img { width: 100%; height: 140px; object-fit: cover; display: block; }
.zh-compare-col h3 { margin: 12px 12px 4px; font-size: 15px; line-height: 1.3; }
.zh-compare-col h3 a { color: var(--z-ink, #23301f); text-decoration: none; }
.zh-compare-stars, .zh-compare-fac {
    margin: 0 12px 8px;
    font-size: .82rem;
    color: var(--z-muted, #6d7566);
}
.zh-compare-col .z-btn { margin: 0 12px 14px; }
@media (max-width: 780px) {
    .zh-compare-grid { grid-template-columns: 1fr !important; }
}

/* --- Map ----------------------------------------------------------------
   Fixed height rather than a share of the viewport: a Leaflet map with no
   explicit height silently renders 0px tall, which is indistinguishable
   from "the map failed to load" at a glance. */
.zh-map-wrap { margin: 0 0 22px; }
.zh-map-wrap[hidden] { display: none !important; }
#zhMap {
    height: 460px;
    border: 1px solid var(--z-line, #e4ddcc);
    border-radius: 14px;
    overflow: hidden;
}
.zh-map-pop { min-width: 180px; }
.zh-map-pop img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.zh-map-pop b { display: block; margin-bottom: 4px; font-size: .88rem; }
.zh-map-pop a {
    font-size: .82rem;
    font-weight: 600;
    color: var(--z-green-3, #1f6047);
}

@media (max-width: 560px) {
    .z-results-head { align-items: flex-start; }
    .zh-view-toggles { width: 100%; justify-content: space-between; }
    #zhMap { height: 320px; }
    .zh-compare-bar-in { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================================
   Destination hub: continent tablets, then one country panel at a time
   (zaereen/hotels/views/seo_hub.php)

   A panel is shown by :target (/hotels/destinations#middle-east), so it
   opens without JavaScript and the back button closes it. Each tablet and
   panel carries its continent's two colours as --zc1 / --zc2 inline, all
   taken from the zaereen.css palette (zh_region_theme()).

   Link rules are written a.zh-... on purpose: ".zaereen a" is (0,1,1) and
   would otherwise repaint the tablet text dark green.
   ========================================================================== */

.zh-hub [hidden],
.zh-countrypage [hidden] { display: none !important; }

.zh-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 0 0 26px;
}
.zh-lead h2 {
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.zh-lead .z-eyebrow { margin-bottom: 6px; }

.zh-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.zh-stats li {
    padding: 6px 14px;
    border: 1px solid var(--z-line);
    border-radius: 999px;
    background: var(--z-surface);
    font-size: 13.5px;
    color: var(--z-ink-2);
}
.zh-stats b { color: var(--z-green); font-weight: 600; font-variant-numeric: tabular-nums; }

.zh-continents {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    scroll-margin-top: 120px;
}

a.zh-continent {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 262px;
    padding: 26px 24px 20px;
    border-radius: 18px;
    background-color: var(--zc2);
    background-image: var(--z-pattern-dark), linear-gradient(150deg, var(--zc1) 0%, var(--zc2) 100%);
    background-size: 26px 26px, 100% 100%;
    color: #f3ead6;
    box-shadow: var(--z-shadow);
    transition: transform .24s ease, box-shadow .24s ease;
}
a.zh-continent:hover { color: #f3ead6; transform: translateY(-4px); box-shadow: var(--z-shadow-lg); }
/* The gold inner rule the arch frames use, so a tablet reads as a panel
   set into the wall rather than a coloured box. */
.zh-continent::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border: 1px solid rgba(227, 200, 134, .36);
    border-radius: 12px;
    pointer-events: none;
    transition: border-color .24s ease;
}
a.zh-continent:hover::before { border-color: rgba(227, 200, 134, .8); }
a.zh-continent.is-active { box-shadow: 0 0 0 3px var(--z-gold), var(--z-shadow-lg); }

.zh-continent-mark {
    position: absolute;
    right: -30px;
    bottom: -34px;
    z-index: -1;
    color: var(--z-gold-light);
    opacity: .13;
    transform: rotate(-8deg);
    transition: transform .6s ease, opacity .3s ease;
}
a.zh-continent:hover .zh-continent-mark { transform: rotate(0deg) scale(1.05); opacity: .22; }

.zh-continent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 1px solid rgba(227, 200, 134, .55);
    background: rgba(8, 28, 22, .28);
    color: var(--z-gold-light);
}
.zh-continent-name {
    font-family: var(--z-display);
    font-size: 29px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fbf5e6;
}
.zh-continent-tag { font-size: 14px; line-height: 1.5; color: rgba(243, 234, 214, .8); max-width: 92%; }

.zh-continent-flags { display: flex; margin: auto 0 12px; padding-top: 16px; }
.zh-continent-flags .hs-flag {
    width: 28px;
    height: 19px;
    flex: 0 0 28px;
    margin-right: -6px;
    box-sizing: content-box;
    border: 2px solid #f3ead6;
    border-radius: 4px;
}

.zh-continent-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(227, 200, 134, .26);
    font-size: 13px;
    color: rgba(243, 234, 214, .86);
}
.zh-continent-foot b { color: #fbf5e6; font-weight: 600; font-variant-numeric: tabular-nums; }
.zh-continent-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--z-gold-light);
    white-space: nowrap;
}
.zh-continent-cta svg { transition: transform .2s ease; }
a.zh-continent:hover .zh-continent-cta svg { transform: translateX(3px); }

.zh-region-panel {
    display: none;
    margin-top: 30px;
    padding: 26px;
    border: 1px solid var(--z-line);
    border-top: 4px solid var(--zc1);
    border-radius: 18px;
    background: var(--z-surface);
    box-shadow: var(--z-shadow);
    scroll-margin-top: 120px;
}
.zh-region-panel:target { display: block; animation: zhRise .35s ease-out; }
@keyframes zhRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.zh-region-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--z-line-soft);
}
.zh-region-panel-head > div { flex: 1 1 auto; min-width: 0; }
.zh-region-panel-head .zh-continent-icon {
    margin: 0;
    color: var(--z-gold-light);
    background-color: var(--zc2);
    background-image: linear-gradient(150deg, var(--zc1), var(--zc2));
    border-color: var(--z-gold);
}
.zh-region-panel-head .z-eyebrow { margin: 0 0 2px; }
.zh-region-panel-head h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.zh-region-panel-head p { margin: 2px 0 0; font-size: 14px; color: var(--z-ink-3); }

a.zh-back {
    padding: 8px 16px;
    border: 1px solid var(--z-line-gold);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-gold-deep);
    white-space: nowrap;
}
a.zh-back:hover { background: var(--z-gold-wash); color: var(--z-green); }

.zh-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
a.zh-country-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--z-line);
    border-radius: 14px;
    background: var(--z-marble);
    color: var(--z-ink);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.zh-country-card:hover {
    color: var(--z-ink);
    border-color: var(--z-gold);
    transform: translateY(-2px);
    box-shadow: var(--z-shadow);
}
.zh-country-card .hs-flag { width: 42px; height: 28px; flex: 0 0 42px; border-radius: 5px; }
.zh-country-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.zh-country-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--z-green);
}
.zh-country-body small { font-size: 12.5px; font-weight: 500; color: var(--z-gold-deep); }
.zh-country-go { flex: 0 0 auto; color: var(--z-ink-3); transition: transform .2s ease, color .2s ease; }
a.zh-country-card:hover .zh-country-go { color: var(--z-gold-deep); transform: translateX(3px); }

/* ==========================================================================
   Country page: finder bar, metro and popular city cards, all destinations
   (zaereen/hotels/views/seo_country.php)
   ========================================================================== */

.zh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Restates the country name as well as holding the finder: below desktop
   the green page head is hidden, and this bar is then the page's title. */
.zh-country-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 34px;
    padding: 18px 22px;
    border: 1px solid var(--z-line);
    border-left: 4px solid var(--zc1);
    border-radius: 16px;
    background: var(--z-surface);
    box-shadow: var(--z-shadow-sm);
}
.zh-country-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.zh-country-id .hs-flag { width: 54px; height: 36px; flex: 0 0 54px; border-radius: 6px; }
.zh-country-id > div { display: flex; flex-direction: column; min-width: 0; }
a.zh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--z-gold-deep);
}
a.zh-kicker:hover { color: var(--z-green); }
.zh-country-id strong {
    font-family: var(--z-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--z-green);
}
.zh-country-id span { font-size: 13.5px; color: var(--z-ink-3); }

.zh-city-find { position: relative; display: block; flex: 0 1 420px; min-width: 240px; margin: 0; }
.zh-city-find svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--z-gold-deep);
    pointer-events: none;
}
.zh-city-find input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--z-line-strong);
    border-radius: 999px;
    background: var(--z-marble);
    color: var(--z-ink);
    font: inherit;
    font-size: 15px;
}
.zh-city-find input::placeholder { color: var(--z-ink-3); }
.zh-city-find input:focus { outline: none; border-color: var(--z-gold); box-shadow: 0 0 0 3px var(--z-gold-pale); }

.zh-block { margin: 0 0 44px; scroll-margin-top: 120px; }
.zh-block-head { margin: 0 0 18px; }
.zh-block-head .z-eyebrow { margin-bottom: 4px; }
.zh-block-head h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zh-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}
.zh-city-grid.is-popular { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

/* City photo cards.
   A plain rounded photo with the name over a dark fade -- NOT the
   keyhole-arch niche (.z-card-arch) the tour cards use, and no jali
   pattern behind a city with no photo. The arch was tried here first and
   the site owner asked for it to go (2026-09-17): on a city's hotels it
   read as religious styling, which is right for a shrine tour and wrong
   for Mumbai. Colours and type are still Zaereen's. */
a.zh-city-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--zc1), var(--zc2));
    color: #fff;
    box-shadow: var(--z-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.is-popular a.zh-city-card { aspect-ratio: 5 / 4; }
a.zh-city-card:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--z-shadow-lg); }
a.zh-city-card:focus-visible { outline: 3px solid var(--z-gold); outline-offset: 3px; }

.zh-city-card img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
a.zh-city-card:hover img { transform: scale(1.06); }

/* Shown only where a city has no photo, or its photos all fail and the
   <img> removes itself. */
.zh-city-initial {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 14%;
    font-family: var(--z-display);
    font-size: 72px;
    font-weight: 600;
    color: rgba(255, 255, 255, .28);
}

.zh-city-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 28, 22, 0) 38%, rgba(8, 28, 22, .88) 100%);
}
.zh-city-over {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
}
.zh-city-over strong {
    font-family: var(--z-body);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.is-popular .zh-city-over strong { font-size: 16px; }
.zh-city-over small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--z-gold-light);
}
.zh-city-over small svg { transition: transform .2s ease; }
a.zh-city-card:hover .zh-city-over small svg { transform: translateX(3px); }

.zh-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.zaereen .zh-letters a {
    min-width: 34px;
    padding: 6px 8px;
    border: 1px solid var(--z-line);
    border-radius: 8px;
    background: var(--z-surface);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--z-green);
}
.zaereen .zh-letters a:hover { border-color: var(--z-gold); color: var(--z-gold-deep); }

.zh-az-group { margin: 0 0 22px; scroll-margin-top: 120px; }
.zh-az-group h3 {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--z-line);
    font-size: 22px;
    color: var(--z-gold-deep);
}
.zh-az-list { columns: 4 220px; column-gap: 20px; }
.zh-az-list li { break-inside: avoid; }
.zaereen .zh-az-list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--z-ink);
}
.zaereen .zh-az-list a:hover { background: var(--z-gold-wash); color: var(--z-green); }
.zh-az-list a span { font-size: 12.5px; color: var(--z-ink-3); font-variant-numeric: tabular-nums; }
.zh-az-empty { padding: 12px 0; color: var(--z-ink-3); }

/* While the finder has text, the photo sections step aside so the matches
   are what is on screen. */
.is-filtering .zh-block-featured,
.is-filtering .zh-letters { display: none; }

@media (prefers-reduced-motion: reduce) {
    .zh-region-panel:target { animation: none; }
}

@media (max-width: 1080px) {
    .zh-continents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .zh-continents { grid-template-columns: 1fr; gap: 14px; }
    a.zh-continent { min-height: 220px; padding: 22px 20px 18px; }
    .zh-continent-name { font-size: 25px; }
    .zh-region-panel { padding: 20px 16px; }
    .zh-region-panel-head .zh-continent-icon { display: none; }
    .zh-country-bar { padding: 16px; }
    .zh-city-find { flex: 1 1 100%; min-width: 0; }
    .zh-city-grid,
    .zh-city-grid.is-popular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    a.zh-city-card,
    .is-popular a.zh-city-card { aspect-ratio: 4 / 5; border-radius: 14px; }
    .zh-city-over { padding: 12px; }
    .zh-city-over strong,
    .is-popular .zh-city-over strong { font-size: 15px; }
    .zh-city-over small { font-size: 12px; }
}