/* =====================================================================
   Oxford Travels - design system
   ---------------------------------------------------------------------
   One light-blue brand, five module accents.

   The brand blue is constant: navigation, primary buttons, links and focus
   rings look the same on every page, so the site reads as one product. What
   changes per module is a single accent token set, switched by
   <body data-module="teal">, the colour name the hotels module carries. That
   is what makes a hotel page feel like hotels and a visa page feel like
   visas without either looking like a different website.

   Contents
     1  Tokens: brand, neutrals, accents per module
     2  Reset and base
     3  Typography
     4  Layout: container, sections, grid
     5  Buttons
     6  Forms and the search widget
     7  Cards
     8  Badges, chips, ratings, pills
     9  Header and navigation
    10  Hero
    11  Footer
    12  Breadcrumbs, pagination, tabs
    13  Utilities
    14  Motion and print
   ===================================================================== */


/* ============================================================
   1  TOKENS
   ============================================================ */

:root {
    /* ---- Brand: the light blue everything is built on ---- */
    --brand-50:  #eff8ff;
    --brand-100: #daeefe;
    --brand-200: #bde1fd;
    --brand-300: #8fcefb;
    --brand-400: #57b2f6;
    --brand-500: #2e96ec;
    --brand-600: #0c74c4;   /* primary. White text on this passes AA */
    --brand-700: #0a5ca0;
    --brand-800: #0b4878;
    --brand-900: #0c3a5e;

    /* ---- Neutrals, cooled very slightly towards the brand ---- */
    --ink-900: #0f1b2a;     /* headings */
    --ink-800: #1e2d3f;
    --ink-700: #33465c;     /* body text */
    --ink-600: #475a70;
    --ink-500: #5b6b7f;     /* muted text - still AA on white */
    --ink-400: #7b8b9c;
    --ink-300: #9aa9b8;
    --ink-200: #c7d2de;
    --ink-100: #e3eaf1;

    --line:      #e3eaf1;
    --line-soft: #eef3f8;
    --surface:   #ffffff;
    --surface-2: #f8fbfe;
    --canvas:    #f4f9fd;   /* page background: a hint of the brand */

    /* ---- Signal colours, shared by every module ---- */
    --success:      #0f7a4d;
    --success-soft: #e6f6ee;
    --warning:      #a35a00;
    --warning-soft: #fff4e0;
    --danger:       #b3261e;
    --danger-soft:  #fdeceb;
    --star:         #f5a524;

    /* ---- Radii ---- */
    --r-xs:   6px;
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-pill: 999px;

    /* ---- Shadows. Layered and blue-tinted so cards sit on the canvas
            rather than floating over a grey void. ---- */
    --sh-xs: 0 1px 2px rgba(15, 27, 42, .06);
    --sh-sm: 0 1px 3px rgba(15, 27, 42, .07), 0 1px 2px rgba(15, 27, 42, .04);
    --sh-md: 0 4px 12px rgba(15, 27, 42, .08), 0 1px 3px rgba(15, 27, 42, .04);
    --sh-lg: 0 12px 28px rgba(15, 27, 42, .10), 0 4px 10px rgba(15, 27, 42, .05);
    --sh-xl: 0 24px 48px rgba(12, 58, 94, .14), 0 8px 20px rgba(15, 27, 42, .06);

    /* ---- Spacing rhythm ---- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --container: 1200px;
    --container-wide: 1400px;
    --header-h: 72px;

    /* ---- Type. A system stack renders instantly and costs no request,
            which is most of the Core Web Vitals battle won for free. ---- */
    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    /* Fluid scale: readable on a phone, not oversized on a desktop. */
    --t-xs:   .75rem;
    --t-sm:   .8125rem;
    --t-base: .9375rem;
    --t-md:   1rem;
    --t-lg:   clamp(1.0625rem, .98rem + .35vw, 1.1875rem);
    --t-xl:   clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
    --t-2xl:  clamp(1.5rem, 1.3rem + .9vw, 2rem);
    --t-3xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
    --t-4xl:  clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* ---- Default accent = brand. Every module below overrides these five
            tokens and nothing else. ---- */
    --accent:      var(--brand-600);
    --accent-deep: var(--brand-700);
    --accent-bright: var(--brand-500);
    --accent-soft: var(--brand-50);
    --accent-line: var(--brand-200);
    --accent-ink:  var(--brand-800);
    --accent-grad: linear-gradient(135deg, var(--brand-600), var(--brand-500) 55%, var(--brand-400));
}


/* ---- The module accents ------------------------------------------------
   Each 'accent' carries white text at AA or better, so a badge, a price and
   a button can all use it without a contrast exception. 'soft' is the tint
   behind chips and section bands; 'ink' is the accent dark enough to set
   text in on a white or soft background.
   --------------------------------------------------------------------- */

[data-module="azure"] {
    --accent:        #0b76c8;
    --accent-deep:   #08598f;
    --accent-bright: #3ea4ec;
    --accent-soft:   #ecf6fe;
    --accent-line:   #bfe0f8;
    --accent-ink:    #084e80;
    --accent-grad: linear-gradient(135deg, #0b76c8, #2e96ec 55%, #6fc0f5);
}

[data-module="teal"] {
    --accent:        #0d7d74;
    --accent-deep:   #0a5f58;
    --accent-bright: #17a89b;
    --accent-soft:   #e8f7f5;
    --accent-line:   #b9e5e0;
    --accent-ink:    #0a544e;
    --accent-grad: linear-gradient(135deg, #0d7d74, #17a89b 55%, #57cbbf);
}

[data-module="coral"] {
    --accent:        #c2410c;
    --accent-deep:   #9a3412;
    --accent-bright: #f2762c;
    --accent-soft:   #fff2e9;
    --accent-line:   #fbd5bb;
    --accent-ink:    #8a3a12;
    --accent-grad: linear-gradient(135deg, #c2410c, #f2762c 55%, #fbaa6a);
}

[data-module="indigo"] {
    --accent:        #4f46e5;
    --accent-deep:   #3c34c4;
    --accent-bright: #7a72f0;
    --accent-soft:   #eef0ff;
    --accent-line:   #d3d4fb;
    --accent-ink:    #3b34ab;
    --accent-grad: linear-gradient(135deg, #4f46e5, #7a72f0 55%, #a8a3f7);
}

[data-module="emerald"] {
    --accent:        #047857;
    --accent-deep:   #035c43;
    --accent-bright: #13a273;
    --accent-soft:   #e7f6ef;
    --accent-line:   #b6e4cf;
    --accent-ink:    #04543e;
    --accent-grad: linear-gradient(135deg, #047857, #13a273 55%, #5cc79b);
}

[data-module="sage"] {
    --accent:        #0f766e;
    --accent-deep:   #115e59;
    --accent-bright: #14a89c;
    --accent-soft:   #e9f7f5;
    --accent-line:   #bce5e0;
    --accent-ink:    #0c544e;
    --accent-grad: linear-gradient(135deg, #0f766e, #14a89c 55%, #5ac9be);
}

[data-module="slate"] {
    --accent:        #475569;
    --accent-deep:   #334155;
    --accent-bright: #64748b;
    --accent-soft:   #f1f5f9;
    --accent-line:   #dbe3ec;
    --accent-ink:    #334155;
    --accent-grad: linear-gradient(135deg, #334155, #475569 55%, #64748b);
}


/* ============================================================
   2  RESET AND BASE
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor links land below the sticky header rather than under it. */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--ink-700);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Stops a page with a short body jumping when a scrollbar appears. */
    scrollbar-gutter: stable;
}

img, picture, video { display: block; max-width: 100%; }

/* Inline icons.
   An SVG with no width/height fills whatever box it lands in, so a 16px
   icon inside an h2 renders as a 40px blob that shoves the heading aside.
   Every icon() call emits .ic, and this is the one place its size is set:
   it scales with the text it sits beside and never stretches a flex row. */
svg.ic {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -.16em;
}
img { height: auto; }

/* NOTE: do not add an img[width][height] rule here. Two attribute selectors
   outrank .card-media img and .tile img, so a height:auto default set that
   way beats the height:100% those components need and every card image
   collapses to a sliver. The plain img rule below is enough. */

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); text-decoration: underline; text-underline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* One focus style for the whole site, visible on every background. */
:focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Visible only to screen readers, and to keyboard users when focused. */
.sr-only {
    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 {
    position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
    background: var(--brand-700); color: #fff;
    padding: .7rem 1.1rem; border-radius: var(--r-sm);
    font-weight: 600; transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; text-decoration: none; }


/* ============================================================
   3  TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

h1 { font-size: var(--t-3xl); letter-spacing: -.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.02em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lede {
    font-size: var(--t-lg);
    color: var(--ink-600);
    line-height: 1.6;
    max-width: 62ch;
}

.muted   { color: var(--ink-500); }
.tiny    { font-size: var(--t-xs); }
.small   { font-size: var(--t-sm); }
.strong  { font-weight: 650; color: var(--ink-900); }

/* The small uppercase label above a section heading. */
.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-2);
}
.eyebrow svg { width: 1rem; height: 1rem; flex: none; }
.eyebrow::before {
    content: ""; width: 18px; height: 2px; border-radius: 2px;
    background: var(--accent);
}

/* Long-form copy from the CMS. Scoped so editor markup cannot leak its own
   spacing into the rest of the page. */
.prose { color: var(--ink-700); line-height: 1.75; }
.prose h2 { font-size: var(--t-xl); margin: var(--sp-6) 0 var(--sp-3); }
.prose h3 { font-size: var(--t-lg); margin: var(--sp-5) 0 var(--sp-2); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) 1.25rem; }
.prose li { list-style: disc; margin-bottom: .4rem; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); font-size: var(--t-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 650; color: var(--ink-900); }
.prose img { border-radius: var(--r-md); margin: var(--sp-4) 0; }


/* ============================================================
   4  LAYOUT
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: 780px; }
/* ONE WIDTH FOR THE WHOLE SITE: from tablet width up every page - header,
   search bar, listings, hotel and holiday pages, booking steps, footer -
   runs at 80% of the window, so their edges line up from page to page. It
   replaces the per-page 90% / 85% / 80% rules that had grown up one listing
   at a time; the container-results, -hotels, -85 and -80 classes are still
   on the pages and simply resolve to the same width now.

   Two things keep their own measure on purpose: .container-narrow, the
   reading column (a paragraph 80% of a wide screen across is hard to read),
   and any container given an inline max-width, such as the sign-in card.
   On a phone the container already runs edge to edge. */
/* zaereen.com's shell, now: a 1400px column with 24px either side
   (--z-shell in sites/zaereen/assets/css/zaereen.css), in place of the 80%
   of the window it was - which on a wide screen ran past zaereen's width. */
@media (min-width: 640px) {
    .container:not(.container-narrow) { max-width: 1400px; padding-inline: 24px; }
}

.section { padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.section-tight { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

/* A band tinted with the current module's accent - used to separate a
   section without drawing a box around it. */
.section-soft { background: var(--accent-soft); }
.section-surface { background: var(--surface); }

.section-head {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.section-head h2 { margin-bottom: .35rem; }
.section-head p { margin: 0; color: var(--ink-500); max-width: 58ch; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards wrap on their own rather than at a fixed breakpoint, so a three-up
   row becomes two-up and then one-up wherever it actually needs to. */
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* The listing layout: filters on the left, results on the right. */
.layout-listing {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}
.layout-listing > aside { position: sticky; top: calc(var(--header-h) + 1rem); }

/* The detail layout: content with a booking panel alongside. */
.layout-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--sp-6);
    align-items: start;
}
.layout-detail > aside { position: sticky; top: calc(var(--header-h) + 1rem); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout-listing, .layout-detail { grid-template-columns: minmax(0, 1fr); }
    .layout-listing > aside, .layout-detail > aside { position: static; }
}
@media (max-width: 720px) {
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   5  BUTTONS
   ============================================================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s var(--ease), border-color .16s var(--ease),
                color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Primary stays brand blue on every page: one obvious "go" colour, so a
   traveller never has to learn a new one per section. */
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--brand-700); color: #fff; box-shadow: var(--sh-md); }

/* Accent is the module's own colour - for the action that belongs to this
   product rather than to the site ("Check availability", "Apply now"). */
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--sh-sm); }
.btn-accent:hover { background: var(--accent-deep); color: #fff; box-shadow: var(--sh-md); }

.btn-outline {
    background: var(--surface); color: var(--ink-800);
    border-color: var(--ink-200);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn-soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn-soft:hover { background: var(--accent-line); color: var(--accent-deep); }

.btn-lg  { padding: .9rem 1.6rem; font-size: var(--t-md); border-radius: var(--r-md); }
.btn-sm  { padding: .45rem .8rem; font-size: var(--t-sm); }
.btn-block { width: 100%; }
.btn-pill  { border-radius: var(--r-pill); }

.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

/* An icon-only control: square, with the label carried by aria-label. */
.btn-icon {
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--r-sm);
}

/* The link that reads as an action without being a button. */
.link-arrow {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 620; color: var(--accent-ink);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .16s var(--ease); }
.link-arrow:hover { color: var(--accent-deep); text-decoration: none; }
.link-arrow:hover svg { transform: translateX(3px); }


/* ============================================================
   6  FORMS AND THE SEARCH WIDGET
   ============================================================ */

.field { display: block; margin-bottom: var(--sp-4); }
.field > label,
.label {
    display: block;
    margin-bottom: .35rem;
    font-size: var(--t-sm);
    font-weight: 620;
    color: var(--ink-800);
}

.input, .select, .textarea {
    width: 100%;
    padding: .65rem .85rem;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    color: var(--ink-900);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea { min-height: 120px; resize: vertical; }

.select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 1.05rem;
}

.field-error .input, .field-error .select { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: var(--t-sm); margin-top: .3rem; }
.help-text  { color: var(--ink-500); font-size: var(--t-sm); margin-top: .3rem; }

.check {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: var(--t-sm); color: var(--ink-700); cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }

/* ---- The search widget ------------------------------------------------
   The one component every module shares. Fields sit in a row on a desktop
   and stack on a phone, and the submit button is full width below 720px so
   it is never a thumb-sized target at the edge of the screen.
   --------------------------------------------------------------------- */

.searchbar {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    padding: var(--sp-3);
}

.searchbar-tabs {
    display: flex; gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--sp-3);
    padding: .25rem;
    background: var(--surface-2);
    border-radius: var(--r-md);
}
.searchbar-tabs::-webkit-scrollbar { display: none; }

.searchbar-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem;
    border: 0; background: transparent;
    border-radius: var(--r-sm);
    font-size: var(--t-sm); font-weight: 620;
    color: var(--ink-600);
    white-space: nowrap;
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.searchbar-tab svg { width: 1.05rem; height: 1.05rem; }
.searchbar-tab:hover { color: var(--ink-900); background: var(--surface); }

/* The active tab wears its own module's colour, which is the first place a
   visitor sees the accent system at work. */
.searchbar-tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--tab-accent, var(--brand-700));
    box-shadow: var(--sh-sm);
}
.searchbar-tab[aria-selected="true"] svg { color: var(--tab-accent, var(--brand-600)); }

.searchbar-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-2);
    align-items: end;
}

.searchbar-field {
    position: relative;
    padding: .6rem .85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.searchbar-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.searchbar-field > label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: .1rem;
}
.searchbar-field input,
.searchbar-field select {
    width: 100%; border: 0; padding: 0; background: transparent;
    font-size: var(--t-md); font-weight: 600; color: var(--ink-900);
}
.searchbar-field input:focus, .searchbar-field select:focus { outline: none; }
.searchbar-field .sub { font-size: var(--t-xs); color: var(--ink-500); }

/* The occupancy summary must stay on one line. Left to wrap, "2 adults, 1
   room" becomes two lines, which makes that field the tallest in the row
   and drags every other field and the submit button down with it. */
.searchbar-field [data-occupancy-summary] {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.searchbar-field [data-occupancy-trigger] { gap: .5rem; }
.searchbar-field [data-occupancy-trigger] svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-500); }

.searchbar-submit { align-self: stretch; }
.searchbar-submit .btn { height: 100%; min-height: 56px; }

@media (max-width: 720px) {
    .searchbar-fields { grid-template-columns: minmax(0, 1fr); }
    .searchbar-submit .btn { width: 100%; min-height: 52px; }
}


/* ============================================================
   7  CARDS
   ============================================================ */

.card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--accent-line); }

/* The whole card is clickable, but only the title is a link - so the
   accessible name is the title rather than "image, title, price, button". */
.card-link::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
}
.card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .45s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.04); }

.card-media-wide { aspect-ratio: 16 / 10; }
.card-media-tall { aspect-ratio: 3 / 4; }

.card-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-4); flex: 1; }
.card-title {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 680;
    color: var(--ink-900);
    line-height: 1.35;
    /* Two lines, then ellipsis - so a long hotel name cannot push a row of
       cards out of alignment. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--accent-ink); text-decoration: none; }

.card-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem;
    font-size: var(--t-sm); color: var(--ink-500);
}
.card-meta svg { width: .95rem; height: .95rem; color: var(--ink-400); }

.card-text {
    font-size: var(--t-sm); color: var(--ink-600);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
    margin-top: auto; padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
}

.price { display: flex; flex-direction: column; line-height: 1.2; }
.price-was { font-size: var(--t-xs); color: var(--ink-400); text-decoration: line-through; }
.price-now { font-size: var(--t-lg); font-weight: 750; color: var(--accent-ink); letter-spacing: -.02em; }
.price-unit { font-size: var(--t-xs); color: var(--ink-500); font-weight: 500; }

/* A badge pinned over the photograph. */
.card-flag {
    position: absolute; top: .65rem; left: .65rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 700;
    color: var(--accent-ink);
    box-shadow: var(--sh-xs);
}
.card-flag-accent { background: var(--accent); color: #fff; }
.card-flag-deal { background: var(--danger); color: #fff; }

.card-fav {
    position: absolute; top: .65rem; right: .65rem; z-index: 2;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .92);
    border: 0; border-radius: var(--r-pill);
    color: var(--ink-500);
    box-shadow: var(--sh-xs);
    transition: color .15s var(--ease), transform .15s var(--ease);
}
.card-fav:hover { color: var(--danger); transform: scale(1.08); }

/* ---- The horizontal card used by search results ---- */
.card-row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
}
.card-row .card-media { aspect-ratio: auto; height: 100%; min-height: 200px; }
.card-row .card-body { padding: var(--sp-4) var(--sp-5); }
.card-row .card-aside {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
    border-left: 1px dashed var(--line);
    min-width: 200px; text-align: right;
}
@media (max-width: 860px) {
    .card-row { grid-template-columns: minmax(0, 1fr); }
    .card-row .card-media { aspect-ratio: 16 / 9; min-height: 0; }
    .card-row .card-aside { border-left: 0; border-top: 1px dashed var(--line); text-align: left; flex-direction: row; align-items: center; }
}

/* ---- The small square tile used for destinations and categories ---- */
.tile {
    position: relative;
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: var(--sh-sm);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.tile:hover img { transform: scale(1.06); }
.tile-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 27, 42, 0) 35%, rgba(15, 27, 42, .78));
}
.tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4); color: #fff; }
.tile-body h3 { color: #fff; font-size: var(--t-md); margin-bottom: .15rem; }
.tile-body p  { margin: 0; font-size: var(--t-xs); color: rgba(255, 255, 255, .82); }

/* ---- A plain content panel ---- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
.panel-accent { border-top: 3px solid var(--accent); }
.panel-soft { background: var(--accent-soft); border-color: var(--accent-line); }
.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
}
.panel-head h3, .panel-head h2 { margin: 0; font-size: var(--t-md); }

/* The feature block: icon, heading, one line. Used for "why book with us". */
.feature { display: flex; gap: var(--sp-3); align-items: flex-start; }
.feature-icon {
    flex: none; width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--r-md);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--t-md); margin-bottom: .2rem; }
.feature p  { margin: 0; font-size: var(--t-sm); color: var(--ink-500); }


/* ============================================================
   8  BADGES, CHIPS, RATINGS
   ============================================================ */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .55rem;
    border-radius: var(--r-xs);
    font-size: var(--t-xs); font-weight: 700;
    line-height: 1.4;
}
.badge-accent  { background: var(--accent-soft); color: var(--accent-ink); }
.badge-solid   { background: var(--accent); color: #fff; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: var(--surface-2); color: var(--ink-600); border: 1px solid var(--line); }

/* Filter chips: a row of removable, toggleable options. */
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .75rem;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 600;
    color: var(--ink-700);
    transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.chip[aria-pressed="true"], .chip.is-on {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Star rating. Drawn with a clipped gradient so a 4.3 shows as 4.3 rather
   than rounding to a whole star. */
.stars { display: inline-flex; gap: .1rem; color: var(--star); }
.stars svg { width: 1rem; height: 1rem; }

.score {
    display: inline-flex; align-items: center; gap: .4rem;
}
.score-box {
    display: grid; place-items: center;
    min-width: 2.4rem; padding: .25rem .45rem;
    background: var(--accent); color: #fff;
    border-radius: var(--r-xs) var(--r-xs) var(--r-xs) 2px;
    font-size: var(--t-sm); font-weight: 750;
}
.score-word { font-size: var(--t-sm); font-weight: 650; color: var(--ink-800); }
.score-count { font-size: var(--t-xs); color: var(--ink-500); }

/* Trust strip: the row of reassurances under a hero. */
.trust {
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
    align-items: center; justify-content: center;
}
.trust-item {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-600);
}
.trust-item svg { width: 1.15rem; height: 1.15rem; color: var(--accent); }


/* ============================================================
   9  HEADER AND NAVIGATION
   ============================================================ */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-md); }

/* The thin strip above the navigation: phone, email, agent login. */
.topbar {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .85);
    font-size: var(--t-xs);
}
.topbar .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); min-height: 36px;
}
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; align-items: center; gap: var(--sp-4); }
.topbar-links a { display: inline-flex; align-items: center; gap: .35rem; }
.topbar svg { width: .95rem; height: .95rem; }
@media (max-width: 720px) { .topbar { display: none; } }

.nav {
    display: flex; align-items: center; gap: var(--sp-4);
    min-height: var(--header-h);
}

.brand-mark { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand-mark img { height: 40px; width: auto; }
.brand-mark:hover { text-decoration: none; }
.brand-name { font-size: var(--t-lg); font-weight: 750; color: var(--brand-800); letter-spacing: -.02em; }
.brand-tag  { display: block; font-size: var(--t-xs); color: var(--ink-500); font-weight: 500; }

.nav-main { display: flex; align-items: center; gap: .15rem; margin-left: var(--sp-4); }

.nav-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .8rem;
    border-radius: var(--r-sm);
    font-size: var(--t-base); font-weight: 600;
    color: var(--ink-700);
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-link { white-space: nowrap; }
.nav-link svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--ink-400); transition: color .15s var(--ease); }
.nav-link:hover { color: var(--nav-accent, var(--brand-700)); background: var(--nav-soft, var(--brand-50)); text-decoration: none; }
.nav-link:hover svg { color: var(--nav-accent, var(--brand-600)); }

/* The current section is marked with its own module colour, so the accent
   system also tells you where you are. */
.nav-link[aria-current="page"] {
    color: var(--nav-accent, var(--brand-700));
    background: var(--nav-soft, var(--brand-50));
}
.nav-link[aria-current="page"] svg { color: var(--nav-accent, var(--brand-600)); }

.nav-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.nav-toggle { display: none; }

@media (max-width: 1024px) {
    .nav-main { display: none; }
    .nav-toggle { display: inline-grid; }
}

/* ---- Mega menu ---- */
.has-menu { position: relative; }
.mega {
    position: absolute; top: calc(100% + .5rem); left: 0;
    min-width: 560px;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index: 110;
}
.has-menu:hover .mega,
.has-menu:focus-within .mega,
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.mega h4 {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-400); margin-bottom: .6rem;
}
.mega a { display: block; padding: .3rem 0; font-size: var(--t-sm); color: var(--ink-700); }
.mega a:hover { color: var(--accent-ink); text-decoration: none; }
.mega-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--sp-4) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    font-size: var(--t-sm);
}

/* ---- Mobile drawer ---- */
.drawer {
    position: fixed; inset: 0 0 0 auto;
    width: min(340px, 86vw);
    background: var(--surface);
    box-shadow: var(--sh-xl);
    transform: translateX(100%);
    transition: transform .25s var(--ease-out);
    z-index: 200;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4); border-bottom: 1px solid var(--line);
}
.drawer-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .25rem; }
.drawer-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .75rem .5rem;
    border-radius: var(--r-sm);
    font-weight: 620; color: var(--ink-800);
}
.drawer-link svg { width: 1.2rem; height: 1.2rem; color: var(--ink-400); }
.drawer-link:hover { background: var(--surface-2); text-decoration: none; }

.scrim {
    position: fixed; inset: 0;
    background: rgba(15, 27, 42, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s;
    z-index: 150;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }


/* ============================================================
   10  HERO
   ============================================================ */

.hero {
    position: relative;
    color: #fff;
    background: var(--accent-grad);
    overflow: hidden;
    isolation: isolate;
}
.hero::after {
    /* A soft light source at the top right, so a flat gradient reads as a
       surface rather than a block of colour. The band's tile is a background
       layer on .hero itself, not here — see --ox-pattern-light. */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(60% 80% at 78% 12%, rgba(255, 255, 255, .28), transparent 60%);
}
.hero-media {
    position: absolute; inset: 0; z-index: -2;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(12, 58, 94, .88), rgba(12, 58, 94, .55) 55%, rgba(12, 58, 94, .35));
}

.hero-inner {
    position: relative;
    padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem);
}
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: var(--sp-3); }
.hero p  { color: rgba(255, 255, 255, .9); font-size: var(--t-lg); max-width: 56ch; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .75rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 650;
    color: #fff;
    margin-bottom: var(--sp-4);
}
/* An inline SVG carries no intrinsic size: without this it stretches to the
   pill's full height and swallows the label. */
.hero-eyebrow svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* The compact hero for listing and detail pages. */
.hero-slim .hero-inner { padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.hero-slim h1 { font-size: var(--t-2xl); max-width: none; }
.hero-slim p { font-size: var(--t-base); }

/* THE CENTRED HERO — the home page's.

   The headline and its line sit over the middle of the band with the search
   bar under them, which is the shape the agents desk uses and the reason the
   two now read as one product. The width caps stay: centred text that runs the
   full width of a 1200px band is a line nobody finishes. They are only
   re-centred, which a max-width alone will not do — an auto inline margin is
   what moves the box, and text-align is what moves the text inside it.

   The bar itself is NOT centred with them: its tabs are a left-hand rail of
   the panel below, and centring the row would leave the open tab floating over
   the middle of the panel's top edge instead of at its corner. */
.hero-centred .hero-inner { text-align: center; }
.hero-centred h1,
.hero-centred .lede,
.hero-centred p { margin-inline: auto; }
.hero-centred .hero-eyebrow { margin-inline: auto; }
.hero-centred .hero-search { text-align: left; }

/* The headline runs on ONE line here.

   .hero h1 is capped at 20ch, which is right for the sentence-length headings
   the product pages carry - a centred line that runs the width of the band is
   a line nobody finishes. The home page's is a short banner line, and 20ch
   broke it in half at "Yours to / Explore", which reads as two thoughts.

   The cap is lifted rather than replaced with a bigger number: the container
   already limits it, and a number here would only be a second thing to keep in
   step with the copy. text-wrap:balance keeps the break sensible on the narrow
   screens where it still has to happen; browsers that do not know it just wrap
   normally. */
.hero-centred h1 {
    max-width: none;
    text-wrap: balance;
}


/* The search widget overlapping the bottom edge of the hero. */
.hero-search { margin-top: var(--sp-5); margin-bottom: calc(var(--sp-6) * -1); }
.hero-search + * { padding-top: var(--sp-7); }


/* The live total on a hotel search card. Set against the muted "Live rates on
   your dates" it replaces, so the card's foot does not jump between the browse
   pages and the results page. */
.card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.card-price-k {
    font-size: var(--t-xs);
    color: var(--ink-500);
}
.card-price strong {
    font-size: var(--t-md);
    color: var(--accent-ink);
}

/* The stay a browse page's prices are for.

   It sits under the city heading and stays hidden until there is at least one
   price on the page: a legend for figures that are not there reads as a
   promise the page has not kept. The [hidden] rule is explicit because this is
   a flex row, and display:flex would otherwise beat the browser's own
   [hidden] { display: none }. */
.stay-note {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
    color: var(--ink-500);
}
.stay-note[hidden] {
    display: none;
}
.stay-note svg {
    flex: none;
    width: 1em;
    height: 1em;
    opacity: .7;
}
.stay-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.stay-note a:hover {
    color: var(--accent-ink);
}


/* ============================================================
   10b  DESTINATION HUB — continent, country, city

   A card per continent, and under them one country panel per continent shown
   by :target. No JavaScript is involved in the opening: the panels are always
   in the document and CSS decides which one is on screen, so the links inside
   a closed panel are still there for a crawler and the back button still
   closes what the last click opened.
   ============================================================ */

/* The tree's figures beside the heading. */
.stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat-pills li {
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--t-xs);
    color: var(--ink-500);
}
.stat-pills b { color: var(--ink-900); font-size: var(--t-base); }

.hub-continents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4);
}

.hub-continent {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    /* The continent's own two colours, set per card from core's region style
       so a continent looks the same here as on every other site in the
       group. */
    background: linear-gradient(150deg, var(--hc1), var(--hc2));
    color: #fff;
    text-decoration: none;
    box-shadow: var(--sh-md);
    transition: transform var(--ease), box-shadow var(--ease);
}
.hub-continent:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
    color: #fff;
}
/* The card the fragment is pointing at, so the panel below is never orphaned
   from the card that opened it. */
.hub-continent.is-active {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* The oversized ghost of the same mark, bottom right. Low contrast on
   purpose: it is texture, not a second icon to read. */
.hub-continent-mark {
    position: absolute;
    right: -14px;
    bottom: -18px;
    z-index: -1;
    opacity: .14;
    pointer-events: none;
}

.hub-continent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: var(--sp-2);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
}

.hub-continent-name {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: .01em;
}
.hub-continent-tag {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .82);
}

/* One row, clipped rather than wrapped: a continent with six wide flags must
   not make its card taller than the three beside it. */
.hub-continent-flags {
    display: flex;
    gap: 4px;
    overflow: hidden;
    margin-top: var(--sp-3);
}

/* Counts on the left, the call to action on the right, and NEVER wrapping:
   "12 countries - 58,784 hotels" is a couple of characters longer than the
   others, and letting it wrap dropped Asia's EXPLORE onto a second line while
   its neighbours kept theirs inline - four cards that no longer lined up. The
   counts shrink instead, and the call to action keeps its size. */
.hub-continent-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: nowrap;
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, .24);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .86);
}
.hub-continent-foot > span:first-child { min-width: 0; }
.hub-continent-cta { flex: none; }
.hub-continent-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.hub-continent-cta svg { width: .9rem; height: .9rem; }

/* --- the country panel ---------------------------------------------------
   Closed by default and opened by :target. display:none rather than a height
   or an opacity: a closed panel must cost nothing to lay out, and its flags
   must not be fetched until it is opened. */
.hub-panel { display: none; }
.hub-panel:target {
    display: block;
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--hc1);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

.hub-panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
}
.hub-panel-head h3 { margin: .15rem 0 .25rem; }
.hub-panel-head p  { margin: 0; }
.hub-panel .hub-continent-icon {
    margin: 0;
    color: #fff;
    background: linear-gradient(150deg, var(--hc1), var(--hc2));
    border-color: transparent;
}
.hub-back { margin-left: auto; }

.hub-countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.hub-country {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-800);
    text-decoration: none;
    transition: border-color var(--ease), background var(--ease);
}
.hub-country:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.hub-country-body { display: flex; flex-direction: column; min-width: 0; }
.hub-country-body strong {
    font-size: var(--t-base);
    /* Country names run long - "United Arab Emirates" in a 200px cell - and a
       wrapped name would push the cards out of step with each other. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hub-country-body small { font-size: var(--t-xs); color: var(--ink-500); }
.hub-country > svg {
    width: 1rem; height: 1rem;
    margin-left: auto;
    flex: none;
    color: var(--ink-400);
}

/* The flag images the shared helper emits. They come from a CDN and can fail,
   which the helper already handles by hiding the broken one - so the row has
   to read correctly with any number of them missing. */
.hs-flag {
    width: 26px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 27, 42, .12);
    flex: none;
}
.hub-continent-flags .hs-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}


/* ============================================================
   11  FOOTER
   ============================================================ */

/* The footer sets its own colours on a scoped selector, never on :root. A
   footer that redefines a global token wins on every page it appears on -
   which is how "solid" cards elsewhere on the site once turned transparent. */
.site-footer {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .72);
    font-size: var(--t-sm);
    /* No gap above it: a margin here showed the bare page background as a
       plain band between the patterned content and the footer. The last
       section's own padding is the breathing room. */
    margin-top: 0;
}
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: #fff; text-decoration: none; }

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--sp-6);
    padding-block: var(--sp-7);
}
.footer-brand img { height: 42px; width: auto; margin-bottom: var(--sp-3); }
.footer-brand p { color: rgba(255, 255, 255, .62); max-width: 40ch; }

.site-footer h4 {
    color: #fff; font-size: var(--t-sm); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: var(--sp-3);
}
.footer-links li { margin-bottom: .55rem; }

.footer-contact li {
    display: flex; gap: .55rem; margin-bottom: .6rem;
    color: rgba(255, 255, 255, .72);
}
.footer-contact svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .2rem; color: var(--brand-300); }

.footer-social { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.footer-social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--r-sm);
    transition: background-color .15s var(--ease);
}
.footer-social a:hover { background: var(--brand-600); }
.footer-social svg { width: 1.1rem; height: 1.1rem; }

.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .55);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

@media (max-width: 900px) {
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}


/* ============================================================
   12  BREADCRUMBS, PAGINATION, TABS
   ============================================================ */

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    font-size: var(--t-sm);
    color: var(--ink-500);
    padding-block: var(--sp-3);
}
.crumbs a { color: var(--ink-600); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.crumbs li + li::before {
    content: "/"; color: var(--ink-300);
}
.crumbs [aria-current="page"] { color: var(--ink-800); font-weight: 600; }

/* On a hero, the trail sits on the coloured background. */
.hero .crumbs { color: rgba(255, 255, 255, .75); }
.hero .crumbs a { color: rgba(255, 255, 255, .85); }
.hero .crumbs a:hover { color: #fff; }
.hero .crumbs li + li::before { color: rgba(255, 255, 255, .45); }
.hero .crumbs [aria-current="page"] { color: #fff; }

.pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .35rem;
    margin-top: var(--sp-6);
}
.pager a, .pager span {
    display: grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--t-sm); font-weight: 620;
    color: var(--ink-700);
}
.pager a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .is-gap { border: 0; background: transparent; color: var(--ink-400); }
/* A firmer edge and a little shadow, so the numbers read against the
   patterned page rather than melting into it. */
.pager a { border-color: var(--brand-300); box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-900) 10%, transparent); color: var(--brand-900); }
.pager a:hover { background: var(--brand-50); border-color: var(--brand-600); }
.pager [aria-current="page"] { box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }

.tabs {
    display: flex; gap: .25rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .7rem 1rem;
    border: 0; background: transparent;
    border-bottom: 2px solid transparent;
    font-size: var(--t-base); font-weight: 620;
    color: var(--ink-500);
    white-space: nowrap;
}
.tab:hover { color: var(--ink-900); }
.tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* Collapsible sections - FAQs, itinerary days, policy blocks. */
.accordion { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.accordion + .accordion { margin-top: .5rem; }
.accordion > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4);
    font-weight: 650; color: var(--ink-900);
    cursor: pointer;
    list-style: none;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
    content: ""; flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--ease);
}
.accordion[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion[open] > summary { border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.accordion-body { padding: var(--sp-4); }

/* The empty state, shown instead of a blank results area. */
.empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    background: var(--surface);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-md);
}
.empty svg { width: 52px; height: 52px; color: var(--ink-300); margin: 0 auto var(--sp-3); }
.empty h3 { margin-bottom: .35rem; }
.empty p { color: var(--ink-500); margin-bottom: var(--sp-4); }

/* A message banner - errors, confirmations, notices. */
.note {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: var(--t-sm);
}
.note svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .1rem; }
.note-success { border-left-color: var(--success); background: var(--success-soft); color: var(--success); }
.note-warning { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.note-danger  { border-left-color: var(--danger);  background: var(--danger-soft);  color: var(--danger); }

/* Loading placeholder. */
.skeleton {
    background: linear-gradient(90deg, var(--line-soft) 25%, var(--surface-2) 37%, var(--line-soft) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }


/* ============================================================
   13  UTILITIES
   ============================================================ */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center  { justify-content: center; }
.end     { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.items-end   { align-items: flex-end; }
.grow    { flex: 1; }
.none    { flex: none; }

.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.accent-text { color: var(--accent-ink); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hide { display: none !important; }
@media (max-width: 720px)  { .hide-sm { display: none !important; } }
@media (max-width: 1024px) { .hide-md { display: none !important; } }
@media (min-width: 1025px) { .hide-lg { display: none !important; } }

/* A horizontally scrolling row of cards on a phone, a grid on a desktop -
   used for "popular destinations" style rails. */
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1025px) {
    .rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
        overflow: visible;
    }
}


/* ============================================================
   14  MOTION AND PRINT
   ============================================================ */

/* Honour the system setting rather than animating regardless: motion
   sensitivity is a real accessibility need, and Lighthouse checks for it. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .card:hover { transform: none; }
    .tile:hover { transform: none; }
}

@media print {
    .site-header, .site-footer, .searchbar, .btn, .drawer, .scrim { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}


/* ============================================================
   15  ACCENT PREVIEW ON NAVIGATION
   ------------------------------------------------------------
   A nav link is outside the page's own [data-module] scope - it has to show
   the colour of the section it leads TO, not the one you are on. These pairs
   mirror the accent tokens above; keep them in step.
   ============================================================ */

[data-accent="brand"]      { --nav-accent: #0a5ca0; --nav-soft: #eff8ff; }
[data-accent="azure"]      { --nav-accent: #08598f; --nav-soft: #ecf6fe; }
[data-accent="teal"]       { --nav-accent: #0a5f58; --nav-soft: #e8f7f5; }
[data-accent="coral"]      { --nav-accent: #9a3412; --nav-soft: #fff2e9; }
[data-accent="indigo"]     { --nav-accent: #3c34c4; --nav-soft: #eef0ff; }
[data-accent="emerald"]    { --nav-accent: #035c43; --nav-soft: #e7f6ef; }
[data-accent="sage"]       { --nav-accent: #0c544e; --nav-soft: #e9f7f5; }
[data-accent="slate"]      { --nav-accent: #334155; --nav-soft: #f1f5f9; }

/* The same pairs as tab colours on the homepage search widget. */
.searchbar-tab[data-accent="brand"]   { --tab-accent: #0a5ca0; }
.searchbar-tab[data-accent="azure"]   { --tab-accent: #08598f; }
.searchbar-tab[data-accent="teal"]    { --tab-accent: #0a5f58; }
.searchbar-tab[data-accent="coral"]   { --tab-accent: #9a3412; }
.searchbar-tab[data-accent="indigo"]  { --tab-accent: #3c34c4; }
.searchbar-tab[data-accent="emerald"] { --tab-accent: #035c43; }
.searchbar-tab[data-accent="sage"]    { --tab-accent: #0c544e; }

.drawer-link[data-accent]:hover { background: var(--nav-soft); color: var(--nav-accent); }
.drawer-link[data-accent]:hover svg { color: var(--nav-accent); }


/* ==========================================================================
   COLOUR PICKER
   The control in the header that swaps the brand ramp. The ramps themselves
   are in themes.css; nothing here is themed, because the picker has to stay
   legible while the thing it changes is changing underneath it.
   ========================================================================== */

.theme-pick { position: relative; display: inline-flex; }

.theme-pop {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 60;
    width: 15.5rem;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}

/* Anchored to the right edge of the button, so on a narrow viewport the panel
   opens inward instead of off the side of the screen. */
@media (max-width: 30rem) {
    .theme-pop { right: -.5rem; width: 13.5rem; }
}

.theme-pop[hidden] { display: none; }

.theme-pop-head {
    margin: 0;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--ink-900);
}

.theme-pop-sub {
    margin: .125rem 0 var(--sp-3);
    font-size: .8125rem;
    color: var(--ink-500);
}

.theme-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.theme-swatch {
    /* --sw is the theme's own --brand-600, printed inline by the template. */
    width: 100%;
    aspect-ratio: 1;
    min-height: 2rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background: var(--sw, var(--brand-600));
    box-shadow: inset 0 0 0 1px rgba(15, 27, 42, .12);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.theme-swatch:hover { transform: translateY(-1px); }

.theme-swatch:focus-visible {
    outline: 2px solid var(--ink-900);
    outline-offset: 2px;
}

/* The chosen one carries a ring in the page ink rather than a tick: a tick
   needs a contrast decision against nine different backgrounds, and on the
   darker ramps a white one disappears. */
.theme-swatch[aria-pressed="true"] {
    border-color: var(--surface);
    box-shadow: 0 0 0 2px var(--ink-900), inset 0 0 0 1px rgba(15, 27, 42, .12);
}

@media (prefers-reduced-motion: reduce) {
    .theme-swatch { transition: none; }
    .theme-swatch:hover { transform: none; }
}


/* ==========================================================================
 THE PATTERNED GROUND AND THE CREST

 The crest is lifted verbatim from sites/desk/assets/css/agents.css - the
 stepped merlon fringe used where a dark band meets the content - so its
 geometry is identical rather than redrawn by eye.

 The GROUND is the same eight-point girih star the panel uses, lifted with it
 so the two products share one texture.

 They are drawn in BLACK and used as a MASK, never as a coloured background:
 a data URI cannot read a CSS variable, so tinting one any other way would mean
 a near-identical copy of the blob per theme, and another every time a theme is
 added. Masked, the fill is just var(--accent) and it follows the chosen colour
 for free.
 ========================================================================== */
:root {
    --ox-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='%23000' stroke-width='1.05'%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='%23000'%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");
    /* The same tile drawn light, for the DARK bands: those paint a gradient
       already, so the tile cannot be masked there and goes on as a real
       background layer with the colour baked in. Kept beside its twin so
       the two are edited together. */
    --ox-pattern-light: 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='%23ffffff' stroke-opacity='0.09' stroke-width='1.05'%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='%23ffffff' fill-opacity='0.09'%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");
    --ox-crest: 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='%23000'/%3E%3C/svg%3E");
    /* THE HERO'S EDGE: a row of pointed (ogee) arches. --ox-arch is the
       filled shape, used as the mask; --ox-arch-line is the same outline
       stroked in gold and laid over it, and the mask trims the outer half
       of the stroke so a hairline sits exactly on the arches' edge. Gold is
       not a theme colour, so baking it into the URI costs nothing. */
    --ox-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0,16 C4,16 6,14 8,12 C11,8 15,5 18,0 C21,5 25,8 28,12 C30,14 32,16 36,16 L36,18 L0,18 Z' fill='%23000'/%3E%3C/svg%3E");
    --ox-arch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0,16 C4,16 6,14 8,12 C11,8 15,5 18,0 C21,5 25,8 28,12 C30,14 32,16 36,16' fill='none' stroke='%23e2b04a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* THE GROUND, AND IT HAS TO BE CONTINUOUS.

   Putting this on main alone was not enough. Unlike the panel, which has one
   flat content area, this site is built from full-width bands - .section-soft
   and .section-surface - and each paints its own opaque background OVER the
   tile. The pattern survived only in the gaps between them, which read as a
   stray textured strip rather than a ground.

   So every band carries it too. Same tile, same size, same opacity, so the
   seams do not show and the page has one continuous ground exactly as the
   panel does. */
main,
.section-soft,
.section-surface {
    position: relative;
    isolation: isolate;
}
main::before,
.section-soft::before,
.section-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--accent);
    /* The panel's own value. Lower and the stars disappear against a white
       band; higher and they start competing with the content. */
    opacity: .11;
    -webkit-mask-image: var(--ox-pattern);
            mask-image: var(--ox-pattern);
    -webkit-mask-size: 26px 26px;
            mask-size: 26px 26px;
}

/* The edge where the hero's dark band meets the page: the stepped merlon
   crest, in the page colour. Masked in the page background, so it reads as
   the content rising into the band rather than as a decoration sitting on top
   of it, and follows the theme's canvas colour. */
.hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    /* 14px, down from 22: at full size the steps read as a heavy border
       rather than a finish on the band's edge. */
    height: 14px;
    z-index: 2;
    pointer-events: none;
    background: var(--canvas);
    -webkit-mask: var(--ox-crest) 0 100% / auto 14px repeat-x;
            mask: var(--ox-crest) 0 100% / auto 14px repeat-x;
}

/* A soft light rising off the steps into the band, so the edge reads as lit
   rather than cut out. Its own layer, because anything on .hero::before is
   trimmed to the steps by the mask. */
.hero-inner::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 100vw;
    height: 70px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}


/* ==========================================================================
   DARK CHROME
   The header carries the brand colour, so the strip above it, the bar itself
   and the hero read as one frame rather than a white band wedged between two
   coloured ones — which is what the partner panel does with its topbar and
   rail.

   Everything below is token-driven, so the chrome follows whichever theme is
   chosen: navy by default, claret under Claret. Nothing here names a colour.
   ========================================================================== */

.site-header {
    background: var(--brand-800);
    border-bottom-color: rgba(255, 255, 255, .10);
}

/* The blur was there to soften white-on-white as content scrolled under a
   translucent bar. On a solid dark bar it only muddies the logo. */
.site-header { backdrop-filter: none; }

.site-header.is-stuck { box-shadow: 0 6px 18px rgba(15, 27, 42, .28); }

.brand-name { color: #fff; }
.brand-tag  { color: rgba(255, 255, 255, .62); }

.nav-link { color: rgba(255, 255, 255, .84); }
.nav-link svg { color: rgba(255, 255, 255, .58); }

/* The hover and current states cannot use the light tints any more: --brand-50
   on --brand-800 is invisible. A white wash at low alpha reads on every theme
   without needing a per-theme value. */
.nav-link:hover,
.nav-link[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}
.nav-link:hover svg,
.nav-link[aria-current="page"] svg { color: #fff; }

/* The module accent still marks the current section, but as a rule underneath
   rather than as text colour — a coral word on navy fails contrast, a coral
   underline does not have to carry it. */
.nav-link[aria-current="page"] {
    box-shadow: inset 0 -2px 0 0 var(--nav-accent, var(--brand-300));
}

/* Header buttons, on the dark ground. */
.site-header .btn-ghost { color: rgba(255, 255, 255, .84); }
.site-header .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.site-header .btn-ghost svg { color: currentColor; }

.site-header .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}
.site-header .btn-outline:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .62);
    color: #fff;
}

/* Primary stays the accent, but lifted off the bar: --brand-600 on
   --brand-800 is two neighbouring steps and the button disappears. */
.site-header .btn-primary {
    background: #fff;
    color: var(--brand-800);
    border-color: #fff;
}
.site-header .btn-primary:hover {
    background: rgba(255, 255, 255, .88);
    color: var(--brand-900);
}

/* The hero now meets the header directly, so its own top edge is redundant. */
.hero { border-top: 0; }


/* The dark bands carry the tile too, so the texture does not stop at the
   crest. Layered over --accent-grad rather than replacing it, and the gradient
   stays a variable so a theme still re-colours the band. */
/* THE HERO WEARS THE SAME SHEET AS THE GROUND, and does it without a second
   image file.

   The doodle tile is ink-as-alpha, so on a dark band it has to be MASKED, not
   laid on as a background — a background image would need a white-ink copy of
   the same 700px raster, a second download for a band the eye crosses in a
   second. The element itself cannot be masked because it paints the gradient,
   and ::before is the crest, so ::after does it. The soft light source that
   used to live in ::after moves up here as a background layer, which it can be
   because it is a gradient. */
.hero {
    background-image: var(--ox-pattern-light), var(--accent-grad);
    background-size: 26px 26px, auto;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, 0 0;
}


/* ==========================================================================
   NAVIGATION — ICON OVER LABEL, IN THE PRODUCT'S OWN COLOUR
   The arrangement the live site uses: the full lockup on the left, then each
   product as a coloured mark with its name beneath.

   The mark colours are the ONE place the per-product palette survives. They
   are deliberate: people recognise the purple plane and the pink bed, and a
   row of six identical navy glyphs is materially harder to scan. Everything
   else on the page stays the brand colour.
   ========================================================================== */

.brand-mark img {
    height: 52px;
    width: auto;
    /* The lockup is wider than it is tall and carries its own padding, so it
       is sized on height and left to find its width. */
}

.nav-main { gap: .35rem; }

.nav-link {
    /* Column, not row: the icon goes above the word. */
    flex-direction: column;
    gap: .3rem;
    padding: .5rem .75rem;
    min-width: 4.75rem;
    text-align: center;
    line-height: 1.15;
}

.nav-link-mark {
    display: grid;
    place-items: center;
    height: 1.5rem;
}

/* --mark is set inline per module; --nav-accent is the fallback for one that
   has none, and a bare currentColor for anything outside the module nav. */
.nav-link svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--mark, var(--nav-accent, currentColor));
    /* The marks are filled silhouettes, not strokes - see iconSolid() in
       partials/icons.php. stroke-width here did nothing but mislead. */
}

/* The colour is the resting state AND the hover state — dimming it on hover
   would make the thing being pointed at the least visible mark in the row. */
.nav-link:hover svg,
.nav-link[aria-current="page"] svg { color: var(--mark, #fff); }

.nav-link-text { font-size: .875rem; font-weight: 650; }

/* Narrower viewports: the labels go before the marks do. A row of six named
   icons does not fit, but six recognisable marks still do. */
@media (max-width: 68rem) {
    .nav-link { min-width: 0; padding: .5rem .55rem; }
    .nav-link-text { display: none; }
}

/* The bar needs height for a stacked nav item and a lockup: --header-h was set
   for a single row of text links, and at that height the logo is squeezed and
   the marks crowd their labels. */
.nav { min-height: 5.5rem; }

.brand-mark img { height: 60px; }

/* Centred between the lockup and the account controls, the way the live site
   sits it, rather than tucked against the logo. auto on both sides; .nav-end
   keeps its own auto so the three parts balance. */
.nav-main { margin-inline: auto; }

.nav-link { min-width: 5.25rem; }
.nav-link svg { width: 1.7rem; height: 1.7rem; }
.nav-link-mark { height: 1.7rem; }

/* Below the breakpoint the bar goes back to one row: a 5.5rem header on a
   phone is most of the screen before anything is read. */
@media (max-width: 68rem) {
    .nav { min-height: var(--header-h); }
    .brand-mark img { height: 42px; }
}

/* TRUE CENTRING, AND A SMALLER LOCKUP.
   margin-inline:auto only centred the nav BETWEEN its neighbours, and the
   account controls are much wider than the logo, so the row sat left of centre.
   A three-column grid with equal 1fr sides puts the marks on the page's centre
   line whatever the two ends happen to weigh.

   Only above the breakpoint: below it the nav is hidden and the burger takes
   over, where a grid would leave a gap where the marks used to be. */
@media (min-width: 68.0625rem) {
    .nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .brand-mark { justify-self: start; }
    .nav-main   { justify-self: center; margin-inline: 0; }
    .nav-end    { justify-self: end; margin-left: 0; }
}

.brand-mark img { height: 44px; }
.nav { min-height: 4.75rem; }

/* The labels sit under a 1.7rem mark, so they do not need to carry the item on
   their own — smaller keeps the mark the thing you scan and the row tighter. */
.nav-link-text { font-size: .75rem; letter-spacing: .01em; }
.nav-link { min-width: 4.9rem; gap: .25rem; }


/* ==========================================================================
   HOTEL RESULTS — the agents desk's filter rail and results head
   The rail groups each filter under an uppercase key with its icon; the star
   rating is a column of pill-shaped checkboxes, each with the city's count on
   the right. The head row reads the search back: count, stay, party.
   ========================================================================== */

.hfilters { padding: var(--sp-5); }
.hfilters .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 var(--sp-4); margin: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.hfilters .panel-head h2 {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase;
}
.hfilters .panel-head svg { width: 1rem; height: 1rem; color: var(--brand-600); }

.hfilters-group { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.hfilters-group:last-of-type { border-bottom: 0; }
.hfilters-group > .label {
    display: flex; align-items: center; gap: .45rem;
    font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-700); margin-bottom: .6rem;
}
.hfilters-group > .label svg { width: .95rem; height: .95rem; color: var(--brand-600); flex: none; }

.hstars { display: grid; gap: .5rem; }
.hstar {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem;
    border: 1px solid var(--ink-200); border-radius: var(--r-pill);
    font-size: var(--t-sm); color: var(--ink-800);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.hstar:hover { border-color: var(--ink-300); }
.hstar input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-700); flex: none; }
.hstar span { flex: 1; }
.hstar b { font-weight: 500; color: var(--ink-500); }
.hstar.is-on,
.hstar:has(input:checked) { border-color: var(--brand-700); background: var(--brand-50); }

.hprice { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.hprice span { color: var(--ink-400); }
.hfilters-note { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }

/* The count beside "Filters" once something is narrowing the list. */
.hfilters-count {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; margin-left: .4rem; padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--accent); color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 1;
}

/* Amenities: ticks with the count right-aligned, scrolling past twelve rows'
   worth so the rail does not outgrow the grid beside it. Names wrap rather
   than truncate - an amenity nobody can read is one nobody will tick. */
.hfac-list {
    display: flex; flex-direction: column; gap: 1px;
    max-height: 300px; overflow-y: auto; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.hfac-item {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 -6px; padding: 6px;
    border-radius: 7px;
    font-size: var(--t-sm); cursor: pointer;
    transition: background-color .12s var(--ease);
}
.hfac-item:hover { background: var(--brand-50); }
.hfac-item input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--brand-700); }
.hfac-name { flex: 1 1 auto; min-width: 0; line-height: 1.35; color: var(--ink-700); }
.hfac-item input:checked ~ .hfac-name { font-weight: 700; color: var(--ink-900); }
.hfac-n { flex: none; font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--ink-500); }

.hresults-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: .6rem 1rem;
    margin-bottom: var(--sp-5);
}
.hresults-head:has(+ .hresults-note) { margin-bottom: .5rem; }
/* Count on the left, the map and layout controls on the right - the city
   pages' results row, which has no stay chips to centre. */
.hresults-head.is-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.hresults-head.is-split > .hview-bar { margin-left: 0; }
.hresults-aside { font-size: var(--t-sm); color: var(--ink-500); margin-left: .35rem; }
.hresults-head.is-split + .stay-note { margin: -.6rem 0 var(--sp-4); }
/* The city crown's one sentence, at reading width. */
.city-lede { max-width: 62ch; font-size: var(--t-md); line-height: 1.6; opacity: .92; }
.hresults-count { margin: 0; font-size: var(--t-lg); color: var(--ink-700); }
.hresults-count strong { color: var(--ink-900); }
.hresults-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hresults-head > .hview-bar { justify-self: end; margin-left: 0; }
.hresults-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: var(--t-sm); color: var(--ink-700);
}
.hresults-chip svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.hresults-note { margin: 0 0 var(--sp-5); font-size: var(--t-xs); color: var(--ink-500); }
.hresults-chip { white-space: nowrap; }

/* Too narrow for three columns: the count and the controls share the top
   line, and the stay and party drop to a line of their own. */
@media (max-width: 1100px) {
    .hresults-head { grid-template-columns: minmax(0, 1fr) auto; }
    .hresults-chips { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (max-width: 560px) {
    .hresults-head { grid-template-columns: minmax(0, 1fr); }
    .hresults-head > .hview-bar { justify-self: start; }
}

/* ---- Show on map, and Grid / List --------------------------------------
   The agents desk's results head (sites/desk/assets/css/hotels.css) in this
   site's tokens. components/hotel-view.php draws the controls, and
   assets/js/hotel-map.js fills the map box on the first click. */

.hview-bar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-left: auto; }

.hmap-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    height: 36px; padding: 0 .95rem;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface);
    font: inherit; font-size: var(--t-sm); font-weight: 600;
    color: var(--ink-700); white-space: nowrap; cursor: pointer;
    transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.hmap-toggle svg { width: .95rem; height: .95rem; }
.hmap-toggle:hover { border-color: var(--accent); color: var(--accent); }
.hmap-toggle.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
.hmap-toggle:disabled { opacity: .6; cursor: wait; }

/* One pill holding two links, the open one filled. */
.hview {
    display: inline-flex; padding: 3px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface-2);
}
.hview a {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 30px; padding: 0 .9rem;
    border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-500);
}
.hview a svg { width: .95rem; height: .95rem; }
.hview a:hover { color: var(--ink-900); text-decoration: none; }
.hview a.is-on { background: var(--accent); color: #fff; }

/* The map, above the cards it plots. */
.hmapbox {
    position: relative;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
}
.hmapbox[hidden] { display: none; }
.hmapbox-canvas { height: 440px; }
.hmapbox-none {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
    margin: 0; padding: .6rem .9rem;
    background: var(--surface); border-top: 1px solid var(--line);
    font-size: var(--t-sm); color: var(--ink-500);
}
@media (max-width: 640px) { .hmapbox-canvas { height: 320px; } }

/* The popup is Leaflet's own box; only what goes inside it is ours. */
.hmap-pop { display: grid; gap: 4px; min-width: 160px; }
.hmap-pop img { display: block; width: 100%; height: 88px; margin-bottom: 4px; border-radius: 8px; object-fit: cover; }
.hmap-pop b { font-size: .88rem; color: var(--ink-900); }
.hmap-pop span { font-size: .8rem; font-weight: 600; color: var(--accent-ink); }
.hmap-pop a { font-size: .8rem; font-weight: 600; }

/* The card's own map button - a link in look, a button in behaviour. It sits
   above .card-link::after, which otherwise makes the whole card one link. */
.card-map {
    position: relative; z-index: 2;
    padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; white-space: nowrap;
    color: var(--accent); cursor: pointer;
}
.card-map:hover { text-decoration: underline; }

/* ---- The hotel card ---------------------------------------------------
   zaereen.com/hotels/'s product card (.z-story.is-product in
   sites/zaereen/assets/css/zaereen.css) in this site's tokens, so it takes
   the serving brand's colours: photograph with a flag and a star plate, the
   name centred over a hairline, a three-fact strip, a tinted foot. */

/* Three across, as zaereen's city pages (.z-grid-3) have it, whatever the
   screen: a fixed count rather than auto-fill, which put two on a laptop and
   four on a wide desktop. Two on a tablet, one on a phone. List view sets its
   own single column (.grid.is-list outranks this). */
.grid-hotels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1080px) { .grid-hotels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 640px)  { .grid-hotels { grid-template-columns: minmax(0, 1fr); } }

/* A border that reads, in the theme's own colour: .card's --line is almost
   white and left the cards floating on the page. Deepens on hover, as
   zaereen's card does with its gold. */
.card-hotel { border-color: var(--brand-200); box-shadow: var(--sh-xs); }
.card-hotel:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: var(--sh-md); }

.hcard-pic {
    aspect-ratio: auto;
    height: 180px;
    border-bottom: 2px solid var(--accent);
}
.card-hotel:hover .hcard-pic img { transform: none; }

/* Both plates carry their own dark ground: a light badge would sit on
   whatever happens to be behind it in the photograph. */
.hcard-flag,
.hcard-rate {
    position: absolute; top: 10px; z-index: 2;
    border-radius: 6px;
    background: rgba(15, 27, 42, .62);
    backdrop-filter: blur(3px);
    line-height: 0;
}
.hcard-flag { left: 10px; padding: 3px; }
.hcard-flag img { display: block; width: 30px; height: 20px; border-radius: 3px; object-fit: cover; }
.hcard-rate { right: 10px; display: inline-flex; gap: 2px; padding: 6px 8px; color: #fbbf24; }
.hcard-rate svg { width: 12px; height: 12px; }

.hcard-body { gap: 0; padding: 14px 14px 10px; }

/* Centred, uppercase, over a hairline. Two lines, clamped AND reserved, so a
   one-line name does not sit higher than a two-line one beside it and knock
   the row below out of line across the grid. */
.hcard-name {
    margin: 0 0 11px; padding-bottom: 11px;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; text-align: center;
    color: var(--brand-900);
    line-height: 1.3; min-height: 2.6em;
}

.hcard-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.hcard-stats > div { min-width: 0; text-align: center; }
.hcard-stats .v {
    display: flex; align-items: flex-start; justify-content: center; gap: 4px;
    min-width: 0; color: var(--ink-900);
}
.hcard-stats .v svg { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 2px; color: var(--accent); }
.hcard-stats .v b { font-size: .75rem; font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.hcard-stats small {
    display: block; margin-top: 2px;
    font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-500);
}

/* One quiet line: the address, cut to fit, and the map button at its end. */
.hcard-addr {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 10px 0 0; min-width: 0;
    font-size: .6875rem; color: var(--ink-500);
}
.hcard-addr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-addr .card-map { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.hcard-addr .card-map svg { width: 12px; height: 12px; }

.hcard-text { display: none; }

.hcard-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding: 11px 14px;
    /* A band that reads as one, as zaereen's cream foot does: --accent-soft
       is the ramp's palest step and all but vanished against the white card. */
    border-top: 1px solid var(--brand-200);
    background: var(--brand-100);
}
.hcard-foot .card-price-k {
    font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-900);
}
.hcard-foot .card-price strong { margin-top: 2px; font-size: 1.05rem; font-weight: 750; color: var(--ink-900); font-variant-numeric: tabular-nums; }
/* "On dates" is NOT a price and is not dressed as one: lighter, smaller, muted. */
.hcard-foot .card-price.is-none b { margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--ink-600); }
.hcard-go { flex: 0 0 auto; padding: .45rem .9rem; font-size: .8125rem; }

/* The destination page's Refine rail. */
.refine { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 1rem; padding: 1.25rem; border-color: var(--brand-200); }
.refine-h {
    margin: 0; padding-bottom: .8rem; border-bottom: 1px solid var(--brand-200);
    font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700);
}
.refine-f { display: grid; gap: .45rem; margin: 0; }
.refine-k { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.refine .input, .refine .select { height: 2.9rem; background: var(--brand-50); border-color: var(--brand-200); }
.refine-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* The holiday package card: the hotel card, with a duration plate for the
   stars, a Cities line and two actions in the foot. */
.pkg-plate { padding: 6px 10px; font-size: .75rem; font-weight: 700; line-height: 1; color: #fde68a; letter-spacing: .02em; }
.pkg-cities {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem;
    margin: .9rem 0 0; font-size: .8125rem; color: var(--ink-700);
}
.pkg-cities-k { font-weight: 700; color: var(--brand-700); }
.pkg-cities i { font-style: normal; color: var(--brand-300); }
.pkg-acts { display: inline-flex; gap: .45rem; flex: none; }
/* Above the card's stretched title link, so Enquiry is its own target. */
.pkg-enq { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; font-size: .8125rem; background: var(--surface); }
.pkg-enq svg { width: .95rem; height: .95rem; }
.card-pkg .hcard-foot .card-price strong { font-size: 1.1rem; }

/* List view: the same card on its side - picture left, the hotel in the
   middle, the price and the button in a column on the right - one per row,
   so the address and the description have the width to be read. */
.grid.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.grid.is-list .card-hotel { flex-direction: row; align-items: stretch; }
.grid.is-list .hcard-pic {
    flex: 0 0 240px; height: auto; min-height: 170px;
    border-bottom: 0; border-right: 2px solid var(--accent);
}
.grid.is-list .hcard-pic img { position: absolute; inset: 0; }
.grid.is-list .hcard-body { flex: 1 1 auto; min-width: 0; padding: 14px 18px; }
.grid.is-list .hcard-name { min-height: 0; text-align: left; }
.grid.is-list .hcard-stats { grid-template-columns: repeat(3, max-content); gap: 26px; }
.grid.is-list .hcard-stats > div { text-align: left; }
.grid.is-list .hcard-stats .v { justify-content: flex-start; }
.grid.is-list .hcard-addr { justify-content: flex-start; }
.grid.is-list .hcard-addr span { white-space: normal; }
.grid.is-list .hcard-text { display: -webkit-box; margin-top: 8px; }
.grid.is-list .hcard-foot {
    flex: 0 0 190px; flex-direction: column; justify-content: center; gap: 12px;
    margin-top: 0; text-align: center;
    border-top: 0; border-left: 1px solid var(--brand-200);
}
.grid.is-list .hcard-foot .card-price { align-items: center; }

@media (max-width: 780px) {
    /* A 260px photograph beside a squeezed body reads worse than the grid
       card on a phone, so below this the row goes back to a stacked card. */
    .grid.is-list .card-hotel { flex-direction: column; }
    .grid.is-list .hcard-pic { flex-basis: auto; height: 180px; min-height: 0; border-right: 0; border-bottom: 2px solid var(--accent); }
    .grid.is-list .hcard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .grid.is-list .hcard-foot { flex-basis: auto; flex-direction: row; margin-top: auto; border-left: 0; border-top: 1px solid var(--brand-200); }
}


/* ==========================================================================
   HOTEL PAGE — the agents desk's hotel page on the public site
   A crown carrying the stay in a facts strip, tabbed panes on the left and
   the "Book your stay" panel on the right. Tints are per-fact, as on the
   desk, so each tile is recognisable at a glance.
   ========================================================================== */

.hotel-crown .hero-inner { padding-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
.hotel-crown h1 { max-width: none; font-size: var(--t-2xl); }
.hotel-crown-sub { display: grid; gap: .3rem; margin: 0 0 var(--sp-5); font-size: var(--t-sm); opacity: .92; }
.hotel-crown-sub > div { display: flex; gap: .45rem; align-items: baseline; }
.hotel-crown-sub dt { flex: none; font-weight: 700; }
.hotel-crown-sub dd { margin: 0; min-width: 0; }
.hotel-crown-stars { color: #fbbf24; letter-spacing: .1em; }

.hotel-facts {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.hotel-fact {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-md);
    color: #fff;
}
.hotel-fact-ico {
    display: grid; place-items: center; flex: none;
    width: 2.1rem; height: 2.1rem; border-radius: .6rem;
    background: var(--tile); color: #fff;
}
.hotel-fact-ico svg { width: 1.05rem; height: 1.05rem; }
.hotel-fact-k { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.hotel-fact strong { display: block; font-size: var(--t-sm); line-height: 1.3; }

/* The facts strip under the crown - zaereen.com's hotel page: one light band,
   the tiles in a row split by hairlines, each label in its own tint and the
   value in ink. Wraps to two or three per line on a narrow screen rather than
   scrolling sideways, so every fact stays in view. */
.hotel-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-xs);
}
.hotel-strip-row {
    display: flex; flex-wrap: wrap; align-items: stretch;
    padding-block: .9rem;
}
.hotel-strip-item {
    display: flex; align-items: center; gap: .7rem;
    flex: 1 1 auto; min-width: 0;
    padding: .35rem 1.25rem;
    border-left: 1px solid var(--line);
}
.hotel-strip-item:first-child { padding-left: 0; border-left: 0; }
.bk-strip-stars { color: #d97706; font-size: .8em; letter-spacing: .06em; white-space: nowrap; }
.hotel-strip-ico {
    display: grid; place-items: center; flex: none;
    width: 2.3rem; height: 2.3rem; border-radius: .7rem;
    background: color-mix(in srgb, var(--tile) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tile) 26%, var(--surface));
    color: var(--tile);
}
.hotel-strip-ico svg { width: 1.05rem; height: 1.05rem; }
.hotel-strip-k {
    display: block;
    font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tile);
}
.hotel-strip-item strong {
    display: block; margin-top: 1px;
    font-size: var(--t-base); font-weight: 600; line-height: 1.3;
    color: var(--ink-900);
    overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
    .hotel-strip-row { gap: .75rem 0; }
    .hotel-strip-item { flex: 1 1 33%; }
}
@media (max-width: 640px) {
    .hotel-strip-item { flex: 1 1 50%; padding: .35rem .75rem; }
    .hotel-strip-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---- The guest form, as zaereen.com's: one card per room - a tinted head
   band with the room, the party and the lead guest's contact, then the
   guests as table rows under a labelled head - and the room's inclusions and
   cancellation terms as cards beneath. ---- */
.bk-room {
    margin-bottom: var(--sp-5);
    border: 1px solid var(--brand-200); border-radius: var(--r-lg);
    background: var(--surface); overflow: hidden;
}
.bk-room-band {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
    padding: 1.1rem 1.4rem;
    /* A band that reads as one, as zaereen.com's cream head does: the ramp's
       palest step all but vanished against the white table under it. */
    background: linear-gradient(180deg, var(--brand-100), color-mix(in srgb, var(--brand-100) 65%, var(--brand-50)));
    border-bottom: 1px solid var(--brand-300);
}
.bk-room-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-bottom: .35rem; }
.bk-room-party { font-size: var(--t-sm); color: var(--ink-600); }
.bk-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .9rem; border-radius: var(--r-pill);
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid var(--brand-200); background: var(--surface); color: var(--brand-800);
}
.bk-tag svg { width: .9rem; height: .9rem; }
.bk-tag.is-lead  { background: #e7f3ec; border-color: #b7d8c3; color: #166534; }
.bk-tag.is-adult { background: color-mix(in srgb, var(--brand-100) 60%, var(--surface)); color: var(--brand-800); }
.bk-tag.is-child { background: #fef3c7; border-color: #fde68a; color: #92400e; }

.bk-room-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .9rem; flex: 1 1 520px; }
.bk-field { display: grid; gap: .4rem; min-width: 0; margin: 0; }
.bk-k {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700);
}
.bk-k svg { width: .9rem; height: .9rem; }
.bk-k b, .bk-guests-head b { color: #b91c1c; }
.bk-room .input, .bk-room .select { height: 2.9rem; border-color: var(--brand-200); background: var(--surface); }

/* Mobile: flag + code, then the number, as one box. */
.bk-phone2 {
    display: flex; align-items: stretch; height: 2.9rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-sm); overflow: hidden; background: var(--surface);
}
.bk-phone2:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.bk-isd {
    position: relative; display: inline-flex; align-items: center; gap: .4rem; flex: none;
    padding: 0 .7rem; background: var(--brand-100); border-right: 1px solid var(--brand-200);
}
.bk-isd img { display: block; width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.bk-isd b { font-size: var(--t-sm); color: var(--ink-900); }
.bk-isd svg { width: .75rem; height: .75rem; color: var(--ink-500); }
.bk-isd select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.bk-phone2 .input { flex: 1; min-width: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.bk-phone2 .input:focus { box-shadow: none; }

/* Guests: a labelled head, then one row per guest, split by dashed rules. */
.bk-guests { padding: 1rem 1.4rem 1.2rem; }
.bk-guests-head, .bk-guest-row {
    display: grid; align-items: center; gap: .75rem;
    grid-template-columns: 9rem 6.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
}
.bk-guests.no-pan .bk-guests-head, .bk-guests.no-pan .bk-guest-row { grid-template-columns: 9rem 6.5rem minmax(0, 1fr) minmax(0, 1fr); }
.bk-guests-head {
    padding-bottom: .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--brand-200);
    font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700);
}
.bk-guest-row { padding: .75rem 0; }
.bk-guest-row + .bk-guest-row { border-top: 1px dashed var(--brand-200); }
.bk-who2 { display: grid; gap: .2rem; justify-items: start; }
.bk-who2 em { font-style: normal; font-size: var(--t-xs); color: var(--ink-500); }
.bk-pan { text-transform: uppercase; letter-spacing: .06em; }
.bk-na { color: var(--ink-400); }

/* What is included, and Cancellation, as their own cards. */
.bk-info {
    margin-bottom: var(--sp-4); padding: 0 1.4rem 1.1rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-lg); background: var(--surface);
    overflow: hidden;
}
/* The heading is the same tinted band the room cards open with, bled to the
   card's edges, so all three cards on the page read as one family. */
.bk-info-h {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 -1.4rem 1rem; padding: .95rem 1.4rem;
    background: linear-gradient(180deg, var(--brand-100), color-mix(in srgb, var(--brand-100) 65%, var(--brand-50)));
    border-bottom: 1px solid var(--brand-300);
    font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700);
}
.bk-info-h svg { width: 1.05rem; height: 1.05rem; color: #15803d; }
.bk-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bk-dots li { position: relative; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--ink-800); }
.bk-dots li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--brand-400); }
.bk-cancel { margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-sm); }
.bk-cancel.is-ok { background: #ecf7f0; border: 1px solid #b7d8c3; color: #166534; }
.bk-cancel.is-no { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.bk-cancel-t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.bk-cancel-t th {
    padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--brand-200);
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600);
}
.bk-cancel-t td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink-800); }
.bk-cancel-t th:last-child, .bk-cancel-t td:last-child { text-align: right; }
.bk-foot-note { display: flex; gap: .45rem; margin: 0 0 var(--sp-5); font-size: var(--t-xs); color: var(--ink-500); }
.bk-foot-note svg { flex: none; width: .95rem; height: .95rem; margin-top: .05rem; }

@media (max-width: 900px) {
    .bk-room-contact { grid-template-columns: minmax(0, 1fr); }
    .bk-guests-head { display: none; }
    .bk-guest-row, .bk-guests.no-pan .bk-guest-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bk-who2 { grid-column: 1 / -1; }
}

/* One border for every card in the booking steps - rooms, what is included,
   cancellation, the summary beside them, and the review/confirmation cards -
   a step deeper than the hairline they had, with a soft shadow, so each card
   stands off the patterned page. Placed after the rules it overrides. */
.bk-room,
.bk-info,
.bk-aside .stay,
.bk-card,
.bk-screen {
    border: 1.5px solid var(--brand-300);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-900) 7%, transparent);
}

/* ---- The WhatsApp check on the guest form ---- */
.bk-otp-note { display: flex; align-items: center; gap: .45rem; margin: .75rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.bk-otp-note svg { width: 1rem; height: 1rem; color: #16a34a; flex: none; }
.bk-otp {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center; padding: 1rem;
    background: rgba(15, 27, 42, .55); backdrop-filter: blur(3px);
}
.bk-otp[hidden] { display: none; }
.bk-otp-box {
    position: relative; width: min(440px, 100%);
    padding: 2rem 1.75rem 1.5rem; text-align: center;
    background: var(--surface); border-radius: var(--r-lg);
    border-top: 4px solid var(--brand-700);
    box-shadow: var(--sh-xl);
}
.bk-otp-x { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-400); cursor: pointer; }
.bk-otp-ico { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.bk-otp-ico svg { width: 1.6rem; height: 1.6rem; }
.bk-otp-box h2 { margin: .9rem 0 .35rem; font-size: var(--t-lg); color: var(--brand-900); }
.bk-otp-sub { margin: 0 0 1.1rem; font-size: var(--t-sm); color: var(--ink-600); }
.bk-otp-input { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .5em; padding: .7rem; margin-bottom: .75rem; }
.bk-otp-err { margin: 0 0 .75rem; font-size: var(--t-sm); color: #b91c1c; }
.bk-otp-err[hidden] { display: none; }
.bk-otp-resend { margin: .9rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.bk-otp-resend button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand-700); cursor: pointer; }
.bk-otp-resend button:disabled { color: var(--ink-400); cursor: default; }

/* ---- Amenities & facilities, as zaereen.com's: a card per group, packed
   into two columns (CSS columns, so a 49-item group beside a 12-item one
   leaves no hole under the short one). ---- */
.hotel-fac-cap { margin: -.4rem 0 var(--sp-5); font-size: var(--t-sm); color: var(--ink-500); }
.hotel-facg { columns: 2 320px; column-gap: var(--sp-5); }
.hotel-facg-card {
    break-inside: avoid; display: inline-block; width: 100%;
    margin: 0 0 var(--sp-5); padding: 1.1rem 1.25rem 1rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-md);
    background: var(--surface);
}
.hotel-facg-card h3 {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 .75rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--brand-200);
    font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-700);
}
.hotel-facg-card h3 svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--brand-600); }
.hotel-facg-card h3 span { flex: 1; }
.hotel-facg-card h3 i {
    font-style: normal; font-size: .6875rem; letter-spacing: .04em;
    padding: .15rem .6rem; border-radius: var(--r-pill);
    background: var(--brand-100); color: var(--brand-800);
}
.hotel-facg-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hotel-facg-card li {
    position: relative; padding-left: 1.1rem;
    font-size: var(--t-sm); line-height: 1.45; color: var(--ink-800);
}
.hotel-facg-card li::before {
    content: ""; position: absolute; left: .15rem; top: .55em;
    width: .38rem; height: .38rem; border-radius: 50%;
    background: var(--brand-400);
}

/* ---- Contact & location, as zaereen.com's tab: cards left, map right,
   then Getting here / Around the hotel as ticked lists. ---- */
.hotel-contact { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.hotel-contact.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
.hotel-contact-cards { display: grid; gap: .75rem; align-content: start; }
.hotel-card-line {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .95rem 1.1rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-md);
    background: var(--surface);
}
.hotel-card-ico { flex: none; margin-top: .1rem; color: var(--brand-600); }
.hotel-card-ico svg { width: 1.2rem; height: 1.2rem; }
.hotel-card-k {
    display: block; margin-bottom: .2rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-700);
}
.hotel-card-line p { margin: 0; font-size: var(--t-base); line-height: 1.5; color: var(--ink-900); overflow-wrap: anywhere; }
.hotel-card-line a { color: var(--brand-800); }
.hotel-maps-btn { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; }
.hotel-maps-btn svg { width: 1rem; height: 1rem; }

.hotel-map {
    min-height: 340px;
    border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden;
    background: var(--surface-2);
}
.hotel-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
/* The Map tab's own, larger frame, and the address under it. */
.hotel-map-lg, .hotel-map-lg iframe { min-height: 460px; }
.hotel-map-addr { display: flex; gap: .45rem; margin: .8rem 0 0; font-size: var(--t-sm); color: var(--ink-700); }
.hotel-map-addr svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--brand-600); }
@media (max-width: 640px) { .hotel-map-lg, .hotel-map-lg iframe { min-height: 320px; } }

.hotel-near { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.hotel-near + .hotel-near { border-top: 0; padding-top: 0; }
.hotel-near-head {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 0 .9rem;
    font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-700);
}
.hotel-near-head svg { width: 1.05rem; height: 1.05rem; color: var(--brand-600); }
.hotel-near-n {
    padding: .1rem .55rem; border-radius: var(--r-pill);
    background: var(--brand-100); color: var(--brand-800);
    font-size: .6875rem; letter-spacing: .04em;
}
.hotel-near-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.hotel-near-list li { display: flex; gap: .55rem; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-800); }
.hotel-near-list svg { flex: none; width: .95rem; height: .95rem; margin-top: .2rem; color: #15803d; }
@media (max-width: 900px) {
    .hotel-contact.has-map { grid-template-columns: minmax(0, 1fr); }
    .hotel-map, .hotel-map iframe { min-height: 280px; }
}

/* The same tile on a light panel (Contact & location). */
.hotel-fact.is-box { background: var(--surface-2); border-color: var(--line); color: var(--ink-900); }
.hotel-fact.is-box .hotel-fact-k { color: var(--ink-500); opacity: 1; }
.hotel-fact.is-wide { grid-column: 1 / -1; }
.hotel-info-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.hotel-split {
    display: grid; gap: var(--sp-6); align-items: start;
    grid-template-columns: minmax(0, 1fr) 360px;
}
.hotel-aside { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: var(--sp-4); }

/* ---- tabs ----
   Folder tabs on a panel, as zaereen.com's hotel page has them, not a row of
   pill buttons: the tabs sit on the panel's top edge, the open one filled in
   the brand's deep step and joined to the box it opens, the rest tinted and
   ruled. One line that scrolls sideways on a phone rather than wrapping into
   a stack, which would stop reading as tabs at all. */
.hotel-tabs {
    display: flex; gap: .35rem;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 .75rem;
    margin: 0;
}
.hotel-tabs::-webkit-scrollbar { display: none; }
/* Each tab in its own colour, as the search bar's product tabs are: a wash
   of the tint with a tinted edge while closed, the tint itself when open. */
.hotel-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem; flex: none;
    padding: .7rem 1.15rem;
    background: color-mix(in srgb, var(--tile) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tile) 32%, var(--surface)); border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-700);
    white-space: nowrap; cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.hotel-tab svg { width: 1rem; height: 1rem; color: var(--tile); }
.hotel-tab:hover { background: color-mix(in srgb, var(--tile) 18%, var(--surface)); color: var(--ink-900); }
.hotel-tab.is-on {
    background: var(--tile); border-color: var(--tile); color: #fff;
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--tile) 30%, transparent);
}
.hotel-tab.is-on svg { color: #fff; }
.hotel-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The box the tabs open: a themed border all round, its top edge the line
   the tabs stand on, and a strip of the brand's deep step across the top so
   the open tab reads as running down into it. */
.hotel-pane {
    padding: var(--sp-5) var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--brand-200);
    /* The open tab's own colour, set on each pane from its tab, so the tab
       runs down into the box it opens. */
    border-top: 3px solid var(--tile, var(--brand-800));
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
}
.hotel-tabs + .hotel-pane,
.hotel-tabs ~ .hotel-pane { border-top-left-radius: 0; }
/* Rooms & rates: below the tabbed panel, always open - its own box. */
.hotel-tabs ~ .hotel-pane.hotel-rooms { margin-top: var(--sp-5); border-top-left-radius: var(--r-md); }

/* The pane's heading, ruled off with a short accent bar under it. */
.hotel-pane-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative;
    margin-bottom: var(--sp-5); padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}
.hotel-pane-head::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 2px; background: var(--tile, var(--accent));
}
.hotel-pane-head h2 {
    margin: 0;
    font-size: var(--t-lg); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand-900);
}
@media (max-width: 640px) {
    .hotel-tabs { padding: 0; }
    .hotel-pane { padding: var(--sp-4); }
}

/* ---- rooms ---- */
.rooms { display: grid; gap: var(--sp-4); }
.room {
    display: grid; grid-template-columns: minmax(0, 1fr) 210px;
    border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
    background: var(--surface);
}
/* The room card's border is a gradient drawn in the border box behind a solid
   padding box, so it can move: at rest a quiet themed edge, on hover a band of
   the brand's colours running round the card while it lifts. Motion is
   dropped for anyone who has asked their system for less of it. */
.room {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(90deg, var(--brand-200), var(--brand-200)) border-box;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.room:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(90deg, var(--brand-300), var(--accent), var(--brand-500), var(--brand-800), var(--brand-300)) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: room-edge 2.4s linear infinite;
}
@keyframes room-edge {
    from { background-position: 0 0, 0% 0; }
    to   { background-position: 0 0, 300% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .room { transition: none; }
    .room:hover { transform: none; animation: none; background-size: 100% 100%, 100% 100%; }
}
/* With a photograph: picture, details, price - three columns. The picture
   fills its column however tall the details run, so a room with a long
   inclusions list does not leave a band of bare card under a short photo. */
.room.has-pic { grid-template-columns: 200px minmax(0, 1fr) 210px; }
.room-pic { position: relative; min-height: 160px; background: var(--surface-2); border-right: 1px solid var(--line); }
.room-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-pic.is-empty { display: none; }
.room-pic-k {
    position: absolute; left: .5rem; bottom: .5rem;
    padding: .15rem .5rem; border-radius: var(--r-pill);
    background: rgba(15, 27, 42, .62); color: #fff;
    font-size: .625rem; font-weight: 600; letter-spacing: .04em;
}
.room-main { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
/* Name first, with any offer tagged beside it. */
.room-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-bottom: .6rem; }
.room-name { margin: 0; font-size: var(--t-md); font-weight: 700; line-height: 1.35; color: var(--ink-900); }

/* The facts side by side, each label over its value: Meals, Cancellation,
   Beds, Included read across one band instead of stacking four rows - the
   stack made the card tall, and the photo and price column beside it were
   left mostly empty. */
.room-facts {
    display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
    margin: 0 0 .7rem;
}
.room-facts > div { display: grid; gap: .3rem; min-width: 0; }
.room-facts dt {
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-500);
}
.room-facts dd { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0; font-size: var(--t-sm); color: var(--ink-800); }
.room-fact-ico {
    display: grid; place-items: center; flex: none;
    width: 1.6rem; height: 1.6rem; border-radius: .45rem;
    background: color-mix(in srgb, var(--tile) 12%, var(--surface)); color: var(--tile);
}
.room-fact-ico svg { width: .9rem; height: .9rem; }
.room-facts .room-incl { margin: 0; }
.room-badge svg { width: .85rem; height: .85rem; }

.room-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.room-chip, .room-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 600;
    background: var(--surface-2); color: var(--ink-700); border: 1px solid var(--line);
}
.room-chip svg { width: .85rem; height: .85rem; }
.room-chip.is-promo { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.room-badge.is-ok     { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.room-badge.is-danger { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.room-badge.is-warn   { background: #ffedd5; border-color: #fed7aa; color: #9a3412; }
/* A row that wraps rather than a grid: icon-only amenities sit side by side
   as a strip of tiles, and a worded one takes the width its words need. */
.room-incl { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.room-incl li.is-icon { cursor: help; }
.room-incl li.is-icon .room-incl-ico { width: 2rem; height: 2rem; border: 1px solid color-mix(in srgb, var(--tile) 28%, var(--surface)); }
.room-incl li.is-icon .room-incl-ico svg { width: 1.05rem; height: 1.05rem; }
.room-incl li { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--ink-700); }
/* Each inclusion's mark in a small tile of its own tint - roomAmenityIcon()
   picks both from the wording. */
.room-incl-ico {
    display: grid; place-items: center; flex: none;
    width: 1.6rem; height: 1.6rem; border-radius: .45rem;
    background: color-mix(in srgb, var(--tile, #16a34a) 12%, var(--surface));
    color: var(--tile, #16a34a);
}
.room-incl-ico svg { width: .9rem; height: .9rem; }
/* Money due at the hotel, set apart with a dashed edge: it is not part of the
   price on the right, and should not read as if it were. */
.room-supp {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem;
    margin-top: .2rem; padding: .5rem .75rem;
    border: 1.5px dashed #93c5fd; border-radius: var(--r-sm); background: #eff6ff;
    font-size: var(--t-sm);
}
.room-supp > .small { flex-basis: 100%; font-size: var(--t-xs); }
.room-supp strong { display: flex; align-items: center; gap: .35rem; }
.room-supp svg { width: .9rem; height: .9rem; }
/* The charges run on from the heading: "Mandatory tax  AED 20.00". */
.room-supp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
.room-supp li { display: inline-flex; gap: .45rem; }
.room-supp li b { white-space: nowrap; color: var(--ink-900); }
.room-pol { margin-top: .5rem; font-size: var(--t-sm); }
.room-pol summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-weight: 600; color: var(--brand-700); }
.room-pol summary svg { width: .9rem; height: .9rem; }
.room-pol table { width: 100%; margin: .5rem 0; border-collapse: collapse; }
.room-pol th, .room-pol td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.room-pol td:last-child, .room-pol th:last-child { text-align: right; }

.room-buy {
    display: flex; flex-direction: column; gap: .3rem; justify-content: center;
    padding: var(--sp-4) var(--sp-4);
    /* A coloured band of its own, so the price and the button read as the
       place to act rather than more of the room's description. */
    background: linear-gradient(180deg, var(--brand-50), var(--brand-100));
    border-left: 1px solid var(--brand-200);
}
.room-k { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-700); }
.room-total { font-size: var(--t-xl); font-weight: 750; color: var(--brand-900); }
.room-buy .small.muted { color: var(--ink-600); }
.room-buy form { margin-top: .4rem; }
.room-buy-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; font-size: var(--t-xs); color: var(--ink-600); }
.room-buy-note { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); color: var(--ink-600); }
.room-buy-note svg { width: .85rem; height: .85rem; color: #15803d; flex: none; }

/* ---- gallery, facilities ---- */
.hotel-gal { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); }
.hotel-gal-cell { margin: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.hotel-gal-cell.is-hero { grid-column: span 2; grid-row: span 2; }
.hotel-gal-cell img { width: 100%; height: 100%; object-fit: cover; }
.hotel-fac { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem .9rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hotel-fac li { display: flex; gap: .4rem; font-size: var(--t-sm); color: var(--ink-700); }
.hotel-fac svg { width: .9rem; height: .9rem; color: #16a34a; flex: none; margin-top: .2rem; }

/* ---- the stay panel ---- */
/* Both boxes in the side column wear the tab box's lining - a themed border
   all round and a shadow - so they read as panels on the page, not as a
   form that runs into the background. */
.stay,
.stay-pick {
    background: var(--surface);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
}
.stay { padding: 0; overflow: hidden; display: grid; gap: var(--sp-3); padding-bottom: var(--sp-4); }
.stay > *:not(.stay-head):not(.stay-band):not(.visa-plan-body):not(input) { margin-inline: var(--sp-4); }
.stay-head {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem var(--sp-4);
    background: var(--brand-800); color: #fff; font-weight: 700;
    /* Capitals and centred, as zaereen.com's "BOOK YOUR STAY" head. */
    text-transform: uppercase; letter-spacing: .12em; font-size: var(--t-sm);
}
.stay-head svg { width: 1.1rem; height: 1.1rem; }
.stay-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stay-field .label { display: flex; align-items: center; gap: .35rem; font-size: var(--t-xs); }
.stay-field .label svg { width: .9rem; height: .9rem; color: var(--brand-600); }
.stay-field .input { padding: .5rem .6rem; font-size: var(--t-sm); }
.stay-rooms { display: grid; gap: .6rem; }
.stay-room { border: 1px solid var(--brand-200); border-radius: var(--r-sm); padding: .6rem .75rem; background: var(--brand-50); }
.stay-room-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); font-weight: 600; margin-bottom: .4rem; }
.stay-room-head span { display: inline-flex; align-items: center; gap: .35rem; }
.stay-room-head svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.stay-x { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink-500); }

.stay-step { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; margin-top: .25rem; border: 1px solid var(--ink-200); border-radius: var(--r-pill); overflow: hidden; }
.stay-step button { height: 2rem; border: 0; background: var(--surface-2); cursor: pointer; font-size: 1rem; color: var(--brand-700); }
.stay-step input { width: 100%; border: 0; text-align: center; font-weight: 700; background: transparent; -moz-appearance: textfield; }
.stay-step input::-webkit-inner-spin-button, .stay-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stay-ages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.stay-ages label { display: grid; gap: .15rem; font-size: var(--t-xs); width: 4.5rem; }
.stay-ages .input { padding: .35rem .5rem; }
.stay-add { justify-self: start; }

/* The panel as zaereen.com's hotel page has it: the dark head, then one inset
   box of three bands - the dates on a tint, the rooms, the actions - each
   ruled off from the next. One colour throughout, the brand's. */
.stay { gap: 0; padding-bottom: var(--sp-4); }
.stay-head {
    padding: 1.05rem var(--sp-4);
    font-size: var(--t-md); font-weight: 600; letter-spacing: .16em;
    color: var(--brand-100);
}
.stay-head svg { color: var(--brand-300); }
.stay > .stay-box { margin: var(--sp-4) var(--sp-4) 0; }
.stay-box {
    border: 1px solid var(--brand-200); border-radius: var(--r-md);
    overflow: hidden; background: var(--surface);
}
.stay-band { padding: 1rem .9rem; border-top: 1px solid var(--brand-200); }
.stay-band-dates {
    display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem minmax(0, 1fr); gap: .5rem;
    background: var(--brand-50); border-top: 0;
}
.stay-band-rooms { background: color-mix(in srgb, var(--brand-50) 45%, var(--surface)); }
.stay-col { display: grid; gap: .45rem; justify-items: stretch; text-align: center; min-width: 0; }
.stay-k {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand-700);
}
.stay-k svg { width: .95rem; height: .95rem; }

/* The date box: how the date reads ("26 Sep 2026") with a calendar mark on
   the right; the real date field lies invisibly over it, so a click anywhere
   opens its calendar and it is still the one the form submits. */
.stay-datebox {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    height: 2.75rem; padding: 0 .55rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-sm);
    background: var(--surface);
    font-size: .875rem; color: var(--ink-900); white-space: nowrap;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.stay-datebox:hover { border-color: var(--brand-400); }
.stay-datebox:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.stay-datebox svg { flex: none; width: 1rem; height: 1rem; color: var(--brand-600); }
.stay-date-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stay-date-native {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.stay-date-native::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer;
}

/* Counters: tinted - and +, the figure on white between them; a step that
   cannot go further fades (hotel.js disables it at the limit). */
.stay-step {
    display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem; align-items: stretch;
    height: 2.75rem; margin: 0;
    border: 1px solid var(--brand-200); border-radius: var(--r-sm); overflow: hidden;
    background: var(--surface);
}
.stay-step button {
    height: auto; border: 0; background: var(--brand-50);
    font-size: 1.2rem; font-weight: 700; color: var(--brand-700); cursor: pointer;
    transition: background-color .15s var(--ease);
}
.stay-step button:hover:not(:disabled) { background: var(--brand-100); }
.stay-step button:disabled { color: var(--brand-200); cursor: default; }
.stay-step input {
    width: 100%; min-width: 0; padding: 0; border: 0; background: var(--surface);
    text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--ink-900);
}
.stay-step-nights { grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; }

/* One room a row: Room | Adults | Children, hints under the counters. */
.stay-rooms { display: grid; gap: .9rem; }
.stay-room {
    position: relative;
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; gap: .45rem .55rem;
    padding: 0; border: 0; background: none;
}
.stay-room + .stay-room { padding-top: .9rem; border-top: 1px dashed var(--brand-200); }
.stay-room-n {
    display: grid; place-items: center; height: 2.75rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-sm);
    background: var(--brand-50);
    font-weight: 700; letter-spacing: .12em; color: var(--brand-900);
}
.stay-hint { font-size: var(--t-xs); color: var(--ink-500); }
.stay-room .stay-x {
    position: absolute; top: -.35rem; right: -.35rem;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--brand-200);
    font-size: 1rem; line-height: 1; color: var(--ink-500);
}
.stay-room + .stay-room .stay-x { top: .55rem; }
.stay-room .stay-ages { grid-column: 1 / -1; justify-content: center; }
.stay-room .stay-ages[hidden] { display: none; }

/* Actions: a dashed "add a room", the button, one line under it. */
.stay-band-go { display: grid; gap: .75rem; background: color-mix(in srgb, var(--brand-50) 45%, var(--surface)); }
.stay-add {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; height: 3rem;
    border: 1.5px dashed var(--brand-300); border-radius: var(--r-md);
    background: transparent;
    font: inherit; font-weight: 700; color: var(--brand-800); cursor: pointer;
}
.stay-add:hover { background: var(--brand-50); }
.stay-add svg { width: 1.1rem; height: 1.1rem; color: var(--brand-600); }
.stay-add[hidden] { display: none; }
.stay-go {
    height: 3.1rem; font-size: var(--t-md);
    background: var(--brand-800); border: 1px solid var(--brand-900);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 10%, transparent);
}
.stay-go:hover { background: var(--brand-900); }
.stay-note-go { margin: 0; text-align: center; font-size: var(--t-xs); color: var(--ink-500); }

.stay-pick { padding: var(--sp-4); overflow: hidden; }
/* A quiet heading over a rule, as zaereen.com has it - the dark band is the
   booking panel's alone. */
.stay-pick-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: .6rem; padding-bottom: .7rem;
    border-bottom: 1px solid var(--brand-200);
}
.stay-pick-head span {
    font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-700);
}
.stay-pick-head b { font-size: var(--t-sm); font-weight: 500; color: var(--ink-500); }
/* Each option its own small box with the room cards' moving edge on hover,
   so the short list in the side panel reads as choices, not table rows. */
.stay-pick-row {
    display: flex; justify-content: space-between; gap: .75rem;
    margin-top: .6rem; padding: .7rem .8rem;
    border: 1.5px solid transparent; border-radius: var(--r-sm);
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(90deg, var(--brand-200), var(--brand-200)) border-box;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.stay-pick-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-sm);
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(90deg, var(--brand-300), var(--accent), var(--brand-500), var(--brand-800), var(--brand-300)) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: room-edge 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .stay-pick-row { transition: none; }
    .stay-pick-row:hover { transform: none; animation: none; background-size: 100% 100%, 100% 100%; }
}
.stay-pick-row strong { display: block; font-size: var(--t-sm); }
.stay-pick-row span { font-size: var(--t-xs); color: var(--ink-500); }
.stay-pick-row em { font-style: normal; }
.stay-pick-row em.is-ok { color: #166534; }
.stay-pick-row em.is-danger { color: #991b1b; }
.stay-pick-money { display: grid; justify-items: end; gap: .3rem; text-align: right; white-space: nowrap; }

@media (max-width: 1023px) {
    .hotel-split { grid-template-columns: 1fr; }
    .hotel-aside { position: static; }
}
@media (max-width: 1180px) {
    /* Beside the stay panel the three columns get tight: the picture goes
       on top of the details instead. */
    .room.has-pic { grid-template-columns: minmax(0, 1fr) 210px; }
    .room.has-pic .room-pic { grid-column: 1 / -1; min-height: 0; height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 719px) {
    .room, .room.has-pic { grid-template-columns: 1fr; }
    .room-buy { border-left: 0; border-top: 1px solid var(--brand-200); }
    .hotel-gal { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   HOTEL BOOKING JOURNEY — guest details, review, payment, confirmation
   Same crown, facts strip and side panel as the hotel page, so the four
   steps read as one journey. partials/booking.php draws the shared pieces.
   ========================================================================== */

.bk-steps {
    display: flex; flex-wrap: wrap; gap: .4rem .5rem;
    list-style: none; margin: 0 0 var(--sp-4); padding: 0;
    font-size: var(--t-xs); font-weight: 600;
}
.bk-steps li {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem .3rem .3rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7);
}
.bk-steps li span {
    display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: .7rem;
}
.bk-steps li.is-done { color: #fff; }
.bk-steps li.is-done span { background: #10b981; }
.bk-steps li.is-on { background: #fff; color: var(--brand-800); }
.bk-steps li.is-on span { background: var(--brand-700); }

.bk-main { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.bk-card { padding: var(--sp-5); }
.bk-card-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--sp-4); font-size: var(--t-md); }
.bk-card-h svg { width: 1.05rem; height: 1.05rem; color: var(--brand-600); }

.bk-room + .bk-room { margin-top: var(--sp-4); }
.bk-room-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: var(--sp-3); }
.bk-room-head > span:first-child { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.bk-room-head svg { width: 1rem; height: 1rem; color: var(--brand-600); }
.bk-contact { display: inline-flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--t-sm); color: var(--ink-600); }
.bk-contact span { display: inline-flex; align-items: center; gap: .3rem; }

.bk-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-700);
    font-size: var(--t-xs); font-weight: 700;
}
.bk-pill.is-child { background: #fef3c7; color: #92400e; }
.bk-pill.is-lead  { background: #fef3c7; color: #92400e; }
.bk-pill svg { width: .8rem; height: .8rem; }

.bk-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.bk-table th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.bk-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); }

/* The guest form: one grid per room, headed once, so every guest's fields
   line up down the page. */
.bk-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bk-contact-fields .label { display: flex; align-items: center; gap: .35rem; }
.bk-contact-fields .label svg { width: .9rem; height: .9rem; color: var(--brand-600); }
.bk-phone { display: grid; grid-template-columns: 7.5rem 1fr; gap: .4rem; }
.bk-guest-grid {
    display: grid; align-items: center; gap: .5rem .6rem;
    grid-template-columns: 7.5rem 6rem minmax(0, 1fr) minmax(0, 1fr) 9rem;
}
.bk-guest-grid.no-pan { grid-template-columns: 7.5rem 6rem minmax(0, 1fr) minmax(0, 1fr); }
.bk-gh { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); font-weight: 700; }
.bk-who { display: grid; gap: .1rem; }
.bk-guest-grid .input, .bk-guest-grid .select { padding: .5rem .65rem; font-size: var(--t-sm); }

.bk-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.bk-changes li { display: block; padding: .6rem .9rem; border-radius: var(--r-sm); font-size: var(--t-sm); }
.bk-accept .check { font-size: var(--t-sm); }

.bk-pay-amt { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
.bk-pay-amt span { color: var(--ink-600); }
.bk-pay-amt b { font-size: var(--t-2xl); color: var(--ink-900); }

/* ---- the side summary ---- */
.bk-aside { position: sticky; top: calc(var(--header-h) + 1rem); }
.bk-aside .stay { gap: 0; padding-bottom: 0; }
.bk-aside .stay > * { margin-inline: 0; }
.bk-aside-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bk-aside-body { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.bk-aside-hotel { font-size: var(--t-md); }
.bk-aside-room { margin: 0; font-size: var(--t-sm); color: var(--ink-600); }
.bk-aside-dates { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; text-align: center; }
.bk-aside-dates div { padding: .5rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bk-aside-dates span { display: block; font-size: var(--t-xs); color: var(--ink-500); }
.bk-aside-dates b { font-size: var(--t-sm); }
.bk-aside-dates .is-n { background: var(--brand-50); border-color: var(--brand-200); }
.bk-aside-party { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--t-sm); color: var(--ink-700); }
.bk-aside-party li { display: inline-flex; align-items: center; gap: .35rem; }
.bk-aside-party svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.bk-sum { margin: 0; display: grid; gap: .35rem; font-size: var(--t-sm); }
.bk-sum div { display: flex; justify-content: space-between; }
.bk-sum dt { color: var(--ink-600); }
.bk-sum dd { margin: 0; font-weight: 600; }
.bk-sum .is-note { color: #166534; }
.bk-sum .is-total { padding-top: .5rem; border-top: 1px dashed var(--line); font-size: var(--t-md); }
.bk-sum .is-total dd { font-size: var(--t-lg); color: var(--ink-900); }

/* ---- outcome screens ---- */
.bk-screen { padding: var(--sp-7) var(--sp-6); text-align: center; }
.bk-screen h1 { font-size: var(--t-2xl); margin: var(--sp-4) 0 var(--sp-3); }
.bk-screen .prose { max-width: 38rem; margin-inline: auto; color: var(--ink-700); }
.bk-screen-ico {
    display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-700);
}
.bk-screen-ico svg { width: 2rem; height: 2rem; }
.bk-screen.is-stop .bk-screen-ico { background: #fee2e2; color: #b91c1c; }
.bk-screen.is-wait .bk-screen-ico { background: #fef3c7; color: #b45309; }

.bk-done { display: flex; gap: var(--sp-4); align-items: center; }
.bk-done.is-ok .bk-screen-ico { background: #dcfce7; color: #15803d; }
.bk-refs { display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); flex: 1; }
.bk-refs span { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.bk-refs b { font-size: var(--t-md); word-break: break-all; }

/* The overlay raised the moment a payment succeeds: the Book call that
   follows can run for minutes, and that is exactly when people press back. */
.bk-block { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(8, 20, 45, .72); }
.bk-block[hidden] { display: none; }
.bk-block .panel { max-width: 30rem; padding: var(--sp-6); text-align: center; }
.bk-spin { width: 3rem; height: 3rem; margin: 0 auto var(--sp-4); border-radius: 50%; border: 4px solid var(--brand-100, #dbeafe); border-top-color: var(--brand-700); animation: bk-spin 1s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

@media (max-width: 1023px) {
    .bk-aside { position: static; }
}
@media (max-width: 719px) {
    .bk-contact-fields { grid-template-columns: 1fr; }
    .bk-guest-grid, .bk-guest-grid.no-pan { grid-template-columns: 1fr 1fr; }
    .bk-gh { display: none; }
    .bk-who { grid-column: 1 / -1; margin-top: .6rem; }
    .bk-done { flex-direction: column; text-align: center; }
}

/* A full-width button inside the padded stay panel: the panel supplies the
   side margins, so the button must not also claim 100% of the width. */
.stay > .btn-block { width: auto; }


/* ==========================================================================
   HOLIDAYS MEGA MENU - zaereen.com's, in this site's tokens. Hangs from the
   nav bar under the Holidays item, centred on the page; opens on hover and on
   keyboard focus. Desktop only - the drawer keeps its plain links.
   ========================================================================== */
/* The Holidays item runs the full height of the bar, so the pointer moving
   down from its label is still inside it when it reaches the panel. */
.nav-main { align-self: stretch; }
.nav-main > li.has-mega { position: static; display: flex; align-items: center; align-self: stretch; }
.mega {
    position: absolute; left: 50%; top: 100%; z-index: 60;
    /* Sized to its columns, never wider than the window. */
    width: max-content; max-width: calc(100vw - 2rem);
    padding: 1.5rem 1.6rem 0;
    background: var(--surface); color: var(--ink-800);
    border: 1px solid var(--brand-200); border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
}
/* A bridge over the gap under the nav item, so the pointer can travel down
   into the panel without it closing. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-main > li.has-mega:hover > .mega,
.nav-main > li.has-mega:focus-within > .mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.mega-cols { display: grid; grid-template-columns: repeat(var(--mega-cols, 6), minmax(150px, 190px)); gap: 0 1.8rem; }
.mega-col h6 {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 .65rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-700);
}
.mega-col h6 svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.mega-col ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.mega-col a {
    display: flex; align-items: center; gap: .6rem;
    padding: .38rem .45rem; margin: 0 -.45rem;
    border-radius: var(--r-sm);
    font-size: var(--t-sm); color: var(--ink-800); text-decoration: none;
    transition: background-color .12s var(--ease);
}
.mega-col a svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--mt, var(--brand-600)); }
.mega-col a em { flex: 1; min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-col a span { flex: none; font-size: var(--t-xs); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.mega-col a:hover { background: var(--brand-50); color: var(--brand-900); text-decoration: none; }
.mega-col a:hover span { color: var(--brand-700); }
/* Specific enough to beat the header's own link rules, which made it an
   inline box hugging the left edge. */
.nav-main .mega .mega-all {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: auto; margin: .2rem -1.6rem 0; padding: .9rem 1rem;
    text-align: center;
    border-top: 1px solid var(--brand-200);
    font-weight: 700; color: var(--brand-800); text-decoration: none;
}
.nav-main .mega .mega-all svg { width: 1rem; height: 1rem; }
.nav-main .mega .mega-all:hover { background: var(--brand-50); text-decoration: none; }
@media (max-width: 1200px) { .mega-cols { grid-template-columns: repeat(min(var(--mega-cols, 6), 3), minmax(150px, 190px)); } }
@media (max-width: 1023px) { .mega { display: none; } }


/* ==========================================================================
   DESTINATION CARD (/holidays) - oxfordtravels.com's: a dark card, the
   photograph ruled off in amber, amber name and counts, and a foot with the
   starting price, WhatsApp and View. The dark ground is the theme's deepest
   step, so it follows the brand; the amber is the live site's own.
   ========================================================================== */
.dcard {
    --amber: #f5a524;
    position: relative; display: flex; flex-direction: column;
    background: var(--brand-900); color: #e8edf4;
    border: 1px solid color-mix(in srgb, var(--brand-900) 70%, #fff);
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-900) 25%, transparent);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-900) 35%, transparent); }
.dcard-pic { position: relative; height: 200px; border-bottom: 3px solid var(--amber); background: var(--brand-800); }
.dcard-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard-flag { position: absolute; top: 12px; left: 12px; z-index: 2; line-height: 0; padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.dcard-flag img { width: 34px; height: 23px; border-radius: 3px; object-fit: cover; }
.dcard-rate {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .6rem; border-radius: var(--r-sm);
    background: rgba(15, 27, 42, .78); color: #fff; font-weight: 700; font-size: var(--t-sm);
}
.dcard-rate svg { width: .95rem; height: .95rem; color: #fbbf24; }

.dcard-body { flex: 1; padding: 1.1rem 1.2rem .9rem; }
.dcard-name {
    margin: 0 0 .9rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
    text-align: center; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dcard-name a { color: var(--amber); text-decoration: none; }
.dcard-stats { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; text-align: center; }
.dcard-stats .v { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.dcard-stats svg { width: .95rem; height: .95rem; color: var(--amber); }
.dcard-stats b { font-size: .95rem; color: #fff; font-variant-numeric: tabular-nums; }
.dcard-stats small { display: block; margin-top: .15rem; font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.dcard-more { margin: 0; display: grid; gap: .3rem; }
.dcard-more-k { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.dcard-more-v { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #fff; }
.dcard-more-v svg { width: 1rem; height: 1rem; color: var(--amber); }

.dcard-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .9rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .12);
}
.dcard-price { display: grid; line-height: 1.2; }
.dcard-price span { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.dcard-price b { font-size: 1.2rem; color: #fff; }
.dcard-acts { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.dcard-wa {
    position: relative; z-index: 2;
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm);
    background: #25d366; color: #fff;
}
.dcard-wa svg { width: 1.2rem; height: 1.2rem; }
.dcard-wa:hover { background: #1ebe5a; }
.dcard-go {
    display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.1rem; border-radius: var(--r-sm);
    background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; font-weight: 700;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
}
.dcard .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* THE DARK CARD - hotels, holiday packages, visas and activities, everywhere
   they appear (.card-dark on each card component). The /holidays destination
   card's look - the theme's deepest step for the ground,
   the live site's amber for the name and the marks, orange for View. */
.card-dark.card-hotel {
    --amber: #f5a524;
    background: var(--brand-900); color: #e8edf4;
    border: 1px solid color-mix(in srgb, var(--brand-900) 70%, #fff);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-900) 25%, transparent);
}
.card-dark.card-hotel:hover { border-color: var(--amber); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-900) 35%, transparent); }
.card-dark.card-hotel .hcard-pic { border-bottom: 3px solid var(--amber); background: var(--brand-800); }
.card-dark.card-hotel .hcard-name { border-bottom-color: rgba(255, 255, 255, .12); }
.card-dark.card-hotel .hcard-name a,
.card-dark.card-hotel .hcard-name { color: var(--amber); }
.card-dark.card-hotel .hcard-stats .v { color: #fff; }
.card-dark.card-hotel .hcard-stats .v svg { color: var(--amber); }
.card-dark.card-hotel .hcard-stats small { color: var(--amber); }
.card-dark.card-hotel .pkg-cities { color: rgba(255, 255, 255, .85); }
.card-dark.card-hotel .pkg-cities-k { color: var(--amber); }
.card-dark.card-hotel .pkg-cities i { color: rgba(255, 255, 255, .3); }
.card-dark.card-hotel .hcard-foot { background: rgba(0, 0, 0, .12); border-top-color: rgba(255, 255, 255, .12); }
.card-dark.card-hotel .hcard-foot .card-price-k { color: rgba(255, 255, 255, .7); }
.card-dark.card-hotel .hcard-foot .card-price strong,
.card-dark.card-hotel .hcard-foot .card-price.is-none b { color: #fff; }
.card-dark.card-hotel .pkg-enq { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.card-dark.card-hotel .pkg-enq:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.card-dark.card-hotel .hcard-go {
    background: linear-gradient(135deg, #fb923c, #f97316); border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
}

/* A step smaller throughout, on the dark hotel and package cards. */
.card-dark.card-hotel .hcard-name { font-size: .875rem; }
.card-dark.card-hotel .hcard-stats .v b { font-size: .6875rem; }
.card-dark.card-hotel .hcard-stats .v svg { width: 10px; height: 10px; }
.card-dark.card-hotel .hcard-stats small { font-size: .46875rem; }
.card-dark.card-hotel .pkg-cities { font-size: .75rem; }
.card-dark.card-hotel .pkg-plate { font-size: .6875rem; }
.card-dark.card-hotel .hcard-foot .card-price-k { font-size: .5rem; }
.card-dark.card-hotel .hcard-foot .card-price strong { font-size: .95rem; }
.card-dark.card-hotel .hcard-foot .card-price.is-none b { font-size: .75rem; }
.card-dark.card-hotel .pkg-enq,
.card-dark.card-hotel .hcard-go { font-size: .75rem; padding: .4rem .75rem; }

/* The hotel card's extras on the dark ground: the address line and its map
   link, the list-view description, and "On dates" before a rate arrives. */
.card-dark.card-hotel .hcard-addr,
.card-dark.card-hotel .hcard-text { color: rgba(255, 255, 255, .7); }
.card-dark.card-hotel .card-map { color: var(--amber); }
.card-dark.card-hotel .hcard-flag,
.card-dark.card-hotel .hcard-rate { background: rgba(0, 0, 0, .45); }
.grid.is-list .card-dark.card-hotel .hcard-pic { border-bottom: 0; border-right: 3px solid var(--amber); }
.grid.is-list .card-dark.card-hotel .hcard-foot { border-left-color: rgba(255, 255, 255, .12); }

/* Visas and activities: the plain site card, in the same dark and amber. */
.card-dark:not(.card-hotel) {
    --amber: #f5a524;
    background: var(--brand-900); color: #e8edf4;
    border: 1px solid color-mix(in srgb, var(--brand-900) 70%, #fff);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-900) 25%, transparent);
}
.card-dark:not(.card-hotel):hover { border-color: var(--amber); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-900) 35%, transparent); }
.card-dark:not(.card-hotel) .card-media { border-bottom: 3px solid var(--amber); background: var(--brand-800); }
.card-dark:not(.card-hotel) .card-title {
    font-size: .875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.card-dark:not(.card-hotel) .card-title a { color: var(--amber); }
.card-dark:not(.card-hotel) .card-title a:hover { color: #fcd34d; }
.card-dark:not(.card-hotel) .card-meta { font-size: .75rem; color: rgba(255, 255, 255, .85); }
.card-dark:not(.card-hotel) .card-meta svg { color: var(--amber); }
.card-dark:not(.card-hotel) .card-text { font-size: .75rem; color: rgba(255, 255, 255, .7); }
.card-dark:not(.card-hotel) .card-foot { border-top-color: rgba(255, 255, 255, .12); }
.card-dark:not(.card-hotel) .price-unit { font-size: .625rem; color: rgba(255, 255, 255, .65); }
.card-dark:not(.card-hotel) .price-now { font-size: .95rem; color: #fff; }
.card-dark:not(.card-hotel) .link-arrow {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem .75rem; border-radius: var(--r-sm);
    font-size: .75rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #fb923c, #f97316);
    box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
}
.card-dark:not(.card-hotel) .link-arrow svg { color: #fff; }
.card-dark:not(.card-hotel) .card-flag { background: rgba(0, 0, 0, .55); color: #fde68a; }

/* THE DARK CARD, MORE CONTRAST - colour only, no layout. The body shades from
   a lighter navy under the photograph down to the deepest, so it stands off
   the picture; the foot is a band clearly darker than the body with an amber
   rule above it; the name is a brighter gold, and the secondary text is a
   step lighter so it reads without squinting. */
.card-dark.card-hotel,
.card-dark:not(.card-hotel) {
    --amber: #fbbf24;
    background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 70%);
    border-color: color-mix(in srgb, var(--brand-700) 70%, #fff);
}
.card-dark.card-hotel .hcard-name,
.card-dark.card-hotel .hcard-name a,
.card-dark:not(.card-hotel) .card-title a { color: var(--amber); }
.card-dark.card-hotel .hcard-name { border-bottom-color: rgba(251, 191, 36, .28); }
.card-dark.card-hotel .hcard-stats .v,
.card-dark.card-hotel .hcard-stats .v b { color: #fff; }
.card-dark.card-hotel .hcard-addr,
.card-dark.card-hotel .hcard-text,
.card-dark:not(.card-hotel) .card-text { color: rgba(255, 255, 255, .82); }
.card-dark:not(.card-hotel) .card-meta { color: #fff; }
.card-dark.card-hotel .hcard-foot,
.card-dark:not(.card-hotel) .card-foot {
    background: rgba(0, 0, 0, .32);
    border-top: 1px solid rgba(251, 191, 36, .45);
}
.card-dark:not(.card-hotel) .card-foot { margin: auto calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); }
.card-dark.card-hotel .hcard-foot .card-price-k,
.card-dark:not(.card-hotel) .price-unit { color: rgba(255, 255, 255, .78); }


/* ---- The visa card (oxfordtravels.com's), on the dark card ---- */
.card-visa .hcard-name { font-size: .95rem; }
.visa-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.visa-facts > div { display: grid; gap: .2rem; min-width: 0; }
.visa-k {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--amber, #fbbf24);
}
.visa-k svg { width: .8rem; height: .8rem; flex: none; }
.visa-facts b { font-size: .8125rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.visa-facts b.visa-fee { color: var(--amber, #fbbf24); }

.visa-docs { position: relative; z-index: 2; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .75rem; }
.visa-docs summary {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
    font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.visa-docs summary::-webkit-details-marker { display: none; }
.visa-docs summary svg { width: .9rem; height: .9rem; color: var(--amber, #fbbf24); transition: transform .15s var(--ease); }
.visa-docs[open] summary svg { transform: rotate(180deg); }
.visa-docs ul { margin: .55rem 0 0; padding-left: 1rem; color: rgba(255, 255, 255, .82); display: grid; gap: .35rem; }
.visa-docs ul b { color: #fff; }
.visa-docs.is-empty { margin-bottom: 0; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.visa-docs.is-empty span { font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .45); }

/* The estimated date in a green box, as the live card has it. */
.visa-est {
    display: grid; justify-items: center; gap: .1rem; flex: 1; min-width: 0;
    padding: .45rem .6rem; border-radius: var(--r-sm);
    background: rgba(22, 101, 52, .35); border: 1px solid rgba(74, 222, 128, .35);
    text-align: center;
}
.visa-est span { font-size: .6875rem; font-weight: 600; color: #4ade80; }
.visa-est b { font-size: .75rem; color: #fff; white-space: nowrap; }
.visa-foot { gap: .6rem; }

/* ---- The activity card (oxfordtravels.com's), on the dark card ---- */
.card-act .hcard-name { font-size: .95rem; }
.act-stars { display: inline-flex; gap: 1px; padding: 5px 7px; }
.act-stars span { line-height: 0; color: rgba(255, 255, 255, .35); }
.act-stars span.is-on { color: #fbbf24; }
.act-stars svg { width: 12px; height: 12px; }
.act-more { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.act-more .dcard-more-v { font-size: .8125rem; }

/* A heading in zaereen.com's display style: Cormorant Garamond in spaced
   capitals, a step smaller than the default page heading. */
.hero h1.title-serif {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.15;
}

/* ---- The visa page body: tabs (the hotel page's) and Plan your journey ---- */
.visa-table-wrap { overflow-x: auto; }
.visa-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.visa-table th {
    padding: .6rem .7rem; text-align: left; white-space: nowrap;
    background: var(--brand-50); border-bottom: 1px solid var(--brand-200);
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700);
}
.visa-table td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink-800); }
.visa-table .num { text-align: right; white-space: nowrap; }
.visa-docs-list { display: grid; gap: .8rem; }
.visa-doc { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); }
.visa-doc-n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); font-weight: 700; font-size: var(--t-sm); }
.visa-doc b { display: block; margin-bottom: .3rem; color: var(--ink-900); }
.visa-rule-h { margin: .4rem 0 .4rem; font-size: var(--t-md); color: var(--brand-800); }

.visa-plan-body { display: grid; gap: .9rem; padding: 1rem var(--sp-4) var(--sp-4); }
.stay > .visa-plan-body { margin-inline: 0; }
.visa-plan-f { display: grid; gap: .4rem; margin: 0; min-width: 0; }
.visa-plan-f .stay-k { justify-content: flex-start; }
.visa-plan-f .select, .visa-plan-f .input { height: 2.6rem; border-color: var(--brand-200); background: var(--brand-50); font-size: var(--t-sm); }
.visa-plan-f.is-missing .input { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.visa-plan-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; align-items: end; }
.visa-plan-row .stay-step { height: 2.6rem; grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem; }
.visa-plan-row .stay-step input { font-size: .95rem; }
.visa-eta { display: flex; justify-content: space-between; gap: .5rem; margin: 0; padding: .6rem .8rem; border-radius: var(--r-sm); background: #ecf7f0; border: 1px solid #b7d8c3; font-size: var(--t-sm); }
.visa-eta span { color: #166534; font-weight: 600; }
.visa-eta b { color: var(--ink-900); }
.visa-eta[hidden] { display: none; }
.visa-rate { width: 100%; border-collapse: collapse; font-size: var(--t-sm); border: 1px solid var(--brand-200); border-radius: var(--r-sm); overflow: hidden; }
.visa-rate th { padding: .5rem .6rem; background: var(--brand-800); color: #fff; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.visa-rate td { padding: .55rem .6rem; border-top: 1px solid var(--brand-200); }
.visa-rate .num { text-align: right; }
.visa-rate tfoot td { background: var(--brand-50); font-weight: 700; color: var(--ink-900); }
.visa-plan-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.visa-plan-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.visa-plan-acts svg { width: 1rem; height: 1rem; }
.visa-plan-note { margin: 0; text-align: center; font-size: var(--t-xs); color: var(--ink-500); }
@media (max-width: 480px) { .visa-plan-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .visa-plan-row > :first-child { grid-column: 1 / -1; } }

/* One colour for every tab and its pane - the theme's own - on the hotel and
   visa pages: a quiet tinted tab, the open one in the brand's deep step. The
   per-tab tints set inline in the pages are overridden here; !important
   because an inline custom property outranks any selector without it. */
.hotel-tab,
.hotel-pane { --tile: var(--brand-800) !important; }
.hotel-tab { background: var(--brand-50); border-color: var(--brand-200); color: var(--ink-700); }
.hotel-tab svg { color: var(--brand-600); }
.hotel-tab:hover { background: var(--brand-100); color: var(--brand-900); }
.hotel-tab.is-on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; box-shadow: none; }
.hotel-tab.is-on svg { color: #fff; }
.hotel-pane-head::after { background: var(--brand-600); }


/* The tabs that are not open: a light tint of the theme (not white) with
   dark text, so they read as tabs while the dark open tab stands out. */
.hotel-tab:not(.is-on) { background: var(--brand-100); border-color: var(--brand-200); color: var(--ink-700); }
.hotel-tab:not(.is-on) svg { color: var(--brand-600); }
.hotel-tab:not(.is-on):hover { background: var(--brand-200); border-color: var(--brand-300); color: var(--brand-900); }

/* ---- Plan your journey, as zaereen.com's panel ---- */
.visa-plan { border-color: var(--brand-200); }
.visa-plan-head { justify-content: center; gap: .6rem; padding: 1.05rem var(--sp-4); background: var(--brand-900); }
.visa-plan-head svg { width: 1.1rem; height: 1.1rem; color: #e8c872; }
.visa-plan-head .title-serif {
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700;
    font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: #e8c872;
}
.visa-plan .stay-k { font-size: .6875rem; letter-spacing: .12em; color: var(--brand-700); }
.visa-plan-f .select { background: var(--brand-50); border-color: var(--brand-200); border-radius: var(--r-sm); }
.visa-plan-f .input { background: var(--brand-50); border-color: var(--brand-200); border-radius: var(--r-sm); }

/* Round filled steppers, the figure bold between them. */
.visa-plan-row .stay-step {
    height: 2.6rem; padding: 0 .3rem; align-items: center;
    grid-template-columns: 1.9rem minmax(0, 1fr) 1.9rem;
    background: var(--surface); border: 1px solid var(--brand-200); border-bottom-width: 1px; border-radius: var(--r-sm);
}
.visa-plan-row .stay-step button {
    width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm);
    background: var(--brand-800); color: #fff; font-size: 1.1rem; line-height: 1;
}
.visa-plan-row .stay-step button:hover:not(:disabled) { background: var(--brand-900); }
.visa-plan-row .stay-step button:disabled { background: var(--brand-200); color: #fff; }
.visa-plan-row .stay-step input { font-size: 1rem; font-weight: 800; }

/* The estimate: a dark head row, ruled columns, a tinted total. */
.visa-rate { border: 1px solid var(--brand-300); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; }
.visa-rate th { background: var(--brand-900); color: #e8c872; text-align: center; padding: .6rem .5rem; }
.visa-rate th + th, .visa-rate td + td { border-left: 1px solid var(--brand-200); }
.visa-rate th + th { border-left-color: rgba(255, 255, 255, .15); }
.visa-rate tbody td { background: var(--surface); padding: .7rem .6rem; }
.visa-rate tbody td:first-child { font-weight: 700; color: var(--ink-900); }
.visa-rate .ctr { text-align: center; }
.visa-rate tfoot td { background: var(--brand-50); border-top: 2px solid var(--brand-300); font-weight: 500; font-size: var(--t-sm); padding: .8rem .6rem; }
.visa-rate tfoot td:last-child { font-weight: 700; }

/* Enquiry outlined, Book now a gold-toned button. */
.visa-plan-acts .btn { height: 3rem; border-radius: var(--r-sm); font-weight: 600; }
.visa-plan-acts .btn-outline { background: var(--surface); border: 1px solid var(--brand-200); color: var(--ink-900); }
.visa-book {
    border: 1px solid #b08d2c; color: #2a1f00;
    background: linear-gradient(135deg, #e8c872 0%, #c9a24a 45%, #b08d2c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 250, 232, .5), 0 2px 6px rgba(120, 90, 20, .25);
}
.visa-book:hover { color: #fffaf0; background: linear-gradient(135deg, #d4b158 0%, #b08d2c 40%, #8f6f1c 100%); text-decoration: none; }

/* Plan your journey, the fix: three equal columns so the counters have room
   for their figure; the counters' labels centred over them, as zaereen's;
   the date a size smaller so mm/dd/yyyy and its icon fit the column. */
.visa-plan-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.visa-plan-row .visa-plan-f:not(:first-child) .stay-k { justify-content: center; }
.visa-plan-row .input { font-size: .78rem; padding: .3rem .4rem; }
.visa-plan-row .stay-step { padding: 0 .25rem; grid-template-columns: 1.65rem minmax(1.4rem, 1fr) 1.65rem; }
.visa-plan-row .stay-step button { width: 1.65rem; height: 1.65rem; font-size: 1rem; }
.visa-plan-row .stay-step input { font-size: .95rem; padding: 0; }

/* The estimate table fills the panel width. */
.visa-rate { width: 100%; table-layout: fixed; overflow: hidden; }
.visa-rate th { font-size: .5625rem; }
.visa-rate th:first-child, .visa-rate td:first-child { width: 28%; text-align: left; }
.visa-rate td { font-size: .8125rem; }

/* ---- The visa page's FAQ + About band (zaereen.com's) ---- */
.visa-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.visa-extra.is-single { grid-template-columns: minmax(0, 1fr); }
.visa-extra .eyebrow { font-size: .6875rem; letter-spacing: .16em; }
.visa-extra-h.title-serif {
    margin: .2rem 0 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
    font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); letter-spacing: .01em; text-transform: none; color: var(--brand-900);
}
.faq-list { display: grid; gap: .6rem; }
.faq-item { background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden; }
.faq-item[open] { border-left: 3px solid var(--brand-600); box-shadow: var(--sh-sm); }
.faq-item summary {
    display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; cursor: pointer; list-style: none;
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { background: var(--brand-50); }
.faq-n {
    display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .45rem;
    background: var(--brand-50); border: 1px solid var(--brand-200); font-size: .75rem; font-weight: 700; color: var(--brand-700);
}
.faq-item[open] .faq-n { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.faq-q { flex: 1; min-width: 0; }
.faq-ico {
    position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--brand-50); border: 1px solid var(--brand-200);
}
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: .6rem; height: 2px; margin: -1px 0 0 -.3rem; background: var(--brand-700); border-radius: 1px; }
.faq-ico::after { transform: rotate(90deg); transition: transform .15s var(--ease); }
.faq-item[open] .faq-ico { background: var(--brand-800); border-color: var(--brand-800); }
.faq-item[open] .faq-ico::before, .faq-item[open] .faq-ico::after { background: #fff; }
.faq-item[open] .faq-ico::after { transform: rotate(0deg); }
.faq-a { padding: .8rem 1rem 1rem 3.9rem; font-size: var(--t-sm); color: var(--ink-700); }

.about-card { padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); }
.about-region { display: flex; align-items: center; gap: .35rem; margin: -.6rem 0 1rem; font-size: var(--t-xs); color: var(--ink-500); }
.about-region svg { width: .85rem; height: .85rem; color: var(--brand-600); }
.about-body { font-size: var(--t-sm); color: var(--ink-700); }
.about-body.is-folded { max-height: 22rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.about-more {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700);
}
.about-more svg { width: .9rem; height: .9rem; transition: transform .15s var(--ease); }
.about-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 900px) { .visa-extra { grid-template-columns: minmax(0, 1fr); } }

/* Plan your journey, tidied: the travel date on a row of its own at full
   width (in a third of the panel its calendar icon was pushed out of sight),
   Adults | Children side by side under it, and tighter spacing throughout. */
.visa-plan-body { gap: .7rem; padding: .9rem var(--sp-4) 1rem; }
.visa-plan-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem .6rem; }
.visa-plan-row > .visa-plan-f:first-child { grid-column: 1 / -1; }
.visa-plan-row .visa-plan-f:first-child .stay-k { justify-content: flex-start; }
.visa-plan-row .input {
    height: 2.6rem; padding: .35rem .7rem; font-size: var(--t-sm); color: var(--ink-900);
    background: var(--brand-50); cursor: pointer;
}
.visa-plan-row .input::-webkit-calendar-picker-indicator { opacity: .8; cursor: pointer; width: 1.1rem; height: 1.1rem; margin-left: .4rem; }
.visa-plan-row .stay-step { grid-template-columns: 2rem minmax(0, 1fr) 2rem; }
.visa-plan-row .stay-step button { width: 2rem; height: 2rem; }
.visa-plan .stay-k { gap: .3rem; }
.visa-rate th:nth-child(2), .visa-rate th:nth-child(4) { text-align: right; }
.visa-rate th:nth-child(3), .visa-rate td:nth-child(3) { text-align: center; }
.visa-plan-acts { gap: .5rem; }
.visa-plan-acts .btn { height: 2.75rem; }
.visa-plan-note { line-height: 1.45; }

/* Travel date | Adults | Children on ONE row: the date a wider column with a
   compact face and a small calendar mark, so the mark stays in the box; the
   counters on slim buttons so their figure still has room. */
.visa-plan-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
.visa-plan-row > .visa-plan-f:first-child { grid-column: auto; }
.visa-plan-row .stay-k { font-size: .5625rem; letter-spacing: .08em; gap: .2rem; white-space: nowrap; }
.visa-plan-row .stay-k svg { width: .8rem; height: .8rem; }
.visa-plan-row .input { height: 2.5rem; padding: .25rem .3rem; font-size: .72rem; }
.visa-plan-row .input::-webkit-calendar-picker-indicator { width: .8rem; height: .8rem; margin: 0 0 0 .15rem; padding: 0; }
.visa-plan-row .stay-step { height: 2.5rem; padding: 0 .2rem; grid-template-columns: 1.5rem minmax(1.3rem, 1fr) 1.5rem; }
.visa-plan-row .stay-step button { width: 1.5rem; height: 1.5rem; font-size: .95rem; }
.visa-plan-row .stay-step input { font-size: .9rem; }

/* Plan your journey: one measure of side space, not two - the body pads
   itself and no longer also takes the booking panels' side margin. */
.visa-plan-body { padding: .85rem .85rem 1rem; }

/* Book now in the theme's own colour, not gold: the brand's deep step, as
   the site's primary buttons; Enquiry outlined in the same colour. */
.visa-book {
    border: 1px solid var(--brand-800); color: #fff;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-800) 30%, transparent);
}
.visa-book:hover { color: #fff; background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); }
.visa-plan-acts .btn-outline { border-color: var(--brand-300); color: var(--brand-800); }
.visa-plan-acts .btn-outline:hover { background: var(--brand-50); border-color: var(--brand-600); }
.visa-plan-head .title-serif,
.visa-plan-head svg { color: #fff; }

/* The visa Overview as reading prose, zaereen.com's: bold sub-headings in
   normal case, generous line height, bullets spaced so a long list reads. */
.visa-prose { font-size: .9375rem; line-height: 1.8; color: var(--ink-700); }
.visa-prose .prose { font-size: inherit; line-height: inherit; }
.visa-prose .prose > * + * { margin-top: .6rem; }
.visa-prose .visa-sec-h { margin: 1.4rem 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--ink-900); text-transform: none; letter-spacing: 0; }
.visa-prose .visa-sec-h:first-child { margin-top: 0; }
.visa-prose strong, .visa-prose b { color: var(--ink-900); font-weight: 700; }
.visa-prose ul { margin: .4rem 0 .9rem; padding-left: 1.25rem; }
.visa-prose li { margin: .15rem 0; padding-left: .2rem; }
.visa-prose li::marker { color: var(--ink-700); }
.visa-prose p { margin: .5rem 0; }

/* ---- The visa application (zaereen.com's visas/booking) ---- */
.va-main { display: grid; gap: var(--sp-5); }
.va-card { padding: 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.va-card-h { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--brand-200); }
.va-card-h svg { width: 1.1rem; height: 1.1rem; color: var(--brand-600); }
.va-card-h .title-serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--brand-900); }
.va-hint { display: flex; gap: .45rem; margin: 0 0 1rem; font-size: var(--t-xs); color: var(--ink-500); }
.va-hint svg { flex: none; width: .95rem; height: .95rem; color: var(--brand-600); }
.va-signed { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: var(--brand-50); }
.va-signed-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-800); color: #fff; flex: none; }
.va-signed-ico svg { width: 1rem; height: 1rem; }
.va-signed b { display: block; color: var(--ink-900); }
.va-signed span { font-size: var(--t-xs); color: var(--ink-500); }
.va-grid { display: grid; gap: .8rem; }
.va-grid-contact { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr); }
/* Mobile takes the Title column and First name's (so the code and the number
   both fit); Email the last. */
.va-grid-contact .va-f:nth-child(4) { grid-column: span 2; }
.va-grid-contact .va-f:nth-child(5) { grid-column: span 1; }
.va-grid-5 { grid-template-columns: 6rem repeat(4, minmax(0, 1fr)); }
.va-f { display: grid; gap: .35rem; margin: 0; min-width: 0; }
.va-k { display: inline-flex; align-items: center; gap: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); }
.va-k svg { width: .8rem; height: .8rem; }
.va-f .input, .va-f .select { height: 2.6rem; font-size: var(--t-sm); border-color: var(--brand-200); }
.va-f .textarea { font-size: var(--t-sm); border-color: var(--brand-200); }
.va-phone { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .35rem; }
.va-upper { text-transform: uppercase; letter-spacing: .05em; }
.va-pax { margin-top: 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden; }
.va-pax-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--brand-50); border-bottom: 1px solid var(--brand-200); }
.va-pax-tag { padding: .25rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--brand-300); background: var(--surface); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-900); }
.va-pax-k { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); }
.va-pax .va-grid { padding: 1rem; }

.va-sum-visa { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); font-weight: 700; color: var(--ink-900); }
.va-tick { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 4px; background: var(--brand-800); color: #fff; }
.va-tick svg { width: .8rem; height: .8rem; }
.va-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.va-sum-grid > div { padding: .55rem .7rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); font-size: var(--t-sm); }
.va-sum-grid span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.va-sum-grid b { color: var(--ink-900); }
.va-submit { width: 100%; height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 700; }
.va-submit svg { width: 1rem; height: 1rem; }

.va-done { text-align: center; padding: 2rem 1.75rem; }
.va-done-ico { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.va-done-ico svg { width: 1.8rem; height: 1.8rem; }
.va-done h2 { margin: 1rem 0 .4rem; font-size: var(--t-lg); color: var(--brand-900); }
.va-done-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: 1.4rem 0 0; text-align: left; }
.va-done-facts > div { padding: .6rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); }
.va-done-facts dt { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.va-done-facts dd { margin: .15rem 0 0; font-weight: 700; color: var(--ink-900); }

@media (max-width: 900px) {
    .va-grid-5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .va-grid-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Your application, aligned: a left label over the visa, four equal boxes
   (label over value), a table with fixed columns - rate and total right
   under their headings, pax centred - and even spacing to the button. */
.va-sum .visa-plan-body { gap: .75rem; }
.va-sum-k {
    display: flex; align-items: center; gap: .35rem; margin-bottom: -.35rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700);
}
.va-sum-k svg { width: .85rem; height: .85rem; }
.va-sum-visa { min-height: 2.8rem; }
.va-sum-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
.va-sum-grid > div {
    display: flex; flex-direction: column; justify-content: center; gap: .15rem;
    min-height: 3.6rem; padding: .55rem .75rem; background: var(--surface);
}
.va-sum-grid b { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.va-rate th { padding: .55rem .5rem; }
.va-rate th:first-child, .va-rate td:first-child { text-align: left; }
.va-rate th.num, .va-rate td.num { text-align: right; }
.va-rate th.ctr, .va-rate td.ctr { text-align: center; }
.va-rate td { padding: .6rem .5rem; font-size: .8125rem; white-space: nowrap; }
.va-rate tfoot td { padding: .7rem .5rem; }
.va-sum .va-submit { margin-top: .15rem; }
.va-sum .visa-plan-note { margin-top: -.2rem; }

/* ---- Sign in (zaereen.com's users/login): Google, or a code ---- */
.signin { padding: 2rem 1.75rem 1.75rem; text-align: center; border-color: var(--brand-200); box-shadow: var(--sh-md); }
.signin-ico { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); }
.signin-ico svg { width: 1.5rem; height: 1.5rem; }
.signin-h.title-serif { margin: .8rem 0 .3rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 2rem; color: var(--brand-900); }
.signin-sub { margin: 0 auto 1.3rem; max-width: 34ch; font-size: var(--t-sm); color: var(--ink-500); }
.signin-google {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    height: 3rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: var(--surface);
    font-weight: 600; color: var(--ink-900); text-decoration: none; box-shadow: var(--sh-xs);
    transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.signin-google:hover { border-color: var(--brand-400); box-shadow: var(--sh-sm); text-decoration: none; }
.signin-or { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 1rem; font-size: var(--t-xs); color: var(--ink-400); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1rem; border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--brand-200); }
.signin-tabs button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.4rem;
    border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; font-weight: 600; font-size: var(--t-sm); color: var(--ink-600); cursor: pointer;
}
.signin-tabs button svg { width: 1rem; height: 1rem; }
.signin-tabs button.is-on { background: var(--brand-800); color: #fff; box-shadow: var(--sh-xs); }
.signin-form { display: grid; gap: .8rem; text-align: left; }
.signin-phone { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .4rem; }
.signin-form .input, .signin-form .select { height: 2.9rem; border-color: var(--brand-200); }
.signin-hint { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.signin-hint svg { width: .9rem; height: .9rem; color: #16a34a; }
.signin-code-input { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: .5em; }
.signin-resend { margin: .4rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.signin-resend button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand-700); cursor: pointer; }
.signin-resend button:disabled { color: var(--ink-400); cursor: default; }
.signin-err { margin: 0; font-size: var(--t-sm); color: #b91c1c; }
.signin-err[hidden] { display: none; }

/* ==========================================================================
   ACCOUNT - zaereen.com's users/ pages: a side menu beside the page, cards
   for everything, coloured status chips.
   ========================================================================== */
.acct { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.acct-side { position: sticky; top: calc(var(--header-h) + 1rem); background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.acct-me { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem 1rem; background: var(--brand-50); border-bottom: 1px solid var(--brand-200); }
.acct-avatar { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--brand-800); color: #fff; font-weight: 700; font-size: 1.1rem; }
.acct-me b { display: block; color: var(--ink-900); line-height: 1.25; }
.acct-me span { font-size: var(--t-xs); color: var(--ink-500); overflow-wrap: anywhere; }
.acct-nav { display: grid; padding: .5rem; }
.acct-nav a { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: var(--r-sm); color: var(--ink-700); font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.acct-nav a svg { width: 1rem; height: 1rem; color: var(--brand-600); }
.acct-nav a:hover { background: var(--brand-50); color: var(--brand-900); text-decoration: none; }
.acct-nav a.is-on { background: var(--brand-800); color: #fff; }
.acct-nav a.is-on svg { color: #fff; }
.acct-nav .acct-out { margin-top: .3rem; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: #b91c1c; }
.acct-nav .acct-out svg { color: #b91c1c; }
.acct-main { display: grid; gap: var(--sp-5); min-width: 0; }

.acct-card { padding: 1.2rem 1.35rem; background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.acct-card-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--brand-200); }
.acct-card-h h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--t-md); color: var(--brand-900); }
.acct-card-h h2 svg { width: 1.05rem; height: 1.05rem; color: var(--brand-600); }
.acct-card-h a { font-size: var(--t-sm); font-weight: 600; }
.acct-empty { margin: 0; font-size: var(--t-sm); color: var(--ink-500); }
.acct-note { display: flex; gap: .45rem; margin: .9rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.acct-note svg { flex: none; width: .95rem; height: .95rem; margin-top: .05rem; color: var(--brand-600); }

.acct-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.acct-stat {
    display: grid; gap: .15rem; padding: 1rem 1.1rem; text-decoration: none;
    background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); border-top: 3px solid var(--tile);
    box-shadow: var(--sh-xs); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.acct-stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); text-decoration: none; }
.acct-stat span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: color-mix(in srgb, var(--tile) 12%, var(--surface)); color: var(--tile); }
.acct-stat span svg { width: 1.05rem; height: 1.05rem; }
.acct-stat b { margin-top: .4rem; font-size: 1.45rem; color: var(--ink-900); line-height: 1.1; }
.acct-stat small { font-size: var(--t-xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }

.acct-complete { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; align-items: center; gap: 1rem; background: var(--brand-50); }
.acct-complete b { display: block; color: var(--ink-900); }
.acct-complete span { font-size: var(--t-xs); color: var(--ink-500); }
.acct-bar { height: .5rem; border-radius: 999px; background: var(--brand-100); overflow: hidden; }
.acct-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--brand-800)); }

.acct-list { display: grid; }
.acct-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem .2rem; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.acct-row:first-child { border-top: 0; }
.acct-row:hover { background: var(--brand-50); text-decoration: none; }
.acct-row-date { display: grid; place-items: center; padding: .35rem 0; border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-200); font-size: .625rem; font-weight: 700; text-transform: uppercase; color: var(--brand-700); line-height: 1.2; }
.acct-row-date b { font-size: 1.15rem; color: var(--ink-900); }
.acct-row-main { display: grid; gap: .1rem; min-width: 0; }
.acct-row-main b { color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row-main small { font-size: var(--t-xs); color: var(--ink-500); }

.acct-type { display: inline-flex; align-items: center; gap: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); }
.acct-type svg { width: .85rem; height: .85rem; }
.acct-chip { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.acct-chip.is-confirmed, .acct-chip.is-booked { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.acct-chip.is-pending, .acct-chip.is-progress { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.acct-chip.is-new { background: var(--brand-100); color: var(--brand-800); border-color: var(--brand-200); }
.acct-chip.is-cancelled, .acct-chip.is-closed { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.acct-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }
.acct-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--brand-200); }
.acct-pills a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: var(--ink-600); text-decoration: none; }
.acct-pills a i { font-style: normal; font-size: .6875rem; padding: .05rem .45rem; border-radius: 999px; background: var(--brand-100); color: var(--brand-800); }
.acct-pills a:hover { background: var(--brand-50); text-decoration: none; }
.acct-pills a.is-on { background: var(--brand-800); color: #fff; }
.acct-pills a.is-on i { background: rgba(255, 255, 255, .2); color: #fff; }
.acct-pills.is-quiet a.is-on { background: var(--brand-100); color: var(--brand-900); }

.acct-bookings, .acct-enqs { display: grid; gap: .8rem; }
.acct-bk { display: grid; grid-template-columns: 120px minmax(0, 1fr) 200px; background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.acct-bk-pic { background: var(--brand-50); min-height: 120px; position: relative; }
.acct-bk-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct-bk-pic span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand-400); }
.acct-bk-pic span svg { width: 2rem; height: 2rem; }
.acct-bk-main { padding: .9rem 1.1rem; min-width: 0; }
.acct-bk-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.acct-bk-main h3 { margin: .35rem 0 .45rem; font-size: var(--t-md); }
.acct-bk-main h3 a { color: var(--ink-900); }
.acct-bk-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: var(--t-xs); color: var(--ink-500); }
.acct-bk-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.acct-bk-meta svg { width: .85rem; height: .85rem; color: var(--brand-500); }
.acct-bk-money { display: grid; align-content: center; gap: .25rem; padding: .9rem 1.1rem; background: var(--brand-50); border-left: 1px solid var(--brand-200); font-size: var(--t-xs); color: var(--ink-500); }
.acct-bk-money b { color: var(--ink-900); font-size: var(--t-sm); }
.acct-bk-money .is-due b { color: #b45309; }
.acct-bk-money .btn { margin-top: .4rem; }

.acct-back { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-sm); font-weight: 600; }
.acct-back svg { width: .95rem; height: .95rem; }
.acct-bd-title { margin: 0; font-size: var(--t-lg); color: var(--ink-900); }
.acct-bd-sub { margin: .2rem 0 0; font-size: var(--t-sm); color: var(--ink-500); }
.acct-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.acct-facts > div { padding: .6rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); }
.acct-facts dt { display: flex; align-items: center; gap: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.acct-facts dt svg { width: .8rem; height: .8rem; }
.acct-facts dd { margin: .2rem 0 0; font-weight: 700; color: var(--ink-900); font-size: var(--t-sm); }
.acct-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.acct-actions .btn { display: inline-flex; align-items: center; gap: .35rem; }
.acct-actions svg { width: .95rem; height: .95rem; }
.acct-table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.acct-table th { padding: .55rem .7rem; text-align: left; background: var(--brand-50); border-bottom: 1px solid var(--brand-200); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); white-space: nowrap; }
.acct-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink-800); }
/* Travel documents on a holiday booking: one row per traveller, four slots. */
.acct-card .note { margin: 0 0 .9rem; }
.acct-docs { display: grid; gap: .9rem; }
.acct-docs-row { display: grid; gap: .5rem; }
.acct-docs-name { font-size: var(--t-sm); color: var(--brand-900); }
.acct-docs-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.acct-doc { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .6rem .7rem; border: 1px dashed var(--brand-200); border-radius: var(--r-md, 10px); background: var(--brand-50); }
.acct-doc.is-on { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.acct-doc form { margin: 0; }
.acct-doc-k { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-xs); font-weight: 700; color: var(--ink-800); }
.acct-doc-k svg, .acct-doc-view svg, .acct-doc-pick svg { width: .9rem; height: .9rem; flex: none; }
.acct-doc.is-on .acct-doc-k svg { color: var(--success); }
.acct-doc-view { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); font-weight: 600; color: var(--success); }
.acct-doc-pick { position: relative; display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); font-weight: 600; color: var(--brand-700); cursor: pointer; }
.acct-doc-pick:hover { text-decoration: underline; }
.acct-doc-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.acct-doc-pick:focus-within { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) { .acct-docs-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.acct-pay > div { padding: .8rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); }
.acct-pay span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.acct-pay b { font-size: 1.15rem; color: var(--ink-900); }
.acct-pay .is-due { background: #fffbeb; border-color: #fde68a; }
.acct-pay .is-due b { color: #b45309; }
.acct-pay .is-clear { background: #f0fdf4; border-color: #bbf7d0; }

.acct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acct-toolbar p { margin: 0; font-weight: 600; color: var(--ink-700); }
.acct-toolbar .btn { display: inline-flex; align-items: center; gap: .35rem; }
.acct-toolbar svg { width: .95rem; height: .95rem; }
.acct-enq { padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.acct-enq-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.acct-enq h3 { margin: .35rem 0 .45rem; font-size: var(--t-md); color: var(--ink-900); }
.acct-enq-msg { margin: .7rem 0 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--brand-50); font-size: var(--t-sm); color: var(--ink-700); }

.acct-form { display: grid; gap: var(--sp-5); }
.acct-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct-form .input[readonly] { background: var(--brand-50); color: var(--ink-600); }
.acct-save { display: flex; justify-content: flex-end; }

@media (max-width: 1023px) {
    .acct { grid-template-columns: minmax(0, 1fr); }
    .acct-side { position: static; }
    .acct-nav { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .acct-nav .acct-out { margin-top: 0; border-top: 0; }
}
@media (max-width: 720px) {
    .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acct-complete { grid-template-columns: minmax(0, 1fr); }
    .acct-bk { grid-template-columns: minmax(0, 1fr); }
    .acct-bk-pic { min-height: 140px; }
    .acct-bk-money { border-left: 0; border-top: 1px solid var(--brand-200); }
    .acct-grid-3, .acct-pay { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   MY PROFILE - zaereen.com's users/profile: a card on the left, the two tabs
   and their sections on the right, one Save bar under them.
   ========================================================================== */
.pf { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.pf-card {
    position: sticky; top: calc(var(--header-h) + 1rem);
    display: grid; justify-items: center; gap: .55rem; padding: 1.5rem 1.2rem 1.2rem; text-align: center;
    background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.pf-photo { position: relative; display: grid; place-items: center; width: 7.2rem; height: 7.2rem; margin-bottom: .6rem; border-radius: 50%; background: var(--brand-50); border: 2px solid var(--brand-300); cursor: pointer; }
.pf-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-photo-ph { color: var(--brand-600); }
.pf-photo-ph svg { width: 2.2rem; height: 2.2rem; }
.pf-photo-btn {
    position: absolute; bottom: -.7rem; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap;
    background: var(--brand-900); color: #fff; font-size: .6875rem; font-weight: 700; box-shadow: var(--sh-sm);
}
.pf-photo-btn svg { width: .8rem; height: .8rem; }
.pf-name { margin: .3rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.45rem; color: var(--brand-900); }
.pf-mobile { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: var(--t-sm); color: var(--ink-600); }
.pf-mobile b { color: var(--brand-700); }
.pf-flag img { display: block; width: 22px; height: 15px; border-radius: 2px; object-fit: cover; }
.pf-meter { width: 100%; height: .4rem; border-radius: 999px; background: var(--brand-100); overflow: hidden; }
.pf-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--brand-800)); }
.pf-meter-k { margin: -.2rem 0 .2rem; font-size: var(--t-xs); color: var(--ink-500); }
.pf-meter-k b { color: var(--brand-800); }
.pf-ids { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); }
.pf-ids > div { display: grid; gap: .15rem; padding: .6rem .4rem; }
.pf-ids > div + div { border-left: 1px solid var(--brand-200); }
.pf-ids span { font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.pf-ids b { font-size: var(--t-sm); color: var(--ink-900); overflow-wrap: anywhere; }
.pf-links { display: grid; gap: .5rem; width: 100%; margin-top: .4rem; }
.pf-link {
    display: flex; align-items: center; justify-content: center; gap: .45rem; height: 2.6rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface);
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); text-decoration: none;
}
.pf-link svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.pf-link:hover { background: var(--brand-50); border-color: var(--brand-400); text-decoration: none; }
.pf-link.is-main { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); border-color: var(--brand-800); color: #fff; }
.pf-link.is-main svg { color: #fff; }

.pf-main { display: grid; gap: 0; min-width: 0; }
.pf-main > .note { margin-bottom: var(--sp-4); }
.pf-count { margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--brand-100); color: var(--brand-800); font-style: normal; font-size: .6875rem; }
.hotel-tab.is-on .pf-count { background: rgba(255, 255, 255, .2); color: #fff; }
.pf-pane { padding: 1.3rem 1.4rem 1.5rem; }
.pf-sec { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 .8rem; }
.pf-pane .pf-sec:first-child { margin-top: 0; }
.pf-sec-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: color-mix(in srgb, var(--tile) 12%, var(--surface)); color: var(--tile); }
.pf-sec-ico svg { width: 1rem; height: 1rem; }
.pf-sec .title-serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--brand-900); }
.pf-box { border: 1px solid var(--brand-200); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand-50) 50%, var(--surface)); overflow: hidden; }
.pf-box-band {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--brand-100), color-mix(in srgb, var(--brand-100) 55%, var(--brand-50)));
    border-bottom: 1px solid var(--brand-200);
}
.pf-grid { display: grid; gap: .8rem; padding: 1rem 1.1rem; }
.pf-grid + .pf-grid { padding-top: 0; }
.pf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-f { display: grid; gap: .4rem; align-content: start; margin: 0; min-width: 0; }
.pf-k { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); }
.pf-box-band .pf-k { justify-content: flex-start; }
.pf-k svg { width: .8rem; height: .8rem; }
.pf-ok { display: inline-grid; place-items: center; width: .95rem; height: .95rem; border-radius: 50%; background: #16a34a; color: #fff; }
.pf-ok svg { width: .6rem; height: .6rem; }
.pf .input, .pf .select { height: 2.7rem; font-size: var(--t-sm); border-color: var(--brand-200); background: var(--surface); }
.pf-upper { text-transform: uppercase; }
.pf-hint { font-size: var(--t-xs); color: var(--ink-500); line-height: 1.4; }
.pf-lead { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; padding: .55rem 1rem; border-radius: 999px; background: var(--brand-900); color: #fff; font-weight: 700; font-size: var(--t-sm); }
.pf-lead svg { width: .95rem; height: .95rem; }
.pf-scan { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; padding: .45rem .9rem; border: 1px solid var(--brand-300); border-radius: 999px; background: var(--surface); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--brand-800); cursor: pointer; }
.pf-scan svg { width: .95rem; height: .95rem; }
.pf-scan i { font-style: normal; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--brand-200); color: var(--ink-500); }
.pf-inicon { display: flex; align-items: center; height: 2.7rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.pf-inicon > span { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0 .4rem; border-radius: .45rem; background: var(--brand-800); color: #fff; flex: none; }
.pf-inicon > span svg { width: .9rem; height: .9rem; }
.pf-inicon .input { border: 0; height: 100%; padding-left: 0; }
.pf-mob { display: flex; align-items: center; gap: .5rem; height: 2.7rem; padding: 0 .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); font-size: var(--t-sm); color: var(--ink-700); }
.pf-mob b { color: var(--ink-900); }

.pf-docs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 0 1.1rem 1.1rem; }
.pf-doc { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; margin: 0; }
.pf-doc:hover { border-color: var(--brand-400); }
.pf-doc-ico { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: .5rem; background: var(--brand-50); border: 1px solid var(--brand-200); color: var(--brand-700); }
.pf-doc-ico svg { width: 1rem; height: 1rem; }
.pf-doc-main { flex: 1; min-width: 0; display: grid; }
.pf-doc-main b { font-size: var(--t-sm); color: var(--ink-900); }
.pf-doc-main small { font-size: var(--t-xs); color: var(--ink-500); overflow-wrap: anywhere; }
.pf-doc-btn { display: inline-flex; align-items: center; gap: .3rem; flex: none; padding: .45rem .85rem; border: 1px solid var(--brand-300); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 700; color: var(--brand-800); background: var(--surface); }
.pf-doc-btn svg { width: .85rem; height: .85rem; }

.pf-people { display: grid; gap: .9rem; }
.pf-person { border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--brand-50) 50%, var(--surface)); }
.pf-person-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; background: var(--brand-100); border-bottom: 1px solid var(--brand-200); }
.pf-person-tag { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--brand-900); }
.pf-person-tag svg { width: .95rem; height: .95rem; color: var(--brand-600); }
.pf-remove { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 700; color: #b91c1c; cursor: pointer; }
.pf-remove svg { width: .85rem; height: .85rem; }
.pf-file input[type="file"] { font-size: var(--t-xs); padding: .45rem 0; }
.pf-file a { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); font-weight: 600; }
.pf-file a svg { width: .8rem; height: .8rem; }
.pf-add { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; height: 3rem; margin-top: .9rem; border: 1.5px dashed var(--brand-300); border-radius: var(--r-md); background: transparent; font: inherit; font-weight: 700; color: var(--brand-800); cursor: pointer; }
.pf-add:hover { background: var(--brand-50); }
.pf-add svg { width: 1rem; height: 1rem; }

.pf-save {
    display: flex; align-items: center; gap: 1rem; margin-top: var(--sp-4); padding: .9rem 1.1rem;
    border: 1px solid var(--brand-200); border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--brand-100), var(--brand-50));
}
.pf-save span { font-size: var(--t-xs); color: var(--ink-500); }
.pf-save-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.9rem; padding: 0 1.6rem; font-weight: 700; }
.pf-save-btn svg { width: 1rem; height: 1rem; }
.pf-scanbox .btn { display: flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; }
.pf-scanbox .btn svg { width: 1rem; height: 1rem; }

@media (max-width: 1100px) {
    .pf-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-box-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
    .pf { grid-template-columns: minmax(0, 1fr); }
    .pf-card { position: static; }
    .pf-links { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 720px) {
    .pf-grid-3, .pf-grid-4, .pf-grid-5, .pf-box-band, .pf-docs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pf-docs { grid-template-columns: minmax(0, 1fr); }
    .pf-save { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   My account (account) - zaereen.com's users/myaccount: four figures, Make
   Payment, four tabs of tables, and the Submit payment dialog.
   ========================================================================== */
a.pf-photo { text-decoration: none; }
.ac-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.ac-sum-c {
    display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem;
    background: var(--surface); border: 1px solid var(--brand-200); border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.ac-sum-c.is-owed { background: color-mix(in srgb, var(--brand-100) 60%, var(--surface)); border-color: var(--brand-300); }
.ac-sum-c small { display: inline-flex; align-items: center; gap: .35rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.ac-sum-c small svg { width: .8rem; height: .8rem; color: var(--brand-600); }
.ac-sum-c b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--ink-900); }
.ac-sum-c.is-owed b { color: var(--brand-700); }
.ac-sum-c > span { font-size: var(--t-xs); color: var(--ink-500); }
.ac-act { margin: 1rem 0 1.4rem; }
.ac-act .btn svg { width: 1rem; height: 1rem; }
.ac-pane { padding: 1.3rem 1.4rem; }
.ac-blank { margin: 0; padding: 1.2rem; text-align: center; font-size: var(--t-sm); color: var(--ink-500); }
.ac-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-700); font-weight: 600; text-decoration: underline; cursor: pointer; }
.ac-tw { overflow-x: auto; border: 1px solid var(--brand-200); border-radius: var(--r-md); }
.ac-t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ac-t th {
    padding: .8rem .9rem; text-align: left; white-space: nowrap;
    font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700);
    background: linear-gradient(180deg, var(--brand-100), color-mix(in srgb, var(--brand-100) 55%, var(--brand-50)));
    border-bottom: 1px solid var(--brand-200);
}
.ac-t td { padding: .8rem .9rem; border-top: 1px solid var(--line); color: var(--ink-700); vertical-align: top; }
.ac-t tbody tr:first-child td { border-top: 0; }
.ac-t tbody tr:hover td { background: color-mix(in srgb, var(--brand-50) 60%, transparent); }
.ac-t .is-num { text-align: right; white-space: nowrap; }
.ac-t .is-nw { white-space: nowrap; }
.ac-t .is-dr { color: #b91c1c; font-weight: 600; }
.ac-t .is-cr { color: #15803d; font-weight: 600; }
.ac-t .is-run { color: var(--ink-900); font-weight: 600; }
.ac-t a { display: inline-flex; align-items: center; gap: .25rem; color: var(--brand-700); font-weight: 600; }
.ac-t a svg { width: .85rem; height: .85rem; }
.ac-b { font-weight: 700; color: var(--ink-900) !important; }
.ac-r { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; font-size: var(--t-xs); color: var(--ink-500); }
.ac-r .acct-type { margin: 0; }
.ac-due { display: block; font-size: var(--t-xs); font-weight: 500; color: #b91c1c; }
.ac-vt { display: inline-block; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--brand-300); background: var(--brand-100); color: var(--brand-800); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ac-vt.is-wait { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ac-st { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.ac-st.is-ok { background: #dcfce7; color: #166534; }
.ac-st.is-wait { background: #fef3c7; color: #92400e; }
.ac-st.is-no { background: #fee2e2; color: #991b1b; }

.ac-paybox { width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; text-align: left; }
.ac-paybox h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.ac-paybox h2 svg { width: 1.2rem; height: 1.2rem; color: var(--brand-600); }
.ac-pay-bal { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-200); font-size: var(--t-sm); color: var(--ink-600); }
.ac-pay-bal b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.4rem; color: var(--ink-900); }
.ac-pay-bal b.is-owed { color: var(--brand-700); }
.ac-pay-bal small { font-family: inherit; font-size: var(--t-xs); color: var(--ink-500); }
.ac-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ac-pay-grid .ac-span { grid-column: 1 / -1; }
.ac-pay-grid .pf-k { justify-content: flex-start; }
.ac-paybox .input, .ac-paybox .select { height: 2.7rem; font-size: var(--t-sm); border-color: var(--brand-200); background: var(--surface); }
.ac-paybox .ac-file { padding: .45rem .6rem; font-size: var(--t-xs); }
.ac-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ac-tile { display: grid; justify-items: center; gap: .3rem; padding: .7rem .4rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink-700); cursor: pointer; }
.ac-tile svg { width: 1.2rem; height: 1.2rem; color: var(--brand-600); }
.ac-tile:hover { border-color: var(--brand-400); background: var(--brand-50); }
.ac-tile.is-on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.ac-tile.is-on svg { color: #fff; }
.ac-pay-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ac-pay-foot > span:last-child { display: flex; gap: .5rem; }
.ac-pay-safe { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-xs); color: var(--ink-500); }
.ac-pay-safe svg { width: .9rem; height: .9rem; color: #16a34a; }

@media (max-width: 1100px) { .ac-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .ac-sum { grid-template-columns: 1fr; }
    .ac-pay-grid { grid-template-columns: 1fr; }
    .ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-pane { padding: 1rem; }
}

/* ==========================================================================
   CARD COLOURS - the dark card (hotels, holidays, visas, activities and the
   /holidays destination card) in other colourways. Colour only: nothing here
   moves or resizes anything. <html data-cards="..."> picks one; with no
   attribute, or "navy", the card follows the site colour as before.
   ========================================================================== */
html[data-cards="emerald"]  { --cd-top: #145a45; --cd-bot: #082e23; --cd-edge: #2f7a62; --cd-acc: #e9c46a; --cd-acc2: #f5dc98; --cd-go1: #e6ad2e; --cd-go2: #c98a0b; }
html[data-cards="maroon"]   { --cd-top: #74243a; --cd-bot: #3d0f1d; --cd-edge: #93455a; --cd-acc: #f6c667; --cd-acc2: #fbe0a4; --cd-go1: #f59e0b; --cd-go2: #d97706; }
html[data-cards="charcoal"] { --cd-top: #2f3947; --cd-bot: #12171d; --cd-edge: #4a5668; --cd-acc: #38bdf8; --cd-acc2: #7dd3fc; --cd-go1: #0ea5e9; --cd-go2: #0369a1; }
html[data-cards="ocean"]    { --cd-top: #0f5f70; --cd-bot: #06303b; --cd-edge: #2f7f90; --cd-acc: #ffd166; --cd-acc2: #ffe3a3; --cd-go1: #f47c7a; --cd-go2: #e04f4c; }
html[data-cards="royal"]    { --cd-top: #50308a; --cd-bot: #24124a; --cd-edge: #6d52a3; --cd-acc: #f9c74f; --cd-acc2: #fcdf97; --cd-go1: #f472b6; --cd-go2: #db2777; }
html[data-cards="ivory"]    { --cd-top: #fffdf8; --cd-bot: #f5ecda; --cd-edge: #e2cfa6; --cd-acc: #9a6b12; --cd-acc2: #7a520a; --cd-go1: var(--brand-600); --cd-go2: var(--brand-800); }

html[data-cards]:not([data-cards="navy"]) :is(.dcard, .card-dark) {
    --amber: var(--cd-acc);
    background: linear-gradient(180deg, var(--cd-top) 0%, var(--cd-bot) 70%);
    border-color: var(--cd-edge);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cd-bot) 28%, transparent);
}
html[data-cards]:not([data-cards="navy"]) :is(.dcard, .card-dark):hover {
    border-color: var(--amber);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--cd-bot) 38%, transparent);
}
html[data-cards]:not([data-cards="navy"]) :is(.dcard-pic, .card-dark .hcard-pic, .card-dark .card-media) { background: var(--cd-bot); }
html[data-cards]:not([data-cards="navy"]) :is(.dcard-go, .card-dark .hcard-go, .card-dark .link-arrow) {
    background: linear-gradient(135deg, var(--cd-go1), var(--cd-go2));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-go2) 35%, transparent);
}
html[data-cards]:not([data-cards="navy"]) .card-dark .card-title a:hover { color: var(--cd-acc2); }
html[data-cards]:not([data-cards="navy"]) .card-dark .hcard-name { border-bottom-color: color-mix(in srgb, var(--cd-acc) 28%, transparent); }
html[data-cards]:not([data-cards="navy"]) .card-dark :is(.hcard-foot, .card-foot) { border-top-color: color-mix(in srgb, var(--cd-acc) 45%, transparent); }

/* Ivory: the one light colourway, so the white type turns dark. */
html[data-cards="ivory"] :is(.dcard, .card-dark) { color: #3b3326; }
html[data-cards="ivory"] :is(.dcard, .card-dark) :is(
    .dcard-stats b, .dcard-more-v, .dcard-price b, .hcard-stats .v, .hcard-stats .v b,
    .card-price strong, .card-price.is-none b, .card-meta, .price-now, .visa-facts b, .visa-docs ul b, .visa-est b
) { color: #1f2937; }
html[data-cards="ivory"] :is(.dcard, .card-dark) :is(
    .dcard-more-k, .dcard-price span, .pkg-cities, .hcard-addr, .hcard-text, .card-text, .price-unit, .card-price-k,
    .visa-docs summary, .visa-docs ul, .visa-docs.is-empty, .visa-docs.is-empty span
) { color: #5b6472; }
html[data-cards="ivory"] :is(.dcard, .card-dark) .pkg-cities i { color: rgba(0, 0, 0, .25); }
html[data-cards="ivory"] :is(.dcard, .card-dark) :is(.dcard-foot, .hcard-foot, .card-foot) { background: color-mix(in srgb, var(--cd-acc) 9%, #fff); }
html[data-cards="ivory"] .dcard-foot,
html[data-cards="ivory"] .card-dark :is(.visa-docs, .act-more) { border-top-color: rgba(0, 0, 0, .1); }
html[data-cards="ivory"] .card-dark .pkg-enq { border-color: var(--cd-edge); color: #1f2937; }
html[data-cards="ivory"] .card-dark .pkg-enq:hover { background: color-mix(in srgb, var(--cd-acc) 10%, #fff); border-color: var(--cd-acc); }
html[data-cards="ivory"] .card-dark .act-stars span:not(.is-on) { color: rgba(255, 255, 255, .55); }
html[data-cards="ivory"] .card-dark .visa-est { background: #dcfce7; border-color: #86efac; }
html[data-cards="ivory"] .card-dark .visa-est span { color: #15803d; }

/* The picker's second row. */
.theme-pop-head.is-cards { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.theme-swatch.is-card { background: linear-gradient(135deg, var(--sw) 0 55%, var(--sw2) 55% 100%); }

/* ==========================================================================
   Holiday package page (holidays/{slug}) - zaereen.com's package page: facts
   strip, folder tabs with the gallery, day cards, hotels per grade and the
   policies rail, and Plan your journey with the category tiles.
   ========================================================================== */
.pk-strip .hotel-strip-item > div { min-width: 0; }
.pk-pax { display: inline-flex; gap: .9rem; }
.pk-pax > span { display: grid; justify-items: center; line-height: 1.15; }
.pk-pax small { font-size: .625rem; color: var(--ink-500); }
.pk-pax > span + span { padding-left: .9rem; border-left: 1px solid var(--line); }
.pk-pax b { font-size: 1rem; color: var(--ink-900); }
.pk-incs { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.pk-incs span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: .4rem; border: 1px solid color-mix(in srgb, #15803d 35%, transparent); background: color-mix(in srgb, #15803d 10%, var(--surface)); color: #15803d; }
.pk-incs svg { width: .85rem; height: .85rem; }

.pk-muted { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--ink-500); }
.pk-prose { font-size: var(--t-sm); }
.pk-prose * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

/* Gallery */
.pk-gal { padding: .6rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); }
.pk-gal-main { aspect-ratio: 16 / 8.5; border-radius: var(--r-sm); overflow: hidden; background: var(--brand-100); }
.pk-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-gal-strip { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; scrollbar-width: thin; }
.pk-gal-thumb { flex: none; width: 5.6rem; height: 4rem; padding: 0; border: 2px solid transparent; border-radius: .45rem; overflow: hidden; background: none; cursor: pointer; opacity: .75; }
.pk-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-gal-thumb:hover { opacity: 1; }
.pk-gal-thumb.is-on { border-color: var(--brand-600); opacity: 1; }

.pk-dates, .pk-overview { margin-top: 1.2rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden; }
.pk-dates-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--brand-900); color: #fff; }
.pk-dates-head svg { width: 1.05rem; height: 1.05rem; color: var(--brand-200); }
.pk-dates-head .title-serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; }
.pk-dates-list { display: grid; gap: .5rem; padding: .8rem; }
.pk-date { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .55rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.pk-date:hover { border-color: var(--brand-400); }
.pk-date.is-on { border-color: var(--brand-700); background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-700); }
.pk-date-d { display: grid; justify-items: center; width: 2.8rem; padding: .25rem 0; border-radius: .4rem; background: var(--brand-800); color: #fff; font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; }
.pk-date-d b { font-size: 1.1rem; letter-spacing: 0; }
.pk-date-i { display: grid; font-size: var(--t-sm); color: var(--ink-900); }
.pk-date-i small { color: var(--ink-500); }
.pk-date-p { font-weight: 700; color: var(--brand-700); white-space: nowrap; }
.pk-windows { padding: .9rem 1rem; }
.pk-window { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--t-sm); color: var(--ink-700); }
.pk-window + .pk-window { margin-top: .4rem; }
.pk-window svg { width: 1rem; height: 1rem; color: #15803d; flex: none; margin-top: .15rem; }
.pk-overview .about-body, .pk-overview .about-more { margin-left: 1rem; margin-right: 1rem; }
.pk-overview .about-body { margin-top: .9rem; }
.pk-overview .about-more { margin-bottom: .9rem; }
.pk-overview .about-body:not(.is-folded) { margin-bottom: .9rem; }

/* Day cards */
.pk-days { display: grid; gap: .9rem; }
.pk-day { border: 1px solid var(--brand-200); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.pk-day-head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: linear-gradient(180deg, var(--brand-100), color-mix(in srgb, var(--brand-100) 55%, var(--brand-50))); border-bottom: 1px solid var(--brand-200); }
.pk-day-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand-800); color: #fff; flex: none; }
.pk-day-ico svg { width: .95rem; height: .95rem; }
.pk-day-pill { flex: none; padding: .2rem .65rem; border-radius: 999px; background: var(--brand-700); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pk-day-title { font-weight: 700; font-size: var(--t-sm); color: var(--brand-900); }
.pk-day-body { padding: .9rem 1rem; }
.pk-sights { margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--brand-50); border: 1px dashed var(--brand-300); }
.pk-sights b { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.pk-sights b svg { width: .85rem; height: .85rem; }
.pk-sights ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: var(--t-sm); color: var(--ink-700); }
.pk-day-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 1rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand-50) 50%, var(--surface)); font-size: var(--t-xs); color: var(--ink-600); }
.pk-day-foot svg { width: .85rem; height: .85rem; color: var(--brand-600); }
.pk-day-when, .pk-day-where { display: inline-flex; align-items: center; gap: .35rem; }
.pk-day-when b, .pk-day-where b { color: var(--ink-900); }
.pk-day-meals { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.pk-day-meals span { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px; background: #dcfce7; color: #166534; font-weight: 600; }
.pk-day-meals span svg { color: currentColor; }
.pk-day-meals span.is-none { background: var(--brand-50); color: var(--ink-500); }

/* Hotels */
.pk-stays { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.pk-stay { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); }
.pk-stay > svg { width: 1.3rem; height: 1.3rem; color: var(--brand-600); flex: none; }
.pk-stay b { display: block; font-size: var(--t-sm); color: var(--ink-900); }
.pk-stay span { font-size: var(--t-xs); color: var(--ink-500); }
.pk-hset-k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.pk-hset-k svg { width: .9rem; height: .9rem; }
.pk-hotels { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.pk-hotel { display: flex; gap: .7rem; padding: .55rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); }
.pk-hotel-pic { display: grid; place-items: center; width: 5rem; height: 4rem; flex: none; border-radius: .4rem; overflow: hidden; background: var(--brand-50); color: var(--brand-500); }
.pk-hotel-pic img { width: 100%; height: 100%; object-fit: cover; }
.pk-hotel-pic svg { width: 1.4rem; height: 1.4rem; }
.pk-hotel-b { display: grid; align-content: center; gap: .15rem; min-width: 0; }
.pk-hotel-b b { font-size: var(--t-sm); color: var(--ink-900); }
.pk-hotel-b span { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); color: var(--ink-500); }
.pk-hotel-b span svg { width: .8rem; height: .8rem; }
.pk-hotel-b .pk-stars { color: #f59e0b; }
/* A package's hotel card that opens the hotel's own page. */
a.pk-hotel { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.pk-hotel:hover { border-color: var(--brand-500); box-shadow: 0 2px 10px rgb(0 0 0 / .06); }
a.pk-hotel:hover .pk-hotel-b b { color: var(--brand-700); text-decoration: underline; }

/* The office's own hotels (pages/hotels/stay.php). */
.own-stars { display: flex; gap: .15rem; margin: .35rem 0 0; color: #f59e0b; }
.own-stars svg { width: 1.1rem; height: 1.1rem; }
.own-hero { margin-bottom: 1rem; }
.own-hero .pk-gal-main img { max-height: 26rem; }
.own-block { display: flex; gap: 1rem; margin-top: 1.25rem; }
.own-block img { width: 11rem; height: 8rem; flex: none; object-fit: cover; border-radius: var(--r-sm); }
.own-block h3 { margin: 0 0 .35rem; font-size: var(--t-base); color: var(--ink-900); }
.own-rooms { display: grid; gap: .9rem; }
.own-room { padding: .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); }
.own-room-top { display: flex; align-items: center; gap: .8rem; }
.own-room-top .pk-hotel-b { flex: 1; }
.own-room-top .pk-hotel-b b { font-size: var(--t-base); }
.own-room-ask { flex: none; }
.own-room-desc { margin-top: .6rem; }
.own-rate-wrap { margin-top: .7rem; overflow-x: auto; }
.own-rate { width: 100%; min-width: 32rem; }
.own-inex { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; margin-top: .7rem; font-size: var(--t-sm); }
.own-inex h4 { margin: 0 0 .25rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-700); }
.own-more { display: flex; justify-content: center; width: 100%; margin-top: .8rem; }
.own-h { margin: 0 0 1rem; }
.own-grid { margin-bottom: 2rem; }
@media (max-width: 640px) {
    .own-block { flex-direction: column; }
    .own-block img { width: 100%; height: 12rem; }
    .own-room-top { flex-wrap: wrap; }
    .own-room-ask { width: 100%; }
}
.pk-grade { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--brand-300); background: var(--brand-50); }
.pk-grade-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .5rem; background: var(--brand-800); color: #fff; }
.pk-grade-ico svg { width: 1.1rem; height: 1.1rem; }
.pk-grade b { display: block; color: var(--ink-900); }
.pk-grade small { font-size: var(--t-xs); color: var(--ink-500); }

/* Policies rail */
.pk-pol { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.pk-pol-nav { display: grid; gap: .4rem; }
.pk-pol-item { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-700); text-align: left; cursor: pointer; }
.pk-pol-item > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: none; border-radius: .45rem; background: var(--brand-100); color: var(--brand-700); }
.pk-pol-item svg { width: .9rem; height: .9rem; }
.pk-pol-item > svg:last-child { margin-left: auto; color: var(--ink-400); }
.pk-pol-item:hover { border-color: var(--brand-400); background: var(--brand-50); }
.pk-pol-item.is-on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.pk-pol-item.is-on > span { background: rgba(255, 255, 255, .15); color: #fff; }
.pk-pol-item.is-on > svg:last-child { color: #fff; }
.pk-pol-pane { padding: 1rem 1.1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand-50) 45%, var(--surface)); }
.pk-pol-pane h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; font-size: 1rem; color: var(--brand-900); }
.pk-pol-pane h3 svg { width: 1.05rem; height: 1.05rem; color: var(--brand-600); }
.pk-incex { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pk-incex-k { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pk-incex-k.is-in { color: #15803d; }
.pk-incex-k.is-out { color: #b91c1c; }
.pk-inc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.pk-inc-tiles > div { display: grid; justify-items: center; gap: .3rem; padding: .6rem .3rem; border: 1px solid #bbf7d0; border-radius: var(--r-sm); background: #f0fdf4; text-align: center; }
.pk-inc-tiles span { color: #15803d; }
.pk-inc-tiles svg { width: 1.3rem; height: 1.3rem; }
.pk-inc-tiles b { font-size: var(--t-xs); color: var(--ink-800); }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--t-sm); color: var(--ink-700); }
.pk-list li { display: flex; align-items: flex-start; gap: .5rem; }
.pk-list svg { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }
.pk-list.is-out svg { color: #b91c1c; }
.pk-list.is-in svg { color: var(--brand-600); }

/* Plan your journey */
.pk-ages { display: grid; gap: .4rem; margin-top: .2rem; }
.pk-ages[hidden] { display: none; }
.pk-ages-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .4rem; }
.pk-ages-row .select { height: 2.3rem; font-size: var(--t-xs); }
.pk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; }
.pk-cat { display: grid; justify-items: center; gap: .3rem; padding: .7rem .3rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: .625rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-700); cursor: pointer; transition: all .15s var(--ease-out); }
.pk-cat svg { width: 1.2rem; height: 1.2rem; color: var(--brand-600); }
.pk-cat:hover { border-color: var(--brand-400); background: var(--brand-50); }
.pk-cat.is-on { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); border-color: var(--brand-800); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-800) 30%, transparent); }
.pk-cat.is-on svg { color: #fff; }
.pk-outside { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .55rem .7rem; border-radius: var(--r-sm); background: #fef3c7; color: #92400e; font-size: var(--t-xs); }
.pk-outside[hidden] { display: none; }
.pk-outside svg { width: .95rem; height: .95rem; flex: none; }
.pk-onreq { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--brand-200); background: var(--brand-50); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
.pk-onreq[hidden] { display: none; }
.pk-onreq b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; letter-spacing: 0; text-transform: none; color: var(--brand-800); }
.pk-line { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); font-size: var(--t-sm); }
.pk-line[hidden] { display: none; }
.pk-line-ico { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); flex: none; }
.pk-line-ico svg { width: .85rem; height: .85rem; }
.pk-line-k { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); }
.pk-line b { color: var(--ink-900); }
.pk-cta { display: grid; grid-template-columns: auto 1fr 1.2fr; gap: .5rem; }
.pk-cta .btn { justify-content: center; }
.pk-cta .btn svg { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
    .pk-pol { grid-template-columns: 1fr; }
    .pk-pol-nav { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
@media (max-width: 560px) {
    .pk-incex { grid-template-columns: 1fr; }
    .pk-cta { grid-template-columns: 1fr 1fr; }
    .pk-cta .visa-book { grid-column: 1 / -1; }
    .pk-date { grid-template-columns: auto 1fr; }
    .pk-date-p { grid-column: 2; }
}

/* The plan panel stays inside its 360px column: the fare table must not widen it. */
.hotel-aside { min-width: 0; }
.pk-plan { min-width: 0; }
.pk-plan .visa-plan-body { grid-template-columns: minmax(0, 1fr); }
.pk-plan .visa-rate { width: 100%; table-layout: fixed; }
.pk-plan .visa-rate th:first-child, .pk-plan .visa-rate td:first-child { width: 36%; }
.pk-plan .visa-rate td { overflow-wrap: anywhere; }
.pk-plan .visa-rate th:first-child, .pk-plan .visa-rate td:first-child { width: 30%; }
.pk-plan .visa-rate th:last-child, .pk-plan .visa-rate td:last-child { width: 30%; white-space: nowrap; overflow-wrap: normal; }
.pk-cta { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); }
.pk-cta .btn { min-width: 0; padding-left: .6rem; padding-right: .6rem; gap: .35rem; white-space: nowrap; }
.pk-plan .visa-rate { font-size: .75rem; }
.pk-plan .visa-rate td.num, .pk-plan .visa-rate th.num { white-space: nowrap; overflow-wrap: normal; }
.pk-plan .visa-rate th:first-child, .pk-plan .visa-rate td:first-child { width: 28%; }

/* Reserve a package (holidays/reserve) - on the visa application's cards. */
.rs-lead { align-items: center; }
.rs-lead > div { flex: 1; min-width: 0; }
.rs-verified { flex: none; padding: .35rem .9rem; border: 1px solid #86efac; border-radius: 999px; background: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #15803d; }
.rs-change { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; font-size: var(--t-sm); font-weight: 600; color: var(--brand-700); }
.rs-change svg { width: .9rem; height: .9rem; }
.va-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   The package enquiry popup (PDF / Enquiry / Get a quote) and the
   reservation's sign-in gate - zaereen.com's "Reserve your seat" and
   "Let's find your account", in the site's colours.
   ========================================================================== */
.pk-flash { margin-top: var(--sp-4); }
.eq, .gate {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem;
    background: rgba(10, 20, 40, .55); backdrop-filter: blur(3px);
}
.eq[hidden], .gate[hidden] { display: none; }
.eq-box {
    position: relative; width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
    border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 24px 60px rgba(10, 20, 40, .35);
    border: 1px solid var(--brand-200);
}
.eq-head { position: relative; padding: 1.3rem 3rem 1.1rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--brand-800), var(--brand-900)); }
.eq-x, .gate-x {
    position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.eq-x:hover { background: rgba(255, 255, 255, .2); }
.eq-kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fbbf24; }
.eq-head h2 { margin: .3rem 0 .5rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; }
.eq-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin: 0; font-size: var(--t-sm); color: rgba(255, 255, 255, .85); }
.eq-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.eq-meta svg { width: .9rem; height: .9rem; color: #fbbf24; }
.eq-meta b { color: #fff; }
.eq-body { padding: 1.1rem 1.3rem 1.3rem; display: grid; gap: 1rem; }
.eq-search { padding: .9rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); }
.eq-search-k { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); }
.eq-search-k svg { width: .95rem; height: .95rem; }
.eq-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.eq-tiles > div { display: grid; gap: .3rem; align-content: start; padding: .6rem .7rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); }
.eq-tiles span { display: inline-flex; align-items: center; gap: .3rem; font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.eq-tiles span svg { width: .8rem; height: .8rem; color: var(--brand-600); flex: none; }
.eq-tiles b { font-size: var(--t-sm); color: var(--ink-900); }
.eq-hint { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.eq-grid { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.eq-span { grid-column: 1 / -1; }
.eq-f { display: grid; gap: .35rem; margin: 0; min-width: 0; }
.eq-k { display: inline-flex; align-items: center; gap: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); }
.eq-k svg { width: .8rem; height: .8rem; }
.eq-k i { font-style: normal; color: #dc2626; }
.eq-k small { font-size: .5625rem; font-weight: 600; letter-spacing: .06em; text-transform: lowercase; color: var(--ink-500); }
.eq .input, .eq .select, .gate .input { height: 2.7rem; font-size: var(--t-sm); border-color: var(--brand-200); background: var(--surface); }
.eq-phone { display: flex; align-items: center; height: 2.7rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.eq-phone:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent); }
.eq-phone img { width: 22px; height: 15px; margin-left: .6rem; border-radius: 2px; object-fit: cover; flex: none; }
.eq-phone select { height: 100%; padding: 0 .3rem 0 .35rem; border: 0; border-right: 1px solid var(--brand-200); background: var(--brand-50); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); cursor: pointer; }
.eq-phone input { flex: 1; min-width: 0; height: 100%; padding: 0 .7rem; border: 0; background: transparent; font: inherit; font-size: var(--t-sm); outline: none; }
.eq-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.eq-foot p { margin: 0; max-width: 20rem; font-size: var(--t-xs); color: var(--ink-500); }
.eq-foot .btn { flex: none; min-width: 11rem; justify-content: center; }
.eq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* The sign-in gate on the reservation. */
body.has-gate .hotel-strip, body.has-gate main > .section, body.has-gate .hero { filter: blur(2px); }
.gate-box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.6rem 1.6rem 1.3rem; border-radius: var(--r-lg); background: var(--surface); text-align: center; box-shadow: 0 24px 60px rgba(10, 20, 40, .35); }
.gate-x { border-color: var(--brand-200); background: var(--brand-50); color: var(--ink-600); }
.gate-ico { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
.gate-ico svg { width: 1.4rem; height: 1.4rem; }
.gate-box h2 { margin: .7rem 0 .4rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.7rem; color: var(--brand-900); }
.gate-sub { margin: 0 0 1rem; font-size: var(--t-sm); color: var(--ink-600); }
.gate-google { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 2.8rem; border: 1px solid var(--ink-300, #cbd5e1); border-radius: var(--r-sm); background: #fff; font-weight: 600; color: var(--ink-800); text-decoration: none; }
.gate-google:hover { background: var(--brand-50); text-decoration: none; }
.gate-or { display: flex; align-items: center; gap: .7rem; margin: .9rem 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate-box .eq-f { text-align: left; }
.gate-go { width: 100%; justify-content: center; margin-top: 1rem; height: 2.9rem; }
.gate-sent { margin: 0 0 .8rem; font-size: var(--t-sm); color: var(--ink-600); }
.gate-note { margin: .8rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.rs-need { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px dashed var(--brand-300); border-radius: var(--r-md); background: var(--brand-50); }
.rs-need-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--brand-800); color: #fff; }
.rs-need-ico svg { width: 1.1rem; height: 1.1rem; }
.rs-need > div { flex: 1; display: grid; }
.rs-need b { color: var(--ink-900); }
.rs-need span { font-size: var(--t-xs); color: var(--ink-500); }

@media (max-width: 640px) {
    .eq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eq-grid { grid-template-columns: 6rem minmax(0, 1fr); }
    .eq-grid .eq-f:nth-child(3) { grid-column: 1 / -1; }
    .eq-foot { flex-direction: column; align-items: stretch; }
    .rs-need { flex-wrap: wrap; }
}
.gate-box .eq-f + .eq-f { margin-top: .9rem; }
.eq .eq-head h2.title-serif { color: #fff; }

/* ==========================================================================
   Traveller Stories (components/stories.php) - zaereen.com's reviews rail in
   this site's colours: photograph with flag and stars, the name, four
   figures, the quote, and a foot with the stars and View.
   ========================================================================== */
.st-section { background: color-mix(in srgb, var(--brand-50) 55%, transparent); }
.st-head .title-serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--brand-900); margin: .2rem 0 0; }
.st-head p { margin: .3rem 0 0; }
.st-wrap { position: relative; }
.st-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 3 * 20px) / 4)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; }
.st-rail::-webkit-scrollbar { display: none; }
.st-card { display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--brand-200); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.st-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md, 0 12px 28px rgba(15, 23, 42, .12)); }
.st-pic { position: relative; height: 170px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); border-bottom: 3px solid #f5a524; }
.st-pic img { width: 100%; height: 100%; object-fit: cover; }
.st-flag { position: absolute; top: 10px; left: 10px; z-index: 1; line-height: 0; padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.st-flag img { width: 30px; height: 20px; border-radius: 3px; object-fit: cover; }
.st-rate { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; gap: 1px; padding: 4px 7px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fbbf24; }
.st-rate svg { width: 11px; height: 11px; }
.st-off { color: rgba(255, 255, 255, .35); line-height: 0; }
.st-initials { font-family: "Cormorant Garamond", Georgia, serif; font-size: 3rem; font-weight: 700; color: rgba(255, 255, 255, .9); letter-spacing: .05em; }
.st-body { flex: 1; padding: 1rem 1rem .8rem; }
.st-body h3 { margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); text-align: center; font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; margin-bottom: .8rem; text-align: center; }
.st-stats .v { display: inline-flex; align-items: center; gap: .25rem; }
.st-stats svg { width: 11px; height: 11px; color: var(--brand-600); flex: none; }
.st-stats .v svg:first-child { color: #f59e0b; }
.st-stats > div:nth-child(n+2) .v svg { color: var(--brand-600); }
.st-stats b { font-size: .8125rem; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 4.5rem; }
.st-stats small { display: block; margin-top: .1rem; font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.st-body blockquote { position: relative; margin: 0; padding-left: 1.3rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-700); }
.st-body blockquote svg { position: absolute; left: 0; top: .15rem; width: .95rem; height: .95rem; color: #f5a524; }
.st-body blockquote span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand-50) 70%, var(--surface)); }
.st-foot small { display: block; font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.st-stars { display: inline-flex; gap: 2px; color: #f59e0b; }
.st-stars svg { width: 13px; height: 13px; }
.st-stars .st-off { color: var(--brand-200); }
.st-foot .btn { padding: .4rem 1.1rem; }
.st-nav { position: absolute; top: 42%; z-index: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--brand-200); border-radius: 50%; background: var(--surface); color: var(--brand-800); box-shadow: var(--sh-sm); cursor: pointer; }
.st-nav svg { width: 1rem; height: 1rem; }
.st-nav.is-prev { left: -1.2rem; }
.st-nav.is-next { right: -1.2rem; }
.st-nav:disabled { opacity: .35; cursor: default; }
.st-wrap.is-static .st-nav { display: none; }
.st-faq-band { background: color-mix(in srgb, var(--brand-100) 45%, transparent); border-top: 1px solid var(--brand-200); }

@media (max-width: 1100px) { .st-rail { grid-auto-columns: minmax(250px, calc((100% - 2 * 20px) / 3)); } }
@media (max-width: 760px) {
    .st-rail { grid-auto-columns: 82%; }
    .st-nav { display: none; }
}
.st-pic { overflow: hidden; flex: none; }
.st-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Footer: the Oxford lockup, and the social row in each network's colour on hover. */
.footer-logo { display: inline-block; line-height: 0; }
.footer-brand .footer-logo img { height: 58px; width: auto; margin-bottom: var(--sp-3); }
.footer-social { flex-wrap: wrap; }
.footer-social a { transition: background .15s ease, transform .15s ease; }
.footer-social a:hover { transform: translateY(-2px); color: #fff; }
.footer-social a.is-facebook:hover  { background: #1877f2; }
.footer-social a.is-x:hover         { background: #000; }
.footer-social a.is-instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.footer-social a.is-linkedin:hover  { background: #0a66c2; }
.footer-social a.is-youtube:hover   { background: #ff0000; }
.footer-social a.is-whatsapp:hover  { background: #25d366; }

/* ==========================================================================
   About us (about) - zaereen.com's about page: folder tabs with a serif
   heading ruled underneath, service tiles, reasons, and the brand card.
   ========================================================================== */
.ab-pane { padding: 1.6rem 1.7rem 1.8rem; }
.ab-h { margin: 0 0 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--brand-200); position: relative;
        font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-900); }
.ab-h::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3.5rem; height: 2px; background: var(--brand-600); }
.ab-lede { margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.65; color: var(--ink-900); }
.ab-lede b { color: var(--brand-800); }
.ab-pane .prose { color: var(--ink-600); }
.ab-pane .prose b { color: var(--brand-800); }
.ab-mile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1.3rem; }
.ab-mile > div { display: grid; gap: .25rem; padding: .8rem .9rem; border: 1px solid var(--brand-200); border-top: 3px solid var(--brand-600); border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); }
.ab-mile b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; color: var(--brand-800); }
.ab-mile span { font-size: var(--t-xs); color: var(--ink-600); line-height: 1.45; }
.ab-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.ab-tile { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.05rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: var(--surface); color: var(--ink-700); text-decoration: none; transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s; }
.ab-tile:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: var(--sh-sm); text-decoration: none; }
.ab-tile-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: var(--brand-800); color: #fff; }
.ab-tile-ico svg { width: 1.15rem; height: 1.15rem; }
.ab-tile b { margin-top: .3rem; color: var(--ink-900); }
.ab-tile span { font-size: var(--t-sm); line-height: 1.5; }
.ab-tile em { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-style: normal; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.ab-tile em svg { width: .85rem; height: .85rem; }
.ab-callout { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--brand-300); border-left: 4px solid var(--brand-700); border-radius: var(--r-sm); background: var(--brand-50); }
.ab-callout-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--brand-800); color: #fff; }
.ab-callout-ico svg { width: 1.1rem; height: 1.1rem; }
.ab-callout p { margin: 0; color: var(--ink-800); line-height: 1.6; }
.ab-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ab-reasons li { display: flex; gap: .75rem; padding: .85rem .95rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); }
.ab-reasons li > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: .55rem; background: var(--brand-100); color: var(--brand-700); }
.ab-reasons li > span svg { width: 1rem; height: 1rem; }
.ab-reasons b { color: var(--ink-900); }
.ab-reasons p { margin: .2rem 0 0; font-size: var(--t-sm); color: var(--ink-600); line-height: 1.5; }
.ab-brand { text-align: center; padding-bottom: .9rem; border-bottom: 1px dashed var(--brand-200); }
.ab-brand img { height: 44px; width: auto; }
.ab-brand-tag { margin: .6rem 0 .2rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; color: var(--brand-900); }
.ab-brand-line { margin: 0; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.ab-seal { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .8rem; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); color: #fff; }
.ab-seal span { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.2rem; font-weight: 700; line-height: 1; color: #fbbf24; }
.ab-seal small { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.ab-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--t-sm); }
.ab-contact li { display: flex; align-items: center; gap: .55rem; color: var(--ink-700); }
.ab-contact svg { width: 1rem; height: 1rem; color: var(--brand-600); flex: none; }
.ab-contact a { color: var(--ink-800); }
.ab-talk { justify-self: center; }

@media (max-width: 760px) {
    .ab-mile { grid-template-columns: 1fr 1fr; }
    .ab-reasons { grid-template-columns: 1fr; }
    .ab-pane { padding: 1.2rem; }
}

/* About - the profile's extra pieces: sub-headings, service and place chips,
   the four-step approach and the sign-off. */
.ab-sub { margin: 1.4rem 0 .5rem; font-size: 1.05rem; color: var(--brand-900); }
.ab-h-2 { margin-top: 1.8rem; }
.ab-chips { list-style: none; margin: .6rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ab-chips a, .ab-chips span { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid var(--brand-200); border-radius: 999px; background: var(--brand-50); font-size: var(--t-sm); font-weight: 600; color: var(--brand-800); text-decoration: none; }
.ab-chips a:hover { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.ab-chips svg { width: .9rem; height: .9rem; }
.ab-chips.is-places span { background: var(--surface); font-weight: 500; color: var(--ink-700); }
.ab-chips.is-places svg { color: var(--brand-600); }
.ab-approach { margin-top: 1.3rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand-800), var(--brand-900)); color: #fff; }
.ab-approach-k { display: block; margin-bottom: .7rem; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fbbf24; }
.ab-approach ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ab-approach li { display: grid; gap: .35rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.ab-approach i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(255, 255, 255, .15); font-family: inherit; font-style: normal; font-size: .9rem; color: #fbbf24; }
.ab-sign { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--brand-200); display: grid; gap: .1rem; }
.ab-sign b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; color: var(--brand-900); }
.ab-sign em { font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
@media (max-width: 760px) { .ab-approach ol { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   TABS, REFINED - every folder-tab bar on the site (hotel, visa, holiday,
   activity, about, account). Same scheme as before - the open tab in the
   theme's deep step, the rest a light tint - with an even height, quieter
   type and icons, a fine gold rule on the open tab, and the open tab joined
   to its box with no seam.
   ========================================================================== */
.hotel-tabs {
    position: relative; z-index: 1;
    gap: .3rem; padding: 0 .6rem; align-items: flex-end;
    border-bottom: 0;
}
.hotel-tabs .hotel-tab {
    height: 2.85rem; padding: 0 1.2rem; gap: .55rem;
    border: 1px solid var(--brand-200); border-bottom: 0;
    border-radius: .6rem .6rem 0 0;
    background: linear-gradient(180deg, var(--brand-50), var(--brand-100));
    font-size: .8125rem; font-weight: 600; letter-spacing: .015em; color: var(--ink-600);
    box-shadow: none;
    transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.hotel-tabs .hotel-tab svg { width: .95rem; height: .95rem; color: var(--brand-500); opacity: .9; transition: color .15s var(--ease); }
.hotel-tabs .hotel-tab:hover:not(.is-on) {
    background: linear-gradient(180deg, var(--surface), var(--brand-100));
    border-color: var(--brand-300); color: var(--brand-900);
}
.hotel-tabs .hotel-tab:hover:not(.is-on) svg { color: var(--brand-700); }
.hotel-tabs .hotel-tab.is-on {
    height: 3.05rem;
    background: var(--brand-800); border-color: var(--brand-800); color: #fff;
    box-shadow: inset 0 3px 0 #f5a524, 0 -4px 14px color-mix(in srgb, var(--brand-900) 18%, transparent);
    margin-bottom: -1px;
}
.hotel-tabs .hotel-tab.is-on svg { color: #fbbf24; opacity: 1; }
.hotel-tabs .hotel-tab:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.hotel-tabs .hotel-tab .pf-count { background: color-mix(in srgb, var(--brand-600) 14%, transparent); color: var(--brand-800); font-weight: 700; }
.hotel-tabs .hotel-tab.is-on .pf-count { background: rgba(255, 255, 255, .18); color: #fff; }

/* The box the tabs open into: its top edge the deep step, so the open tab
   runs straight down into it. */
.hotel-tabs + .hotel-pane,
.hotel-tabs ~ .hotel-pane {
    border-top: 3px solid var(--brand-800);
    border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-900) 8%, transparent), var(--sh-sm);
}

/* Narrow screens: one scrolling row that fades at the edge rather than wraps. */
@media (max-width: 760px) {
    .hotel-tabs { padding: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .hotel-tabs .hotel-tab { height: 2.6rem; padding: 0 .9rem; font-size: .75rem; }
    .hotel-tabs .hotel-tab.is-on { height: 2.8rem; }
    .hotel-tabs + .hotel-pane, .hotel-tabs ~ .hotel-pane { border-radius: 0 0 var(--r-md) var(--r-md); }
}
.ab-brand-logo { display: flex; justify-content: center; padding: 1rem; border-radius: var(--r-md); background: radial-gradient(120% 140% at 50% 0%, var(--brand-700), var(--brand-900)); }
.ab-brand .ab-brand-logo img { height: 60px; width: auto; }

/* Contact - on the About page's frame: the form, the ways to reach us, and
   the social row in the brand card. */
.hotel-strip-item strong a { color: inherit; text-decoration: none; }
.hotel-strip-item strong a:hover { color: var(--brand-700); text-decoration: underline; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ct-span { grid-column: 1 / -1; }
.ct-form .input, .ct-form .textarea { border-color: var(--brand-200); background: var(--surface); font-size: var(--t-sm); }
.ct-form .input { height: 2.8rem; }
.ct-form .textarea { min-height: 8rem; padding: .7rem .8rem; }
.ct-form .field-error .input, .ct-form .field-error .textarea { border-color: #dc2626; }
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ct-foot p { margin: 0; max-width: 26rem; font-size: var(--t-xs); color: var(--ink-500); }
.ct-foot .btn { flex: none; min-width: 12rem; justify-content: center; }
.ct-done { text-align: center; }
.ct-done-ico { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .6rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.ct-done-ico svg { width: 1.7rem; height: 1.7rem; }
.ct-done .ab-h::after { left: 50%; transform: translateX(-50%); }
.ct-ways { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ct-way { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--brand-200); border-radius: var(--r-md); background: var(--surface); color: var(--ink-800); text-decoration: none; transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s; }
.ct-way:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: var(--sh-sm); text-decoration: none; }
.ct-way > span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: .7rem; background: color-mix(in srgb, var(--tile) 12%, var(--surface)); color: var(--tile); }
.ct-way > span svg { width: 1.2rem; height: 1.2rem; }
.ct-way small { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.ct-way b { color: var(--ink-900); overflow-wrap: anywhere; }
.ct-agent-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.ct-social { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ct-social a { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-700); transition: background .15s, color .15s, transform .15s; }
.ct-social a:hover { transform: translateY(-2px); color: #fff; }
.ct-social a.is-facebook:hover { background: #1877f2; } .ct-social a.is-x:hover { background: #000; }
.ct-social a.is-instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.ct-social a.is-linkedin:hover { background: #0a66c2; } .ct-social a.is-youtube:hover { background: #ff0000; } .ct-social a.is-whatsapp:hover { background: #25d366; }
.ct-social svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
    .ct-grid, .ct-ways { grid-template-columns: 1fr; }
    .ct-foot { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Terms & Conditions (terms) - numbered sections with a contents rail.
   ========================================================================== */
.tc { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.tc-rail { position: sticky; top: calc(var(--header-h) + 1rem); }
.tc-toc { overflow: hidden; border: 1px solid var(--brand-200); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); }
.tc-toc ol { list-style: none; margin: 0; padding: .5rem; max-height: calc(100vh - var(--header-h) - 7rem); overflow-y: auto; scrollbar-width: thin; }
.tc-toc a { display: flex; align-items: center; gap: .55rem; padding: .42rem .55rem; border-radius: var(--r-sm); font-size: .8125rem; color: var(--ink-700); text-decoration: none; }
.tc-toc a i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%; background: var(--brand-100); font-style: normal; font-size: .625rem; font-weight: 700; color: var(--brand-800); }
.tc-toc a:hover { background: var(--brand-50); color: var(--brand-900); text-decoration: none; }
.tc-toc a.is-on { background: var(--brand-800); color: #fff; }
.tc-toc a.is-on i { background: #f5a524; color: var(--brand-900); }
.tc-body { padding: 1.8rem 2rem 2rem; border-top: 3px solid var(--brand-800); }
.tc-intro { margin-bottom: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--brand-200); border-left: 4px solid var(--brand-700); border-radius: var(--r-sm); background: var(--brand-50); }
.tc-intro p { margin: 0 0 .5rem; line-height: 1.65; color: var(--ink-800); }
.tc-intro p:last-child { margin-bottom: 0; }
.tc-intro b { color: var(--brand-800); }
.tc-sec { padding: 1.3rem 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.tc-sec h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.4rem; letter-spacing: .03em; color: var(--brand-900); }
.tc-n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: .55rem; background: var(--brand-800); font-family: var(--font-sans, inherit); font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.tc-prose { font-size: .9375rem; color: var(--ink-700); }
.tc-prose ul { columns: 2; column-gap: 2rem; }
.tc-prose li { break-inside: avoid; }
.tc-contact { display: grid; gap: .25rem; padding: .9rem 1.1rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--brand-50); }
.tc-contact > b { font-size: 1.05rem; color: var(--brand-900); }
.tc-sign { margin-top: 1rem; padding-top: 1.2rem; border-top: 2px solid var(--brand-800); text-align: center; }
.tc-sign b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; color: var(--brand-900); }
.tc-sign em { font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
@media (max-width: 960px) {
    .tc { grid-template-columns: 1fr; }
    .tc-rail { position: static; }
    .tc-toc ol { max-height: 16rem; }
}
@media (max-width: 560px) {
    .tc-body { padding: 1.2rem; }
    .tc-prose ul { columns: 1; }
}

/* Policy pages, grouped (Cancellation & Refund): the rail on the right, the
   tabs over the sections, the lead heading and the intro above them. */
.tc.is-grouped { grid-template-columns: minmax(0, 1fr) 320px; }
.tc-main { min-width: 0; }
.tc-lead { margin-top: .2rem; }
.tc-intro.is-open { margin-bottom: 1.4rem; background: transparent; border: 0; border-left: 0; padding: 0; }
.tc-intro.is-open p:first-child { font-size: 1.08rem; color: var(--ink-900); }
.tc.is-grouped .tc-body { border-top-width: 3px; }
.tc.is-grouped .tc-body .tc-sec:first-child { border-top: 0; padding-top: .2rem; }
.tc-sign.is-loose { border-top: 0; margin-top: 1.5rem; }
@media (max-width: 960px) { .tc.is-grouped { grid-template-columns: 1fr; } .tc.is-grouped .tc-rail { order: -1; } }
.tc-toc ol { position: relative; }

/* ==========================================================================
   Help Centre / FAQs (faqs) - search in the crown, category cards, popular
   questions, every question in tabs, and "Still need help?".
   ========================================================================== */
.hc-hero .hero-inner { text-align: center; }
.hc-hero .crumbs, .hc-hero nav[aria-label="Breadcrumb"] { display: flex; justify-content: center; }
.hc-hero h1 { margin-bottom: .2rem; }
.hc-hi { margin: .2rem 0 .1rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; color: #fff; }
.hc-hero .hotel-crown-sub { margin: 0 auto 1.1rem; }
.hc-search { position: relative; display: flex; align-items: center; max-width: 680px; margin: 0 auto; }
.hc-search > svg { position: absolute; left: 1.1rem; width: 1.25rem; height: 1.25rem; color: var(--brand-600); pointer-events: none; }
.hc-search input { width: 100%; height: 3.6rem; padding: 0 3rem 0 3.2rem; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; color: var(--ink-900); box-shadow: 0 14px 34px rgba(10, 20, 40, .28); outline: none; }
.hc-search input:focus { box-shadow: 0 0 0 4px rgba(251, 191, 36, .45), 0 14px 34px rgba(10, 20, 40, .28); }
.hc-search input::-webkit-search-cancel-button { display: none; }
.hc-clear { position: absolute; right: .8rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--brand-50); font-size: 1.3rem; line-height: 1; color: var(--ink-600); cursor: pointer; }
.hc-tries { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin: .9rem 0 0; }
.hc-tries span { font-size: var(--t-xs); color: rgba(255, 255, 255, .75); }
.hc-tries button { padding: .3rem .75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .1); font: inherit; font-size: var(--t-xs); color: #fff; cursor: pointer; }
.hc-tries button:hover { background: rgba(255, 255, 255, .22); }

.hc-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.hc-card { display: grid; justify-items: start; align-content: start; gap: .3rem; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--brand-200); border-radius: var(--r-lg); background: var(--surface); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-sm); transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s; }
.hc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tile) 50%, var(--brand-200)); box-shadow: 0 12px 26px color-mix(in srgb, var(--tile) 16%, transparent); }
.hc-card-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .3rem; border-radius: .8rem; background: color-mix(in srgb, var(--tile) 12%, var(--surface)); color: var(--tile); }
.hc-card-ico svg { width: 1.4rem; height: 1.4rem; }
.hc-card b { font-size: 1rem; color: var(--ink-900); }
.hc-card small { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-500); }
.hc-card em { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tile); }
.hc-card em svg { width: .8rem; height: .8rem; }

.hc-block { margin-top: 2.4rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.hc-count { margin-left: .5rem; font-family: var(--font-sans, inherit); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-500); }
.hc-tag { display: inline-block; margin-left: .55rem; padding: .1rem .5rem; border-radius: 999px; background: var(--brand-100); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: var(--brand-700); }
.hc-link { margin: .6rem 0 0; }
.hc-link a { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); font-weight: 700; }
.hc-link svg { width: .8rem; height: .8rem; }
.hc-pane { padding: 1.2rem 1.3rem 1.4rem; }
.hc-pane .faq-item, .hc-results .faq-item { scroll-margin-top: calc(var(--header-h) + 1rem); }
.hc-results-k { margin: 0 0 .8rem; font-weight: 600; color: var(--ink-700); }
.hc-none { margin-top: .5rem; }

.hc-help { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--brand-800), var(--brand-900)); color: #fff; box-shadow: 0 16px 36px color-mix(in srgb, var(--brand-900) 28%, transparent); }
.hc-help-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fbbf24; }
.hc-help-ico svg { width: 1.5rem; height: 1.5rem; }
.hc-help-t { flex: 1; min-width: 0; }
.hc-help-t h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 600; color: #fff; }
.hc-help-t p { margin: .2rem 0 0; color: rgba(255, 255, 255, .8); font-size: var(--t-sm); }
.hc-help-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hc-help-acts .btn { gap: .4rem; }
.hc-help-acts .btn svg { width: 1rem; height: 1rem; }
.hc-help-acts .btn-outline { background: #fff; border-color: #fff; color: var(--brand-900); }
.hc-wa { background: #25d366; border-color: #25d366; color: #fff; }
.hc-wa:hover { background: #1ebe5a; color: #fff; }

@media (max-width: 1100px) { .hc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .hc-cards { grid-template-columns: 1fr 1fr; }
    .hc-help { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) { .hc-cards { grid-template-columns: 1fr; } }
.hero.hc-hero .hero-inner > * { margin-left: auto; margin-right: auto; }
.hero.hc-hero .hero-inner > p { max-width: 760px; text-align: center; }
.hero.hc-hero p.hc-hi { width: 100%; max-width: none; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 600; line-height: 1.2; color: #fff; }
.hero.hc-hero .hc-tries { width: 100%; max-width: 760px; justify-content: center; }

/* Hotel destinations (hotels/destinations) - zaereen's "Choose a continent". */
.hd-head { align-items: flex-end; }
.hd-title { margin: .2rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-900); }
.hd-az { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--brand-200); }
.hd-letter { margin-bottom: 1.4rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.hd-letter h3 { margin: 0 0 .6rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; color: var(--brand-800); }
.hd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.hd-list a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid var(--brand-200); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); text-decoration: none; }
.hd-list a:hover { border-color: var(--brand-400); background: var(--brand-50); }
.hd-list small { font-weight: 500; color: var(--ink-500); }

/* ==========================================================================
   Hotel country page (hotels/{country}-hotels) - zaereen's: country bar,
   photo cards for the top and popular cities, then every city A-Z.
   ========================================================================== */
.cy-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--brand-200); border-left: 4px solid var(--hc1); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); }
.cy-id { display: flex; align-items: center; gap: .9rem; }
.cy-id img { width: 54px; height: 36px; border-radius: 5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cy-id > div { display: grid; line-height: 1.25; }
.cy-kicker { display: inline-flex; align-items: center; gap: .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hc1); text-decoration: none; }
.cy-kicker svg { width: .85rem; height: .85rem; }
.cy-id strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; color: var(--brand-900); }
.cy-id span { font-size: var(--t-sm); color: var(--ink-500); }
.cy-find { position: relative; display: flex; align-items: center; min-width: min(22rem, 100%); }
.cy-find svg { position: absolute; left: .9rem; width: 1rem; height: 1rem; color: var(--brand-600); }
.cy-find input { width: 100%; height: 2.8rem; padding: 0 1rem 0 2.5rem; border: 1px solid var(--brand-200); border-radius: 999px; background: var(--brand-50); font: inherit; font-size: var(--t-sm); outline: none; }
.cy-find input:focus { border-color: var(--brand-500); background: var(--surface); }
.cy-block { margin-top: 2rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.cy-h { margin: .2rem 0 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-900); }
.cy-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cy-grid.is-metro { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cy-grid.is-popular { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cy-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--hc1), var(--hc2)); color: #fff; text-decoration: none; box-shadow: var(--sh-sm); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.is-popular .cy-card { aspect-ratio: 1 / 1; }
.cy-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10, 20, 40, .25); text-decoration: none; }
.cy-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.cy-card:hover img { transform: scale(1.06); }
.cy-initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 4.5rem; font-weight: 700; color: rgba(255,255,255,.35); }
.cy-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .1rem; padding: 2.4rem 1.1rem .95rem; background: linear-gradient(0deg, rgba(8, 16, 32, .85), rgba(8, 16, 32, 0)); }
.cy-over strong { font-size: 1.25rem; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cy-over small { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-sm); font-weight: 600; color: #fcd34d; }
.cy-over small svg { width: .9rem; height: .9rem; }
.hd-list li[hidden], .hd-letter[hidden] { display: none; }
@media (max-width: 1100px) { .cy-grid.is-metro { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cy-grid.is-popular { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cy-grid.is-metro, .cy-grid.is-popular { grid-template-columns: 1fr 1fr; } .cy-over strong { font-size: 1rem; } }




/* Footer: three columns now the company links live in the bottom line, which
   carries them as one row with fine separators. */
.footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-bottom nav { gap: .35rem 0; align-items: center; }
.footer-bottom nav a { padding: 0 .75rem; border-left: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); }
.footer-bottom nav a:first-child { border-left: 0; padding-left: 0; }
.footer-bottom nav a:hover { color: #fff; }
@media (max-width: 1100px) { .footer-bottom { justify-content: center; text-align: center; } .footer-bottom nav { justify-content: center; } }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-quick { display: flex; align-items: center; margin-top: var(--sp-3); font-size: var(--t-sm); }
.footer-quick a { padding: 0 .75rem; border-left: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); font-weight: 600; }
.footer-quick a:first-child { padding-left: 0; border-left: 0; }
.footer-quick a:hover { color: #fff; }

/* ==========================================================================
   Hotel destinations - the continent cards EXACTLY as zaereen.com draws them
   (zaereen_hotel_seo.css .zh-continent + zh_region_theme colours): the same
   jewel tones per continent, gold star pattern, gold inner frame, sizes and
   type. Scoped to this page; /hotels keeps its own cards.
   ========================================================================== */
.hd-page { --zg: #e3c886; --zgold: #c19a3f; --zpat: 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"); }
.hd-page .hub-continent[data-region="asia"] { --hc1: #12655f !important; --hc2: #0a3a36 !important; }
.hd-page .hub-continent[data-region="middle-east"] { --hc1: #14412f !important; --hc2: #0a231b !important; }
.hd-page .hub-continent[data-region="africa"] { --hc1: #8f6f1c !important; --hc2: #4f3c0c !important; }
.hd-page .hub-continent[data-region="europe"] { --hc1: #1f6047 !important; --hc2: #0d2c22 !important; }
.hd-page .hub-continent[data-region="north-america"] { --hc1: #4b554a !important; --hc2: #1c241e !important; }
.hd-page .hub-continent[data-region="south-america"] { --hc1: #8a3024 !important; --hc2: #4a1812 !important; }
.hd-page .hub-continent[data-region="oceania"] { --hc1: #3d9a92 !important; --hc2: #12655f !important; }
.hd-page .hub-continent[data-region="other"] { --hc1: #7f8a7e !important; --hc2: #3a433b !important; }

.hd-page .hub-continents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hd-page .hub-continent {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
    min-height: 262px; padding: 26px 24px 20px; border: 0; border-radius: 18px;
    background-color: var(--hc2);
    background-image: var(--zpat), linear-gradient(150deg, var(--hc1) 0%, var(--hc2) 100%);
    background-size: 26px 26px, 100% 100%;
    color: #f3ead6; text-decoration: none;
    box-shadow: 0 2px 6px rgba(23, 32, 26, .06), 0 14px 34px -22px rgba(13, 44, 34, .38);
    transition: transform .24s ease, box-shadow .24s ease;
}
.hd-page .hub-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;
}
.hd-page .hub-continent:hover { color: #f3ead6; transform: translateY(-4px); box-shadow: 0 4px 12px rgba(23, 32, 26, .07), 0 30px 62px -34px rgba(13, 44, 34, .48); }
.hd-page .hub-continent:hover::before { border-color: rgba(227, 200, 134, .8); }
.hd-page .hub-continent.is-active { box-shadow: 0 0 0 3px var(--zgold), 0 30px 62px -34px rgba(13, 44, 34, .48); }
.hd-page .hub-continent-mark {
    position: absolute; right: -30px; bottom: -34px; z-index: -1; top: auto; left: auto;
    width: 170px; height: 170px; color: var(--zg); opacity: .13; transform: rotate(-8deg);
    transition: transform .6s ease, opacity .3s ease;
}
.hd-page .hub-continent-mark svg { width: 170px; height: 170px; }
.hd-page .hub-continent:hover .hub-continent-mark { transform: rotate(0deg) scale(1.05); opacity: .22; }
.hd-page .hub-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(--zg);
}
.hd-page .hub-continent-icon svg { width: 26px; height: 26px; }
.hd-page .hub-continent-name {
    margin: 0; font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-size: 29px; font-weight: 600; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: #fbf5e6;
}
.hd-page .hub-continent-tag { font-size: 14px; line-height: 1.5; color: rgba(243, 234, 214, .8); max-width: 92%; }
.hd-page .hub-continent-flags { display: flex; gap: 0; margin: auto 0 12px; padding-top: 16px; }
.hd-page .hub-continent-flags img, .hd-page .hub-continent-flags .hs-flag {
    width: 28px; height: 19px; flex: 0 0 28px; margin: 0 -6px 0 0; object-fit: cover;
    box-sizing: content-box; border: 2px solid #f3ead6; border-radius: 4px; box-shadow: none;
}
.hd-page .hub-continent-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 0;
    padding-top: 12px; border-top: 1px solid rgba(227, 200, 134, .26);
    font-size: 13px; color: rgba(243, 234, 214, .86);
}
.hd-page .hub-continent-foot b { color: #fbf5e6; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-page .hub-continent-cta {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--zg); white-space: nowrap;
}
.hd-page .hub-continent-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.hd-page .hub-continent:hover .hub-continent-cta svg { transform: translateX(3px); }
@media (max-width: 1100px) { .hd-page .hub-continents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .hd-page .hub-continents { grid-template-columns: 1fr; gap: 14px; }
    .hd-page .hub-continent { min-height: 220px; padding: 22px 20px 18px; }
    .hd-page .hub-continent-name { font-size: 25px; }
}

/* Hotel destinations: the opened continent's countries in that continent's own colour, clearly visible. */
.hd-page .hub-panel#asia { --hc1: #12655f !important; --hc2: #0a3a36 !important; }
.hd-page .hub-panel#middle-east { --hc1: #14412f !important; --hc2: #0a231b !important; }
.hd-page .hub-panel#africa { --hc1: #8f6f1c !important; --hc2: #4f3c0c !important; }
.hd-page .hub-panel#europe { --hc1: #1f6047 !important; --hc2: #0d2c22 !important; }
.hd-page .hub-panel#north-america { --hc1: #4b554a !important; --hc2: #1c241e !important; }
.hd-page .hub-panel#south-america { --hc1: #8a3024 !important; --hc2: #4a1812 !important; }
.hd-page .hub-panel#oceania { --hc1: #3d9a92 !important; --hc2: #12655f !important; }
.hd-page .hub-panel#other { --hc1: #7f8a7e !important; --hc2: #3a433b !important; }

.hd-page .hub-panel { background: color-mix(in srgb, var(--hc1) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hc1) 30%, transparent); border-top: 4px solid var(--hc1); }
.hd-page .hub-panel .hub-continent-icon { background: var(--hc1); color: #e3c886; border-color: rgba(227, 200, 134, .55); }
.hd-page .hub-panel-head h3 { color: var(--hc2); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; letter-spacing: .04em; }
.hd-page .hub-country {
    background: color-mix(in srgb, var(--hc1) 13%, #fff);
    border: 1px solid color-mix(in srgb, var(--hc1) 38%, #fff);
    border-left: 4px solid var(--hc1);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--hc2) 10%, transparent);
}
.hd-page .hub-country strong { color: var(--hc2); font-weight: 700; }
.hd-page .hub-country small { color: color-mix(in srgb, var(--hc1) 75%, #333); font-weight: 600; }
.hd-page .hub-country > svg:last-child { color: var(--hc1); }
.hd-page .hub-country img { box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.hd-page .hub-country:hover {
    background: linear-gradient(135deg, var(--hc1), var(--hc2)); border-color: var(--hc2); color: #fff;
    transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--hc2) 30%, transparent);
}
.hd-page .hub-country:hover strong { color: #fff; }
.hd-page .hub-country:hover small, .hd-page .hub-country:hover > svg:last-child { color: #e3c886; }
.hd-page .hub-panel { background: color-mix(in srgb, var(--hc1) 12%, #fff); }
.hd-page .hub-country { background: color-mix(in srgb, var(--hc1) 24%, #fff); border-color: color-mix(in srgb, var(--hc1) 55%, #fff); border-left-width: 5px; }
.hd-page .hub-country small { color: color-mix(in srgb, var(--hc1) 85%, #000); }
/* Country boxes: a simple, even 1px border (no thick coloured edge). */
.hd-page .hub-country { border: 1px solid color-mix(in srgb, var(--hc1) 35%, #fff) !important; border-left-width: 1px !important; box-shadow: none; }
.hd-page .hub-country:hover { border-color: var(--hc1) !important; }
.hd-page .hub-panel { border: 1px solid color-mix(in srgb, var(--hc1) 25%, #fff); border-top-width: 1px; }
/* Footer: the brand block alone above the last line. */
.footer-top { grid-template-columns: 1fr; padding-block: var(--sp-6); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } }

/* Footer: brand block on the left, the link cloud across the rest. */
.footer-top { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--sp-7, 3rem); align-items: start; }
.footer-cloud h4 { margin-bottom: .9rem; }
.footer-cloud-links { display: flex; flex-wrap: wrap; gap: .55rem .5rem; }
.footer-cloud-links a {
    padding: .38rem .8rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
    background: rgba(255, 255, 255, .05); font-size: .8125rem; color: rgba(255, 255, 255, .8); text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.footer-cloud-links a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(251, 191, 36, .6); color: #fff; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ==========================================================================
   Footer directory - plain text links in 4-5 columns under group headings.
   The brand block sits on top; the groups flow down the columns and never
   split across two.
   ========================================================================== */
.footer-top { grid-template-columns: 1fr !important; gap: var(--sp-6); }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem 2rem; padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-brand .footer-logo img { margin: 0; }
.footer-brand p { margin: 0; max-width: 46ch; }
.footer-brand .footer-quick, .footer-brand .footer-social { margin: 0; }
.footer-brand .footer-quick { grid-column: 3; grid-row: 1; justify-self: end; }
.footer-brand .footer-social { grid-column: 3; grid-row: 2; justify-self: end; }
.footer-brand .footer-logo { grid-row: 1 / span 2; }
.footer-brand p { grid-column: 2; grid-row: 1 / span 2; }
.footer-dir { column-count: 5; column-gap: 2.2rem; }
.footer-dir-group { break-inside: avoid; margin-bottom: 1.5rem; }
.footer-dir-group h4 { margin: 0 0 .55rem; font-size: .8125rem; letter-spacing: .06em; color: #fff; }
.footer-dir-group ul { list-style: none; margin: 0; padding: 0; }
.footer-dir-group li { margin: 0 0 .38rem; line-height: 1.35; }
.footer-dir-group a { font-size: .8125rem; color: rgba(255, 255, 255, .66); text-decoration: none; }
.footer-dir-group a:hover { color: #fbbf24; text-decoration: underline; }
@media (max-width: 1100px) { .footer-dir { column-count: 4; } }
@media (max-width: 860px)  {
    .footer-dir { column-count: 3; }
    .footer-brand { grid-template-columns: 1fr; }
    .footer-brand > * { grid-column: auto !important; grid-row: auto !important; justify-self: start !important; }
}
@media (max-width: 560px)  { .footer-dir { column-count: 2; column-gap: 1.2rem; } }
.footer-dir-group h4 a { color: #fff; text-decoration: none; } .footer-dir-group h4 a:hover { color: #fbbf24; }
.footer-dir.is-five, .footer-dir { column-count: 5; }

/* Footer, final: the brand column on the left as before; the link columns on
   the right as an even grid - one group per column, same number of lines. */
.footer-top { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) !important; gap: 3rem !important; align-items: start; }
.footer-brand { display: block !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
.footer-brand .footer-logo img { margin-bottom: var(--sp-3) !important; }
.footer-brand p { max-width: 34ch !important; margin: 0 0 var(--sp-3) !important; }
.footer-brand .footer-quick { margin: 0 0 var(--sp-3) !important; justify-self: auto !important; }
.footer-brand .footer-social { margin: 0 !important; justify-self: auto !important; }
.footer-dir { column-count: auto !important; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 0 1.6rem; padding-left: 2rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.footer-dir-group { margin: 0; min-width: 0; }
.footer-dir-group h4 { min-height: 1.2em; padding-bottom: .6rem; margin: 0 0 .7rem !important; border-bottom: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-dir-group li { margin: 0 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .footer-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; } }
@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr !important; }
    .footer-dir { padding-left: 0; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-dir-col { list-style: none; margin: 0; padding: 0; min-width: 0; }
.footer-dir-col li { margin: 0 0 .5rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-dir-col li > a { font-size: .8125rem; color: rgba(255, 255, 255, .66); text-decoration: none; }
.footer-dir-col li > a:hover { color: #fbbf24; text-decoration: underline; }
.footer-dir-col .footer-dir-h { margin: 0 0 .6rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.footer-dir-col .footer-dir-h:not(:first-child) { margin-top: 1.1rem; }
.footer-dir-col .footer-dir-h a { color: #fff; font-weight: 700; }
.footer-dir-col .footer-dir-h a:hover { color: #fbbf24; text-decoration: none; }

/* Holiday package page: tighter bands, and "You might also like" as one full row of four. */
.pk-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.pk-related { padding-bottom: 3rem; }
.pk-related .section-head { margin-bottom: 1rem; }
@media (max-width: 1100px) { .pk-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .pk-related-grid { grid-template-columns: 1fr; } }
[data-page="holidays"] main > .section.section-tight { padding-top: 1.6rem; padding-bottom: 1.6rem; }
[data-page="holidays"] main > .section.section-tight:last-of-type { padding-bottom: 2.4rem; }
.cy-grid li[hidden], .cy-block[hidden] { display: none; }
.cy-none { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; padding: 1rem 1.2rem; border: 1px dashed var(--brand-300); border-radius: var(--r-md); background: var(--surface); color: var(--ink-600); }
.cy-none[hidden] { display: none; }
.cy-none svg { width: 1rem; height: 1rem; color: var(--brand-600); }
.cy-find { flex: 0 1 36rem; }
.cy-find input { height: 3rem; border-color: color-mix(in srgb, var(--hc1) 45%, var(--brand-200)); background: var(--surface); }

/* Page background: white, with the faint star pattern over it (no blue tint). */
body { background: #fff; }
.section-soft, .section-surface { background: #fff; }
/* The background star pattern, clearly visible (was .11). */
main::before, .section-soft::before, .section-surface::before { opacity: .24; }

/* The dark blue banner: one flat colour, no light glow or gradient shading.
   The star pattern stays. */
.hero::after { display: none; }
.hero { background-color: var(--brand-800); background-image: var(--ox-pattern-light); background-size: 26px 26px; background-repeat: repeat; }
.hero-media::after { background: rgba(12, 30, 60, .62); }
.hero-inner::before { display: none !important; }
.hero::before { background: #fff; }

/* ==========================================================================
   Page background pattern: travel marks - planes on dotted routes, map pins,
   a compass, a globe, a suitcase and a star - in the theme colour, faint.
   Replaces the star tile on the page ground; the banner keeps its own.
   ========================================================================== */
:root { --ox-pattern-travel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 24) rotate(-30) scale(.9)'%3E%3Cpath d='M-10 0h20M0 -3l8 3-8 3M-3 0l-4-7h3l6 7M-3 0l-4 7h3l6-7M-10 0l-2-3M-10 0l-2 3'/%3E%3C/g%3E%3Cpath d='M34 36c14 10 30 14 48 10' stroke-dasharray='1 5'/%3E%3Cg transform='translate(104 38)'%3E%3Cpath d='M0 11s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z'/%3E%3Ccircle cx='0' cy='-1' r='2.4'/%3E%3C/g%3E%3Cg transform='translate(52 104)'%3E%3Ccircle r='10'/%3E%3Cpath d='M0-15v4M0 11v4M-15 0h4M11 0h4'/%3E%3Cpath d='M0-7l2.4 7L0 7l-2.4-7z'/%3E%3C/g%3E%3Cg transform='translate(142 118)'%3E%3Ccircle r='11'/%3E%3Cpath d='M-11 0h22M0-11c-5 5-5 17 0 22M0-11c5 5 5 17 0 22'/%3E%3C/g%3E%3Cpath d='M64 104c20 12 44 16 66 12' stroke-dasharray='1 5'/%3E%3Cg transform='translate(150 58) rotate(20) scale(.7)'%3E%3Cpath d='M-10 0h20M0 -3l8 3-8 3M-3 0l-4-7h3l6 7M-3 0l-4 7h3l6-7'/%3E%3C/g%3E%3Cg transform='translate(98 158)'%3E%3Crect x='-9' y='-6' width='18' height='13' rx='2'/%3E%3Cpath d='M-4-6v-3h8v3M-9 0h18'/%3E%3C/g%3E%3Cg transform='translate(20 150)'%3E%3Cpath d='M0-8l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
main::before, .section-soft::before, .section-surface::before {
    -webkit-mask-image: var(--ox-pattern-travel) !important;
            mask-image: var(--ox-pattern-travel) !important;
    -webkit-mask-size: 180px 180px !important;
            mask-size: 180px 180px !important;
    -webkit-mask-repeat: repeat !important;
            mask-repeat: repeat !important;
    opacity: .16;
}
main::before, .section-soft::before, .section-surface::before { opacity: .12; }
/* Background back to the star pattern, clearly visible. */
main::before, .section-soft::before, .section-surface::before {
    -webkit-mask-image: var(--ox-pattern) !important; mask-image: var(--ox-pattern) !important;
    -webkit-mask-size: 26px 26px !important; mask-size: 26px 26px !important;
    opacity: .24;
}

/* Background: a close-packed travel pattern - planes, map pins, globes and
   compasses on a 72px tile - clearly visible, in the theme colour. */
:root { --ox-pattern-travel2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(18 18) rotate(-35)'%3E%3Cpath d='M-7 0h14M0 -2.2l6 2.2-6 2.2M-2 0l-3-5h2.2l4.4 5M-2 0l-3 5h2.2l4.4-5M-7 0l-1.6-2.2M-7 0l-1.6 2.2'/%3E%3C/g%3E%3Cg transform='translate(54 14)'%3E%3Cpath d='M0 8s-5-5-5-8.6a5 5 0 0 1 10 0C5 3 0 8 0 8z'/%3E%3Ccircle cx='0' cy='-.6' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(18 54)'%3E%3Ccircle r='7'/%3E%3Cpath d='M-7 0h14M0-7c-3.2 3.2-3.2 10.8 0 14M0-7c3.2 3.2 3.2 10.8 0 14'/%3E%3C/g%3E%3Cg transform='translate(54 52)'%3E%3Ccircle r='6.5'/%3E%3Cpath d='M0-4.5l1.8 4.5L0 4.5l-1.8-4.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
main::before, .section-soft::before, .section-surface::before {
    -webkit-mask-image: var(--ox-pattern-travel2) !important; mask-image: var(--ox-pattern-travel2) !important;
    -webkit-mask-size: 72px 72px !important; mask-size: 72px 72px !important;
    -webkit-mask-repeat: repeat !important; mask-repeat: repeat !important;
    opacity: .2;
}

/* ==========================================================================
   BACKGROUND PATTERN - chosen in the palette menu (html[data-bg]), saved in
   the browser, default "contour". The page ground only; the banner keeps its
   own stars. Each option: the tile, its size, and how strong it shows.
   ========================================================================== */
html[data-bg="contour"] { --bg-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23000' fill='none' stroke-width='1.1'%3E%3Cpath d='M-10 30c30-18 50 18 80 0s50-18 100 0'/%3E%3Cpath d='M-10 50c30-18 50 18 80 0s50-18 100 0'/%3E%3Cpath d='M-10 90c30-22 55 20 85 0s50-20 95 0'/%3E%3Cpath d='M-10 110c30-22 55 20 85 0s50-20 95 0'/%3E%3Cpath d='M-10 150c28-16 52 16 82 0s52-16 98 0'/%3E%3Cellipse cx='118' cy='70' rx='14' ry='7'/%3E%3Cellipse cx='118' cy='70' rx='6' ry='3'/%3E%3C/g%3E%3C/svg%3E"); --bg-size: 160px 160px; --bg-op: 0.22; }
html[data-bg="dots"] { --bg-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23000'/%3E%3C/svg%3E"); --bg-size: 18px 18px; --bg-op: 0.28; }
html[data-bg="grid"] { --bg-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' stroke='%23000' fill='none' stroke-width='1'/%3E%3C/svg%3E"); --bg-size: 32px 32px; --bg-op: 0.18; }
html[data-bg="diagonal"] { --bg-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-2 16L16 -2' stroke='%23000' fill='none' stroke-width='1'/%3E%3C/svg%3E"); --bg-size: 14px 14px; --bg-op: 0.16; }
html[data-bg="stars"] { --bg-pat: var(--ox-pattern); --bg-size: 26px 26px; --bg-op: 0.24; }
html[data-bg="travel"] { --bg-pat: var(--ox-pattern-travel2); --bg-size: 72px 72px; --bg-op: 0.2; }

html[data-bg] main::before, html[data-bg] .section-soft::before, html[data-bg] .section-surface::before {
    -webkit-mask-image: var(--bg-pat) !important; mask-image: var(--bg-pat) !important;
    -webkit-mask-size: var(--bg-size) !important; mask-size: var(--bg-size) !important;
    -webkit-mask-repeat: repeat !important; mask-repeat: repeat !important;
    opacity: var(--bg-op) !important;
}
.theme-pop-head.is-bg { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.theme-swatch.is-bg { background-color: #fff; border: 1px solid var(--brand-300); position: relative; overflow: hidden; }
.theme-swatch.is-bg::after { content: ""; position: absolute; inset: 0; background: var(--brand-700); -webkit-mask: var(--sw-pat) 0 0 / var(--sw-size) repeat; mask: var(--sw-pat) 0 0 / var(--sw-size) repeat; opacity: .75; }
:root {
    --swp-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23000' fill='none' stroke-width='1.1'%3E%3Cpath d='M-10 30c30-18 50 18 80 0s50-18 100 0'/%3E%3Cpath d='M-10 50c30-18 50 18 80 0s50-18 100 0'/%3E%3Cpath d='M-10 90c30-22 55 20 85 0s50-20 95 0'/%3E%3Cpath d='M-10 110c30-22 55 20 85 0s50-20 95 0'/%3E%3Cpath d='M-10 150c28-16 52 16 82 0s52-16 98 0'/%3E%3Cellipse cx='118' cy='70' rx='14' ry='7'/%3E%3Cellipse cx='118' cy='70' rx='6' ry='3'/%3E%3C/g%3E%3C/svg%3E");
    --swp-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23000'/%3E%3C/svg%3E");
    --swp-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' stroke='%23000' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    --swp-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-2 16L16 -2' stroke='%23000' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    --swp-stars: var(--ox-pattern);
    --swp-travel: var(--ox-pattern-travel2);
}
html[data-bg="diagonal"] { --bg-op: .32; }

/* Background option "arabesque": the Islamic geometric lattice - eight-pointed
   stars, diamonds and angled bands - in olive gold. Now the default. */
:root { --swp-arabesque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpolygon points='52.0,35.0 56.7,40.7 64.0,40.0 63.3,47.3 69.0,52.0 63.3,56.7 64.0,64.0 56.7,63.3 52.0,69.0 47.3,63.3 40.0,64.0 40.7,56.7 35.0,52.0 40.7,47.3 40.0,40.0 47.3,40.7'/%3E%3Cpolygon points='61.0,7.0 85.0,7.0 97.0,19.0 97.0,43.0 83.0,43.0 80.0,40.0 80.0,35.0 76.0,31.0 71.0,31.0 69.0,29.0 69.0,24.0 64.0,24.0 61.0,21.0'/%3E%3Cpolygon points='43.0,7.0 19.0,7.0 7.0,19.0 7.0,43.0 21.0,43.0 24.0,40.0 24.0,35.0 28.0,31.0 33.0,31.0 35.0,29.0 35.0,24.0 40.0,24.0 43.0,21.0'/%3E%3Cpolygon points='61.0,97.0 85.0,97.0 97.0,85.0 97.0,61.0 83.0,61.0 80.0,64.0 80.0,69.0 76.0,73.0 71.0,73.0 69.0,75.0 69.0,80.0 64.0,80.0 61.0,83.0'/%3E%3Cpolygon points='43.0,97.0 19.0,97.0 7.0,85.0 7.0,61.0 21.0,61.0 24.0,64.0 24.0,69.0 28.0,73.0 33.0,73.0 35.0,75.0 35.0,80.0 40.0,80.0 43.0,83.0'/%3E%3Cpolygon points='0.0,45.5 6.5,52.0 0.0,58.5 -6.5,52.0'/%3E%3Cpolygon points='104.0,45.5 110.5,52.0 104.0,58.5 97.5,52.0'/%3E%3Cpolygon points='52.0,-6.5 58.5,0.0 52.0,6.5 45.5,0.0'/%3E%3Cpolygon points='52.0,97.5 58.5,104.0 52.0,110.5 45.5,104.0'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-bg="arabesque"] { --bg-pat: var(--swp-arabesque); --bg-size: 96px 96px; --bg-op: .38; }
html[data-bg="arabesque"] main::before, html[data-bg="arabesque"] .section-soft::before, html[data-bg="arabesque"] .section-surface::before { background-color: #8a6d1f !important; }

/* Default background: the original star pattern at its original strength. */
html[data-bg="stars"] { --bg-op: .11; }

/* Stars: clearly visible. */
html[data-bg="stars"] { --bg-op: .24; }

/* Header in the footer's colour. */
.site-header { background: var(--brand-900); }

/* The banner in the header's colour. */
.hero { background-color: var(--brand-900); }

/* Page background: a light tint of the header navy. */
body, .section-soft, .section-surface { background: color-mix(in srgb, var(--brand-900) 9%, #fff); }
.hero::before { background: color-mix(in srgb, var(--brand-900) 9%, #fff); }

/* Patterns, more visible: the banner's stars in brighter, slightly bolder
   white lines; the page's stars in the deep brand colour, stronger. */
:root { --ox-pattern-light-strong: 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='%23ffffff' stroke-opacity='0.09' stroke-width='1.05'%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='%23ffffff' fill-opacity='0.09'%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"); }
.hero { background-image: var(--ox-pattern-light-strong) !important; }
main::before, .section-soft::before, .section-surface::before { background-color: var(--brand-700) !important; }
html[data-bg="stars"] { --bg-op: .34; }
/* A touch lighter. */
html[data-bg="stars"] { --bg-op: .24; }
/* Lighter still. */
html[data-bg="stars"] { --bg-op: .14; }

/* Header a little lighter than the footer navy. */
.site-header { background: color-mix(in srgb, var(--brand-900) 82%, var(--brand-700)); }

/* ==========================================================================
   Traveller Stories - centred heading, and the cards in the site's card
   colours (the same dark card as hotels, holidays, visas and activities),
   so they follow the card colourway picked in the palette menu.
   ========================================================================== */
.st-head { display: block; text-align: center; }
.st-head > div { max-width: 44rem; margin-inline: auto; }
.st-head .eyebrow { justify-content: center; }
.st-head p { margin-inline: auto; }

.st-card {
    --st-acc: var(--cd-acc, #f5a524);
    background: linear-gradient(180deg, var(--cd-top, var(--brand-900)) 0%, var(--cd-bot, var(--brand-900)) 70%);
    border-color: var(--cd-edge, color-mix(in srgb, var(--brand-900) 70%, #fff));
    color: #e8edf4;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cd-bot, var(--brand-900)) 25%, transparent);
}
.st-card:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--cd-bot, var(--brand-900)) 35%, transparent); }
.st-pic { border-bottom-color: var(--st-acc); background: var(--cd-bot, var(--brand-800)); }
.st-body h3 { color: var(--st-acc); border-bottom-color: rgba(255, 255, 255, .14); }
.st-stats b { color: #fff; }
.st-stats small { color: var(--st-acc); }
.st-stats svg, .st-stats > div:nth-child(n+2) .v svg { color: var(--st-acc); }
.st-body blockquote { color: rgba(255, 255, 255, .85); }
.st-body blockquote svg { color: var(--st-acc); }
.st-foot { background: rgba(0, 0, 0, .14); border-top-color: rgba(255, 255, 255, .14); }
.st-foot small { color: rgba(255, 255, 255, .7); }
.st-stars .st-off { color: rgba(255, 255, 255, .28); }
.st-foot .btn {
    border: 0; color: #fff;
    background: linear-gradient(135deg, var(--cd-go1, #fb923c), var(--cd-go2, #f97316));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-go2, #f97316) 35%, transparent);
}
.st-foot .btn:hover { filter: brightness(1.06); color: #fff; }

/* Ivory is the one light colourway - dark text on it. */
html[data-cards="ivory"] .st-card { color: var(--ink-800); }
html[data-cards="ivory"] .st-body h3 { border-bottom-color: var(--cd-edge); }
html[data-cards="ivory"] .st-stats b { color: var(--ink-900); }
html[data-cards="ivory"] .st-body blockquote { color: var(--ink-700); }
html[data-cards="ivory"] .st-foot { background: color-mix(in srgb, var(--cd-edge) 25%, transparent); border-top-color: var(--cd-edge); }
html[data-cards="ivory"] .st-foot small { color: var(--ink-500); }
html[data-cards="ivory"] .st-stars .st-off { color: var(--cd-edge); }

/* ==========================================================================
   Home - "ways to travel with us": one tile per service, each in the colour
   and solid icon it wears in the header menu.
   ========================================================================== */
.svc-head { display: block; text-align: center; }
.svc-head > div { max-width: 40rem; margin-inline: auto; }
.svc-head .eyebrow { justify-content: center; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.svc-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
    padding: 1.4rem 1.3rem 1.2rem; overflow: hidden; isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--mark) 22%, var(--line));
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--mark) 9%, var(--surface)) 0%, var(--surface) 55%);
    box-shadow: var(--sh-sm); color: var(--ink-700); text-decoration: none;
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s;
}
.svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mark), color-mix(in srgb, var(--mark) 45%, #fff)); }
.svc-card::after {
    content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%;
    background: color-mix(in srgb, var(--mark) 10%, transparent); transition: transform .3s var(--ease-out);
}
.svc-card:hover { transform: translateY(-4px); text-decoration: none; border-color: color-mix(in srgb, var(--mark) 50%, var(--line));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--mark) 22%, transparent); }
.svc-card:hover::after { transform: scale(1.35); }
.svc-ico {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--mark) 82%, #fff), var(--mark));
    color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--mark) 38%, transparent);
    transition: transform .22s var(--ease-out);
}
.svc-ico svg { width: 1.7rem; height: 1.7rem; }
.svc-card:hover .svc-ico { transform: rotate(-6deg) scale(1.06); }
.svc-card h3 { margin: .35rem 0 0; font-size: 1.15rem; color: var(--ink-900); }
.svc-card p { margin: 0; flex: 1; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-600); }
.svc-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: var(--t-sm); font-weight: 700; color: color-mix(in srgb, var(--mark) 75%, #000); }
.svc-go svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
.svc-card:hover .svc-go svg { transform: translateX(4px); }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } .svc-card { padding: 1.1rem 1rem 1rem; } .svc-card p { display: none; } }

/* Home - Popular destinations: one row of small cards (thumbnail, name,
   packages, price), scrolling sideways when there are more than fit. */
.pd-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14.5rem, 1fr); gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem .1rem .8rem; scrollbar-width: none; -ms-overflow-style: none; }
.pd-row::-webkit-scrollbar { display: none; }
.pd-card { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem .55rem .55rem; scroll-snap-align: start;
    border: 1px solid var(--brand-200); border-radius: 1rem; background: var(--surface); box-shadow: var(--sh-sm);
    color: var(--ink-700); text-decoration: none; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s; }
.pd-card:hover { transform: translateY(-3px); border-color: var(--brand-400); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-900) 16%, transparent); text-decoration: none; }
.pd-pic { flex: none; width: 4.5rem; height: 4.5rem; border-radius: .8rem; overflow: hidden; background: var(--brand-100); }
.pd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease-out); }
.pd-card:hover .pd-pic img { transform: scale(1.08); }
.pd-txt { display: grid; gap: .1rem; min-width: 0; }
.pd-txt b { font-size: .98rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-txt small { font-size: var(--t-xs); color: var(--ink-500); }
.pd-txt em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--brand-700); }
@media (max-width: 560px) { .pd-row { grid-auto-columns: 78%; } }

/* Popular destinations - photo on top, name and packages underneath. */
.pd-row { grid-auto-columns: minmax(10.5rem, 1fr); }
.pd-card { flex-direction: column; align-items: stretch; gap: .55rem; padding: .5rem .5rem .75rem; text-align: center; }
.pd-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: .75rem; }
.pd-txt { justify-items: center; padding: 0 .2rem; }
@media (max-width: 560px) { .pd-row { grid-auto-columns: 44%; } }

/* Popular destinations as postage stamps: a white frame with a perforated
   edge (holes punched along every side by the mask), a ruled line round the
   picture, and a faint postmark across its corner. The link carries the
   shadow, because a masked element clips its own. */
.pd-row { padding: .6rem .3rem 1rem; gap: 1rem; }
.pd-card { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--brand-900) 18%, transparent)); }
.pd-card:hover { border: 0; box-shadow: none; transform: translateY(-4px) rotate(-1.2deg);
    filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--brand-900) 24%, transparent)); }
.pd-stamp {
    --h: 5px; /* perforation hole radius */
    display: flex; flex-direction: column; gap: .5rem; height: 100%;
    padding: calc(var(--h) * 2.4) calc(var(--h) * 2.4) calc(var(--h) * 2.6);
    background: #fff; text-align: center;
    -webkit-mask:
        radial-gradient(var(--h), #0000 97%, #000) round calc(-1.5 * var(--h)) calc(-1.5 * var(--h)) / calc(3 * var(--h)) calc(3 * var(--h)),
        linear-gradient(#000 0 0) calc(1.5 * var(--h)) calc(1.5 * var(--h)) / calc(100% - 3 * var(--h)) calc(100% - 3 * var(--h)) no-repeat;
            mask:
        radial-gradient(var(--h), #0000 97%, #000) round calc(-1.5 * var(--h)) calc(-1.5 * var(--h)) / calc(3 * var(--h)) calc(3 * var(--h)),
        linear-gradient(#000 0 0) calc(1.5 * var(--h)) calc(1.5 * var(--h)) / calc(100% - 3 * var(--h)) calc(100% - 3 * var(--h)) no-repeat;
}
.pd-pic { position: relative; border-radius: 2px; outline: 2px solid var(--brand-700); outline-offset: 3px; }
.pd-pic::after { /* postmark */
    content: ""; position: absolute; left: -6%; bottom: 8%; width: 55%; height: 32%; opacity: .55; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 6c10-6 20 6 30 0s20-6 30 0 20 6 30 0 20-6 26 0'/%3E%3Cpath d='M2 16c10-6 20 6 30 0s20-6 30 0 20 6 30 0 20-6 26 0'/%3E%3Cpath d='M2 26c10-6 20 6 30 0s20-6 30 0 20 6 30 0 20-6 26 0'/%3E%3Cpath d='M2 36c10-6 20 6 30 0s20-6 30 0 20 6 30 0 20-6 26 0'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mix-blend-mode: screen;
}
.pd-pic img { border-radius: 2px; }
.pd-txt { padding: .25rem .2rem 0; }
.pd-txt b { color: var(--brand-900); letter-spacing: .02em; }
.pd-stamp { box-sizing: border-box; }
.pd-pic, .pd-pic img { border-radius: 0; }
.pd-row { padding: .7rem .4rem 1.4rem; }

/* Popular destinations - arrows either side of the row. */
.pd-wrap { position: relative; }
.pd-nav { position: absolute; top: 40%; z-index: 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
    border: 1px solid var(--brand-200); border-radius: 50%; background: var(--surface); color: var(--brand-800);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-900) 18%, transparent); cursor: pointer;
    transition: background .15s, color .15s, opacity .15s, transform .15s; }
.pd-nav svg { width: 1.1rem; height: 1.1rem; }
.pd-nav:hover:not(:disabled) { background: var(--brand-800); color: #fff; transform: scale(1.06); }
.pd-nav.is-prev { left: -1.3rem; }
.pd-nav.is-next { right: -1.3rem; }
.pd-nav:disabled { opacity: 0; pointer-events: none; }
.pd-wrap.is-static .pd-nav { display: none; }
@media (max-width: 760px) { .pd-nav.is-prev { left: -.4rem; } .pd-nav.is-next { right: -.4rem; } }

/* ==========================================================================
   Home - India: a promo panel on the left, the most-booked domestic
   destinations on the right as photo tiles with the price over the top.
   ========================================================================== */
.in-grid { display: grid; grid-template-columns: minmax(15rem, 1fr) 3fr; gap: 1.4rem; align-items: stretch; }
.in-promo {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem;
    min-height: 26rem; padding: 1.6rem 1.4rem; overflow: hidden; isolation: isolate;
    border-radius: var(--r-lg); color: #fff; text-decoration: none;
    background: var(--in-bg) center / cover no-repeat, var(--brand-900);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-900) 25%, transparent);
}
.in-promo::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, color-mix(in srgb, #e11d74 55%, transparent) 0%, color-mix(in srgb, var(--brand-900) 70%, transparent) 45%, color-mix(in srgb, var(--brand-900) 96%, transparent) 100%); }
.in-promo::after { content: ""; position: absolute; top: -3rem; right: -3rem; z-index: -1; width: 11rem; height: 11rem; border-radius: 50%;
    border: 18px solid rgba(255, 255, 255, .12); }
.in-promo:hover { text-decoration: none; color: #fff; }
.in-promo-kicker { position: absolute; top: 1.3rem; left: 1.4rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem;
    border-radius: 999px; background: rgba(255, 255, 255, .95); color: #be185d; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.in-promo-kicker svg { width: .85rem; height: .85rem; }
.in-promo-h { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.02; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.in-promo-sub { font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.in-promo-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.in-promo-badges span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .75rem; font-weight: 600; }
.in-promo-badges svg { width: .8rem; height: .8rem; color: #fbbf24; }
.in-promo-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; padding: .7rem 1.2rem; border-radius: 999px;
    background: #fff; color: var(--brand-900); font-weight: 800; font-size: .9rem; transition: gap .2s var(--ease-out); }
.in-promo-btn svg { width: 1rem; height: 1rem; }
.in-promo:hover .in-promo-btn { gap: .75rem; }

.in-panel { padding: 1.4rem 1.4rem 1.5rem; border: 1px solid color-mix(in srgb, #f59e0b 25%, var(--line)); border-radius: var(--r-lg);
    background: linear-gradient(180deg, #fff6ec 0%, var(--surface) 100%); }
.in-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.in-head-ico { display: grid; place-items: center; flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%;
    background: linear-gradient(145deg, #fde2e4, #fbcfe8); color: #e11d48; box-shadow: 0 6px 14px rgba(225, 29, 72, .18); }
.in-head-ico svg { width: 1.45rem; height: 1.45rem; }
.in-head h2 { margin: 0; font-size: 1.35rem; color: var(--ink-900); }
.in-head p { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--ink-600); }
.in-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.in-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: .8rem; background: var(--surface);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-900) 10%, transparent); text-decoration: none;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.in-tile:hover { transform: translateY(-4px); text-decoration: none; box-shadow: 0 14px 26px color-mix(in srgb, var(--brand-900) 20%, transparent); }
.in-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-800); }
.in-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-out); }
.in-tile:hover .in-pic img { transform: scale(1.08); }
.in-cap { position: absolute; inset: 0 0 auto 0; display: grid; justify-items: center; gap: .15rem; padding: .75rem .6rem 2.2rem; text-align: center; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%); }
.in-cap small { font-size: .78rem; font-weight: 600; opacity: .95; }
.in-cap small b { font-size: .95rem; }
.in-cap strong { font-size: 1rem; line-height: 1.2; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.in-foot { padding: .45rem .5rem; text-align: center; font-size: .75rem; color: var(--ink-600); background: color-mix(in srgb, var(--brand-50) 70%, #fff); }
.in-foot b { color: var(--ink-900); }

@media (max-width: 1100px) {
    .in-grid { grid-template-columns: 1fr; }
    .in-promo { min-height: 17rem; }
}
@media (max-width: 760px) { .in-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .in-panel { padding: 1rem; } }

/* ==========================================================================
   Home - destination bubbles: a round photo in a soft yellow ring, the name
   (cut with an ellipsis, full name in a tooltip) and the tour count.
   ========================================================================== */
.db-section { padding: 1.4rem 0 .6rem; }
.db-row { display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .2rem 2.3rem; scrollbar-width: none; }
.db-row::-webkit-scrollbar { display: none; }
.db-item { position: relative; flex: 0 0 7.2rem; display: grid; justify-items: center; gap: .1rem; scroll-snap-align: start;
    text-align: center; text-decoration: none; color: var(--ink-700); }
.db-item:hover { text-decoration: none; }
.db-ring { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; margin-bottom: .45rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #fffbe6 0%, #fff3c4 70%, #ffe9a3 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, .18); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.db-ring img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.db-item:hover .db-ring { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(245, 158, 11, .3); }
.db-item b { max-width: 100%; font-size: .86rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-item small { font-size: .78rem; color: var(--ink-600); }
.db-tip { position: absolute; top: 100%; left: 50%; margin-top: .35rem; transform: translateX(-50%) translateY(-4px);
    padding: .3rem .6rem; border-radius: .4rem; background: #5f6368; color: #fff; font-size: .75rem; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 4; }
.db-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #5f6368; }
.db-item:hover .db-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.db-wrap .pd-nav { top: 2rem; }
@media (max-width: 560px) { .db-item { flex-basis: 6rem; } .db-ring { width: 4.8rem; height: 4.8rem; } .db-ring img { width: 3.9rem; height: 3.9rem; } }

/* Destination bubbles, tightened: no empty band under the row. The custom
   tooltip needed that band (the scrolling row clips anything outside it), so
   it goes - the full name still shows as the link's own title on hover. */
.db-section { padding: .6rem 0 0; }
.db-row { padding: .35rem .2rem .4rem; }
.db-tip { display: none; }
.db-ring { margin-bottom: .3rem; }
.db-section + .section, .db-section + section { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
/* ...and no double gap between the trust strip and the bubbles. */
.section-tight:has(+ .db-section) { padding-bottom: .3rem; }

/* Home page only (the page that carries the destination bubbles): half the
   gap between sections, and a shorter head above each section's content. */
main:has(.db-section) .section { padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
main:has(.db-section) .section-tight { padding-block: clamp(1rem, .8rem + 1vw, 1.6rem); }
main:has(.db-section) .section-head { margin-bottom: 1rem; }
main:has(.db-section) .pd-row { padding-bottom: .6rem; }

/* Home - Visas, in the India section's layout: promo on the left, the most
   applied-for visas as photo tiles on the right - teal and navy instead of
   pink and cream, with the country's flag on each tile. */
.in-section.is-visa .in-promo::before { background: linear-gradient(180deg, color-mix(in srgb, #0891b2 60%, transparent) 0%, color-mix(in srgb, var(--brand-900) 72%, transparent) 45%, color-mix(in srgb, var(--brand-900) 96%, transparent) 100%); }
.in-section.is-visa .in-promo-kicker { color: #0e7490; }
.in-section.is-visa .in-promo-h { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.in-section.is-visa .in-panel { border-color: color-mix(in srgb, #06b6d4 28%, var(--line)); background: linear-gradient(180deg, #ecfeff 0%, var(--surface) 100%); }
.in-section.is-visa .in-head-ico { background: linear-gradient(145deg, #cffafe, #a5f3fc); color: #0e7490; box-shadow: 0 6px 14px rgba(8, 145, 178, .2); }
.in-section.is-visa .in-foot { background: color-mix(in srgb, #06b6d4 8%, #fff); }
.in-flag { position: absolute; left: .5rem; bottom: .5rem; z-index: 2; line-height: 0; padding: 2px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.in-flag img { width: 28px; height: 19px; border-radius: 2px; object-fit: cover; display: block; }
.in-tile:hover .in-flag img { transform: none; }

/* Home - Holiday packages: one row of cards (three across on a desktop),
   moved with the arrows either side, no scrollbar. */
.pk-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .2rem 1rem; scrollbar-width: none; }
.pk-row::-webkit-scrollbar { display: none; }
.pk-row > * { scroll-snap-align: start; min-width: 0; }
.pk-wrap .pd-nav { top: 38%; }
@media (max-width: 1100px) { .pk-row { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 640px)  { .pk-row { grid-auto-columns: 86%; } }

/* Home - Holiday packages: four across, in the light (ivory) card colours
   whatever colourway the rest of the site wears. Same rules as the Ivory
   colourway, scoped to this row. */
.pk-row { grid-auto-columns: calc((100% - 3 * 1.1rem) / 4); gap: 1.1rem;
    --cd-top: #fffdf8; --cd-bot: #f5ecda; --cd-edge: #e2cfa6; --cd-acc: #9a6b12; --cd-acc2: #7a520a; --cd-go1: var(--brand-600); --cd-go2: var(--brand-800); }
.pk-row :is(.dcard, .card-dark) {
    --amber: var(--cd-acc);
    background: linear-gradient(180deg, var(--cd-top) 0%, var(--cd-bot) 70%);
    border-color: var(--cd-edge);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cd-bot) 28%, transparent);
}
.pk-row :is(.dcard, .card-dark):hover {
    border-color: var(--amber);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--cd-bot) 38%, transparent);
}
.pk-row :is(.dcard-pic, .card-dark .hcard-pic, .card-dark .card-media) { background: var(--cd-bot); }
.pk-row :is(.dcard-go, .card-dark .hcard-go, .card-dark .link-arrow) {
    background: linear-gradient(135deg, var(--cd-go1), var(--cd-go2));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-go2) 35%, transparent);
}
.pk-row .card-dark .card-title a:hover { color: var(--cd-acc2); }
.pk-row .card-dark .hcard-name { border-bottom-color: color-mix(in srgb, var(--cd-acc) 28%, transparent); }
.pk-row .card-dark :is(.hcard-foot, .card-foot) { border-top-color: color-mix(in srgb, var(--cd-acc) 45%, transparent); }

/* Ivory: the one light colourway, so the white type turns dark. */
.pk-row :is(.dcard, .card-dark) { color: #3b3326; }
.pk-row :is(.dcard, .card-dark) :is(
    .dcard-stats b, .dcard-more-v, .dcard-price b, .hcard-stats .v, .hcard-stats .v b,
    .card-price strong, .card-price.is-none b, .card-meta, .price-now, .visa-facts b, .visa-docs ul b, .visa-est b
) { color: #1f2937; }
.pk-row :is(.dcard, .card-dark) :is(
    .dcard-more-k, .dcard-price span, .pkg-cities, .hcard-addr, .hcard-text, .card-text, .price-unit, .card-price-k,
    .visa-docs summary, .visa-docs ul, .visa-docs.is-empty, .visa-docs.is-empty span
) { color: #5b6472; }
.pk-row :is(.dcard, .card-dark) .pkg-cities i { color: rgba(0, 0, 0, .25); }
.pk-row :is(.dcard, .card-dark) :is(.dcard-foot, .hcard-foot, .card-foot) { background: color-mix(in srgb, var(--cd-acc) 9%, #fff); }
.pk-row .dcard-foot,
.pk-row .card-dark :is(.visa-docs, .act-more) { border-top-color: rgba(0, 0, 0, .1); }
.pk-row .card-dark .pkg-enq { border-color: var(--cd-edge); color: #1f2937; }
.pk-row .card-dark .pkg-enq:hover { background: color-mix(in srgb, var(--cd-acc) 10%, #fff); border-color: var(--cd-acc); }
.pk-row .card-dark .act-stars span:not(.is-on) { color: rgba(255, 255, 255, .55); }
.pk-row .card-dark .visa-est { background: #dcfce7; border-color: #86efac; }
.pk-row .card-dark .visa-est span { color: #15803d; }
.pk-row .card-dark .hcard-name a, .pk-row .card-dark .card-title a { color: var(--cd-acc); }
.pk-row .card-dark .hcard-stats svg, .pk-row .card-dark .hcard-stats small { color: var(--cd-acc); }
@media (max-width: 1100px) { .pk-row { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } }
@media (max-width: 820px)  { .pk-row { grid-auto-columns: calc((100% - 1.1rem) / 2); } }
@media (max-width: 560px)  { .pk-row { grid-auto-columns: 86%; } }

/* Holiday packages row - light cards in the PAGE's colour theme (the brand
   ramp), not ivory and gold: white into a pale brand tint, brand borders,
   names and icons in the brand's deep step. Follows the palette's theme. */
.pk-row {
    --cd-top: #fff;
    --cd-bot: color-mix(in srgb, var(--brand-100) 70%, #fff);
    --cd-edge: var(--brand-200);
    --cd-acc: var(--brand-700);
    --cd-acc2: var(--brand-900);
    --cd-go1: var(--brand-600);
    --cd-go2: var(--brand-800);
}
.pk-row .card-dark { color: var(--ink-700); }
.pk-row .card-dark :is(.hcard-foot, .card-foot) { background: color-mix(in srgb, var(--brand-50) 80%, #fff); border-top-color: var(--brand-200); }
.pk-row .card-dark .hcard-name { border-bottom-color: var(--brand-100); }
.pk-row .card-dark .pkg-plate { background: var(--brand-800); color: #fff; }
.pk-row .card-dark .pkg-cities-k { color: var(--brand-700); }
.pk-row .card-dark .pkg-enq { border-color: var(--brand-300); color: var(--brand-800); }
.pk-row .card-dark .pkg-enq:hover { background: var(--brand-50); border-color: var(--brand-600); }
.pk-row .card-dark:hover { border-color: var(--brand-400); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-900) 16%, transparent); }
.pk-row .card-dark .card-media, .pk-row .card-dark .hcard-pic { border-bottom-color: var(--brand-600); }
/* Holiday packages row - a darker card border so each card reads clearly. */
.pk-row { --cd-edge: var(--brand-400); }
.pk-row .card-dark { border: 1.5px solid var(--brand-400); }
.pk-row .card-dark:hover { border-color: var(--brand-600); }
/* ...but never the section straight after the banner: it has to give back
   the half of the search panel that hangs below the band (search_bar.js
   measures it into --ag-hero-drop), or the page slides under the panel. */
main:has(.db-section) .hero:has(.ag-hero) + * { padding-top: calc(var(--ag-hero-drop, 104px) + 28px); }

/* Home - the destination bubbles in a white rounded box. */
.db-wrap {
    padding: .5rem 1.4rem; border: 1px solid var(--brand-200); border-radius: 1.1rem;
    background: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 8%, transparent);
}
.db-row { padding: .6rem .1rem .5rem; }
.db-wrap .pd-nav { top: 50%; transform: translateY(-50%); }
.db-wrap .pd-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.db-wrap .pd-nav.is-prev { left: -1.1rem; }
.db-wrap .pd-nav.is-next { right: -1.1rem; }

/* Home - Popular destinations (the stamp row) in a white rounded box, the
   same as the destination bubbles. */
.pd-wrap:not(.db-wrap):not(.pk-wrap) {
    padding: .4rem 1.4rem; border: 1px solid var(--brand-200); border-radius: 1.1rem;
    background: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 8%, transparent);
}
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-row { padding: .8rem .3rem 1rem; }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-nav { top: 50%; transform: translateY(-50%); }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-nav.is-prev { left: -1.1rem; }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-nav.is-next { right: -1.1rem; }
/* On white, the stamps need their own faint edge to read as stamps. */
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-card { filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--brand-900) 22%, transparent)) drop-shadow(0 6px 10px color-mix(in srgb, var(--brand-900) 10%, transparent)); }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-stamp { background: #fdfcf8; }

/* ==========================================================================
   Home - International Holidays bubbles, dressed up: a heading bar inside
   the box, a soft travel-sky wash, a colourful gradient ring per bubble
   (each its own hue), the country flag on the ring, and the count as a pill.
   ========================================================================== */
.db-wrap {
    padding: 1rem 1.4rem .6rem;
    background:
        radial-gradient(60rem 12rem at 0% 0%, color-mix(in srgb, var(--brand-100) 55%, transparent), transparent 70%),
        radial-gradient(40rem 10rem at 100% 100%, #fff4d6, transparent 70%),
        #fff;
}
.db-top { display: flex; align-items: center; gap: .8rem; padding-bottom: .7rem; margin-bottom: .2rem; border-bottom: 1px dashed var(--brand-200); }
.db-top-ico { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500, var(--brand-600)), var(--brand-800)); color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-700) 35%, transparent); }
.db-top-ico svg { width: 1.3rem; height: 1.3rem; }
.db-top h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; color: var(--ink-900); }
.db-top p { margin: .1rem 0 0; font-size: var(--t-xs); color: var(--ink-500); }
.db-top-all { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-800); font-size: var(--t-sm); font-weight: 700; text-decoration: none; transition: background .15s, gap .15s; }
.db-top-all svg { width: .95rem; height: .95rem; }
.db-top-all:hover { background: var(--brand-100); gap: .55rem; text-decoration: none; }
.db-wrap .pd-nav { top: calc(50% + 1.6rem); }

.db-item { flex-basis: 7.4rem; }
.db-ring {
    position: relative; width: 5.8rem; height: 5.8rem; padding: 3px;
    background: conic-gradient(from 200deg, hsl(var(--hue) 85% 55%), hsl(calc(var(--hue) + 60) 90% 60%), hsl(calc(var(--hue) + 140) 80% 58%), hsl(var(--hue) 85% 55%));
    box-shadow: 0 6px 16px hsl(var(--hue) 70% 50% / .28);
}
.db-ring img { width: 100%; height: 100%; border: 3px solid #fff; box-shadow: none; }
.db-item:hover .db-ring { transform: translateY(-5px) scale(1.06); box-shadow: 0 14px 24px hsl(var(--hue) 70% 45% / .38); }
.db-item:hover .db-ring img { filter: saturate(1.15) brightness(1.04); }
.db-flag { position: absolute; right: -2px; bottom: 2px; line-height: 0; padding: 2px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.db-flag img { width: 1.35rem !important; height: 1.35rem !important; border: 0 !important; border-radius: 50%; object-fit: cover; }
.db-item b { margin-top: .15rem; font-size: .88rem; }
.db-item small { display: inline-block; margin-top: .15rem; padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
    background: hsl(var(--hue) 90% 95%); color: hsl(var(--hue) 65% 32%); }
@media (max-width: 560px) {
    .db-top p { display: none; }
    .db-ring { width: 5rem; height: 5rem; }
}

/* Popular destinations - heading inside its box, like International Holidays. */
.pd-wrap:not(.db-wrap):not(.pk-wrap) { padding-top: 1rem; }
.pd-wrap:not(.db-wrap):not(.pk-wrap) .pd-nav { top: calc(50% + 1.6rem); }
.db-top-ico.is-warm { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 6px 14px rgba(234, 88, 12, .3); }

/* Holiday packages - in a white rounded box with its heading inside, like
   International Holidays and Popular destinations. */
.pk-wrap.is-boxed {
    padding: 1rem 1.4rem .4rem; border: 1px solid var(--brand-200); border-radius: 1.1rem;
    background: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 8%, transparent);
}
.pk-wrap.is-boxed .db-top { margin-bottom: .6rem; }
.pk-wrap.is-boxed .pk-row { padding: .4rem .2rem 1rem; }
.pk-wrap.is-boxed .pd-nav { top: calc(50% + 1.8rem); transform: translateY(-50%); }
.pk-wrap.is-boxed .pd-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.pk-wrap.is-boxed .pd-nav.is-prev { left: -1.1rem; }
.pk-wrap.is-boxed .pd-nav.is-next { right: -1.1rem; }
.db-top-ico.is-green { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 6px 14px rgba(4, 120, 87, .3); }
@media (max-width: 640px) { .pk-wrap.is-boxed .db-top h2 { font-size: 1rem; } .pk-wrap.is-boxed .db-top-all { display: none; } }
/* Things to do - the Popular destinations stamp row; violet heading mark,
   and names can run to two lines (activity names are longer). */
.db-top-ico.is-violet { background: linear-gradient(135deg, #a855f7, #6d28d9); box-shadow: 0 6px 14px rgba(109, 40, 217, .3); }
.ac-wrap .pd-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; min-height: 2.5em; }

/* Holiday packages row (light cards) - the dividers, which were faint white
   lines drawn for the dark card and vanished on the light one. */
.pk-row .card-dark .hcard-name { border-bottom: 1px solid var(--brand-200) !important; }
.pk-row .card-dark :is(.hcard-foot, .card-foot) { border-top: 1px solid var(--brand-200) !important; }
.pk-row .card-dark .pkg-cities { border-top: 1px dashed var(--brand-200); padding-top: .55rem; }
.pk-row .card-dark .pkg-cities i { color: var(--brand-300) !important; }
.pk-row .card-dark .hcard-stats > * + * { border-left: 1px solid var(--brand-200); }
.pk-row .card-dark .hcard-media, .pk-row .card-dark .hcard-pic { border-bottom: 3px solid var(--brand-600); }
/* Holiday packages row - the price footer a shade darker than the card. */
.pk-row .card-dark :is(.hcard-foot, .card-foot) { background: color-mix(in srgb, var(--brand-100) 85%, var(--brand-200)) !important; border-top-color: var(--brand-300) !important; }
.pk-row .card-dark .pkg-enq { background: #fff; }
/* Holiday packages row - the footer text, drawn white for the dark card,
   in the theme's dark ink on the light one: "Starting from", the price, and
   "On request" when there is no fare. */
.pk-row .card-dark .hcard-foot .card-price-k { color: var(--brand-700) !important; }
.pk-row .card-dark .hcard-foot .card-price strong { color: var(--brand-900) !important; }
.pk-row .card-dark .hcard-foot .card-price.is-none b { color: var(--brand-900) !important; font-size: .95rem; font-weight: 750; }

/* International Holidays bubbles - a simple ring instead of the rainbow:
   one thin line in the theme colour, the same for every destination. */
.db-ring { padding: 3px; background: var(--brand-200); box-shadow: 0 4px 10px color-mix(in srgb, var(--brand-900) 12%, transparent); }
.db-item:hover .db-ring { background: var(--brand-500, var(--brand-600)); box-shadow: 0 10px 18px color-mix(in srgb, var(--brand-900) 20%, transparent); }
.db-item small { background: var(--brand-50); color: var(--brand-800); }

/* Home - Traveller Reviews cards in the Holiday packages light theme: white
   into a pale brand tint, a 1.5px brand border, dark text, a darker price-
   style footer, and brand-coloured accents instead of amber on navy. */
main:has(.db-section) .st-card {
    --st-acc: var(--brand-700);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--brand-100) 70%, #fff) 100%);
    border: 1.5px solid var(--brand-400); color: var(--ink-700);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 10%, transparent);
}
main:has(.db-section) .st-card:hover { border-color: var(--brand-600); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-900) 16%, transparent); }
main:has(.db-section) .st-pic { border-bottom: 3px solid var(--brand-600); background: var(--brand-100); }
main:has(.db-section) .st-initials { color: var(--brand-700); }
main:has(.db-section) .st-body h3 { color: var(--brand-800); border-bottom: 1px solid var(--brand-200); }
main:has(.db-section) .st-stats > div + div { border-left: 1px solid var(--brand-200); }
main:has(.db-section) .st-stats b { color: var(--ink-900); }
main:has(.db-section) .st-stats small { color: var(--brand-700); }
main:has(.db-section) .st-stats svg, main:has(.db-section) .st-stats > div:nth-child(n+2) .v svg { color: var(--brand-600); }
main:has(.db-section) .st-stats .v svg:first-child { color: #f59e0b; }
main:has(.db-section) .st-stats > div:nth-child(n+2) .v svg:first-child { color: var(--brand-600); }
main:has(.db-section) .st-body blockquote { color: var(--ink-700); }
main:has(.db-section) .st-body blockquote svg { color: var(--brand-400); }
main:has(.db-section) .st-foot { background: color-mix(in srgb, var(--brand-100) 85%, var(--brand-200)); border-top: 1px solid var(--brand-300); }
main:has(.db-section) .st-foot small { color: var(--brand-700); }
main:has(.db-section) .st-stars .st-off { color: var(--brand-200); }
main:has(.db-section) .st-foot .btn { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-800) 30%, transparent); }
/* Holiday packages row - Destination / Duration / Type values in bold. */
.pk-row .card-dark .hcard-stats .v b { font-weight: 800 !important; color: var(--ink-900) !important; }

/* Header - the tilted orange plane tile before the logo (as the old
   Travel_Agency header). The brand link becomes a row: tile, then logo. */
.nav .brand-mark { display: inline-flex; align-items: center; gap: .8rem; }
.brand-plane { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px;
    background: #ff9800; transform: rotate(-10deg); box-shadow: 0 4px 10px rgba(255, 152, 0, .35); transition: transform .25s var(--ease-out); }
.brand-plane svg { width: 24px; height: 24px; }
.brand-mark:hover .brand-plane { transform: rotate(0deg) scale(1.05); }
@media (max-width: 560px) { .brand-plane { width: 30px; height: 30px; } .brand-plane svg { width: 20px; height: 20px; } .nav .brand-mark { gap: .55rem; } }
/* ...ordinary bold (700) in the page's normal font, not extra-heavy. */
.pk-row .card-dark .hcard-stats .v b { font-weight: 700 !important; font-family: inherit !important; font-size: .875rem !important; letter-spacing: normal !important; text-transform: none !important; }

/* Home - Traveller Reviews in a white rounded box with the heading inside,
   the same as the Holiday packages box. */
.st-section.is-boxed { background: none; }
.st-box {
    padding: 1rem 1.4rem .6rem; border: 1px solid var(--brand-200); border-radius: 1.1rem;
    background: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 8%, transparent);
}
.st-box .db-top { margin-bottom: .8rem; }
.st-box .st-rail { padding-bottom: .9rem; }
.st-box .st-nav.is-prev { left: -2.4rem; }
.st-box .st-nav.is-next { right: -2.4rem; }
.db-top-ico.is-gold { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 14px rgba(217, 119, 6, .3); }
@media (max-width: 760px) { .st-box { padding: .9rem 1rem .5rem; } }


/* ==========================================================================
   PHONE AND TABLET VIEW - modelled on the Travel_Agency mobile layout:
   a dark two-row top bar (logo + Login, then product tabs with icons) and a
   fixed dark bar along the bottom (Wallet, My Booking, My Enquiry, Chat,
   Call). Desktop is untouched: all of this is inside the media queries.
   ========================================================================== */
.m-tabs, .m-bottom, .m-login { display: none; }

@media (max-width: 1024px) {
    /* The second row: product tabs, icon over label, scrolling sideways. */
    .m-tabs {
        display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none;
        padding: .15rem .6rem .45rem; border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .m-tabs::-webkit-scrollbar { display: none; }
    .m-tab {
        flex: 1 0 auto; display: grid; justify-items: center; gap: .2rem; min-width: 3.6rem; padding: .35rem .45rem;
        border: 0; border-radius: .6rem; background: none; color: #f1f5f9; font: inherit; font-size: .72rem; font-weight: 600;
        text-decoration: none; cursor: pointer; white-space: nowrap;
    }
    .m-tab:hover, .m-tab.is-on { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
    .m-tab.is-on { box-shadow: inset 0 -2px 0 var(--mark, #fff); }
    .m-tab-ico { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--mark, #fff); }
    .m-tab-ico svg { width: 1.35rem; height: 1.35rem; }
    .m-tab.is-on .m-tab-ico, .m-tab:hover .m-tab-ico { transform: translateY(-1px); }
}

@media (max-width: 760px) {
    /* Top row: the logo and a Login pill only - the wide buttons went off the
       right edge and made the whole page scroll sideways. */
    .nav-end > :not(.m-login) { display: none !important; }
    .m-login {
        display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px;
        background: #fff; color: #0f172a; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    }
    .m-login svg { width: 1.05rem; height: 1.05rem; }
    .nav { padding-block: .55rem; }
    .nav .brand-mark img { height: 38px; width: auto; }

    /* The bottom bar. */
    .m-bottom {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--brand-900, #1e293b);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
    }
    .m-bottom a { display: grid; justify-items: center; gap: .15rem; padding: .3rem .1rem; border-radius: .5rem;
        color: #f1f5f9; font-size: .66rem; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.15; }
    .m-bottom a:hover, .m-bottom a:active { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
    .m-bottom svg { width: 1.3rem; height: 1.3rem; }
    .m-bottom a.is-wa svg { color: #25d366; }
    body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
    .wa-float, .whatsapp-float, .float-wa { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }

    /* Rows that scroll: a finger swipes them, so the arrows (which sat off
       the screen edge) go; boxes lose some padding. */
    .pd-nav, .st-nav { display: none !important; }
    .db-wrap, .pd-wrap:not(.db-wrap):not(.pk-wrap), .pk-wrap.is-boxed, .st-box { padding-inline: .8rem; border-radius: .9rem; }
    .db-top { gap: .6rem; }
    .db-top-ico { width: 2.2rem; height: 2.2rem; }
    .db-top h2 { font-size: 1rem; }
    .db-top p { font-size: .72rem; }
    .db-top-all { padding: .35rem .65rem; font-size: .75rem; }

    /* Trust strip: two tidy columns. */
    main:has(.db-section) .trust { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; justify-items: start; }
    main:has(.db-section) .trust-item { font-size: .78rem; }

    /* Sections a little closer together on a phone. */
    main:has(.db-section) .section { padding-block: 1.1rem; }
}

@media (max-width: 1024px) and (min-width: 641px) {
    /* Tablet: the search panel was held to 60% of the window (461px on an
       iPad) - use the full column instead. */
    .hero-search { width: 100%; }
    .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .in-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) and (min-width: 641px) {
    /* searchbar.css loads after this file, so its 60% rule needs a stronger selector to lose. */
    html body .hero .hero-search { width: 100%; }
}
/* Holiday packages row - the Destination / Duration / Type values smaller. */
.pk-row .card-dark .hcard-stats .v b { font-size: .75rem !important; }
.pk-row .card-dark .hcard-stats .v svg { width: .85rem; height: .85rem; }
/* Holiday packages row - Destination / Duration / Type lined up: each value
   on ONE line (the narrow columns wrapped "Europe Tours" and "International"
   to two, which pushed their labels below Duration's), icon and text
   centred together, the three labels on one baseline. */
.pk-row .card-dark .hcard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; text-align: center; gap: 0; }
.pk-row .card-dark .hcard-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 .3rem; }
.pk-row .card-dark .hcard-stats .v { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; max-width: 100%; min-width: 0; }
.pk-row .card-dark .hcard-stats .v b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.3; }
.pk-row .card-dark .hcard-stats .v svg { flex: none; }
.pk-row .card-dark .hcard-stats small { margin-top: .2rem; white-space: nowrap; }
/* ...columns sized to their content: Duration takes what it needs, the
   other two share the rest; icons a touch closer to their text. */
.pk-row .card-dark .hcard-stats { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: .15rem; }
.pk-row .card-dark .hcard-stats > div { padding: 0 .2rem; }
.pk-row .card-dark .hcard-stats .v { gap: .2rem; }
/* ...and without the three small icons: the label under each value already
   names it, and the room lets "International" fit whole on a narrow card. */
.pk-row .card-dark .hcard-stats .v svg { display: none; }
@media (max-width: 380px) { .pk-row .card-dark .hcard-stats .v b { font-size: .7rem !important; } }

/* ==========================================================================
   CARD COLOUR "Light" - the home page's Holiday packages card on every card
   of the site (hotels, holidays, visas, activities, destinations): white into
   a pale brand tint, a brand border, a darker brand price strip and navy
   text. The default colourway; the palette's others still work.
   Rules generated from the .pk-row set above, scoped to data-cards="light".
   ========================================================================== */
html[data-cards="light"] :is(.dcard, .card-dark) {
    --amber: var(--cd-acc);
    background: linear-gradient(180deg, var(--cd-top) 0%, var(--cd-bot) 70%);
    border-color: var(--cd-edge);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cd-bot) 28%, transparent);
}
html[data-cards="light"] :is(.dcard, .card-dark):hover {
    border-color: var(--amber);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--cd-bot) 38%, transparent);
}
html[data-cards="light"] :is(.dcard-pic, .card-dark .hcard-pic, .card-dark .card-media) { background: var(--cd-bot); }
html[data-cards="light"] :is(.dcard-go, .card-dark .hcard-go, .card-dark .link-arrow) {
    background: linear-gradient(135deg, var(--cd-go1), var(--cd-go2));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-go2) 35%, transparent);
}
html[data-cards="light"] .card-dark .card-title a:hover { color: var(--cd-acc2); }
html[data-cards="light"] .card-dark .hcard-name { border-bottom-color: color-mix(in srgb, var(--cd-acc) 28%, transparent); }
html[data-cards="light"] .card-dark :is(.hcard-foot, .card-foot) { border-top-color: color-mix(in srgb, var(--cd-acc) 45%, transparent); }

/* Ivory: the one light colourway, so the white type turns dark. */
html[data-cards="light"] :is(.dcard, .card-dark) { color: #3b3326; }
html[data-cards="light"] :is(.dcard, .card-dark) :is(
    .dcard-stats b, .dcard-more-v, .dcard-price b, .hcard-stats .v, .hcard-stats .v b,
    .card-price strong, .card-price.is-none b, .card-meta, .price-now, .visa-facts b, .visa-docs ul b, .visa-est b
) { color: #1f2937; }
html[data-cards="light"] :is(.dcard, .card-dark) :is(
    .dcard-more-k, .dcard-price span, .pkg-cities, .hcard-addr, .hcard-text, .card-text, .price-unit, .card-price-k,
    .visa-docs summary, .visa-docs ul, .visa-docs.is-empty, .visa-docs.is-empty span
) { color: #5b6472; }
html[data-cards="light"] :is(.dcard, .card-dark) .pkg-cities i { color: rgba(0, 0, 0, .25); }
html[data-cards="light"] :is(.dcard, .card-dark) :is(.dcard-foot, .hcard-foot, .card-foot) { background: color-mix(in srgb, var(--cd-acc) 9%, #fff); }
html[data-cards="light"] .dcard-foot,
html[data-cards="light"] .card-dark :is(.visa-docs, .act-more) { border-top-color: rgba(0, 0, 0, .1); }
html[data-cards="light"] .card-dark .pkg-enq { border-color: var(--cd-edge); color: #1f2937; }
html[data-cards="light"] .card-dark .pkg-enq:hover { background: color-mix(in srgb, var(--cd-acc) 10%, #fff); border-color: var(--cd-acc); }
html[data-cards="light"] .card-dark .act-stars span:not(.is-on) { color: rgba(255, 255, 255, .55); }
html[data-cards="light"] .card-dark .visa-est { background: #dcfce7; border-color: #86efac; }
html[data-cards="light"] .card-dark .visa-est span { color: #15803d; }
html[data-cards="light"] .card-dark .hcard-name a, html[data-cards="light"] .card-dark .card-title a { color: var(--cd-acc); }
html[data-cards="light"] .card-dark .hcard-stats svg, html[data-cards="light"] .card-dark .hcard-stats small { color: var(--cd-acc); }
@media (max-width: 1100px) { html[data-cards="light"] { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } }
@media (max-width: 820px)  { html[data-cards="light"] { grid-auto-columns: calc((100% - 1.1rem) / 2); } }
@media (max-width: 560px)  { html[data-cards="light"] { grid-auto-columns: 86%; } }

/* Holiday packages row - light cards in the PAGE's colour theme (the brand
   ramp), not ivory and gold: white into a pale brand tint, brand borders,
   names and icons in the brand's deep step. Follows the palette's theme. */
html[data-cards="light"] {
    --cd-top: #fff;
    --cd-bot: color-mix(in srgb, var(--brand-100) 70%, #fff);
    --cd-edge: var(--brand-200);
    --cd-acc: var(--brand-700);
    --cd-acc2: var(--brand-900);
    --cd-go1: var(--brand-600);
    --cd-go2: var(--brand-800);
}
html[data-cards="light"] .card-dark { color: var(--ink-700); }
html[data-cards="light"] .card-dark :is(.hcard-foot, .card-foot) { background: color-mix(in srgb, var(--brand-50) 80%, #fff); border-top-color: var(--brand-200); }
html[data-cards="light"] .card-dark .hcard-name { border-bottom-color: var(--brand-100); }
html[data-cards="light"] .card-dark .pkg-plate { background: var(--brand-800); color: #fff; }
html[data-cards="light"] .card-dark .pkg-cities-k { color: var(--brand-700); }
html[data-cards="light"] .card-dark .pkg-enq { border-color: var(--brand-300); color: var(--brand-800); }
html[data-cards="light"] .card-dark .pkg-enq:hover { background: var(--brand-50); border-color: var(--brand-600); }
html[data-cards="light"] .card-dark:hover { border-color: var(--brand-400); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-900) 16%, transparent); }
html[data-cards="light"] .card-dark .card-media, html[data-cards="light"] .card-dark .hcard-pic { border-bottom-color: var(--brand-600); }
/* Holiday packages row - a darker card border so each card reads clearly. */
html[data-cards="light"] { --cd-edge: var(--brand-400); }
html[data-cards="light"] .card-dark { border: 1.5px solid var(--brand-400); }
html[data-cards="light"] .card-dark:hover { border-color: var(--brand-600); }
   lines drawn for the dark card and vanished on the light one. */
html[data-cards="light"] .card-dark .hcard-name { border-bottom: 1px solid var(--brand-200) !important; }
html[data-cards="light"] .card-dark :is(.hcard-foot, .card-foot) { border-top: 1px solid var(--brand-200) !important; }
html[data-cards="light"] .card-dark .pkg-cities { border-top: 1px dashed var(--brand-200); padding-top: .55rem; }
html[data-cards="light"] .card-dark .pkg-cities i { color: var(--brand-300) !important; }
html[data-cards="light"] .card-dark .hcard-stats > * + * { border-left: 1px solid var(--brand-200); }
html[data-cards="light"] .card-dark .hcard-media, html[data-cards="light"] .card-dark .hcard-pic { border-bottom: 3px solid var(--brand-600); }
/* Holiday packages row - the price footer a shade darker than the card. */
html[data-cards="light"] .card-dark :is(.hcard-foot, .card-foot) { background: color-mix(in srgb, var(--brand-100) 85%, var(--brand-200)) !important; border-top-color: var(--brand-300) !important; }
html[data-cards="light"] .card-dark .pkg-enq { background: #fff; }
/* Holiday packages row - the footer text, drawn white for the dark card,
   in the theme's dark ink on the light one: "Starting from", the price, and
   "On request" when there is no fare. */
html[data-cards="light"] .card-dark .hcard-foot .card-price-k { color: var(--brand-700) !important; }
html[data-cards="light"] .card-dark .hcard-foot .card-price strong { color: var(--brand-900) !important; }
html[data-cards="light"] .card-dark .hcard-foot .card-price.is-none b { color: var(--brand-900) !important; font-size: .95rem; font-weight: 750; }
html[data-cards="light"] .card-dark .hcard-stats .v b { color: var(--ink-900); }

/* Parts only the other cards have, on the light ground. */
html[data-cards="light"] .card-dark :is(.hcard-addr, .hcard-text, .card-text, .visa-docs summary, .visa-docs ul, .price-unit) { color: var(--ink-600); }
html[data-cards="light"] .card-dark :is(.visa-facts b, .visa-docs ul b, .card-meta, .price-now) { color: var(--ink-900); }
html[data-cards="light"] .card-dark .hcard-map, html[data-cards="light"] .card-dark .hcard-map a { color: var(--brand-700); }
html[data-cards="light"] .card-dark .act-stars span:not(.is-on) { color: var(--brand-200); }
html[data-cards="light"] .card-dark .hcard-rate { background: rgba(15, 27, 42, .72); }
html[data-cards="light"] .dcard .dcard-name a { color: var(--brand-700); }
html[data-cards="light"] .dcard .dcard-stats b, html[data-cards="light"] .dcard .dcard-price b, html[data-cards="light"] .dcard .dcard-more-v { color: var(--ink-900); }
html[data-cards="light"] .dcard .dcard-stats small, html[data-cards="light"] .dcard .dcard-stats svg, html[data-cards="light"] .dcard .dcard-more-v svg { color: var(--brand-700); }
html[data-cards="light"] .dcard .dcard-price span, html[data-cards="light"] .dcard .dcard-more-k { color: var(--ink-600); }
html[data-cards="light"] .dcard .dcard-pic { border-bottom-color: var(--brand-600); }
html[data-cards="light"] .dcard .dcard-foot { background: color-mix(in srgb, var(--brand-100) 85%, var(--brand-200)); border-top: 1px solid var(--brand-300); }
html[data-cards="light"] .dcard { border: 1.5px solid var(--brand-400); } html[data-cards="light"] .dcard:hover { border-color: var(--brand-600); }

/* Visas page - the Popular visas stamp box (the home page's Popular
   destinations box), teal heading mark, sitting close under the banner. */
.db-top-ico.is-teal { background: linear-gradient(135deg, #06b6d4, #0e7490); box-shadow: 0 6px 14px rgba(14, 116, 144, .3); }
.pv-section + .section { padding-top: 1rem; }
#visa-list { scroll-margin-top: 90px; }
/* Popular visas now sits after the visa list, before How it works. */
.pv-section + .section { padding-top: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.section:has(+ .pv-section) { padding-bottom: 1rem; }

#activity-list { scroll-margin-top: 90px; }
.section:has(+ .pv-section) { padding-bottom: 1rem; }

/* Holidays page - the abroad version of the India panel: blue promo wash,
   pale-blue panel, globe mark. */
.in-section.is-world .in-promo::before { background: linear-gradient(180deg, color-mix(in srgb, #2563eb 55%, transparent) 0%, color-mix(in srgb, var(--brand-900) 70%, transparent) 45%, color-mix(in srgb, var(--brand-900) 96%, transparent) 100%); }
.in-section.is-world .in-promo-kicker { color: #1d4ed8; }
.in-section.is-world .in-panel { border-color: color-mix(in srgb, #3b82f6 25%, var(--line)); background: linear-gradient(180deg, #eff6ff 0%, var(--surface) 100%); }
.in-section.is-world .in-head-ico { background: linear-gradient(145deg, #dbeafe, #bfdbfe); color: #1d4ed8; box-shadow: 0 6px 14px rgba(29, 78, 216, .18); }
.in-section.is-world .in-foot { background: color-mix(in srgb, #3b82f6 7%, #fff); }
.in-section + .in-section { padding-top: 0; }


/* ==========================================================================
   Visas - How it works: a four-step timeline in a white rounded box.
   Numbered stops on a gradient line, a card per step with its own colour,
   a coloured icon tile and a "We do this" / "Your part" tag.
   ========================================================================== */
.hw-box { padding: 1rem 1.4rem 1.4rem; border: 1px solid var(--brand-200); border-radius: 1.1rem; background: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 8%, transparent); }
.hw-box .db-top { margin-bottom: 1.3rem; }
.hw-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.hw-steps::before { content: ""; position: absolute; top: 1.15rem; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #0ea5e9, #f59e0b, #8b5cf6, #10b981); opacity: .55; }
.hw-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.hw-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: .9rem; border-radius: 50%;
    background: var(--c); color: #fff; font-weight: 800; font-size: 1rem; border: 4px solid #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }
.hw-card { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
    padding: 1.1rem 1.05rem 1.15rem; border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); border-top: 3px solid var(--c);
    border-radius: .9rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff) 0%, #fff 70%);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.hw-step:hover .hw-card { transform: translateY(-4px); box-shadow: 0 14px 26px color-mix(in srgb, var(--c) 18%, transparent); }
.hw-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
.hw-ico svg { width: 1.3rem; height: 1.3rem; }
.hw-tag { position: absolute; top: .9rem; right: .9rem; padding: .18rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, #10b981 14%, #fff); color: #047857; }
.hw-tag.is-you { background: color-mix(in srgb, #f59e0b 16%, #fff); color: #b45309; }
.hw-card h3 { margin: .15rem 0 0; font-size: 1.02rem; color: var(--ink-900); }
.hw-card p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-600); }

@media (max-width: 1000px) {
    .hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-steps::before { display: none; }
}
@media (max-width: 560px) {
    /* Phones: a vertical timeline - the dots down the left on a line. */
    .hw-box { padding: .9rem 1rem 1.1rem; }
    .hw-steps { grid-template-columns: 1fr; gap: .9rem; }
    .hw-steps::before { display: block; top: 1rem; bottom: 1rem; left: 1.1rem; right: auto; width: 3px; height: auto;
        background: linear-gradient(180deg, #0ea5e9, #f59e0b, #8b5cf6, #10b981); }
    .hw-step { flex-direction: row; align-items: flex-start; gap: .75rem; }
    .hw-dot { flex: none; margin: .2rem 0 0; }
}

/* How it works - simpler and more professional: one brand colour, plain
   numbered steps on a thin line, light icons, no tints, tags or rainbow. */
.hw-steps::before { background: var(--brand-200) !important; opacity: 1; height: 2px; }
.hw-step { --c: var(--brand-700) !important; }
.hw-dot { width: 2.2rem; height: 2.2rem; background: #fff; color: var(--brand-800); font-size: .95rem;
    border: 2px solid var(--brand-600); box-shadow: 0 0 0 4px #fff; }
.hw-card { border: 1px solid var(--brand-200); border-top: 1px solid var(--brand-200); border-radius: .8rem; background: #fff;
    align-items: center; text-align: center; padding: 1.1rem 1rem 1.2rem; }
.hw-step:hover .hw-card { transform: none; border-color: var(--brand-400); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-900) 8%, transparent); }
.hw-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); box-shadow: none; }
.hw-ico svg { width: 1.2rem; height: 1.2rem; }
.hw-card h3 { font-size: 1rem; font-weight: 700; }
.hw-card p { font-size: .86rem; }
@media (max-width: 560px) {
    .hw-steps::before { width: 2px; }
    .hw-card { align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Site-wide Enquiry popup (partials/enquiry-modal.php) and the cards'
   Enquiry button, which replaced the green WhatsApp button.
   ========================================================================== */
.card-enq { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; cursor: pointer; }
.card-enq svg { width: .95rem; height: .95rem; }
.dcard .card-enq { height: 2.4rem; padding: 0 .8rem; background: #fff; color: var(--brand-800); border: 1px solid var(--brand-300); border-radius: var(--r-sm); font-weight: 700; }
.dcard .card-enq:hover { background: var(--brand-50); border-color: var(--brand-600); }

html.eqm-open { overflow: hidden; }
.eqm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; }
.eqm[hidden] { display: none; }
.eqm-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.eqm-box { position: relative; width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem 1.5rem 1.3rem;
    border-radius: 1.1rem; background: #fff; box-shadow: 0 30px 70px rgba(15, 23, 42, .35); animation: eqm-in .22s var(--ease-out); }
@keyframes eqm-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.eqm-x { position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-800); cursor: pointer; }
.eqm-x:hover { background: var(--brand-100); }
.eqm-x svg { width: 1rem; height: 1rem; }
.eqm-head { padding-right: 2.2rem; margin-bottom: 1rem; }
.eqm-kick { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); }
.eqm-kick svg { width: .95rem; height: .95rem; }
.eqm-head h2 { margin: .3rem 0 .25rem; font-size: 1.3rem; line-height: 1.25; color: var(--ink-900); }
.eqm-head p { margin: 0; font-size: .85rem; color: var(--ink-600); }
.eqm-form { display: grid; gap: .75rem; }
.eqm-step { display: grid; gap: .75rem; }
.eqm-step[hidden] { display: none; }
.eqm-row { display: grid; gap: .6rem; }
.eqm-row-name { grid-template-columns: 5.5rem 1fr; }
.eqm-row-mob { grid-template-columns: 5.5rem 1fr; }
.eqm-row-pax { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.eqm-f { display: grid; gap: .3rem; min-width: 0; }
.eqm-f > span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
.eqm-f em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-500); }
.eqm-f :is(input, select, textarea) { width: 100%; min-width: 0; padding: .65rem .75rem; border: 1px solid var(--brand-200); border-radius: .6rem;
    background: #fff; font: inherit; font-size: .95rem; color: var(--ink-900); }
.eqm-f :is(input, select, textarea):focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent); }
.eqm-f textarea { resize: vertical; }
.eqm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eqm-go { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem 1rem; font-weight: 700; }
.eqm-go svg { width: 1.1rem; height: 1.1rem; }
.eqm-go.is-busy { opacity: .7; pointer-events: none; }
.eqm-small { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .75rem; color: var(--ink-500); justify-content: center; }
.eqm-small svg { width: .9rem; height: .9rem; color: #16a34a; }
.eqm-otp-lede { margin: 0; font-size: .9rem; color: var(--ink-700); }
.eqm-otp { font-size: 1.4rem !important; letter-spacing: .5em; text-align: center; font-weight: 700; }
.eqm-otp-links { display: flex; justify-content: space-between; gap: .6rem; }
.eqm-link { display: inline-flex; align-items: center; gap: .2rem; border: 0; background: none; padding: .2rem 0; color: var(--brand-700); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.eqm-link svg { width: .9rem; height: .9rem; }
.eqm-link:hover { text-decoration: underline; }
.eqm-msg { margin: 0; padding: .6rem .8rem; border-radius: .6rem; background: #fef2f2; color: #b91c1c; font-size: .85rem; }
.eqm-msg.is-good { background: #f0fdf4; color: #15803d; }
.eqm-done { justify-items: center; text-align: center; padding: .6rem 0 .3rem; }
.eqm-done-ico { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.eqm-done-ico svg { width: 2rem; height: 2rem; }
.eqm-done h3 { margin: 0; font-size: 1.15rem; color: var(--ink-900); }
.eqm-done p { margin: 0; color: var(--ink-600); font-size: .9rem; }
@media (max-width: 560px) {
    .eqm { padding: 0; place-items: end center; }
    .eqm-box { width: 100%; max-height: 92vh; border-radius: 1.1rem 1.1rem 0 0; padding: 1.2rem 1rem 1.1rem; }
    .eqm-row-pax { grid-template-columns: 1fr 1fr 1fr; }
    .eqm-row-pax .eqm-f:first-child { grid-column: 1 / -1; }
}


/* ==========================================================================
   Enquiry popup, v2 - a coloured header band, icons in the fields, a flag
   country-code picker and steppers for the travellers.
   ========================================================================== */
.eqm-box { padding: 0; overflow: hidden auto; }
.eqm-head { display: flex; align-items: flex-start; gap: .85rem; margin: 0; padding: 1.25rem 3.2rem 1.15rem 1.4rem;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); color: #fff; position: relative; }
.eqm-head::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%; border: 16px solid rgba(255, 255, 255, .07); }
.eqm-head-ico { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: .8rem; background: rgba(255, 255, 255, .14); color: #fff; }
.eqm-head-ico svg { width: 1.35rem; height: 1.35rem; }
.eqm-kick { color: #fbbf24; }
.eqm-head h2 { color: #fff; margin: .15rem 0 .2rem; }
.eqm-head p { color: rgba(255, 255, 255, .82); }
.eqm-x { z-index: 2; background: rgba(255, 255, 255, .15); color: #fff; }
.eqm-x:hover { background: rgba(255, 255, 255, .28); }
.eqm-form { padding: 1.2rem 1.4rem 1.3rem; }

.eqm-f { position: relative; }
.eqm-f.has-ico :is(input, textarea) { padding-left: 2.35rem; }
.eqm-fi { position: absolute; left: .75rem; bottom: .72rem; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; color: var(--brand-500, var(--brand-600)); pointer-events: none; font-style: normal; }
.eqm-fi svg { width: 1.05rem; height: 1.05rem; }
.eqm-f :is(input, select, textarea) { background: color-mix(in srgb, var(--brand-50) 45%, #fff); }
.eqm-f :is(input, select, textarea):focus { background: #fff; }

.eqm-row-name, .eqm-row-mob { grid-template-columns: 6.6rem 1fr; }
.eqm-cc { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .6rem .6rem; border: 1px solid var(--brand-200); border-radius: .6rem;
    background: color-mix(in srgb, var(--brand-50) 45%, #fff); font: inherit; color: var(--ink-900); cursor: pointer; }
.eqm-cc:focus-visible, .eqm-cc[aria-expanded="true"] { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent); background: #fff; }
.eqm-cc img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.eqm-cc b { font-size: .92rem; }
.eqm-cc svg { width: .85rem; height: .85rem; margin-left: auto; color: var(--ink-500); }
.eqm-cc-pop { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 5; width: 17rem; max-width: calc(100vw - 3rem); padding: .5rem;
    border: 1px solid var(--brand-200); border-radius: .8rem; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.eqm-cc-search { width: 100%; padding: .5rem .65rem; margin-bottom: .4rem; border: 1px solid var(--brand-200); border-radius: .5rem; font: inherit; font-size: .88rem; }
.eqm-cc-search:focus { outline: none; border-color: var(--brand-600); }
.eqm-cc-pop ul { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.eqm-cc-pop li { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .45rem; font-size: .88rem; cursor: pointer; }
.eqm-cc-pop li:hover { background: var(--brand-50); }
.eqm-cc-pop li img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.eqm-cc-pop li span { flex: 1; color: var(--ink-800); }
.eqm-cc-pop li b { color: var(--ink-500); font-weight: 600; }
.eqm-cc-pop li[hidden] { display: none; }

.eqm-pax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.eqm-pax-i { display: grid; gap: .45rem; justify-items: center; padding: .65rem .5rem; border: 1px solid var(--brand-200); border-radius: .7rem;
    background: color-mix(in srgb, var(--brand-50) 45%, #fff); text-align: center; }
.eqm-pax-l b { display: block; font-size: .88rem; color: var(--ink-900); }
.eqm-pax-l small { font-size: .7rem; color: var(--ink-500); }
.eqm-step-n { display: inline-flex; align-items: center; gap: .3rem; }
.eqm-step-n button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--brand-300); border-radius: 50%;
    background: #fff; color: var(--brand-800); font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.eqm-step-n button:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.eqm-step-n input { width: 2rem; padding: 0; border: 0; background: none; text-align: center; font: inherit; font-weight: 800; font-size: 1rem; color: var(--ink-900); -moz-appearance: textfield; }
.eqm-step-n input::-webkit-inner-spin-button, .eqm-step-n input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.eqm-go { padding: .9rem 1rem; border: 0; border-radius: .75rem; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff;
    font-size: 1rem; box-shadow: 0 8px 18px rgba(22, 163, 74, .3); }
.eqm-go:hover { filter: brightness(1.06); color: #fff; }
@media (max-width: 560px) {
    .eqm-head { padding: 1.1rem 3rem 1rem 1rem; }
    .eqm-form { padding: 1rem 1rem 1.1rem; }
    .eqm-row-name, .eqm-row-mob { grid-template-columns: 6.2rem 1fr; }
    .eqm-pax-i { padding: .55rem .3rem; }
}

/* ==========================================================================
   Enquiry popup - zaereen.com's enquiry form (holidays/karbala-tours) in
   Oxford's colours: a patterned navy header ruled in gold, labelled fields
   two across, a flag country-code picker inside the mobile field, round
   steppers for the travellers, six code boxes, and a foot with the note on
   the left and the gold button on the right.
   ========================================================================== */
html.eqm-open { overflow: hidden; }
.eqz { --eqz-gold: #c19a3f; --eqz-gold-l: #e3c886; --eqz-gold-d: #9a7424;
    position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.eqz[hidden] { display: none; }
.eqz-scrim { position: absolute; inset: 0; background: rgba(10, 22, 40, .62); backdrop-filter: blur(3px); }
.eqz-panel { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #fbfaf6;
    border: 1px solid var(--eqz-gold); border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(4, 12, 28, .8); animation: eqz-in .22s var(--ease-out); }
@keyframes eqz-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.eqz-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(227, 200, 134, .4);
    background: rgba(227, 200, 134, .12); color: var(--eqz-gold-l); font-size: 21px; line-height: 1; cursor: pointer; }
.eqz-close:hover { background: var(--eqz-gold); color: var(--brand-900); border-color: var(--eqz-gold); }
.eqz-head { padding: 16px 52px 15px; text-align: center; border-bottom: 1px solid var(--eqz-gold);
    background-color: var(--brand-900); background-image: var(--ox-pattern-light-strong, none); background-size: 26px 26px; }
.eqz-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--eqz-gold-l); }
.eqz-head h2 { margin: 4px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 3vw, 27px); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #fdf8ec; line-height: 1.2; }
.eqz-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 11px; font-size: 13px; color: rgba(240, 233, 215, .78); }
.eqz-facts span { display: inline-flex; align-items: center; gap: 6px; }
.eqz-facts svg { width: 14px; height: 14px; color: var(--eqz-gold-l); }

.eqz-body { padding: 16px 20px 18px; }
.eqz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eqz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eqz-grid[hidden] { display: none; }
.eqz-c1 { grid-column: span 1; } .eqz-c2 { grid-column: span 2; } .eqz-c3 { grid-column: span 3; } .eqz-c4 { grid-column: span 4; }
.eqz-field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.eqz-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(--eqz-gold-d); }
.eqz-field > label svg { flex: none; width: 13px; height: 13px; opacity: .9; }
.eqz-field > label small { margin-left: 3px; letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--ink-500); }
.eqz-req { color: #dc2626; }
.eqz-field input, .eqz-field select, .eqz-field textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #ddd6c4; border-radius: 9px; background: #fff;
    color: var(--ink-900); font: inherit; font-size: 14.5px; }
.eqz-field select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, #8a9186 50%), linear-gradient(135deg, #8a9186 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.eqz-field textarea { resize: vertical; }
.eqz-field input:hover, .eqz-field select:hover, .eqz-field textarea:hover { border-color: var(--eqz-gold-l); }
.eqz-field input:focus, .eqz-field select:focus, .eqz-field textarea:focus { outline: none; border-color: var(--eqz-gold); box-shadow: 0 0 0 3px rgba(193, 154, 63, .18); }

/* Mobile field: flag + code button inside the same box. */
.eqz-tel { position: relative; display: flex; border: 1px solid #ddd6c4; border-radius: 9px; background: #fff; }
.eqz-tel:focus-within { border-color: var(--eqz-gold); box-shadow: 0 0 0 3px rgba(193, 154, 63, .18); }
.eqz-field .eqz-tel > input[type="tel"] { border: 0; box-shadow: none; border-radius: 0 9px 9px 0; padding-left: 10px; }
.eqz-cc { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 9px 0 11px; border: 0; border-right: 1px solid #ece5d3; border-radius: 9px 0 0 9px;
    background: #faf6ea; color: var(--ink-900); font: inherit; font-size: 14px; cursor: pointer; }
.eqz-cc:hover { background: #f4ecd6; }
.eqz-cc img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.eqz-cc svg { width: 12px; height: 12px; color: var(--ink-500); }
.eqz-cc-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: 17.5rem; max-width: calc(100vw - 3rem); padding: 8px;
    border: 1px solid #ddd6c4; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .2); }
.eqz-cc-pop[hidden] { display: none; }
.eqz-field .eqz-cc-search { width: 100%; margin-bottom: 6px; padding: 8px 10px; font-size: 13.5px; }
.eqz-cc-pop ul { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.eqz-cc-pop li { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.eqz-cc-pop li:hover { background: #faf6ea; }
.eqz-cc-pop li[hidden] { display: none; }
.eqz-cc-pop li img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.eqz-cc-pop li span { flex: 1; color: var(--ink-800); }
.eqz-cc-pop li b { color: var(--ink-500); font-weight: 600; }

/* Travellers: round steppers, 01 / 00. */
.eqz-pax > label { justify-content: center; }
.eqz-qty { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; border: 1px solid #ddd6c4; border-radius: 9px; background: #fff; }
.eqz-qty-btn { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--eqz-gold-l); border-radius: 50%;
    background: #faf6ea; color: var(--eqz-gold-d); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.eqz-qty-btn:hover { background: var(--eqz-gold); border-color: var(--eqz-gold); color: #fff; }
.eqz-field .eqz-qty-input { flex: 0 0 auto; width: 2.1em; height: 30px; padding: 0; border: 0; background: none; text-align: center;
    font-size: 17px; font-weight: 700; color: #000; box-shadow: none; }
.eqz-date input { padding: 9px 10px; }

/* The code step: six boxes. */
.eqz-otp { display: grid; gap: 12px; justify-items: center; padding: 6px 0 2px; }
.eqz-otp[hidden] { display: none; }
.eqz-otp-head { display: flex; align-items: center; gap: 10px; }
.eqz-otp-head > svg { width: 30px; height: 30px; color: #16a34a; }
.eqz-otp-head b { display: block; font-size: 15px; color: var(--ink-900); }
.eqz-otp-head span { font-size: 13px; color: var(--ink-600); }
.eqz-otp-boxes { display: flex; gap: 8px; }
.eqz-otp-box { width: 46px; height: 54px; padding: 0; border: 1px solid #ddd6c4; border-radius: 9px; background: #fff; text-align: center;
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--brand-900); caret-color: var(--eqz-gold-d); }
.eqz-otp-box:focus { outline: none; border-color: var(--eqz-gold); box-shadow: 0 0 0 3px rgba(193, 154, 63, .18); }
.eqz-otp-links { display: flex; gap: 18px; }
.eqz-link { border: 0; background: none; padding: 2px 0; color: var(--brand-700); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.eqz-link:hover { text-decoration: underline; }

.eqz-done { display: grid; justify-items: center; gap: 8px; padding: 18px 0 6px; text-align: center; }
.eqz-done[hidden] { display: none; }
.eqz-done-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.eqz-done-ico svg { width: 32px; height: 32px; }
.eqz-done h3 { margin: 0; font-size: 18px; color: var(--ink-900); }
.eqz-done p { margin: 0; font-size: 14px; color: var(--ink-600); }

.eqz-msg { margin: 12px 0 0; padding: 9px 12px; border-radius: 9px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; }
.eqz-msg.is-good { background: #f0fdf4; color: #15803d; }
.eqz-msg[hidden] { display: none; }

.eqz-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ece5d3; }
.eqz-foot[hidden] { display: none; }
.eqz-note { margin: 0; max-width: 34ch; font-size: 12.5px; color: var(--ink-500); }
.eqz-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, #e3c886 0%, #c19a3f 45%, #a07c2a 100%); color: #2a1f00; font: inherit; font-size: 15px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 250, 232, .5), 0 6px 16px rgba(160, 124, 42, .3); }
.eqz-btn:hover { background: linear-gradient(135deg, #d4b158 0%, #b08d2c 40%, #8f6f1c 100%); color: #fffaf0; }
.eqz-btn svg { width: 18px; height: 18px; }
.eqz-btn.is-busy { opacity: .7; pointer-events: none; }

@media (max-width: 600px) {
    .eqz { padding: 0; align-items: flex-end; }
    .eqz-panel { max-height: 92vh; border-radius: 14px 14px 0 0; }
    .eqz-head { padding: 14px 48px 13px; }
    .eqz-body { padding: 14px 14px 16px; }
    .eqz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 9px; }
    .eqz-c1 { grid-column: span 1; } .eqz-c3 { grid-column: span 2; }
    .eqz-c2, .eqz-c4, .eqz-date { grid-column: 1 / -1; }
    .eqz-qty { gap: 3px; padding: 3px; }
    .eqz-qty-btn { width: 26px; height: 26px; font-size: 16px; }
    .eqz-field .eqz-qty-input { width: 1.8em; font-size: 15px; }
    .eqz-otp-box { width: 40px; height: 50px; font-size: 22px; }
    .eqz-foot { flex-direction: column; align-items: stretch; }
    .eqz-btn { justify-content: center; }
}

/* Enquiry popup - compact, aligned, in the site's own theme colours (the
   brand blues instead of zaereen's gold and cream). Every control is the
   same 40px height, so the travellers and the date line up in one row. */
.eqz { --eqz-gold: var(--brand-600); --eqz-gold-l: var(--brand-300); --eqz-gold-d: var(--brand-700); --eqz-h: 40px; }
.eqz-panel { width: min(560px, 100%); background: #fff; border: 1px solid var(--brand-300); border-radius: 14px; }
.eqz-close { top: 10px; right: 12px; width: 30px; height: 30px; font-size: 19px; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; }
.eqz-close:hover { background: #fff; color: var(--brand-900); border-color: #fff; }
.eqz-head { padding: 12px 46px 11px; border-bottom: 3px solid var(--brand-600);
    background-color: var(--brand-900); }
.eqz-eyebrow { font-size: 10.5px; color: #fbbf24; }
.eqz-head h2 { font-family: inherit; font-size: 19px; font-weight: 800; letter-spacing: .02em; margin-top: 2px; color: #fff; }
.eqz-facts { margin-top: 7px; gap: 4px 16px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.eqz-facts svg { width: 13px; height: 13px; color: #fbbf24; }

.eqz-body { padding: 14px 16px 14px; }
.eqz-grid { gap: 10px; align-items: end; }
.eqz-field > label { margin-bottom: 4px; font-size: 10.5px; letter-spacing: .08em; color: var(--brand-800); }
.eqz-field > label svg { color: var(--brand-600); }
.eqz-field input, .eqz-field select, .eqz-field textarea { height: var(--eqz-h); padding: 0 11px; border-color: var(--brand-200); border-radius: 8px; font-size: 14px; background-color: #fff; }
.eqz-field textarea { height: auto; min-height: 52px; padding: 8px 11px; }
.eqz-field input:hover, .eqz-field select:hover, .eqz-field textarea:hover { border-color: var(--brand-300); }
.eqz-field input:focus, .eqz-field select:focus, .eqz-field textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 16%, transparent); }

.eqz-tel { height: var(--eqz-h); border-color: var(--brand-200); border-radius: 8px; }
.eqz-tel:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 16%, transparent); }
.eqz-field .eqz-tel > input[type="tel"] { height: 100%; }
.eqz-cc { background: var(--brand-50); border-right-color: var(--brand-200); border-radius: 8px 0 0 8px; padding: 0 8px 0 10px; }
.eqz-cc:hover { background: var(--brand-100); }
.eqz-cc-pop { border-color: var(--brand-200); }
.eqz-cc-pop li:hover { background: var(--brand-50); }

/* Travellers: the same 40px box as every other field, label on one line. */
.eqz-pax > label { justify-content: flex-start; }
.eqz-qty { height: var(--eqz-h); padding: 0 5px; gap: 2px; justify-content: space-between; border-color: var(--brand-200); border-radius: 8px; }
.eqz-qty-btn { width: 26px; height: 26px; font-size: 16px; border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-800); }
.eqz-qty-btn:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.eqz-field .eqz-qty-input { width: 1.9em; height: 26px; font-size: 15px; color: var(--ink-900); }
.eqz-date input { padding: 0 8px; }

.eqz-otp-box { width: 42px; height: 48px; font-family: inherit; font-size: 22px; border-color: var(--brand-200); color: var(--brand-900); }
.eqz-otp-box:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 16%, transparent); }

.eqz-foot { margin-top: 12px; padding-top: 11px; border-top-color: var(--brand-100); }
.eqz-note { font-size: 12px; }
.eqz-btn { padding: 0 20px; height: 42px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-800) 28%, transparent); font-size: 14.5px; }
.eqz-btn:hover { background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); color: #fff; }
.eqz-msg { margin-top: 10px; padding: 8px 11px; font-size: 13px; }

@media (max-width: 600px) {
    .eqz-panel { width: 100%; }
    .eqz-head { padding: 11px 44px 10px; }
    .eqz-head h2 { font-size: 17px; }
    .eqz-facts { display: none; }
    .eqz-body { padding: 12px 12px 14px; }
    .eqz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 8px; }
    .eqz-qty { padding: 0 3px; }
    .eqz-qty-btn { width: 24px; height: 24px; font-size: 15px; }
    .eqz-field .eqz-qty-input { width: 1.6em; font-size: 14px; }
}

/* Traveller Stories on EVERY page (destination, package, home) in the light
   card colours - the home rules, for the site-wide "light" colourway. Was
   white text on the light card on the destination pages. Home -: white
   into a pale brand tint, a 1.5px brand border, dark text, a darker price-
   style footer, and brand-coloured accents instead of amber on navy. */
html[data-cards="light"] .st-card {
    --st-acc: var(--brand-700);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--brand-100) 70%, #fff) 100%);
    border: 1.5px solid var(--brand-400); color: var(--ink-700);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-900) 10%, transparent);
}
html[data-cards="light"] .st-card:hover { border-color: var(--brand-600); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-900) 16%, transparent); }
html[data-cards="light"] .st-pic { border-bottom: 3px solid var(--brand-600); background: var(--brand-100); }
html[data-cards="light"] .st-initials { color: var(--brand-700); }
html[data-cards="light"] .st-body h3 { color: var(--brand-800); border-bottom: 1px solid var(--brand-200); }
html[data-cards="light"] .st-stats > div + div { border-left: 1px solid var(--brand-200); }
html[data-cards="light"] .st-stats b { color: var(--ink-900); }
html[data-cards="light"] .st-stats small { color: var(--brand-700); }
html[data-cards="light"] .st-stats svg, html[data-cards="light"] .st-stats > div:nth-child(n+2) .v svg { color: var(--brand-600); }
html[data-cards="light"] .st-stats .v svg:first-child { color: #f59e0b; }
html[data-cards="light"] .st-stats > div:nth-child(n+2) .v svg:first-child { color: var(--brand-600); }
html[data-cards="light"] .st-body blockquote { color: var(--ink-700); }
html[data-cards="light"] .st-body blockquote svg { color: var(--brand-400); }
html[data-cards="light"] .st-foot { background: color-mix(in srgb, var(--brand-100) 85%, var(--brand-200)); border-top: 1px solid var(--brand-300); }
html[data-cards="light"] .st-foot small { color: var(--brand-700); }
html[data-cards="light"] .st-stars .st-off { color: var(--brand-200); }
html[data-cards="light"] .st-foot .btn { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-800) 30%, transparent); }

/* Card action buttons - Enquiry and View / Apply, on every card, one size:
   36px tall, 13px bold text, the same padding and corners, icon and text
   centred. They were 38px on the holidays cards and 30px on the others,
   with different type sizes side by side. */
:is(.dcard-acts, .pkg-acts) { display: inline-flex; align-items: center; gap: 8px; flex: none; }
:is(.dcard-acts, .pkg-acts) > :is(.card-enq, .pkg-enq, .dcard-go, .hcard-go, .btn) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; min-height: 36px; padding: 0 14px; margin: 0;
    border-radius: 9px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; box-sizing: border-box;
}
:is(.dcard-acts, .pkg-acts) > :is(.card-enq, .pkg-enq) { border-width: 1.5px; }
:is(.dcard-acts, .pkg-acts) > :is(.card-enq, .pkg-enq) svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 380px) {
    :is(.dcard-acts, .pkg-acts) > :is(.card-enq, .pkg-enq, .dcard-go, .hcard-go, .btn) { height: 34px; min-height: 34px; padding: 0 11px; font-size: 12.5px; }
}
/* ...winning over the card-specific button rules too. */
html body .card-dark :is(.dcard-acts, .pkg-acts) > :is(.card-enq, .pkg-enq, .hcard-go, .btn),
html body .dcard :is(.dcard-acts, .pkg-acts) > :is(.card-enq, .dcard-go, .btn) {
    height: 36px; min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; border-radius: 9px; line-height: 1;
}

/* Visa card foot - two tidy rows instead of three squeezed items: the
   Estimated visa box across the full width on one line (label left, date
   right), then Enquiry and Apply side by side at equal widths. The card is
   only ~285px wide, so the box was being crushed to 75px and wrapped to 55px
   tall beside two 36px buttons. */
html body .card-dark .hcard-foot.visa-foot { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
html body .card-dark .visa-foot .visa-est {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 36px; padding: 0 12px; border-radius: 9px; box-sizing: border-box; width: 100%;
}
html body .card-dark .visa-foot .visa-est span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
html body .card-dark .visa-foot .visa-est b { font-size: 12.5px; font-weight: 700; white-space: nowrap; text-align: right; }
html body .card-dark .visa-foot .pkg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
html body .card-dark .visa-foot .pkg-acts > * { width: 100%; }

/* Visa card foot - back to ONE row: the Estimated visa box (two short lines,
   label over the date) taking the free space, then Enquiry and Apply, all
   36px tall on one line. */
html body .card-dark .hcard-foot.visa-foot { display: flex; align-items: center; gap: 6px; }
html body .card-dark .visa-foot .visa-est {
    flex: 1 1 auto; min-width: 0; width: auto; height: 36px; min-height: 36px; padding: 0 8px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
}
html body .card-dark .visa-foot .visa-est span { font-size: 9px; letter-spacing: .05em; line-height: 1.1; }
html body .card-dark .visa-foot .visa-est b { font-size: 11.5px; line-height: 1.15; text-align: left; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html body .card-dark .visa-foot .pkg-acts { display: inline-flex; width: auto; flex: none; gap: 6px; }
html body .card-dark .visa-foot .pkg-acts > * { width: auto; }
html body .card-dark .visa-foot .pkg-acts > .card-enq { padding: 0 10px; gap: 5px; }
html body .card-dark .visa-foot .pkg-acts > .hcard-go { padding: 0 12px; }
/* Visa card foot - smaller wording: the Estimated visa label and date, and
   the Enquiry / Apply text (the buttons keep their 36px height). */
html body .card-dark .visa-foot .visa-est span { font-size: 8.5px; }
html body .card-dark .visa-foot .visa-est b { font-size: 11px; }
html body .card-dark .visa-foot .pkg-acts > :is(.card-enq, .hcard-go) { font-size: 12px; }
html body .card-dark .visa-foot .pkg-acts > .card-enq svg { width: 13px; height: 13px; }
/* Visa card foot - the Estimated visa label and date centred in their box. */
html body .card-dark .visa-foot .visa-est { align-items: center; text-align: center; }
html body .card-dark .visa-foot .visa-est b { text-align: center; }

/* PHONES AND TABLETS: ALL SIX SECTION TABS IN VIEW.
   At phone width the row was wider than the screen, so Activity sat half
   off the right edge. The tabs now split the row equally instead of scrolling,
   with the icon centred over its name, and a little less side padding so the
   longest names ("Holidays", "Activity") still fit at 360px. */
@media (max-width: 1024px) {
    .m-tabs { gap: 2px; padding-inline: 4px; overflow-x: visible; }
    .m-tab {
        flex: 1 1 0; min-width: 0;
        justify-items: center; align-content: start; text-align: center;
        padding: .35rem .1rem;
    }
    .m-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 400px) {
    .m-tab { font-size: .68rem; letter-spacing: -.01em; }
    .m-tab-ico svg { width: 1.25rem; height: 1.25rem; }
}

/* PHONES AND TABLETS: THE BOTTOM BAR IN COLOUR.
   Filled marks, one colour each, the way the Travel_Agency bar draws them:
   orange wallet, green suitcase, cyan chat, orange WhatsApp, green phone.
   By class rather than :nth-child, because WhatsApp and Call are optional and
   a missing one would shift every colour after it. */
@media (max-width: 1024px) {
    .m-bottom a { gap: .25rem; color: #e2e8f0; font-weight: 500; }
    .m-bottom svg { width: 1.4rem; height: 1.4rem; }
    .m-bottom a.is-wallet  svg { color: #ff6b35; }
    .m-bottom a.is-booking svg { color: #4caf50; }
    .m-bottom a.is-enquiry svg { color: #00bcd4; }
    .m-bottom a.is-wa      svg { color: #ff9800; }
    .m-bottom a.is-call    svg { color: #25d366; }
}

/* SIGN-IN: THE MOBILE FIELD WITH A FLAG COUNTRY CODE.
   The enquiry form's picker (.eqz-tel / .eqz-cc), in the sign-in panel's
   colours instead of the enquiry form's gold, and at the panel's field height. */
.signin-tel { height: 2.9rem; border-color: var(--brand-200); }
.signin-tel:focus-within { border-color: var(--brand-600, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.signin-tel .eqz-cc { background: var(--brand-50); border-right-color: var(--brand-200); }
.signin-tel .eqz-cc:hover { background: var(--brand-100, #e0e7ff); }
.signin-form .signin-tel > .input[type="tel"] {
    flex: 1; min-width: 0; height: auto; border: 0; box-shadow: none;
    border-radius: 0 9px 9px 0; padding-left: 10px;
}
.signin-tel .eqz-cc-pop { border-color: var(--brand-200); }
.signin-form .signin-tel .eqz-cc-search { width: 100%; height: 2.4rem; margin-bottom: 6px; font-size: 13.5px; }
.signin-tel .eqz-cc-pop li:hover { background: var(--brand-50); }

/* PHONES AND TABLETS: BOTH BARS ARE WALLS, as on zaereen.com.
   The header (logo row + section tabs) and the fixed bottom bar share one
   ground - the header's colour with the travel pattern the hero wears - and
   each carries a run of the hero's stepped merlons (--ox-crest) on the edge
   that faces the page: pointing down from the tabs, up from the bottom bar,
   so the page reads as the space between two walls.

   The merlons are each bar's own ::after / ::before, hanging 14px outside it,
   painted in the bar's colour and cut to shape by the mask. Nothing is drawn
   along those edges - no border, no shadow - because the merlons stand on
   that line and a rule there would show through every gap between them. */
@media (max-width: 1024px) {
    .site-header,
    .site-header.is-stuck,
    .m-bottom {
        --ox-wall: color-mix(in srgb, var(--brand-900) 82%, var(--brand-700));
        background-color: var(--ox-wall);
        background-image: var(--ox-pattern-light);
        background-size: 26px 26px;
        background-repeat: repeat;
    }
    .site-header,
    .site-header.is-stuck { border-bottom: 0; box-shadow: none; }

    .m-tabs { position: relative; padding-bottom: .35rem; }
    .m-tabs::after,
    .m-bottom::before {
        content: "";
        position: absolute;
        left: 0; right: 0;
        height: 14px;
        pointer-events: none;
        background: var(--ox-wall, var(--brand-900));
        -webkit-mask: var(--ox-crest) 0 100% / auto 14px repeat-x;
                mask: var(--ox-crest) 0 100% / auto 14px repeat-x;
    }
    /* Down from the tabs: the same tile turned over. */
    .m-tabs::after { top: 100%; margin-top: -1px; transform: scaleY(-1); }
    /* Up from the bottom bar. */
    .m-bottom { box-shadow: none; }
    .m-bottom::before { bottom: 100%; margin-bottom: -1px; }

    /* Room for the merlons, so the last of the page is not under them. */
    body { padding-bottom: calc(4.4rem + 14px + env(safe-area-inset-bottom)); }
}

/* PHONES AND TABLETS: NO FOOTER.
   The fixed bottom bar already carries what a phone visitor needs from it
   (account, bookings, enquiries, WhatsApp, call), and the drawer menu holds
   the pages; the long link columns were a screenful of scrolling under every
   page. Hidden, not removed: crawlers still read the links, and the desk
   keeps the footer as it was. */
@media (max-width: 1024px) {
    .site-footer { display: none; }
}

/* PHONES AND TABLETS: FOUR PRODUCT CARDS ON THE HOME PAGE.
   Flights, Hotels, Holidays and Visas - Activities stays on the desk. Two
   columns on a phone, all four in a row on a wider tablet, so there is never
   a card left on its own. */
@media (max-width: 1024px) {
    .svc-card.svc-activities { display: none; }
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* PHONES AND TABLETS: CARDS FIT THE SCREEN.
   The package and review rows showed a card at 82-86% of the row, with a
   sliver of the next one at the edge (or, for a single review, an empty
   strip beside it). A phone now shows exactly one card across the row and a
   tablet exactly two; a swipe still snaps to the next. */
@media (max-width: 640px) {
    .pk-row,
    .st-rail { grid-auto-columns: 100%; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .pk-row { grid-auto-columns: calc((100% - 1.1rem) / 2); }
    .st-rail { grid-auto-columns: calc((100% - 20px) / 2); }
}

/* PHONES AND TABLETS: NO TRUST STRIP.
   "Instant confirmation · No hidden charges · …" under the search bar on the
   home, Flights and Hotels pages. The whole band goes, not just the line, so
   no empty stripe is left between the bar and the content. */
@media (max-width: 1024px) {
    section:has(> .container > .trust) { display: none; }
}
/* The section after the hero carries the room for the search panel that hangs
   below the band; with the trust strip hidden, the section after it does. */
@media (max-width: 1024px) {
    .hero:has(.ag-hero) + section:has(> .container > .trust) + * {
        padding-top: calc(var(--ag-hero-drop, 104px) + 40px);
    }
    /* The home page keeps its own, tighter 28px. */
    main:has(.db-section) .hero:has(.ag-hero) + section:has(> .container > .trust) + * {
        padding-top: calc(var(--ag-hero-drop, 104px) + 28px);
    }
}

/* PHONES AND TABLETS: THE COLOUR PICKER IN THE HEADER, as on the desk.
   The palette button sits just left of the Login pill (the 760px rule above
   hid everything there but Login). Still hidden until oxford.js reveals it,
   so it never shows where it cannot work. White on the dark bar, and the
   panel opens down and inward, held inside the screen and scrolling if a
   short phone cannot fit all three rows. */
@media (max-width: 1024px) {
    .nav-end { display: flex; align-items: center; gap: .4rem; }
    .nav-end > .theme-pick:not([hidden]) { display: inline-flex !important; }
    .nav-end > .theme-pick .btn-icon {
        width: 2.4rem; height: 2.4rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }
    .nav-end > .theme-pick .btn-icon:hover { background: rgba(255, 255, 255, .2); color: #fff; }
    .nav-end > .theme-pick .btn-icon svg { width: 1.2rem; height: 1.2rem; }
    .theme-pop {
        z-index: 120;
        width: min(15.5rem, calc(100vw - 24px));
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        color: var(--ink-900);
    }
}

/* PHONES AND TABLETS: THE DETAIL PAGES FIT THE SCREEN.
   Hotel, activity, package and visa pages stack .hotel-main over .hotel-aside
   in a one-column grid. That column was `1fr`, which may not shrink below its
   widest content, so a row that does not wrap - the section tabs - stretched
   both to ~540px and the whole page slid sideways on a phone. minmax(0, 1fr)
   and min-width:0 let the column be the screen's width; the tab row scrolls
   inside it instead. */
@media (max-width: 1024px) {
    .hotel-split { grid-template-columns: minmax(0, 1fr); }
    .hotel-main, .hotel-aside { min-width: 0; max-width: 100%; }
    .hotel-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .hotel-tabs::-webkit-scrollbar { display: none; }
}

/* PHONES AND TABLETS: THE "MORE TO DO" ROW SITS CLOSE.
   The related-items band at the foot of a detail page (Things to do in …)
   had 29px of its own padding above the box, on top of the 16px the section
   before it already leaves, and 29px under it before the bottom bar's room.
   One 16px gap above, 12px below. */
@media (max-width: 1024px) {
    .section.pv-section { padding-top: 0; padding-bottom: 12px; }
}

/* ==========================================================================
   PHONES AND TABLETS: THE FILTERS BEHIND A FLOATING BUTTON
   Holidays, activities and visas listings (components/filters.php). The
   rail was a long panel of country, style and budget above the first card;
   here it is a sheet that rises from the bottom when the Filters pill -
   bottom left, just above the bottom bar and its merlons - is pressed, over a
   dimmed page. oxford.js toggles .is-open. Every choice still applies the
   moment it is made. The "Want it tailored?" panel stays in the page.
   ========================================================================== */
.filter-fab, .filter-scrim, .filter-sheet-x { display: none; }

@media (max-width: 1024px) {
    .filter-fab {
        position: fixed;
        left: 14px;
        bottom: calc(4.4rem + 14px + 12px + env(safe-area-inset-bottom));
        z-index: 85;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .65rem 1.05rem;
        border: 0;
        border-radius: 999px;
        background: var(--brand-700);
        color: #fff;
        font: inherit;
        font-size: .9rem;
        font-weight: 700;
        box-shadow: 0 8px 20px -6px rgba(9, 24, 54, .5);
        cursor: pointer;
    }
    .filter-fab:hover { background: var(--brand-800); }
    .filter-fab svg { width: 1.1rem; height: 1.1rem; }
    .filter-fab b {
        display: grid; place-items: center;
        min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
        border-radius: 999px;
        background: #fff;
        font-size: .72rem;
        color: var(--brand-800);
    }

    .filter-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 121;
        max-height: 82vh;
        overflow-y: auto;
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 40px rgba(9, 24, 54, .3);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .25s var(--ease), visibility .25s;
    }
    .filter-sheet.is-open { transform: none; visibility: visible; }
    /* The head stays in view while the groups scroll under it. */
    .filter-sheet > .panel-head {
        position: sticky;
        top: calc(var(--sp-5) * -1);
        z-index: 1;
        background: var(--surface);
    }
    .filter-sheet > .panel-head h2 { margin-right: auto; }
    .filter-sheet-x {
        display: grid; place-items: center;
        width: 2rem; height: 2rem;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface-2, #f1f5f9);
        font-size: 1.3rem; line-height: 1;
        color: var(--ink-700);
        cursor: pointer;
    }

    .filter-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 120;
        background: rgba(9, 24, 54, .45);
    }
    .filter-scrim[hidden] { display: none; }
    html.filter-locked, html.filter-locked body { overflow: hidden; }
}