/* ==========================================================================
   EGYVACATIONS — SITE CHROME  ·  assets/css/chrome.css

   Everything that repeats on every single page and nothing else:

     1.  Announcement strip      .ev-promo
     2.  Header shell            .ev-header
     3.  Utility bar             .ev-utility
     4.  Navbar + logo           .ev-navbar .ev-logo
     5.  Primary nav             .ev-nav
     6.  Mega menu               .ev-mega
     7.  Language / currency     .ev-locale
     8.  Header buttons          .ev-btn  .ev-burger
     9.  Mobile drawer           .ev-drawer
     10. Footer                  .ev-footer
     11. Contact bar + licence   .ev-contactbar
     12. Newsletter              .ev-newsletter
     13. Footer bar + credit     .ev-footer__bar
     14. Payment icons           .ev-footer__pay
     15. WhatsApp FAB            .ev-whatsapp
     16. App-style bottom bar    .ev-appbar

   Contrast, measured not guessed (WCAG 2.1, tokens.css palette):
     charcoal on white 15.05 · navy on white  9.55 · white on navy 9.55
     ocean on white     4.84 · navy on orange 3.96 (AA large only)
     white on orange    2.41 -> FAILS everywhere, so the orange button
                               carries NAVY text at 18px/700. Never white.
   ========================================================================== */


/* ==========================================================================
   0. CHROME RESET
   The header, drawer, footer and app bar sit OUTSIDE <main>, so the reset in
   base.css — which is scoped to the page element — never reaches them. Without
   this every chrome button would keep the browser's default grey pill. Written
   with :where() so it stays at zero specificity and loses to any rule below.
   ========================================================================== */
.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-whatsapp,
.ev-promo *,.ev-header *,.ev-drawer *,.ev-footer *,.ev-appbar *,.ev-quick *,
.ev-whatsapp *{box-sizing:border-box}

:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick)
  :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick)
  :where(ul,ol){list-style:none;padding:0}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-whatsapp)
  :where(a){color:inherit;text-decoration:none}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick)
  :where(button){font:inherit;color:inherit;border:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick)
  :where(input,select,textarea){font:inherit;color:inherit}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-whatsapp)
  :where(img){max-width:100%;display:block}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-whatsapp)
  :where(svg){width:18px;height:18px;flex:none;display:inline-block;vertical-align:-.18em}
:is(.ev-promo,.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-whatsapp)
  :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.ev-header,.ev-drawer,.ev-footer,.ev-appbar,.ev-quick,.ev-promo{
  font-family:var(--font);line-height:var(--lh-body)}


/* ==========================================================================
   1. ANNOUNCEMENT STRIP
   Sits above the header, scrolls away with the page, dismissible.
   ========================================================================== */
.ev-promo{position:relative;z-index:1;background:var(--accent);color:var(--on-accent)}
.ev-promo[hidden]{display:none}
.ev-promo__inner{display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:38px;padding:7px 46px 7px 20px;text-align:center}
.ev-promo__inner > svg{width:17px;height:17px;flex:none}
.ev-promo p{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:.01em}
.ev-promo b{font-weight:var(--fw-black)}
.ev-promo a{color:var(--ev-navy);text-decoration:underline;text-underline-offset:3px;font-weight:var(--fw-bold);
  white-space:nowrap}
.ev-promo__close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;color:var(--ev-navy);
  transition:background var(--dur-fast) var(--ease)}
.ev-promo__close:hover{background:rgba(17,72,115,.14)}
.ev-promo__close svg{width:15px;height:15px}
@media(max-width:700px){
  .ev-promo p{font-size:.78rem}
  .ev-promo__inner > svg{display:none}
}


/* ==========================================================================
   2. HEADER SHELL
   Sticky. JS adds .is-stuck past 40px — that is the only thing JS does to
   the header, so the header is fully usable with scripting off.
   ========================================================================== */
.ev-header{position:sticky;top:0;z-index:var(--chrome-z-header);background:var(--chrome-header-bg);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow var(--dur-base) var(--ease)}
.ev-header.is-stuck{box-shadow:var(--chrome-header-shadow);border-bottom-color:transparent}
.ev-header.is-stuck .ev-utility{margin-top:calc(var(--chrome-utility-h) * -1)}
.ev-header.is-stuck .ev-navbar{height:var(--chrome-navbar-h-sticky)}
.ev-header.is-stuck .ev-logo img{height:34px}


/* ==========================================================================
   3. UTILITY BAR — navy. White text at .84 alpha = 6.6:1, passes AA.
   Slides up out of view once the page is scrolled (see .is-stuck above).
   ========================================================================== */
.ev-utility{background:var(--chrome-utility-bg);color:var(--chrome-utility-fg);
  transition:margin-top var(--dur-base) var(--ease)}
.ev-utility__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--chrome-utility-h);font-size:.78rem}
.ev-utility__group{display:flex;align-items:center;gap:14px;min-width:0}
.ev-utility a,
.ev-utility__item{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.84);
  white-space:nowrap;transition:color var(--dur-fast) var(--ease)}
.ev-utility a:hover,
.ev-utility__item:hover{color:var(--accent)}
.ev-utility svg{width:14px;height:14px;flex:none}
.ev-utility__sep{color:rgba(255,255,255,.30)}
.ev-utility__social{display:flex;align-items:center;gap:4px}
.ev-utility__social a{width:26px;height:26px;justify-content:center;border-radius:50%;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-utility__social a:hover{background:rgba(255,255,255,.12)}
.ev-utility__social svg{width:15px;height:15px}
@media(max-width:1024px){.ev-utility{display:none}}


/* ==========================================================================
   4. NAVBAR + LOGO
   ========================================================================== */
.ev-navbar{display:flex;align-items:center;gap:26px;height:var(--chrome-navbar-h);
  transition:height var(--dur-base) var(--ease)}
.ev-logo{flex:none;display:block}
.ev-logo img{height:40px;width:auto;transition:height var(--dur-base) var(--ease)}
@media(max-width:520px){.ev-logo img{height:34px}}


/* ==========================================================================
   5. PRIMARY NAV
   ========================================================================== */
.ev-nav{flex:1 1 auto;min-width:0}
.ev-nav__list{display:flex;align-items:center;gap:2px}
.ev-nav__item{position:relative}
.ev-nav__link{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px;
  border-radius:var(--r-pill);font-size:.92rem;font-weight:var(--fw-semi);color:var(--text-heading);
  white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-nav__link:hover,
.ev-nav__item:focus-within > .ev-nav__link{background:var(--ev-navy-05);color:var(--ev-navy)}
.ev-nav__link[aria-current]{color:var(--ev-navy)}
.ev-nav__link[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:2px;
  border-radius:2px;background:var(--accent)}
/* The small leading icons are gone at every width. Five labels plus five
   icons do not clear the header actions, and the icons were decoration — the
   class stays so the PHP templates keep rendering without edits. */
.ev-nav__ico{display:none}
.ev-nav__link svg:last-child{width:13px;height:13px;color:var(--text-decorative);
  transition:transform var(--dur-fast) var(--ease)}
.ev-nav__item--has-children:hover .ev-nav__link svg:last-child,
.ev-nav__item--has-children:focus-within .ev-nav__link svg:last-child{transform:rotate(180deg)}
/* the drawer takes over at 1180, not 1100: between the two the fifth
   nav item still ran into the header buttons */
@media(max-width:1180px){.ev-nav{display:none}}


/* ==========================================================================
   6. MEGA MENU
   Opens on hover and on keyboard focus. Anchored to the header, not to the
   list item, so a four-column panel can never be clipped by the viewport.
   ========================================================================== */
/* The panel is anchored to the NAVBAR, not to the list item: a menu centred
   on its own item slides off the left edge when that item sits near it, which
   is exactly what happened to Egypt. Anchored to the container it is always
   inside the page, whichever item opens it. */
.ev-navbar{position:relative}
.ev-nav__item--has-children{position:static}

.ev-mega{position:absolute;left:0;right:0;top:calc(100% + 14px);z-index:5;
  transform:translateY(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);overflow:hidden;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
             visibility var(--dur-base) step-end}
.ev-nav__item--has-children:hover .ev-mega,
.ev-nav__item--has-children:focus-within .ev-mega,
.ev-mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
             visibility var(--dur-base) step-start}
/* the hover bridge lives on the panel, so it works whatever the panel is
   anchored to — the pointer never crosses dead space */
.ev-mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}

/* Two menus now, each sized to what it holds. Egypt is the deep one — three
   columns of routes plus the best-seller — and Destinations is a short grid of
   countries, so it is narrower and does not open a near-empty panel. */
.ev-mega__inner{display:grid;align-items:stretch}
.ev-mega--egypt .ev-mega__inner{grid-template-columns:1fr 320px}
.ev-mega--dest .ev-mega__inner{grid-template-columns:1fr 270px}
.ev-mega__egypt{padding:26px 28px}
.ev-mega__group{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ev-mega__group::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.ev-mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ev-mega__title{display:block;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--border-soft);
  font-size:.92rem;font-weight:var(--fw-bold);color:var(--ev-navy);
  transition:color var(--dur-fast) var(--ease)}
.ev-mega__title:hover{color:var(--action-hover)}
.ev-mega ul{display:flex;flex-direction:column;gap:1px}
.ev-mega li a{display:block;padding:5px 9px;margin-inline:-9px;border-radius:var(--r-sm);
  font-size:.86rem;color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-mega li a:hover{background:var(--ev-navy-05);color:var(--ev-navy)}

/* the featured best-seller card */
.ev-mega__promo-col{padding:18px;background:var(--surface-sunken)}
.ev-mega__promo{display:flex;flex-direction:column;height:100%;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.ev-mega__promo:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.ev-mega__promo-media{position:relative;display:block;flex:1;min-height:200px;overflow:hidden;
  background:var(--surface-sunken)}
.ev-mega__promo-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.ev-mega__promo:hover .ev-mega__promo-media img{transform:scale(1.05)}
.ev-mega__promo-flag{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);font-size:.62rem;font-weight:var(--fw-black);
  letter-spacing:.09em;text-transform:uppercase}
.ev-mega__promo-body{display:flex;flex-direction:column;gap:9px;flex:1;padding:14px}
.ev-mega__promo-eyebrow{font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.ev-mega__promo-body strong{font-size:.92rem;font-weight:var(--fw-bold);line-height:var(--lh-tight);
  color:var(--text-heading)}
.ev-mega__promo-meta{display:flex;flex-direction:column;gap:5px}
.ev-mega__promo-meta span{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-muted)}
.ev-mega__promo-meta svg{width:14px;height:14px;flex:none;color:var(--ev-ocean)}
.ev-mega__promo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--border-soft)}
.ev-mega__promo-price{display:flex;align-items:baseline;gap:5px;font-size:1.22rem;font-weight:var(--fw-black);
  color:var(--text-heading);letter-spacing:var(--ls-heading)}
.ev-mega__promo-price small{font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.ev-mega__promo-price em{font-style:normal;font-size:.7rem;font-weight:var(--fw-regular);color:var(--text-muted)}

/* trip-length tiles — a second way into the catalogue, priced */
.ev-mega__lengths{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--border-soft)}
.ev-mega__len{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--surface-sunken);transition:background var(--dur-fast) var(--ease)}
.ev-mega__len:hover{background:var(--ev-navy-09)}
.ev-mega__len b{font-size:.84rem;font-weight:var(--fw-bold);color:var(--text-heading)}
.ev-mega__len span{font-size:.7rem;color:var(--text-muted)}
@media(max-width:1200px){
  .ev-mega--egypt .ev-mega__inner{grid-template-columns:1fr}
  .ev-mega__promo-col{display:none}
}

/* ---------- the Destinations menu ---------- */
.ev-mega__dest{padding:26px 28px}
.ev-mega__destgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ev-mega__dcard{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;
  align-items:center;padding:11px 13px;border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ev-mega__dcard:hover{background:var(--ev-navy-05);border-color:var(--border-soft)}
.ev-mega__dflag{grid-row:1/3;width:30px;height:30px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px var(--border-soft)}
.ev-mega__dflag svg{width:100%;height:100%}
.ev-mega__dcard b{font-size:.92rem;font-weight:var(--fw-bold);color:var(--text-heading);
  line-height:1.2}
.ev-mega__dcard span:not(.ev-mega__dflag){font-size:.74rem;color:var(--text-muted);
  line-height:1.3}

.ev-mega__destside{padding:26px 24px;background:var(--surface-sunken);
  border-left:1px solid var(--border-soft);display:flex;flex-direction:column}
.ev-mega__destside ul{display:flex;flex-direction:column;gap:1px}
.ev-mega__destside li a{display:block;padding:7px 9px;margin-inline:-9px;
  border-radius:var(--r-sm);font-size:.88rem;color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-mega__destside li a:hover{background:var(--ev-navy-09);color:var(--ev-navy)}
.ev-mega__all{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-link);
  transition:gap var(--dur-fast) var(--ease)}
.ev-mega__all svg{width:14px;height:14px}
.ev-mega__all:hover{gap:12px}

@media(max-width:1200px){
  .ev-mega--dest .ev-mega__inner{grid-template-columns:1fr}
  .ev-mega__destside{border-left:0;border-top:1px solid var(--border-soft)}
}
@media(max-width:1200px){
  .ev-mega__destgrid{grid-template-columns:repeat(2,1fr)}
}



/* ==========================================================================
   7. LANGUAGE / CURRENCY
   The trigger is a globe and nothing else. Spelling out "EN | USD" beside a
   flag cost about 90px of the header — the room the fifth nav item needed —
   and said nothing a visitor did not already know. The codes still exist for
   screen readers inside the button's label.
   ========================================================================== */
.ev-locale{position:relative;flex:none}
.ev-locale__btn{display:grid;place-items:center;width:44px;height:44px;
  border:1.5px solid var(--border);border-radius:50%;color:var(--text-heading);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.ev-locale__btn:hover,
.ev-locale__btn[aria-expanded="true"]{border-color:var(--action);background:var(--ev-navy-05);
  color:var(--ev-navy)}
.ev-locale__globe{width:21px;height:21px}

.ev-locale__panel{position:absolute;right:0;top:calc(100% + 10px);z-index:8;width:400px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden}
.ev-locale__panel[hidden]{display:none}
.ev-locale__cols{display:grid;grid-template-columns:1fr 1fr}
.ev-locale__col{padding:14px}
.ev-locale__col + .ev-locale__col{border-left:1px solid var(--border-soft);
  background:var(--surface-sunken)}
.ev-locale__ttl{margin-bottom:8px;padding-inline:9px;font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted)}
.ev-locale__list li + li{margin-top:1px}
.ev-locale__list a,
.ev-locale__list button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;
  border-radius:var(--r-sm);font-size:.88rem;font-weight:var(--fw-medium);
  color:var(--text-secondary);text-align:left;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-locale__list a:hover,
.ev-locale__list button:hover{background:var(--ev-navy-09);color:var(--ev-navy)}
.ev-locale__list [aria-current]{color:var(--ev-navy);font-weight:var(--fw-bold);
  background:var(--accent-wash)}
.ev-locale__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-locale__flag{width:22px;height:22px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px var(--border-soft)}
.ev-locale__flag svg{width:100%;height:100%;object-fit:cover}
.ev-locale__sym{width:22px;flex:none;text-align:center;font-weight:var(--fw-black);
  color:var(--ev-ocean)}
.ev-locale__check{width:15px;height:15px;flex:none;color:var(--ev-ocean);opacity:0}
.ev-locale__list [aria-current] .ev-locale__check{opacity:1}
.ev-locale__note{padding:11px 14px;border-top:1px solid var(--border-soft);
  font-size:.72rem;line-height:1.5;color:var(--text-muted)}

@media(max-width:460px){
  .ev-locale__panel{width:min(340px,calc(100vw - 28px))}
  .ev-locale__cols{grid-template-columns:1fr}
  .ev-locale__col + .ev-locale__col{border-left:0;border-top:1px solid var(--border-soft)}
}

/* ==========================================================================
   8. HEADER BUTTONS + BURGER
   The orange button carries navy text. See the contrast note at the top.
   ========================================================================== */
.ev-header__actions{display:flex;align-items:center;gap:9px;flex:none;margin-left:auto;
  padding-left:14px}

/* The button lives in components.css — it is used by the page as well as by
   the chrome, so it is not a chrome object. Chrome only sets its size. */
.ev-header .ev-btn,
.ev-utility .ev-btn,
.ev-drawer .ev-btn{--btn-h-local:46px;padding:0 20px;font-size:.92rem}
.ev-header .ev-btn svg,
.ev-utility .ev-btn svg,
.ev-drawer .ev-btn svg{width:17px;height:17px}

.ev-burger{display:none;width:46px;height:46px;place-items:center;border-radius:var(--r-md);
  border:1.5px solid var(--border);color:var(--ev-navy);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ev-burger:hover{background:var(--ev-navy-05);border-color:var(--action)}
.ev-burger svg{width:22px;height:22px}

/* Both of these are scoped to the actions row on purpose. `.ev-btn--offers`
   on its own ties with `.ev-btn{display:inline-flex}` in components.css,
   which loads later and would win — a media query does not add specificity.
   Scoping also keeps the rule from reaching a Travel Offers button that
   happens to sit in the page. */
@media(max-width:1180px){
  .ev-burger{display:grid}
  .ev-header__actions .ev-btn--offers{display:none}
}
@media(max-width:640px){
  .ev-header__actions .ev-btn--cta{display:none}
}


/* ==========================================================================
   9. MOBILE DRAWER
   ========================================================================== */
.ev-drawer{position:fixed;inset:0;z-index:var(--chrome-z-drawer);visibility:hidden;pointer-events:none}
.ev-drawer.is-open{visibility:visible;pointer-events:auto}
.ev-drawer__scrim{position:absolute;inset:0;background:rgba(17,72,115,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--dur-base) var(--ease)}
.ev-drawer.is-open .ev-drawer__scrim{opacity:1}
.ev-drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(400px,88vw);
  display:flex;flex-direction:column;background:var(--surface);box-shadow:var(--shadow-3);
  transform:translateX(102%);transition:transform var(--dur-base) var(--ease)}
.ev-drawer.is-open .ev-drawer__panel{transform:none}
.ev-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--border-soft);flex:none}
.ev-drawer__top .ev-logo img{height:38px}
.ev-drawer__close{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-sunken);color:var(--text-heading);flex:none;
  transition:background var(--dur-fast) var(--ease)}
.ev-drawer__close:hover{background:var(--ev-navy-09)}
.ev-drawer__close svg{width:19px;height:19px}
.ev-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:10px 12px}
.ev-drawer__nav > li + li{border-top:1px solid var(--border-soft)}
.ev-drawer__nav > li > a,
.ev-drawer__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 10px;font-size:1rem;font-weight:var(--fw-semi);color:var(--text-heading);text-align:left}
.ev-drawer__toggle svg{width:17px;height:17px;flex:none;color:var(--text-decorative);
  transition:transform var(--dur-base) var(--ease)}
.ev-drawer__toggle[aria-expanded="true"]{color:var(--ev-navy)}
.ev-drawer__toggle[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--accent)}
.ev-drawer__sub{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--dur-base) var(--ease)}
.ev-drawer__toggle[aria-expanded="true"] + .ev-drawer__sub{grid-template-rows:1fr}
.ev-drawer__sub > div{min-height:0;overflow:hidden;padding:0 10px 14px}
.ev-drawer__sub a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.92rem;
  color:var(--text-secondary);transition:background var(--dur-fast) var(--ease)}
.ev-drawer__sub a:hover{background:var(--ev-navy-05);color:var(--ev-navy)}
.ev-drawer__label{display:block;margin:10px 0 4px;font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ev-drawer__foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:16px 18px
  calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border-soft);
  background:var(--surface-sunken)}
.ev-drawer__foot .ev-locale{width:100%}
.ev-drawer__foot .ev-locale__btn{width:100%;border-radius:var(--r-pill);background:var(--surface)}
.ev-drawer__foot .ev-locale__panel{right:auto;left:0;bottom:calc(100% + 10px);top:auto;width:100%}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.ev-footer{position:relative;isolation:isolate;overflow:hidden;
  background:var(--chrome-footer-bg);color:var(--chrome-footer-fg);padding-top:var(--section-py)}
.ev-footer__watermark{position:absolute;z-index:-1;right:-70px;bottom:40px;width:420px;height:420px;
  opacity:.05;pointer-events:none}
.ev-footer h2,
.ev-footer strong,
.ev-footer b{color:#fff}
.ev-footer a{transition:color var(--dur-fast) var(--ease)}

.ev-footer__main{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--sp-7);
  padding-bottom:var(--section-py)}
.ev-footer__brand img{height:58px;width:auto;margin-bottom:16px;
  filter:brightness(0) invert(1)}
.ev-footer__brand p{font-size:var(--fs-sm);line-height:1.7;color:var(--ev-white-62);font-weight:var(--fw-light);
  max-width:34ch}
.ev-footer__col-title{font-size:.95rem;font-weight:var(--fw-bold);margin-bottom:16px;letter-spacing:.01em}
.ev-footer__links{display:flex;flex-direction:column;gap:10px}
.ev-footer__links a{font-size:var(--fs-sm);color:var(--ev-white-62)}
.ev-footer__links a:hover{color:var(--accent)}

@media(max-width:1040px){
  .ev-footer__main{grid-template-columns:repeat(2,1fr);gap:var(--sp-7) var(--sp-6)}
  .ev-footer__brand{grid-column:1/-1}
}
@media(max-width:520px){.ev-footer__main{grid-template-columns:1fr}}


/* ==========================================================================
   11. FOOTER — LOWER HALF
   Rebuilt. The old stack ran four different widths down the page: a long
   contact line, a licence sentence, a payment row and a newsletter, each
   finding its own edge. Now there are three bands of equal width, in the
   order a reader actually needs them:

       1. the newsletter   — the only thing here asking for an action
       2. four ways to reach us, as four equal blocks
       3. one trust line   — licence, payment, social

   ========================================================================== */

/* ---------- 1. newsletter, as a raised panel ---------- */
.ev-newsletter{padding:26px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.07);border:1px solid var(--chrome-footer-rule)}
.ev-newsletter__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.ev-newsletter h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-weight:var(--fw-bold)}
.ev-newsletter h2 svg{width:22px;height:22px;flex:none;color:var(--accent)}
.ev-newsletter p{margin-top:9px;font-size:var(--fs-sm);color:var(--ev-white-62);
  font-weight:var(--fw-light);max-width:46ch}
.ev-newsletter__form{display:flex;flex-wrap:wrap;gap:10px}
.ev-newsletter__field{flex:1;min-width:200px}
.ev-newsletter__input{width:100%;height:50px;padding:0 18px;border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);color:#fff;
  font-weight:var(--fw-medium);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.ev-newsletter__input::placeholder{color:rgba(255,255,255,.5)}
.ev-newsletter__input:focus{outline:0;border-color:var(--ev-sky);background:rgba(255,255,255,.14)}
.ev-newsletter__form .ev-btn{height:50px}
.ev-newsletter__note{flex:1 0 100%;font-size:.74rem;color:var(--ev-white-62)}
.ev-newsletter__note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ev-newsletter__status{flex:1 0 100%;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--accent)}
.ev-newsletter__status[hidden]{display:none}
@media(max-width:900px){
  .ev-newsletter{padding:20px}
  .ev-newsletter__inner{grid-template-columns:1fr;gap:var(--sp-5)}
}

/* ---------- 2. four ways to reach us ---------- */
.ev-fcontact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--sp-6)}
.ev-fcontact__item{display:flex;align-items:flex-start;gap:13px;padding:16px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.05);
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease)}
a.ev-fcontact__item:hover{background:rgba(255,255,255,.1);
  border-color:var(--chrome-footer-rule);transform:translateY(-2px)}
.ev-fcontact__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-md);background:rgba(255,255,255,.1);color:var(--ev-sky)}
.ev-fcontact__ic svg{width:19px;height:19px}
.ev-fcontact__ic--wa{background:rgba(37,211,102,.16);color:var(--whatsapp)}
.ev-fcontact__t{min-width:0}
.ev-fcontact__t small{display:block;font-size:.64rem;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ev-white-62)}
.ev-fcontact__t b{display:block;margin-top:4px;font-size:.95rem;font-weight:var(--fw-bold);
  color:#fff;overflow-wrap:anywhere}
.ev-fcontact__t em{display:block;margin-top:3px;font-style:normal;font-size:.76rem;
  color:var(--ev-white-62)}
@media(max-width:1040px){.ev-fcontact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ev-fcontact{grid-template-columns:1fr}}

/* ---------- 3. one trust line ---------- */
.ev-ftrust{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:16px var(--sp-6);margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:1px solid var(--chrome-footer-rule)}
/* licence and social share the first line; the payment chips take the second
   on their own, so a long list never pushes anything out of alignment */
.ev-ftrust > .ev-contactbar__licence{grid-column:1;grid-row:1}
.ev-ftrust > .ev-footer__social{grid-column:2;grid-row:1}
.ev-ftrust > .ev-footer__pay{grid-column:1/-1;grid-row:2;padding-bottom:var(--section-py)}
.ev-contactbar__licence{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);
  color:var(--ev-white-62)}
.ev-contactbar__licence svg{width:17px;height:17px;flex:none;color:var(--accent)}
.ev-contactbar__licence strong{color:#fff}

.ev-footer__pay{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ev-footer__pay > span:first-child{font-size:.62rem;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ev-white-62);margin-right:3px}
.ev-pay{display:inline-grid;place-items:center;height:26px;min-width:46px;padding:0 10px;
  border-radius:5px;background:#fff;color:var(--ev-navy);
  font-size:.62rem;font-weight:var(--fw-black);letter-spacing:.04em;text-transform:uppercase}
.ev-pay--wire{background:rgba(255,255,255,.14);color:#fff}

.ev-footer__social{display:flex;gap:7px}
.ev-footer__social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.09);color:#fff;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease)}
.ev-footer__social a:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.ev-footer__social svg{width:17px;height:17px}

@media(max-width:620px){
  .ev-ftrust{grid-template-columns:1fr;justify-items:start}
  .ev-ftrust > .ev-footer__social{grid-column:1;grid-row:2}
  .ev-ftrust > .ev-footer__pay{grid-row:3}
}


/* ==========================================================================
   13. FOOTER BAR + CREDIT
   ========================================================================== */
.ev-footer__bar{background:var(--chrome-footerbar-bg);font-size:var(--fs-xs);
  color:var(--ev-white-62)}
.ev-footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:18px 0}
.ev-footer__legal{display:flex;gap:18px}
.ev-footer__legal a:hover{color:var(--accent)}
.ev-credit{display:inline-flex;align-items:center;gap:6px}
.ev-credit svg{width:14px;height:14px;color:#E2574C}
.ev-credit a{color:#fff;font-weight:var(--fw-semi)}
.ev-credit a:hover{color:var(--accent)}
.ev-link-plain{text-decoration:underline;text-underline-offset:2px}


/* ==========================================================================
   14. PAYMENT ICONS
   Card marks are the schemes' own trademarks, so these are drawn as plain
   wordmark chips rather than copies of their logos.
   ========================================================================== */
.ev-footer__pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 0 0;
  border-top:1px solid var(--chrome-footer-rule);margin-top:var(--sp-6)}
.ev-footer__pay > span:first-child{font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ev-white-62);margin-right:4px}
.ev-pay{display:inline-grid;place-items:center;height:30px;min-width:52px;padding:0 11px;
  border-radius:6px;background:#fff;color:var(--ev-navy);
  font-size:.66rem;font-weight:var(--fw-black);letter-spacing:.04em;text-transform:uppercase}
.ev-pay--wire{background:rgba(255,255,255,.12);color:#fff}


/* ==========================================================================
   15. WHATSAPP FAB
   Sits above the app bar on mobile so the two never overlap.
   ========================================================================== */
.ev-whatsapp{position:fixed;right:18px;bottom:22px;z-index:var(--chrome-z-fab);
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:var(--whatsapp);box-shadow:var(--shadow-whatsapp);
  transition:transform var(--dur-fast) var(--ease)}
.ev-whatsapp:hover{transform:scale(1.07)}
.ev-whatsapp svg{width:31px;height:31px;fill:#fff}
/* Below 900px the app bar carries a WhatsApp destination of its own, and on
   a tour page the sticky price bar carries a third. One is enough: the FAB
   stands down rather than stacking two green circles over each other. */
@media(max-width:900px){
  .ev-whatsapp{display:none}
}


/* ==========================================================================
   16. APP-STYLE BOTTOM BAR
   Five destinations, thumb-height, native-app behaviour: it hides as you
   scroll down and comes back the moment you scroll up. Mobile only — on a
   desktop the header already carries all of this.
   ========================================================================== */
.ev-appbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--chrome-z-appbar);display:none;
  background:var(--appbar-bg);box-shadow:var(--appbar-shadow);
  padding-bottom:env(safe-area-inset-bottom);
  transition:transform var(--dur-base) var(--ease)}
.ev-appbar.is-hidden{transform:translateY(calc(100% + 2px))}
.ev-appbar__inner{display:grid;grid-template-columns:repeat(5,1fr);height:var(--appbar-h)}
.ev-appbar__item{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding-top:3px;
  font-size:.64rem;font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--appbar-fg);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast) var(--ease)}
.ev-appbar__item svg{width:22px;height:22px;stroke-width:1.9}
.ev-appbar__item:active{color:var(--appbar-fg-active)}
.ev-appbar__item[aria-current="page"],
.ev-appbar__item.is-active{color:var(--appbar-fg-active)}
.ev-appbar__item[aria-current="page"]::before,
.ev-appbar__item.is-active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
/* The WhatsApp slot: the ICON carries the brand green, the label does not.
   WhatsApp green on white is 1.6:1 and would be unreadable as 10px text. */
.ev-appbar__item--wa svg{fill:var(--whatsapp);stroke:none;width:23px;height:23px}
/* the middle slot is raised, like a native app's primary button */
.ev-appbar__item--search{color:var(--ev-navy)}
.ev-appbar__item--search .ev-appbar__pop{display:grid;place-items:center;width:46px;height:46px;
  margin-top:-20px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 18px rgba(240,144,31,.42);border:3px solid var(--appbar-bg)}
.ev-appbar__item--search .ev-appbar__pop svg{width:21px;height:21px;stroke-width:2.4}
.ev-appbar__item--search span{margin-top:-1px}

@media(max-width:900px){
  .ev-appbar{display:block}
  /* The fixed bar needs clear space under the page, and that space used to be
     padding on <body> — which rendered as a band of WHITE below the footer at
     the end of the scroll. The reserve lives on the footer bar instead, so
     the dark bar simply runs under the app bar and there is no seam. */
  .ev-footer__bar{padding-bottom:calc(var(--appbar-h) + env(safe-area-inset-bottom))}
}

/* ---------- search overlay opened from the app bar ---------- */
.ev-quick{position:fixed;inset:0;z-index:95;display:none;background:rgba(17,72,115,.55);
  backdrop-filter:blur(4px)}
.ev-quick.is-open{display:block}
.ev-quick__panel{position:absolute;left:0;right:0;top:0;padding:18px 16px 22px;background:var(--surface);
  border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:var(--shadow-3);
  animation:ev-quick-in var(--dur-base) var(--ease)}
@keyframes ev-quick-in{from{transform:translateY(-14px);opacity:.4}to{transform:none;opacity:1}}
.ev-quick__row{display:flex;gap:10px;align-items:center}
.ev-quick__input{flex:1;height:52px;padding:0 16px;border:1.5px solid var(--control-border);
  border-radius:var(--r-md);background:var(--surface);font-weight:var(--fw-medium)}
.ev-quick__input:focus{outline:0;border-color:var(--control-border-focus);
  box-shadow:var(--control-focus-shadow)}
.ev-quick__close{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-sunken);color:var(--text-heading)}
.ev-quick__close svg{width:19px;height:19px}
.ev-quick__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ev-quick__chips a{padding:8px 14px;border-radius:var(--r-pill);background:var(--surface-sunken);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary)}
.ev-quick__chips a:hover{background:var(--ev-navy-09);color:var(--ev-navy)}
.ev-quick__lab{margin-top:16px;font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}


/* ==========================================================================
   17. PRINT — a guest printing an itinerary does not need the chrome
   ========================================================================== */
@media print{
  .ev-promo,.ev-utility,.ev-header__actions,.ev-drawer,.ev-appbar,.ev-whatsapp,
  .ev-newsletter,.ev-quick,.evt-bar{display:none!important}
  .ev-header{position:static;box-shadow:none}
  .ev-footer{background:#fff;color:#000;padding-top:20px}
  .ev-footer__watermark{display:none}
}