/* ============================================================
   eHolidayer "Blue Hour" — shared tokens + chrome (header, footer).
   Loaded on every page, after the module CSS and after contact.css
   (templates/aurora/index.php). Nothing here is front-page-only; the
   homepage restyle lives in eholidayer-home.css, which loads after
   this file and may use the same tokens.

   Token source of truth: mockups/css/ehd-tokens.css
   (Figma file ZfRnLOizrTZz4Ry0ZM9aJF). Names are identical so the
   mock-up stylesheets and these rules speak the same language.
   Light only: the core site CSS (iosr.css, template.css, ios.css)
   ships light palettes; a dark token swap would half-recolour
   pages that were never rebuilt.
   ============================================================ */

:root {
    /* brand */
    --brand-50:  #E8F0FE;
    --brand-100: #D2E3FC;
    --brand-200: #A8C7FA;
    --brand-300: #7BAAF7;
    --brand-400: #4285F4;  /* PRIMARY: buttons, active link, links, dot */
    --brand-500: #1A73E8;  /* hover on 400 */
    --brand-600: #1967D2;  /* pressed */
    --brand-700: #185ABC;  /* text on --brand-50 */
    --brand-900: #0B3A75;  /* structural navy */

    /* canvases */
    --canvas:       #FAF9F6;  /* page background (design sample) */
    --canvas-warm:  #F0EBE2;  /* cream footer band */
    --surface:      #FFFFFF;  /* header, cards, inputs */
    --surface-mute: #F5F2EB;

    /* lines and ink */
    --hairline:      #E2E6E5;
    --border:        #E2E6E5;  /* design borders = hairline */
    --border-action: #9AA5AC;
    --footer-divider:#DAD7D0;
    --ink-display:   #172E3B;  /* all headings + body */
    --text-secondary:#5F6B70;  /* AA-darkened from design's #6B787E */
    --text-inverse:  #FFFFFF;

    /* shape */
    --r-micro: 6px;
    --r-input: 8px;
    --r-card:  12px;
    --r-hero:  20px;
    --r-modal: 16px;
    --r-pill:  100px;

    /* elevation */
    --e-1: 0 8px 28px rgba(21,59,75,0.08);
    --e-2: 0 14px 40px rgba(21,59,75,0.14);

    /* spacing (4pt scale) */
    --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
    --sp-9:36px; --sp-10:40px; --sp-11:44px; --sp-12:48px;
    --sp-13:56px; --sp-14:64px; --sp-15:72px; --sp-16:80px;
    --sp-17:88px; --sp-18:96px;

    /* layout */
    --max-width:   1280px;
    --gutter:      24px;   /* mobile default */
    --gutter-wide: 80px;   /* desktop (>=769px) */
    --header-h:    88px;

    /* type */
    --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-display-1: clamp(34px, 5.6vw, 60px); --lh-display-1: 1.1;  --fw-display-1: 500;
    --fs-display-2: clamp(26px, 3.4vw, 32px); --lh-display-2: 1.15; --fw-display-2: 600;
    --fs-body-lg: 17px; --lh-body-lg: 1.6;
    --fs-body: 15px;    --lh-body: 1.55;
    --ls-tag: 0.04em;
    --tnum: 'tabular-nums';

    /* focus and motion */
    --focus-ring: 2px solid var(--brand-400);
    --focus-ring-dark: 2px solid var(--brand-300);
    --focus-ring-ai:   2px solid var(--brand-400);
    --dur-fast: 120ms;
    --ease-brand: cubic-bezier(0.2, 0, 0.1, 1);
}

/* ============================================================
   Site container — the mock-up's .ehd-container gutter, applied to
   the container the site already has. The template's .fixed_width
   chain is min(1440px, 100%) wide (templates/aurora/icss.php); with
   box-sizing + padding-inline the content inside lands on 1280px —
   the mock-up's content width — which also puts the header nav and
   the 1280px-wide hero (modules/mod_tabsearch) on the same line.
   ============================================================ */
.fixed_width {
    box-sizing: border-box;
    padding-inline: var(--gutter);
}
@media (min-width: 769px) {
    .fixed_width { padding-inline: var(--gutter-wide); }
}

/* ============================================================
   Header — mock-up .ehd-header--v2 on the real DOM.
   Verified live: .hidden-area (utility strip) and .navigation both
   hold a .fixed_width; the nav contains .auroralogo, .menu_area >
   ul.elx_menu (the active item is li.menu_active) and .top-mods
   icon links.

   The utility strip is collapsed per the owner's decision that the
   header should be one clean bar. It is NOT display:none: the four
   panels it carries (search / currency / language / login) are the
   very popovers the .top-mods icons toggle, and an element inside a
   display:none ancestor is never laid out - position:fixed does not
   rescue it, because fixed escapes the flow, not the ancestor's
   display. Hiding the strip outright makes every icon a dead button.
   So the strip keeps its boxes and gives up all height instead; the
   nav icons stay exactly as they are, only restyled below. */
.menu > .hidden-area {
    position: static;
    height: 0;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    float: none;
}

/* .menu is a plain wrapper: template.css pins it to height:60px
   while its children total far more, so the overflow painted over
   the page below (the "header covers the body" report). Let it
   grow with its content instead of clipping it.

   position:relative is the owner's round-3 instruction (point 1: stop
   pinning the menu to the viewport, let it scroll with the page).
   It must be STATED, not merely removed: template.css:2315 also sets
   .menu{position:fixed}, so the restatement stays as the place where
   the decision is made - and this file loads after template.css, so
   the choice wins wherever the skins pull. z-index stays because the
   icon popovers (search / currency / login) open from inside the
   header and must keep painting over the hero. */
.menu {
    position: relative;
    z-index: 1300;
    width: 100%;
    height: auto;
    min-height: var(--header-h);
    /* Round 3, point 2 asked for air between the menu and the hero.
       It lives on the menu itself, not on .wrapper's padding-top: the
       menu is a CHILD of .wrapper, so padding there would now (round 3,
       point 1 - the menu is in flow again) push the header away from
       the page top instead of opening a gap under it. */
    margin-bottom: var(--sp-6);
}
@media (max-width: 768px) {
    .menu { margin-bottom: var(--sp-4); }
}

/* The old "reserve room under the fixed header" padding is GONE
   (round 3): with the menu back in flow the header takes its own room,
   and the space under it is owned by .menu's margin-bottom above.
   Nothing else may pad-top .wrapper or a band reappears over the menu. */

/* Nav bar: one white line, hairline under. It scrolls with the page
   because its parent .menu is relative now (round 3, point 1) - a
   sticky here would resurrect the pinned header on its own.
   template.css ships height:60px
   and a 60px min-height plus its own border/background; the
   mock-up has a single 88px white bar, so all three are overridden. */
.navigation {
    position: static;
    top: 0;
    z-index: 900;
    height: auto;
    min-height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
}
.navigation > .fixed_width {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: var(--header-h);
    font-family: var(--font-ui);
}

/* Logo */
/* template.css pins .auroralogo to height:60px while the image inside
   is only 40px: the flex bar faithfully centered the 60px BOX (which
   put its centre at y=46, matching the menu) but the visible image sat
   at the TOP of that box, 10px higher than the links — the owner saw
   the logo floating above the menu row. Shrinking the box to its content
   makes "center the box" and "center the picture" the same thing. */
.navigation .auroralogo { line-height: 0; height: auto; flex: 0 0 auto; }
.navigation .auroralogo a { display: block; }
.navigation .auroralogo img.logo {
    max-height: 60px;
    width: auto;
    display: block;
}

/* Menu — the mock-up's desktop row of 14px links.
   template.css:2342 pins .menu_area to max-width:750px; height:60px;
   line-height:60px. That 750px cap is what made the links wrap onto
   two lines, and the 60px line-height was inherited by the inline
   anchors (computed 780px), inflating each link to 76px tall and
   pushing the active underline off its own item. All three are reset
   here; the flex row is sized by its content instead. */
.navigation .menu_area {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: auto;
    line-height: normal;
    display: flex;
    justify-content: flex-end;
}
.navigation .menu_area ul.elx_menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
    clear: none;
    /* template.css floats the list itself, not just its items. */
    float: none;
}
.navigation .menu_area ul.elx_menu > li { float: none; margin: 0; }
.navigation .menu_area ul.elx_menu > li > a {
    position: relative;
    display: block;
    padding: var(--sp-2) 2px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-secondary);
    background: none;
}
/* Drop the core template's per-item decoration; the active state
   draws the mock-up's underline bar instead. */
.navigation .menu_area ul.elx_menu > li > a::after { content: none; }
.navigation .menu_area ul.elx_menu > li > a:hover,
.navigation .menu_area ul.elx_menu > li > a:focus {
    color: var(--ink-display);
    background: none;
}
.navigation .menu_area ul.elx_menu > li.menu_active > a {
    color: var(--brand-400);
    font-weight: 600;
    background: none;
}
.navigation .menu_area ul.elx_menu > li.menu_active > a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-400);
}

/* Icon actions (search / language / currency / login).
   These <a> are the toggle buttons for the panels that used to live
   in the utility strip. aurora.js shows them with slideDown/fadeIn;
   template.css had already positioned them with .search as an
   absolute popover at top:88px, which now lands just under the
   88px bar — so each panel is only restyled, never repositioned,
   and its show/hide behaviour is untouched. */
.navigation .top-mods {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: var(--sp-6);
    float: none;
    height: auto;
    line-height: normal;
    text-align: left;
}
.navigation .top-mods > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-input);
    background: var(--surface);
}
.navigation .top-mods > a:hover { border-color: var(--border-action); }
.navigation .top-mods > a img { width: 16px; height: 16px; display: block; padding: 0; }

.menu > .hidden-area .modlang { display: none; }

/* The three popovers. They sit inside .hidden-area, which is now
   zero-height but still laid out, so they are re-homed onto the nav
   visually: fixed positioning against the viewport keeps them on
   screen and above the page, and z-index lifts them over the sticky
   nav. They stay display:none until aurora.js reveals one, so the
   resting state is still "nothing showing". */
.hidden-area .search,
.hidden-area .currency,
.hidden-area .modlang,
.hidden-area .modlogin {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: auto;
    z-index: 950;
    width: 340px;
    max-width: 100%;
    float: none;
    margin: 0;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0 0 var(--r-card) 0;
    box-shadow: var(--e-2);
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    overflow: visible;
}
.hidden-area .search h3,
.hidden-area .currency h3,
.hidden-area .modlang h3,
.hidden-area .modlogin h3 {
    display: block;
    margin: 0 0 var(--sp-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--ls-tag);
    text-transform: uppercase;
    color: var(--ink-display);
}
.hidden-area .currency div,
.hidden-area .modlogin div,
.hidden-area .modlang div { float: none; margin: 0; }
.hidden-area .search,
.hidden-area .currency,
.hidden-area .modlang,
.hidden-area .modlogin form { margin: 0; }
.hidden-area input.elx_modsearch_input,
.hidden-area .currency select,
.hidden-area .currency input,
.hidden-area .modlogin input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    margin: 0 0 var(--sp-2);
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink-display);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
}
.hidden-area .elx_modsearch_btn {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: var(--r-input);
    background: var(--brand-400);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.hidden-area .elx_modsearch_btn:hover { background: var(--brand-500); }
.hidden-area .modlogin_wrapper { width: 100%; }

/* Mobile header */
#mheader { background: var(--surface); border-bottom: 1px solid var(--hairline); }

@media (max-width: 900px) {
    .navigation > .fixed_width { gap: var(--sp-4); }
    .navigation .menu_area ul.elx_menu { gap: var(--sp-5); }
    .navigation .top-mods { margin-left: var(--sp-4); gap: var(--sp-2); }
}
@media (max-width: 768px) {
    .navigation { min-height: 64px; }
    .navigation > .fixed_width { min-height: 64px; flex-wrap: wrap; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
    /* Below 768px the utility popovers would cover the whole screen,
       so they sit under the nav instead and shrink to the gutter. */
    .hidden-area .search,
    .hidden-area .currency,
    .hidden-area .modlang,
    .hidden-area .modlogin {
        top: 64px;
        width: auto;
        left: var(--gutter);
        right: var(--gutter);
        border-radius: var(--r-card);
    }
}
@media (max-width: 560px) {
    .navigation .menu_area ul.elx_menu { gap: var(--sp-4); }
    .navigation .menu_area ul.elx_menu > li > a { font-size: 13px; }
}

/* ============================================================
   Section headings — the mock-up's section-head title, on the real
   module titles ("Popular" / "Trending" / "Dahab" are
   .maincontent .module > h3).
   ============================================================ */
.maincontent .module > h3 {
    font-family: var(--font-display);
    font-size: var(--fs-display-2);
    line-height: var(--lh-display-2);
    font-weight: var(--fw-display-2);
    letter-spacing: 0;
    color: var(--ink-display);
    margin: 0 0 var(--sp-6);
}

/* ============================================================
   Footer — mock-up "footer2": cream band, calm columns, the
   four functional modules (login / hotelier / currency /
   newsletter) kept exactly as they work today, restyled only.
   The columns ship as floats with inline widths, so those two
   properties need !important to move.
   ============================================================ */

.footer-wrapper {
    background: var(--canvas-warm);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-ui);
    padding-top: var(--sp-10);
    margin-top: var(--sp-12);
}
/* template.css:2209 sets .footer-wrapper .fixed_width to
   padding:40px 0 0 — no horizontal padding at all, which is what
   flush the footer's left and right edges against the window. That
   selector is (0,2,0) and beats a plain .fixed_width rule, so the
   horizontal padding has to be declared here to win. */
.footer-wrapper .fixed_width {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-8) var(--sp-10);
    padding: var(--sp-10) var(--gutter) 0;
}
@media (min-width: 769px) {
    .footer-wrapper .fixed_width { padding-left: var(--gutter-wide); padding-right: var(--gutter-wide); }
}
.footer-wrapper .clear { display: none; }

/* Four modules in one row. The newsletter carries a form and is
   wider than the text columns, so it takes a 260px basis and the
   others share what is left at 200px. min-width:0 stops a long
   field from forcing the row wider than the container. */
.footer-wrapper .content_user4,
.footer-wrapper .content_user5,
.footer-wrapper .content_user6,
.footer-wrapper .content_user7 {
    float: none !important;
    width: auto !important;
    flex: 1 1 200px;
    min-width: 0;
}
.footer-wrapper .content_user7 { flex: 1 1 260px; }

/* Keep all four columns on ONE line down to 1100px, and give the newsletter
   the largest share because it carries a form.

   The newsletter was dropping onto its own row at 1280 - measured there at
   x=80 y=2716 width=1105, i.e. back at the left margin and wider than the
   other three combined, which is what made the footer look empty.

   Cause, and it is arithmetic rather than anything to do with min-content.
   The row is flex-wrap:wrap with a 40px column gap, so four items need
   3 x 40 = 120px for the gaps ON TOP of their widths. Percentage
   flex-basis does not include gaps: my first attempt asked for
   22 + 22 + 22 + 34 = 100% of the 1105px content box (243 + 243 + 243 +
   376) and added the gaps afterwards, giving 1225px of demand against 1105px
   available. Flex then had no choice but to wrap the last item, which is
   exactly what happened. Note the earlier "min-content floor" diagnosis in
   this file was wrong, and the probe that produced it was faulty: it set an
   inline width:min-content, which the width: auto !important above already
   beats, so it measured max-content and mislabelled it a floor.

   The fix is flex-basis:0. With a zero basis the gaps come out of the free
   space BEFORE anything is distributed, and flex-grow then splits whatever
   remains in the ratio below. 5 + 5 + 5 + 7 shares the 985px that is left
   after the 120px of gaps - about 215 / 215 / 215 / 301 - which fits inside
   1105px by construction and leaves no room for a wrap. Percentage growth
   would reintroduce the original bug, because percentages of the container
   still do not know about the gaps.

   min-width:0 stays on each column so a long field or word can never push
   the row past the container, and .mnl_label below is allowed to wrap. */
.footer-wrapper .content_user4,
.footer-wrapper .content_user5,
.footer-wrapper .content_user6,
.footer-wrapper .content_user7 {
    flex: 1 1 0;
    min-width: 0;
}
.footer-wrapper .content_user4 { flex-grow: 5; }
.footer-wrapper .content_user5 { flex-grow: 5; }
.footer-wrapper .content_user6 { flex-grow: 5; }
.footer-wrapper .content_user7 { flex-grow: 7; }
.footer-wrapper .mnl_label {
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.footer-wrapper h3 {
    margin: 0 0 var(--sp-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--ls-tag);
    text-transform: uppercase;
    color: var(--ink-display);
}
.footer-wrapper a { color: var(--text-secondary); text-decoration: none; }
.footer-wrapper a:hover { color: var(--ink-display); }

/* The hotelier sign-up line ships as a blue panel with a YELLOW link,
   #dfe143 !important (hotelier.css:31-32). That !important is why plain link
   styling never reached it: the vendor sheet loads at position 16 and this
   file at 21, so an !important here wins on order.

   Note the panel is already flattened to plain text on the cream canvas by
   the rule just above (padding 0, no border, no background), so this is
   yellow-on-cream -> brand-blue-on-cream: exactly what the owner asked for,
   and fully legible. An earlier version of this comment assumed the blue
   panel was still painted and prescribed white; that would have put white
   text on cream. The panel's own words keep the muted footer colour. */
.footer-wrapper .modhotelier_warn_blue a,
.footer-wrapper .modhotelier_warn_blue a:visited,
.footer-wrapper .modhotelier_warn_blue a:link,
.footer-wrapper .modhotelier_warn_blue a:active {
    color: var(--brand-400) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-wrapper .modhotelier_warn_blue a:hover {
    color: var(--brand-500) !important;
    text-decoration: underline;
}

/* Shared form look: inputs, selects, buttons on the cream */
.footer-wrapper .elx5_labelblock,
.footer-wrapper .mnl_label {
    display: block;
    margin: 0 0 var(--sp-1);
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-wrapper .elx5_formrow { margin: 0 0 var(--sp-3); }
.footer-wrapper .elx5_zero { float: none !important; margin-left: 0 !important; }
.footer-wrapper .elx5_text,
.footer-wrapper .elx5_select,
.footer-wrapper .mnl_box {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--surface);
    color: var(--ink-display);
    font-size: 14px;
}
/* standard.css:572 pins select.elx5_select to a fixed height:31px with
   a 17px line box, so the 18px of vertical padding added above no longer
   fits and the chosen currency is sliced through the middle. Give the
   select the same box as the text inputs beside it (17px line + 18px
   padding + 2px border = 37px) so the label is fully visible. */
.footer-wrapper .elx5_select {
    height: 37px;
    padding: 9px 12px;
    line-height: 17px;
    text-align: left;
    direction: ltr;
}
.footer-wrapper .elx5_btn,
.footer-wrapper .mnl_button {
    display: inline-block;
    padding: 9px 18px;
    border: 0;
    border-radius: var(--r-input);
    background: var(--brand-400);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.footer-wrapper .elx5_btn:hover,
.footer-wrapper .mnl_button:hover { background: var(--brand-500); }
.footer-wrapper .elx5_btn:active,
.footer-wrapper .mnl_button:active { background: var(--brand-600); }

.footer-wrapper .elx5_checkboxwrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.footer-wrapper .elx5_modlogin_linksbox {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-4);
    margin-top: var(--sp-3);
}
.footer-wrapper .elx5_modlogin_linksbox a { color: var(--brand-500); font-size: 12px; }
.footer-wrapper .elx5_modlogin_linksbox a:hover { color: var(--brand-600); text-decoration: underline; }

/* Hotelier note: was a blue warning box, now quiet text + one link */
.footer-wrapper .modhotelier_warn_blue {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.footer-wrapper .modhotelier_warn_blue a { color: var(--brand-500); }
.footer-wrapper .modhotelier_warn_blue a:hover { color: var(--brand-600); text-decoration: underline; }

/* Newsletter: markup ships button-then-input; put the field first */
.footer-wrapper .mnl_taxline { display: flex; flex-direction: row-reverse; gap: var(--sp-2); align-items: stretch; }
/* newsletter.css floats .mnl_taxbtn right. A floated child is taken OUT
   of flow, so it is not a flex item at all: it drops out of the flex
   layout and the input wrapper is left as the row's only in-flow child,
   which then keeps its shrink-to-fit 90px while the button keeps the
   105px the input should have grown into. float:none puts the button
   back into the flex formatting context. Same class of bug as the
   floated ul.elx_menu above - check every child of a flex parent for a
   leftover float before trusting the layout. */
.footer-wrapper .mnl_taxbtn { float: none; flex: 0 0 auto; align-self: stretch; }
/* basis 0 (not auto) so the free space goes to the field by definition
   rather than depending on the input's intrinsic size.
   margin:0 is the other half of the float fix: newsletter.css:6 reserves
   the button's space with a hard-coded `margin:0 105px 0 0` instead of
   using the float. In a flex row that margin is deducted BEFORE flex-grow
   distributes free space, so growth lands on the margin box and the input
   stays at its 90px intrinsic size with 105px of visible gap beside it -
   measured exactly. The float and the margin are two halves of one
   mechanism, so both must go when the row becomes flex. */
.footer-wrapper .mnl_taxinput { float: none; flex: 1 1 0; min-width: 0; display: flex; margin: 0; }
/* Same 37px box as the login/currency fields, so the input and the
   Register button read as one control row instead of two loose ones.
   The input itself is the .mnl_box (there is no wrapper around it), so
   width:100% + min-width:0 makes it fill .mnl_taxinput instead of
   falling back to the browser's ~90px intrinsic text-input size. */
.footer-wrapper .mnl_taxinput .mnl_box { margin: 0; height: 37px; width: 100%; min-width: 0; }
.footer-wrapper .mnl_taxbtn .mnl_button { height: 37px; }
.footer-wrapper .mnl_unsub {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: 12px;
    text-decoration: underline;
}
.footer-wrapper .mnl_reminstruct { font-size: 12px; line-height: 1.5; }

/* Footer menu (sitemap / My reservations / Hotelier registration):
   the mock-up's link row, under a hairline divider */
.footer-wrapper .module {
    flex: 1 0 100%;
    margin-top: var(--sp-2);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--footer-divider);
}
.footer-wrapper ul.elx_menu {
    display: flex;
    flex-wrap: wrap;
    /* The core stylesheet floats ul.elx_menu (template.css), and a
       floated box shrinks to fit its content - measured 480px inside a
       681px column. justify-content then centres the links INSIDE that
       480px, which still leaves them hugging the column's left edge.
       float:none lets the list take the column's full width, which is
       what actually centres the row on the page. */
    float: none;
    justify-content: center;
    gap: 8px var(--sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-wrapper ul.elx_menu li { float: none; margin: 0; }
/* A floated li is taken out of flow; once the ul is no longer floated
   the li's float:none above is what keeps them as flex items. */
/* template.css:2590 gives EVERY module menu li a right divider -
   div.module ul.elx_menu li { border-right:1px solid #ddd } - which drew
   a grey line after each footer link, including a dangling one after the
   last. The rule above loses that fight on specificity (0,2,2 vs 0,2,3),
   so the deletion repeats template.css's own selector shape and adds the
   footer-wrapper class to outrank it. The owner asked for these lines
   out of the footer menu (2026-10-17). */
.footer-wrapper div.module ul.elx_menu li { border-right: 0; border-left: 0; }
.footer-wrapper ul.elx_menu a { font-size: 13px; }
.footer-wrapper ul.elx_menu a:hover { color: var(--brand-500); }

/* template.css:2620 draws a 2.5px brand bar under EVERY ul.elx_menu
   anchor (left:10px; bottom:14px) so the header nav can slide it in on
   hover. A footer link is only 28px tall, so bottom:14px lands the bar
   straight through the middle of the word - that is the "strikethrough".
   The header already opts out at .navigation .menu_area ... a::after;
   the footer needed the same opt-out, and the nav hover bar simply has
   no place here. */
.footer-wrapper ul.elx_menu a::after,
.footer-wrapper ul.elx_menu a:hover::after,
.footer-wrapper ul.elx_menu a:focus::after { content: none; }

/* Legal bar under the footer (copyrights + rss/top buttons) */
.module-fmenu.ehd_footer {
    background: var(--canvas-warm);
    padding: var(--sp-4) 0 var(--sp-7);
}
.ehd_footer .fixed_width {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.ehd_footer .copytxt { font-size: 12px; color: var(--text-secondary); }
.ehd_footer a { color: var(--text-secondary); text-decoration: none; }
.ehd_footer a:hover { color: var(--ink-display); }
.ehd_footer ul.infobox {
    display: flex;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ehd_footer ul.infobox li { float: none; margin: 0; }
.ehd_footer .infobox a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--footer-divider);
    border-radius: var(--r-pill);
    color: var(--text-secondary);
}
.ehd_footer .infobox a:hover { border-color: var(--border-action); color: var(--ink-display); }

/* ============================================================
   HOTELS SEARCH PAGE (owner, 2026-10-16: "redesign it to match
   the whole site").

   Everything is scoped to body.ehd-searchpage, a class the
   template adds only on reservations:hotels/search, so no other
   IOSR page (booking, registration, hotel detail) is touched.

   Why each rule exists:
   - The markup comes from ext/hotels/views/locations.html.php and
     is still styled by the vendor's ios.css: navy Helvetica
     headings, a blue-badge section title, grey recommendation
     boxes with a corner-tick image, green submit button. Those
     are the "looks different" leftovers; each rule below replaces
     one with the site's own token.
   - The column that the form, the recommendations and the Era
     block all centre inside is 880px wide - the same width the
     homepage assistant column uses (.ehd-assist) - so the page
     reads as one spine instead of three unrelated widths.
   ============================================================ */

/* Page heading: the vendor's 22px navy Helvetica h1 becomes the
   site's Inter display heading, centred like the front page. */
body.ehd-searchpage .iosh_h1 {
    margin: var(--sp-6) auto var(--sp-2);
    text-align: center;
    font: 600 var(--fs-display-2)/var(--lh-display-2) var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink-display);
}
body.ehd-searchpage .iosh_lightp {
    margin: 0 auto var(--sp-8);
    max-width: 560px;
    text-align: center;
    font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
    color: var(--text-secondary);
}

/* Search form: the flat #EFF5FC vendor box becomes a white card
   with the site's elevation and radius. #hsearch is the
   .iosh_formwrap div itself. */
body.ehd-searchpage #hsearch {
    max-width: 880px;
    margin: 0 auto var(--sp-8);
    padding: var(--sp-8) var(--sp-8) var(--sp-7);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-hero);
    box-shadow: var(--e-1);
}
/* ios.css carries `.iosh_formrow > div { margin-left:180px }` from
   its float era. The row became flex long ago, so the 180px is now
   pure dead space beside the label (measured live: 180px). Zero it -
   the label still sits left of the field because it is a flex item. */
body.ehd-searchpage .iosh_formrow > div { margin-left: 0; }
/* Links inside the form (the "Change" guests toggle) in brand blue. */
body.ehd-searchpage #hsearch a { color: var(--brand-500); }
body.ehd-searchpage #hsearch a:hover { color: var(--brand-600); }
/* Submit: green was the vendor's palette choice; every other search
   button on this site is brand-400 (eholidayer-home.css .ts_btn). */
body.ehd-searchpage button.iosh_btn {
    background: var(--brand-400);
    border: 0;
    border-radius: var(--r-input);
    box-shadow: 0 6px 18px rgba(26,115,232,0.28);
    transition: background var(--dur-fast) var(--ease-brand),
                box-shadow var(--dur-fast) var(--ease-brand);
}
body.ehd-searchpage button.iosh_btn:hover { background: var(--brand-500); box-shadow: 0 8px 22px rgba(26,115,232,0.36); }
body.ehd-searchpage button.iosh_btn:active { background: var(--brand-600); }

/* Recommended destinations: the vendor draws the heading as white
   text on a blue badge (#3c96ef). The site's section titles are ink
   text with no badge, so un-badge it. */
body.ehd-searchpage .iosh_vspace {
    max-width: 880px;
    margin: 0 auto;
}
body.ehd-searchpage .iosh_h3 {
    margin: 0 0 var(--sp-5);
    text-align: center;
    font: 600 20px/1.3 var(--font-display);
    color: var(--ink-display);
}
body.ehd-searchpage .iosh_h3 > span { background: none; color: inherit; padding: 0; }
/* Float pair -> flex row. ":empty" is safe: the vendor emits the
   filler as a literally empty <div class="iosh_halfsecond"></div>
   (locations.html.php:1751) and dropping it stops a single card
   from claiming only half a row. */
body.ehd-searchpage .iosh_halfline { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-4); }
body.ehd-searchpage .iosh_halffirst,
body.ehd-searchpage .iosh_halfsecond { float: none; width: auto; flex: 1 1 0; min-width: 0; margin: 0; }
body.ehd-searchpage .iosh_halfsecond:empty { display: none; }
body.ehd-searchpage .iosh_pad { padding: 0; }
/* Grey corner-tick box -> white card. ios.css paints the box as
   `background: url(corner_tick.png) no-repeat #f8f8f8`; one
   background declaration replaces the whole shorthand, so the
   image is gone without !important. */
body.ehd-searchpage .iosh_box {
    display: flex;
    align-items: stretch;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: var(--e-1);
    overflow: hidden;
    transition: transform 180ms var(--ease-brand), box-shadow 180ms var(--ease-brand);
}
body.ehd-searchpage .iosh_box:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
body.ehd-searchpage .iosh_box > .clear { display: none; }
/* Image bleeds to the card's left edge (thumb carries a 4px vendor
   border and a spinner-tinted background - both go). */
body.ehd-searchpage .iosh_box img.iosh_thumb {
    flex: 0 0 150px;
    width: 150px;
    height: auto;
    min-height: 110px;
    align-self: stretch;
    object-fit: cover;
    float: none;
    margin: 0;
    border: 0;
    background: var(--surface-mute);
}
body.ehd-searchpage .iosh_boxtext {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    overflow: visible;
    text-align: left;
    font: 400 13px/1.5 var(--font-ui);
    color: var(--text-secondary);
}
body.ehd-searchpage .iosh_boxtitle { margin: 0 0 var(--sp-1); font: 600 16px/1.3 var(--font-display); }
body.ehd-searchpage .iosh_boxtitle a { color: var(--brand-500); text-decoration: none; }
body.ehd-searchpage .iosh_boxtitle a:hover { color: var(--brand-600); text-decoration: underline; }

/* Era block under the search: some breathing room, and a bottom
   gap so the footer does not butt up against the chat card. */
body.ehd-searchpage .ehd-assist { margin-top: var(--sp-10); }
body.ehd-searchpage .maincontent { padding-bottom: var(--sp-12); }

/* Narrow screens: the two cards stack, the card itself stays a
   row (thumb + text side by side still fits at 320px), and the
   submit spans the card like on the front page. */
@media (max-width: 700px) {
    body.ehd-searchpage .iosh_halfline { flex-direction: column; }
    body.ehd-searchpage #hsearch { padding: var(--sp-5); }
    body.ehd-searchpage button.iosh_btn { width: 100%; }
}

/* ============ Header fit, window widths 769-1180 px ============
   Between the desktop layout and the 768px mobile switch, the header
   row (logo + four menu links + icon buttons) can grow wider than the
   window. The menu is right-aligned and set not to wrap, so the extra
   width spills to the LEFT — under the logo — and "Home" ends up
   covered. Nothing here touches a wide window: at 1181px+ the layout
   is byte-for-byte what it is today. In this band the gaps tighten and
   the logo shrinks a little so the row still fits, and below 941px the
   menu is allowed to drop onto a second line rather than hide under
   the logo. A taller header bar is the price of nothing overlapping. */
@media (min-width: 769px) and (max-width: 1180px) {
    .navigation > .fixed_width { gap: 12px; }
    .navigation .auroralogo { margin: 0 6px; }
    .navigation .auroralogo img.logo { max-height: 46px; }
    .navigation .menu_area ul.elx_menu { gap: 14px; }
}
@media (min-width: 769px) and (max-width: 940px) {
    .navigation > .fixed_width { flex-wrap: wrap; }
    .navigation .menu_area ul.elx_menu { flex-wrap: wrap; }
}