/* ===================================================================
   TraveHub — content pages in the homepage design (content-fn.css)

   The 31 content templates (hotels, flights, eSIM, car rental, airport transfer,
   things to do, city guides, destinations, contact, legal, 404) are moving from the
   old pages.css look to the homepage's paper / ink / pen / stamp system, one page
   family per PR (the TraveHub redesign plan, 2026-10-15). Linked right after
   fn-base.css (the @font-face rules), after pages.css on pages still on it.

   Two kinds of page load this file:
   1. Pages still on pages.css (body without .cf). Only the shared header, phone menu
      and footer (src/_includes/site-header.njk, site-footer.njk) are in the new design.
      Everything here is scoped to .nav / .mnav / .foot, tokens included, so nothing
      reaches the old page body. The selectors carry the .nav/.mnav/.foot prefix on
      purpose: colors_and_type.css and pages.css style bare h2, p, a, a:hover (underline),
      a/button:focus-visible (6px corners) and .wrap (1080px), and a one-class rule
      would lose to them.
   2. Pages in the new design (<body class="cf">): the whole page uses the tokens and
      base below, without colors_and_type.css or pages.css. Night mode (body.dark, this
      visit only, as on the homepage and /services) is offered only there: the old page
      bodies have no night styles.

   Same values as home-fn.css / services-fn.css. Positioning is logical
   (inset-inline) for RTL parity.
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[data-en]{display:none}
html[lang="en"] [data-ar]{display:none}
html[lang="en"] [data-en]{display:revert}

/* ---------- tokens: the shell everywhere, the whole page on body.cf ---------- */
.nav,.mnav,.foot,body.cf{
  --fd:'Young Serif',Georgia,'Times New Roman',serif;--fb:'Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif;
  --fh:'Kalam','Segoe Print','Comic Sans MS',cursive;--fm:'Handjet','Courier New',monospace;--dark:#1D2233;
  --paper:#F2EADB;--paper2:#FBF6EC;--paper3:#E8DCC5;--card:#FFFDF8;--ink:#1D2233;--ink2:#4B5063;
  --pen:#0063DC;--pen2:#0A4FB0;--stamp:#C8176B;--manila:#E9D4A8;--sticky:#F7DF72;--photo:#FFFFFF;
  --line:rgba(29,34,51,.14);--line2:rgba(29,34,51,.34);--rule:rgba(0,99,220,.14);--shadow:rgba(29,34,51,.22);--hard:#1D2233;
}
body.dark .nav,body.dark .mnav,body.dark .foot,body.cf.dark{
  --paper:#0E1524;--paper2:#162037;--paper3:#1E2A45;--card:#1A2540;--ink:#ECE6D8;--ink2:#B4BBCB;
  --pen:#7FB2FF;--pen2:#A9CBFF;--stamp:#FF62AE;--manila:#CDB98F;--sticky:#E5C75A;--photo:#E9E4D8;
  --line:rgba(236,230,216,.14);--line2:rgba(236,230,216,.32);--rule:rgba(127,178,255,.12);--shadow:rgba(0,0,0,.5);--hard:#03060C;
}
html[dir="rtl"] :is(.nav,.mnav,.foot),html[dir="rtl"] body.cf{--fd:'Aref Ruqaa','Traditional Arabic',serif;--fh:'Aref Ruqaa','Traditional Arabic',serif}
.nav,.mnav,.foot{font-family:var(--fb);font-size:17px;line-height:1.55;color:var(--ink);letter-spacing:0;text-wrap:wrap;-webkit-font-smoothing:antialiased}
.nav a:hover,.mnav a:hover,.foot a:hover{text-decoration:none}
.nav :focus-visible,.mnav :focus-visible,.foot :focus-visible{outline:2.5px solid var(--pen);outline-offset:3px}
.nav .wrap,.foot .wrap{width:1240px;max-width:100%;margin:0 auto;padding:0 40px}
.nav .ic,.mnav .ic,.foot .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] :is(.nav,.mnav,.foot) .flip{transform:scaleX(-1)}
.foot .fx{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- logo (EN/AR × day/night) ---------- */
:is(.nav,.foot) .logo{display:flex;align-items:center;min-height:44px;flex:none;text-decoration:none}
:is(.nav,.foot) .logo img{display:block;height:38px;width:auto;max-width:none}
html[lang="ar"] :is(.nav,.foot) .logo [data-en],html:not([lang="ar"]) :is(.nav,.foot) .logo [data-ar]{display:none!important}
body.dark :is(.nav,.foot) .logo .lg-d,body:not(.dark) :is(.nav,.foot) .logo .lg-n{display:none!important}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:100;height:76px;background:var(--paper);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 1px 0 var(--line2),0 10px 24px -18px var(--shadow)}
.nav .nav-in{height:100%;display:flex;align-items:center;gap:26px}
.nav .links{display:flex;align-items:center;gap:4px;margin-inline-start:10px}
.nav .nl{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);font:500 16px/1 var(--fb);text-decoration:none;white-space:nowrap}
.nav .nl:hover{color:var(--pen)}
.nav .nl-ring{position:absolute;left:-2px;top:3px;width:calc(100% + 4px);height:calc(100% - 6px);overflow:visible;pointer-events:none}
.nav .nl-ring path{fill:none;stroke:var(--stamp);stroke-width:2;stroke-linecap:round}
.nav .nav-act{margin-inline-start:auto;display:flex;align-items:center;gap:10px;min-width:0}
/* .lang-btn, .mn-lang and .pc-stamp are links to the other language's page */
.nav .lang-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 16px/1 var(--fb);cursor:pointer;text-decoration:none}
.nav .lang-btn:hover{background:var(--paper3);color:var(--ink)}
.nav .icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:1.5px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .15s}
.nav .icon-btn:hover{background:var(--paper3)}
body:not(.dark) :is(.nav,.mnav) .i-sun,body.dark :is(.nav,.mnav) .i-moon{display:none}
.nav .burger{display:none}
.nav .burger .i-close{display:none}
.nav .burger[aria-expanded="true"] .i-menu{display:none}
.nav .burger[aria-expanded="true"] .i-close{display:block}
/* The page's own button (the old header's blue button: on 12 templates a /go/ partner link).
   The homepage's stamp button, header size. White on #C8176B is 5.5:1; at night the stamp
   is lighter, so the label goes dark. */
.nav .nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--stamp);color:#FFFFFF;font:700 15px/1.1 var(--fb);text-decoration:none;white-space:nowrap;outline:1.5px dashed rgba(255,255,255,.55);outline-offset:-5px;box-shadow:3px 3px 0 var(--hard);transition:transform .15s,box-shadow .15s}
.nav .nav-cta:hover{color:#FFFFFF;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard)}
.nav .nav-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard)}
.nav .nav-cta:focus-visible{outline:2.5px solid var(--pen);outline-offset:3px}
.nav .nav-cta-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.dark .nav .nav-cta,body.dark .nav .nav-cta:hover{color:#0E1524;outline-color:rgba(14,21,36,.35)}

/* ---------- phone menu ---------- */
.mnav{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;z-index:99;overflow-y:auto;padding:14px 22px 28px;background-color:var(--paper2);background-image:repeating-linear-gradient(transparent 0 43px,var(--rule) 43px 44px);border-top:1.5px solid var(--line2)}
.mnav.open{display:flex;flex-direction:column;animation:cfMenuIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes cfMenuIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
/* The cookie banner (#thConsent, z-index 2147483000 in consent.js) drops just under .mnav while
   the menu is open, so the menu is on top (as on /services and /guides). */
body:has(#mnav.open) #thConsent{z-index:98}
.mnav .mn-row{display:flex;align-items:baseline;gap:14px;min-height:60px;padding:12px 0;border-bottom:1.5px dashed var(--line2);color:var(--ink);font:400 30px/1.1 var(--fd);text-decoration:none}
html[dir="rtl"] .mnav .mn-row{font:700 25px/1.3 var(--fb)}
.mnav .mn-n{width:28px;flex:none;font:600 15px/1 var(--fm);letter-spacing:.14em;color:var(--stamp)}
html[dir="rtl"] .mnav .mn-n{text-align:right} /* dir=ltr digits: at the row edge, like the homepage menu */
.mnav .mn-row[aria-current] .mn-t{background:linear-gradient(transparent 60%,var(--sticky) 60%)}
body.dark .mnav .mn-row[aria-current] .mn-t{background:linear-gradient(transparent 60%,rgba(229,199,90,.35) 60%)}
.mnav .mn-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin-top:22px;padding:0 16px;border:1.5px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink);font:600 16px/1 var(--fb);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--hard)}
.mnav .mn-btn:hover{color:var(--ink)}
.mnav .mn-btn + .mn-btn{margin-top:14px}
.mnav .mn-lang{display:none}
body:not(.dark) .mnav .mn-day,body.dark .mnav .mn-night{display:none}

/* ---------- footer: postcard ---------- */
.foot{padding:64px 0 28px;background:var(--paper3)}
body:not(.cf) .foot{margin-top:48px} /* the space pages.css's footer kept above itself */
/* Nothing in the footer is on screen at first, so the browser skips its layout and paint until
   it comes near: its fonts (Kalam or Aref Ruqaa, Handjet) load then, not with the page. The
   size is only a placeholder for the scrollbar until it has been drawn once (auto). */
.foot{content-visibility:auto;contain-intrinsic-size:auto 760px}
.foot p,.foot h2,.foot ul{margin:0;font-family:inherit;letter-spacing:0;color:inherit}
.foot .postcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);background:var(--card);border:1.5px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 var(--hard);transform:rotate(-.4deg)}
.foot .pc-msg{position:relative;padding:36px 40px}
.foot .pc-msg::after{content:'';position:absolute;top:36px;bottom:36px;inset-inline-end:0;border-inline-end:1.5px solid var(--line2)}
.foot .pc-msg .logo{display:inline-flex}
.foot .pc-desc{margin:22px 0 0;max-width:26em;font:400 22px/1.45 var(--fh);color:var(--ink)}
html[dir="rtl"] .foot .pc-desc{font-size:24px;line-height:1.7}
.foot .pc-sl{margin:22px 0 4px;font-size:14px;line-height:1.55;color:var(--ink2)}
.foot .pc-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot .pc-social a{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink)}
.foot .pc-social a:hover{background:var(--ink);color:var(--paper)}
.foot .pc-contact{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.foot .pc-contact li{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.foot .pc-contact .ic{color:var(--stamp)}
.foot .pc-a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;line-height:1.3;text-decoration:none}
.foot .pc-a:hover{color:var(--pen);text-decoration:underline;text-underline-offset:4px}
.foot .pc-addr{padding:36px 40px 32px}
.foot .pc-stamp{position:absolute;top:22px;inset-inline-end:26px;z-index:2;width:112px;height:136px;padding:7px;border:0;text-decoration:none;background:radial-gradient(circle at 50% 50%,transparent 3.6px,var(--pen) 4px) -6px -6px/12px 12px;cursor:pointer;transform:rotate(4deg);filter:drop-shadow(0 4px 5px var(--shadow));transition:transform .2s}
.foot .pc-stamp:hover{transform:rotate(1deg) scale(1.03)}
.foot .pcs-in{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;padding:9px 5px;background:var(--pen);border:1.5px solid rgba(255,255,255,.55);color:#FFFFFF}
body.dark .foot .pcs-in{color:#0E1524;border-color:rgba(14,21,36,.35)}
.foot .pcs-t{font:600 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase}
html[dir="rtl"] .foot .pcs-t{font:600 12px/1 var(--fb);letter-spacing:0}
.foot .pcs-g{font:700 40px/1 var(--fb)}
.foot .pcs-l{font:600 14px/1 var(--fb)}
.foot .pc-mark{position:absolute;top:34px;inset-inline-end:128px;width:132px;height:132px;color:var(--ink2);opacity:.8;pointer-events:none;transform:rotate(-10deg)}
.foot .pc-addr.no-stamp .pc-mark{inset-inline-end:26px}
body:not(.dark) .foot .pc-mark{mix-blend-mode:multiply}
.foot .pm-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;filter:url(#cfRough)}
.foot .pm-o{fill:none;stroke:currentColor;stroke-width:2.4}
.foot .pm-i{fill:none;stroke:currentColor;stroke-width:1.2}
.foot .rch{position:absolute;left:50%;top:9px;width:12px;height:57px;margin-left:-6px;transform-origin:50% 100%;text-align:center;font:600 11px/1 var(--fm)}
.foot .pm-c{position:absolute;left:0;right:0;top:44px;text-align:center;font:700 18px/1.2 'Aref Ruqaa','Traditional Arabic',serif}
.foot .pm-y{position:absolute;left:0;right:0;top:74px;text-align:center;font:600 13px/1 var(--fm);letter-spacing:.2em}
.foot .pm-waves{position:absolute;top:30px;inset-inline-end:118px;width:190px;height:66px;overflow:visible}
.foot .pm-waves path{fill:none;stroke:currentColor;stroke-width:1.6}
.foot .pc-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:150px}
.foot .pc-h{margin:0 0 4px;font:400 21px/1.2 var(--fh);letter-spacing:0;color:var(--stamp)}
.foot .pc-col .pc-a{display:flex;border-bottom:1px dashed var(--line2)}
/* Links that were in this page's old footer and are not in the standard columns
   (its city guide, its city's hotels, ...): kept so no page loses a footer link. */
.foot .pc-rel{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin-top:22px;padding-top:10px;border-top:1.5px dashed var(--line2)}
.foot .pc-rel .pc-h{margin:0;margin-inline-end:4px}
.foot .foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin-top:26px;font-size:14px;color:var(--ink2)}
.foot .foot-bar .pc-a{font-size:14px}

/* ---------- widths ---------- */
/* Header: the five links need the full width; with the page's button next to the language
   link and night toggle they fit from 1100px. Below that they move into the menu. */
@media (max-width:1099px){
  .nav .links,.nav .nav-act .theme{display:none}
  .nav .burger{display:grid}
}
@media (min-width:1100px){
  .mnav,.mnav.open{display:none}
}
@media (max-width:980px){
  .foot{contain-intrinsic-size:auto 1100px}
  .foot .postcard{grid-template-columns:1fr}
  .foot .pc-msg::after{top:auto;bottom:0;left:40px;right:40px;border-inline-end:0;border-bottom:1.5px solid var(--line2)}
  .foot .pc-cols{margin-top:0}
  .foot .pc-desc{margin-top:120px}
}
/* Phones: logo, the page's button and the menu. The language link moves into the menu
   (and stays on the footer's stamp): with the button there is no room for it. */
@media (max-width:760px){
  .nav{height:64px}
  .nav .wrap,.foot .wrap{padding:0 20px}
  .nav .nav-in{gap:10px}
  .nav .nav-act{gap:8px}
  .nav .logo img{height:32px}
  .nav .lang-btn{display:none}
  .nav .nav-cta{padding:0 14px;font-size:14px}
  .mnav{top:64px}
  .mnav .mn-lang{display:flex}
  /* the footer as on /services */
  .foot{padding:44px 0 24px;contain-intrinsic-size:auto 1300px}
  .foot .pc-msg{padding:24px 20px}
  .foot .pc-msg::after{left:20px;right:20px}
  .foot .pc-desc{margin-top:150px;font-size:20px}
  html[dir="rtl"] .foot .pc-desc{font-size:22px}
  .foot .pc-addr{padding:20px}
  .foot .pc-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .foot .pc-stamp{top:18px;inset-inline-end:16px;width:98px;height:118px}
  .foot .pcs-g{font-size:32px}
  .foot .pc-mark{top:56px;inset-inline-end:100px}
  .foot .pc-addr.no-stamp .pc-mark{top:24px;inset-inline-end:16px}
  .foot .pm-waves{display:none}
}
@media (max-width:389px){
  .nav .wrap,.foot .wrap{padding:0 16px}
  .nav .nav-in,.nav .nav-act{gap:8px}
  .nav .logo img{height:28px}
  .nav .nav-cta{padding:0 12px}
}
/* 320-359px (iPhone SE 1st gen and the like): the longest English labels still end in "…"
   rather than widening the page */
@media (max-width:359px){
  .nav .logo img{height:26px}
  .nav .nav-cta{padding:0 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .mnav.open{animation:none}
  .nav,.nav .nav-cta,.foot .pc-stamp{transition:none}
}

/* ===================================================================
   Pages in the new design: <body class="cf">
   No colors_and_type.css or pages.css on these pages. consent.js (cookie banner) and
   hotel-notice.js read the old variable names, set here with the homepage's values
   (as home-fn.css does).
   =================================================================== */
body.cf{
  --brand-blue:#0063DC;--brand-pink:#C8176B;--brand-dark:#1D2233;--blue-700:#0A4FB0;--blue-50:#EAF1FB;
  --bg-surface:#FFFDF8;--bg-subtle:#F1EADC;--border-default:rgba(29,34,51,.2);--border-subtle:rgba(29,34,51,.12);
  --fg-primary:#1D2233;--fg-secondary:#4B5063;--fg-tertiary:#6B6F7E;
  --font-body:'Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif;--font-display:'Young Serif',Georgia,serif;
  --radius-md:10px;--radius-lg:12px;--radius-xl:14px;
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
@media (prefers-reduced-motion:no-preference){html:has(body.cf){scroll-behavior:smooth}}
body.cf a{color:var(--pen)}
body.cf a:hover{color:var(--pen2)}
body.cf :focus-visible{outline:2.5px solid var(--pen);outline-offset:3px}
body.cf img{max-width:100%}
body.cf .wrap{width:1240px;max-width:100%;margin:0 auto;padding:0 40px}
body.cf .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] body.cf .flip{transform:scaleX(-1)}
/* handwritten overline above a heading, as on the homepage */
body.cf .over{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:400 23px/1.2 var(--fh);color:var(--pen)}
body.cf .over::before{content:'';width:34px;height:2px;flex:none;border-radius:2px;background:currentColor;transform:rotate(-8deg)}
html[dir="rtl"] body.cf .over{font-size:25px}
/* buttons: the stamp (main), ink outline (second) */
body.cf .btn-stamp,body.cf .btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:10px;font:700 17px/1.1 var(--fb);text-decoration:none;transition:transform .15s,box-shadow .15s}
body.cf .btn-stamp{border:0;background:var(--stamp);color:#FFFFFF;outline:2px dashed rgba(255,255,255,.55);outline-offset:-7px;box-shadow:3px 3px 0 var(--hard)}
body.cf .btn-ink{border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font-weight:600;box-shadow:3px 3px 0 var(--hard)}
body.cf .btn-stamp:hover{color:#FFFFFF}
body.cf .btn-ink:hover{color:var(--ink)}
body.cf :is(.btn-stamp,.btn-ink):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard)}
body.cf :is(.btn-stamp,.btn-ink):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard)}
body.cf :is(.btn-stamp,.btn-ink):focus-visible{outline:2.5px solid var(--pen);outline-offset:3px}
body.cf.dark .btn-stamp,body.cf.dark .btn-stamp:hover{color:#0E1524;outline-color:rgba(14,21,36,.35)}
/* reading progress bar created by pages.js (when a page in the new design loads it) */
body.cf #pProgress{position:fixed;left:0;top:0;right:0;z-index:200;height:3px;background:var(--stamp);transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] body.cf #pProgress{transform-origin:100% 50%}
@media (max-width:760px){
  body.cf{font-size:16px}
  body.cf .wrap{padding:0 20px}
  body.cf .over{font-size:20px}
  html[dir="rtl"] body.cf .over{font-size:22px}
}
@media (max-width:389px){body.cf .wrap{padding:0 16px}}
@media (prefers-reduced-motion:reduce){body.cf :is(.btn-stamp,.btn-ink){transition:none}}

/* ---------- 404: a luggage tag that lost its way ---------- */
.nf{position:relative;padding:48px 0 104px}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.nf-h1{margin:0;font:400 72px/1.04 var(--fd);letter-spacing:-.015em;text-wrap:balance}
html[dir="rtl"] .nf-h1{font:700 64px/1.3 var(--fd);letter-spacing:0}
.nf-lead{margin:20px 0 0;max-width:30em;font-size:19px;line-height:1.6;color:var(--ink2)}
.nf-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.nf-art{position:relative;justify-self:center;width:340px;height:420px}
.nf-tag{position:absolute;top:96px;left:34px;width:272px;height:300px;transform:rotate(-7deg)}
.nf-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nf-str{fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round}
.nf-shadow{fill:var(--hard)}
.nf-fill{fill:var(--manila);stroke:var(--ink);stroke-width:1.5}
.nf-in{fill:none;stroke:rgba(29,34,51,.4);stroke-width:1.2;stroke-dasharray:5 4}
.nf-hole{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
/* the tag's own text stays dark on manila, by day and by night */
.nf-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:64px 28px 20px;color:#1D2233;text-align:center}
.nf-k{font:600 16px/1 var(--fm);letter-spacing:.3em;color:#4B5063}
.nf-code{margin-top:6px;font:700 100px/.9 var(--fm);letter-spacing:.04em}
.nf-rows{display:flex;flex-direction:column;gap:7px;align-self:stretch;margin-top:14px;padding-top:12px;border-top:1.5px dashed rgba(29,34,51,.4);font:600 17px/1 var(--fm);letter-spacing:.16em;text-align:start}
.nf-rows b{display:inline-block;width:62px;font-weight:600;color:#8A1250}
.nf-bars{display:block;width:100%;height:26px;margin-top:auto;fill:#1D2233}
.nf-stamp{position:absolute;top:262px;left:182px;display:grid;place-items:center;width:156px;height:156px;border:3px solid var(--stamp);border-radius:50%;color:var(--stamp);text-align:center;transform:rotate(-16deg)}
body:not(.dark) .nf-stamp{mix-blend-mode:multiply}
.nf-stamp::before{content:'';position:absolute;inset:7px;border:1.5px dashed var(--stamp);border-radius:50%}
.nf-stamp span{display:block;padding:0 20px;font:600 22px/1.15 var(--fm);letter-spacing:.14em;text-transform:uppercase}
html[dir="rtl"] .nf-stamp span{font:700 21px/1.4 var(--fb);letter-spacing:0}
@media (max-width:980px){
  .nf-grid{grid-template-columns:1fr;gap:20px}
  .nf-art{order:-1;width:300px;height:330px}
  .nf-tag{top:70px;left:38px;width:224px;height:248px}
  .nf-card{padding:54px 22px 16px}
  .nf-code{font-size:80px}
  .nf-rows{font-size:15px;gap:6px}
  .nf-rows b{width:54px}
  .nf-stamp{top:206px;left:170px;width:124px;height:124px}
  .nf-stamp span{font-size:18px;padding:0 16px}
  html[dir="rtl"] .nf-stamp span{font-size:17px}
}
@media (max-width:760px){
  .nf{padding:16px 0 72px}
  .nf-h1{font-size:44px}
  html[dir="rtl"] .nf-h1{font-size:40px}
  .nf-lead{font-size:17px}
  .nf-links{gap:12px}
  .nf-links a{flex:1 1 auto}
}
@media (max-width:389px){
  .nf-art{width:288px}
  .nf-tag{left:32px}
  .nf-stamp{left:164px}
}

/* ===================================================================
   Content parts (body.cf): the pieces every redesigned family builds its body from.
   First used by the hotels family (/hotels, /hotels-cairo, -dubai, -istanbul).
   Everything is scoped to body.cf: the pages still on pages.css load this file too
   (for the header and footer), and their bodies must not change.
   =================================================================== */
/* sections */
body.cf .sec{position:relative;padding:64px 0}
body.cf .sec.cont{padding-top:0} /* follows a section on the same paper: one gap, not two */
body.cf .sec.band{background:var(--paper3)}
body.cf .sec.band .over{color:var(--pen2)} /* pen blue is 4.1:1 on the darker paper */
body.cf .sec.grid{background-color:var(--paper);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:28px 28px}
body.cf .sec-head{position:relative;margin:0 0 32px;max-width:780px}
body.cf .h2{margin:0;font:400 46px/1.08 var(--fd);letter-spacing:-.01em;text-wrap:balance}
html[dir="rtl"] body.cf .h2{font:700 38px/1.35 var(--fb);letter-spacing:0}
body.cf .sub{margin:12px 0 0;max-width:40em;font-size:18px;color:var(--ink2)}
/* scroll reveal (pages.js adds .in at 12% in view). Only with scripting on and motion
   allowed: without either, nothing waits to be revealed. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  body.cf .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  body.cf .reveal.in{opacity:1;transform:none}
}
body.cf .ic-f{fill:currentColor;stroke:none}

/* paper hero: breadcrumb, overline, display heading with one marked word, lead; the
   page's photo as a taped polaroid with a rubber stamp */
body.cf .chero{position:relative;padding:4px 0 36px}
body.cf .chero-in{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:48px;align-items:center}
body.cf .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0;font-size:15px;color:var(--ink2)}
body.cf .crumb a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
body.cf .crumb a:hover{color:var(--pen)}
body.cf .chero .over{margin-top:26px}
body.cf .chero-h1{margin:10px 0 0;font:400 clamp(44px,5.2vw,72px)/1.04 var(--fd);letter-spacing:-.015em;text-wrap:balance}
html[dir="rtl"] body.cf .chero-h1{font:700 clamp(42px,4.8vw,66px)/1.3 var(--fd);letter-spacing:0}
body.cf .mk{position:relative;display:inline-block;color:var(--pen)}
body.cf .swo{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.28em;overflow:visible;pointer-events:none}
body.cf .swo path{fill:none;stroke:var(--stamp);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 1}
@media (prefers-reduced-motion:no-preference){body.cf .swo path{animation:cfDraw 1.1s .35s cubic-bezier(.6,0,.2,1) both}}
@keyframes cfDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
body.cf .chero-lead{margin:20px 0 0;max-width:32em;font-size:19px;color:var(--ink2)}
body.cf .chero-art{position:relative;justify-self:center;width:420px;height:410px}
body.cf .print{position:absolute;top:18px;inset-inline-start:22px;width:340px;margin:0;padding:14px 14px 0;background:var(--photo);color:#1D2233;transform:rotate(2.5deg);box-shadow:0 24px 34px -20px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.14)}
html[dir="rtl"] body.cf .print{transform:rotate(-2.5deg)}
body.cf .print img{display:block;width:100%;height:262px;object-fit:cover;background:#CFC6B4}
body.cf .print-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;height:58px;padding:0 4px}
body.cf .print-city{font:400 25px/1.1 var(--fh);white-space:nowrap}
body.cf .tape{position:absolute;top:-13px;z-index:1;width:92px;height:27px;background:rgba(244,182,63,.45);pointer-events:none}
body.cf .print .tape.t1{left:-16px;transform:rotate(-24deg)}
body.cf .print .tape.t2{right:-18px;transform:rotate(28deg)}
body.cf .cstamp{position:absolute;bottom:8px;inset-inline-end:2px;z-index:2;width:134px;height:134px;display:grid;place-items:center;color:var(--stamp);transform:rotate(-14deg);pointer-events:none}
body.cf:not(.dark) .cstamp{mix-blend-mode:multiply}
body.cf .cstamp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.cf .cs-o{fill:none;stroke:currentColor;stroke-width:3.4}
body.cf .cs-i{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:5 3}
body.cf .cs-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100px;line-height:1;text-align:center}
body.cf .cs-code{font:700 40px/1 var(--fm);letter-spacing:.06em}
body.cf .cs-t{font:600 12px/1.1 var(--fm);letter-spacing:.16em;text-transform:uppercase}
html[dir="rtl"] body.cf .cs-t{font:700 12px/1.3 var(--fb);letter-spacing:0}

/* buttons and links: the stamp and ink buttons are above (404); the pen link points on */
body.cf .plink{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;color:var(--pen);font-weight:600;text-decoration:none}
body.cf .plink .ic{width:18px;height:18px;transition:translate .2s}
body.cf .plink:hover .ic{translate:4px 0}
html[dir="rtl"] body.cf .plink:hover .ic{translate:-4px 0}

/* cards: ink outline and a hard shadow; with a photo on top (.kcard.ph), the photo and the
   text part are joined by a ticket's perforation */
body.cf .kgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
body.cf .kcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 14px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--hard);transition:transform .18s,box-shadow .18s}
body.cf .kcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--hard)}
body.cf .kcard .plink{margin-top:auto}
body.cf .kcard .plink::after{content:'';position:absolute;inset:0;border-radius:14px} /* the whole card is the link's target */
body.cf .kc-ic{display:grid;place-items:center;width:50px;height:50px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper2);color:var(--pen)}
body.cf .kc-ic .ic{width:23px;height:23px}
body.cf .kc-h{margin:4px 0 0;font:400 25px/1.15 var(--fd)}
html[dir="rtl"] body.cf .kc-h{font:700 20px/1.4 var(--fb)}
body.cf .kc-p{margin:0;font-size:16px;color:var(--ink2)}
body.cf .kcard.ph{padding:10px 10px 12px}
body.cf .kc-ph{position:relative;display:block;height:200px;border-radius:8px;overflow:hidden;background:#CFC6B4}
body.cf .kc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.cf .kc-code{position:absolute;top:10px;inset-inline-end:10px;padding:6px 10px;border-radius:6px;background:var(--paper2);color:var(--ink);font:700 16px/1 var(--fm);letter-spacing:.12em}
body.cf .kc-perf{position:relative;display:block;height:22px;margin:0 -10px}
body.cf .kc-perf::before{content:'';position:absolute;left:16px;right:16px;top:10px;border-top:2px dashed var(--line2)}
body.cf .kc-perf i{position:absolute;top:-1px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
body.cf .kc-perf i:first-child{left:-12px;clip-path:inset(0 0 0 50%)}
body.cf .kc-perf i:last-child{right:-12px;clip-path:inset(0 50% 0 0)}
body.cf .kc-b{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;padding:0 12px}

/* luggage tags hanging from a twine (a list of places) */
body.cf .tagrail{position:relative;padding-top:30px}
body.cf .twine{position:absolute;left:0;top:0;width:100%;height:44px;overflow:visible;pointer-events:none}
body.cf .twine path{fill:none;stroke:var(--ink2);stroke-width:1.6}
body.cf .ltags{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
body.cf .ltag{--tk:#8A1250;--t2:#4B5063;position:relative;display:flex;flex-direction:column;gap:8px;margin-top:22px;padding:38px 20px 20px;background:var(--manila);color:#1D2233;border:1.5px solid rgba(29,34,51,.6);border-radius:10px 10px 16px 16px;box-shadow:0 14px 16px -12px rgba(0,0,0,.45);transform-origin:50% 19px}
body.cf.dark .ltag{--tk:#701040;--t2:#3A3F50}
body.cf .ltag::before{content:'';position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px rgba(29,34,51,.3)}
body.cf .ltag::after{content:'';position:absolute;bottom:calc(100% - 19px);left:50%;width:1.6px;height:var(--sl,44px);margin-left:-.8px;background:var(--ink2)}
body.cf .ltags>li:nth-child(4n+1){--sl:46px;transform:rotate(-2.5deg)}
body.cf .ltags>li:nth-child(4n+2){--sl:41px;transform:rotate(2deg)}
body.cf .ltags>li:nth-child(4n+3){--sl:41px;transform:rotate(-1.5deg)}
body.cf .ltags>li:nth-child(4n+4){--sl:46px;transform:rotate(2.5deg)}
body.cf .ltag-n{font:700 17px/1 var(--fm);letter-spacing:.14em;color:var(--tk)}
body.cf .ltag-h{margin:0;font:400 24px/1.15 var(--fd)}
html[dir="rtl"] body.cf .ltag-h{font:700 20px/1.4 var(--fb)}
body.cf .ltag-p{margin:0;font-size:15px;line-height:1.55;color:var(--t2)}
body.cf .ltag-k{align-self:flex-start;margin-top:auto;padding:4px 9px 3px;border:1.5px solid var(--tk);border-radius:5px;color:var(--tk);font:600 15px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
html[dir="rtl"] body.cf .ltag-k{padding:3px 9px;font:700 13px/1.3 var(--fb);letter-spacing:0;transform:rotate(3deg)}

/* door hangers (three levels: card, manila, ink) */
body.cf .hangers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1000px}
body.cf .hanger{--hb:var(--card);--ht:var(--ink);--h2:var(--ink2);--hs:var(--pen);--hole:var(--paper3);position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:100px 22px 28px;background:var(--hb);color:var(--ht);border:1.5px solid var(--ink);border-radius:20px 20px 14px 14px;box-shadow:6px 6px 0 var(--hard);text-align:center;transform-origin:50% 52px}
body.cf .hanger::before{content:'';position:absolute;top:22px;left:50%;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:var(--hole);border:1.5px solid var(--ink)}
body.cf .hanger::after{content:'';position:absolute;top:47px;inset-inline-start:calc(50% + 27px);inset-inline-end:-1.5px;height:10px;background:var(--hole);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
body.cf .hangers>li:nth-child(1){transform:rotate(-2deg)}
body.cf .hangers>li:nth-child(2){--hb:var(--manila);--ht:#1D2233;--h2:#4B5063;--hs:#8A1250;transform:rotate(1.5deg)}
body.cf .hangers>li:nth-child(3){--hb:var(--ink);--ht:var(--paper);--h2:var(--paper3);--hs:#F7DF72;transform:rotate(-1deg)}
body.cf.dark .hangers>li:nth-child(2){--h2:#3A3F50;--hs:#701040}
body.cf.dark .hangers>li:nth-child(3){--h2:#3A4256;--hs:#A3125A}
body.cf .hg-stars{display:flex;gap:3px;color:var(--hs)}
body.cf .hg-stars .ic{width:22px;height:22px}
body.cf .hg-h{margin:2px 0 0;font:400 26px/1.15 var(--fd)}
html[dir="rtl"] body.cf .hg-h{font:700 21px/1.4 var(--fb)}
body.cf .hg-price{margin:0;font:700 24px/1 var(--fm);letter-spacing:.06em}
body.cf .hg-p{margin:0;font-size:15px;line-height:1.55;color:var(--h2)}
body.cf .hnote{margin:30px 0 0;font:400 19px/1.4 var(--fh);color:var(--ink2)}
html[dir="rtl"] body.cf .hnote{font-size:21px;line-height:1.6}

/* a notebook page of tips */
body.cf .notepad{position:relative;max-width:880px;margin-top:14px;padding:34px 34px 28px;padding-inline-start:86px;background-color:var(--paper2);background-image:repeating-linear-gradient(transparent 0 35px,var(--rule) 35px 36px);background-position:0 26px;border:1.5px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 var(--hard)}
body.cf .notepad::before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:60px;border-inline-start:2px solid var(--stamp);opacity:.45}
body.cf .notepad::after{content:'';position:absolute;top:-10px;left:28px;right:28px;height:20px;background:radial-gradient(circle,var(--paper) 0 5px,var(--ink) 5.5px 7px,transparent 7.5px) 0 0/36px 20px repeat-x}
body.cf .np-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
body.cf .np-list li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.65}
body.cf .np-list .ic{margin-top:4px;color:var(--pen);stroke-width:2.6}

/* the stay pass: a boarding-pass card with a torn-off stub. At night it stays a light
   ticket on the dark page (as /services' boarding pass), with the light page's colours. */
body.cf .spass{--field:#F4EDDF;position:relative;display:flex;align-items:stretch;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--hard)}
body.cf.dark .spass{--card:#F1EADC;--ink:#1D2233;--ink2:#4B5063;--line2:rgba(29,34,51,.34);--paper2:#FBF6EC;--paper3:#E8DCC5;--pen:#0063DC;--pen2:#0A4FB0;--stamp:#C8176B;--field:#E9E0CE;border-color:#ECE6D8;color-scheme:light}
body.cf .sp-main{flex:1;min-width:0;padding:24px 32px 30px}
body.cf .sp-k{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ink2)}
body.cf .sp-k b{font:600 16px/1 var(--fm);letter-spacing:.14em}
body.cf .sp-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 32px}
body.cf .sp-h{margin:0;font:400 40px/1.08 var(--fd);color:var(--ink)}
html[dir="rtl"] body.cf .sp-h{font:700 32px/1.35 var(--fb)}
body.cf .sp-p{margin:10px 0 0;max-width:36em;font-size:17px;color:var(--ink2)}
body.cf .sp-cta .btn-stamp{flex:none;min-height:58px;padding:0 28px;font-size:18px}
body.cf.dark .spass .btn-stamp{color:#FFFFFF;outline-color:rgba(255,255,255,.55)}
body.cf .sp-stub{position:relative;flex:none;width:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 10px;border-inline-start:2px dashed var(--line2)}
body.cf .sp-stub i{position:absolute;inset-inline-start:-14px;width:26px;height:26px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
body.cf.dark .sp-stub i{background:#0E1524;border-color:#ECE6D8}
body.cf .sp-stub i:first-of-type{top:-13px;clip-path:inset(50% 0 0 0)}
body.cf .sp-stub i:last-of-type{bottom:-13px;clip-path:inset(0 0 50% 0)}
body.cf .sp-code{font:700 30px/1 var(--fm);letter-spacing:.08em;color:var(--ink)}
/* the barcode's bars run across the stub: stacked down a tall stub, side by side on a wide one */
body.cf .sp-bars{--bd:180deg;display:block;width:62px;height:96px;background:repeating-linear-gradient(var(--bd),var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 6px,transparent 6px 8px,var(--ink) 8px 10px,transparent 10px 12px,var(--ink) 12px 13px,transparent 13px 16px,var(--ink) 16px 19px,transparent 19px 20px,var(--ink) 20px 21px,transparent 21px 24px)}
body.cf .sp-lbl{font:600 12px/1 var(--fm);letter-spacing:.24em;color:var(--ink2)}

/* affiliate disclosure under the last band */
body.cf .disc{margin:26px auto 0;max-width:60em;text-align:center;font-size:14px;line-height:1.6;color:var(--ink2)}
body.cf .disc a{color:var(--pen2);font-weight:600}

@media (max-width:980px){
  body.cf .chero-in{grid-template-columns:1fr;gap:6px}
  body.cf .chero-art{width:340px;height:330px}
  body.cf .print{width:282px;top:16px}
  body.cf .print img{height:210px}
  body.cf .cstamp{width:112px;height:112px}
  body.cf .cs-code{font-size:33px}
  body.cf .tagrail{padding-top:0}
  body.cf .twine,body.cf .ltag::after{display:none}
  body.cf .ltags{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.cf .hangers{gap:22px}
  body.cf .hanger{padding:94px 16px 24px}
}
@media (max-width:760px){
  body.cf .sec{padding:48px 0}
  body.cf .sec-head{margin-bottom:24px}
  body.cf .h2{font-size:34px}
  html[dir="rtl"] body.cf .h2{font-size:28px}
  body.cf .sub{font-size:16px}
  body.cf .chero{padding-bottom:20px}
  body.cf .chero .over{margin-top:20px}
  body.cf .chero-lead{font-size:17px}
  body.cf .kgrid{grid-template-columns:1fr;gap:20px}
  body.cf .hangers{grid-template-columns:1fr;max-width:420px;gap:26px}
  body.cf .notepad{padding:30px 20px 22px;padding-inline-start:52px}
  body.cf .notepad::before{inset-inline-start:36px}
  body.cf .notepad::after{left:16px;right:16px}
  body.cf .np-list li{font-size:16px}
  body.cf .spass{flex-direction:column}
  body.cf .sp-main{padding:20px 20px 24px}
  body.cf .sp-cta{flex-direction:column;align-items:stretch}
  body.cf .sp-h{font-size:32px}
  html[dir="rtl"] body.cf .sp-h{font-size:26px}
  body.cf .sp-stub{width:auto;flex-direction:row;padding:14px 20px;border-inline-start:0;border-top:2px dashed var(--line2)}
  body.cf .sp-stub i:first-of-type{top:-14px;inset-inline-start:-14px;clip-path:inset(0 0 0 50%)}
  body.cf .sp-stub i:last-of-type{top:-14px;bottom:auto;inset-inline-start:auto;inset-inline-end:-14px;clip-path:inset(0 50% 0 0)}
  html[dir="rtl"] body.cf .sp-stub i:first-of-type{clip-path:inset(0 50% 0 0)}
  html[dir="rtl"] body.cf .sp-stub i:last-of-type{clip-path:inset(0 0 0 50%)}
  body.cf .sp-bars{--bd:90deg;width:120px;height:30px}
}
@media (max-width:560px){
  body.cf .ltags{grid-template-columns:1fr;max-width:420px}
}
@media (max-width:389px){
  body.cf .chero-art{width:288px;height:300px}
  body.cf .cstamp{inset-inline-end:10px}
  body.cf .print{width:250px;inset-inline-start:10px}
  body.cf .print img{height:186px}
  body.cf .cstamp{width:100px;height:100px}
  body.cf .cs-code{font-size:29px}
  body.cf .cs-t{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  body.cf .kcard,body.cf .plink .ic{transition:none}
}

/* ===================================================================
   Hotels family: the Stay22 map card and the /hotels search form
   (hotel-map.js fills .hmap-frame, sets .is-off, and runs #hsForm; consent.js keeps
   .th-await-consent on <html> until the widgets are allowed). The guides' map blocks
   are still on pages.css.
   =================================================================== */
/* the map in a taped journal card; while it loads, grid paper shows through */
body.cf .mapcard{position:relative;padding:18px 18px 8px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;box-shadow:7px 7px 0 var(--hard)}
body.cf .mapcard .tape.m1{inset-inline-start:56px;transform:rotate(-3deg)}
body.cf .mapcard .tape.m2{top:-12px;inset-inline-end:180px;width:84px;transform:rotate(4deg)}
body.cf .hmap{position:relative;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
body.cf .hmap-frame,body.cf .hmap-gate,body.cf .hmap-off{background-color:var(--paper2);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px}
body.cf .hmap-frame{position:relative;height:560px}
body.cf .hmap-frame iframe{display:block;width:100%;height:100%;border:0}
body.cf .hmap-gate,body.cf .hmap-off{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:380px;padding:40px 20px}
.th-await-consent body.cf .hmap-gate,body.cf .hmap.is-off .hmap-off{display:flex}
.th-await-consent body.cf .hmap-frame,body.cf .hmap.is-off .hmap-frame,body.cf .hmap.is-off .hmap-gate{display:none}
@media (scripting:none){body.cf .hmap-frame{display:none}} /* the <noscript> note stands alone */
/* before consent (EU/UK/EFTA): a manila card with the button */
body.cf .gate-card{--gl:#0A4FB0;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(350px,100%);padding:24px 22px 20px;background:var(--manila);color:#1D2233;border:1.5px solid #1D2233;border-radius:10px;box-shadow:4px 4px 0 var(--hard);transform:rotate(-1.5deg);text-align:center}
body.cf.dark .gate-card{--gl:#073B85}
body.cf .gate-pin{display:grid;place-items:center;width:54px;height:54px;border:2px solid #C8176B;border-radius:50%;background:#FFFDF8;color:#C8176B}
body.cf .gate-pin .ic{width:25px;height:25px}
body.cf .gate-card p{margin:0;font-size:15px;line-height:1.6}
body.cf .gate-card p a{color:var(--gl);font-weight:600}
body.cf .gate-card .btn-stamp{width:100%}
body.cf.dark .gate-card .btn-stamp{background:#C8176B;color:#FFFFFF;outline-color:rgba(255,255,255,.55)}
/* no map (not set up, or no JavaScript): a sticky note with the Booking.com search */
body.cf .off-note{position:relative;display:flex;flex-direction:column;gap:16px;width:min(340px,100%);padding:26px 24px 22px;background:var(--sticky);color:#1D2233;border-radius:2px 2px 18px 2px;transform:rotate(-2deg);box-shadow:0 14px 20px -12px var(--shadow)}
body.cf .off-note::before{content:'';position:absolute;top:-11px;left:50%;width:74px;height:22px;margin-left:-37px;background:rgba(255,255,255,.5);transform:rotate(3deg)}
body.cf.dark .off-note::before{background:rgba(255,255,255,.28)}
body.cf .off-note p{margin:0;font-size:15px;line-height:1.6}
body.cf .off-h{display:block;margin-bottom:4px;font:400 23px/1.25 var(--fh)}
html[dir="rtl"] body.cf .off-h{font-size:25px;line-height:1.4}
body.cf .off-note .btn-ink{--card:#FFFDF8;--ink:#1D2233;--hard:#1D2233;min-height:50px}
body.cf .hmap-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;margin:6px 2px 0;font-size:14px;line-height:1.5;color:var(--ink2)}
body.cf .hf-t{display:flex;align-items:center;gap:8px;padding:6px 0}
body.cf .hf-t .ic{width:18px;height:18px}
body.cf .hmap-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--pen2);font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media (max-width:620px){body.cf .hmap-frame{height:480px}} /* Stay22 shows the list beside the map from 400px tall */
@media (max-width:760px){
  body.cf .mapcard{padding:14px 12px 6px}
  body.cf .mapcard .tape.m2{inset-inline-end:40px}
  body.cf .hmap-gate,body.cf .hmap-off{min-height:340px;padding:36px 16px}
}

/* /hotels: the search form on a stay pass. Laid out by the form's own width (container
   queries on .hs-c), with the breakpoints and date columns pages.css used for it: em
   breakpoints with a px floor, so dates stay whole at any browser font size. */
html:has(body.cf #hsForm){scroll-padding-top:84px}
@media (max-width:760px){html:has(body.cf #hsForm){scroll-padding-top:72px}}
body.cf .hs-c{container:hs / inline-size;font-size:1rem} /* em in the queries = rem: grows with the browser's font size, as the fields do */
body.cf .hs-form{display:grid;gap:12px 10px;align-items:end;grid-template-columns:minmax(0,1fr);grid-template-areas:"type" "dest" "in" "out" "ad" "ch" "rm" "go"}
body.cf .hs-dest{grid-area:dest}body.cf .hs-in{grid-area:in}body.cf .hs-out{grid-area:out}
body.cf .hs-ad{grid-area:ad}body.cf .hs-ch{grid-area:ch}body.cf .hs-rm{grid-area:rm}body.cf .hs-go{grid-area:go}
/* stay type (all / hotels / rentals): pills like the city chips; the radios stay focusable */
body.cf .hs-type{grid-area:type;margin:0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
body.cf .hs-type legend{float:inline-start;padding:0;font:600 .875rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
html[lang="ar"] body.cf .hs-type legend{font:600 .8125rem/1.3 var(--fb);letter-spacing:0}
body.cf .hs-seg{display:flex;flex-wrap:wrap;gap:8px}
body.cf .hs-seg label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:600 15px/1 var(--fb);cursor:pointer;box-shadow:2px 2px 0 var(--hard)}
body.cf .hs-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
body.cf .hs-seg label:has(input:checked){background:var(--ink);color:var(--card)}
body.cf .hs-seg label:has(input:focus-visible){outline:2px solid var(--pen);outline-offset:2px}
@media (forced-colors:active){body.cf .hs-seg label:has(input:checked){forced-color-adjust:none;background:Highlight;color:HighlightText}}
/* city pages: the map's tools bar (stay type, hotel site, dates line), from hotel-tools.njk */
body.cf .hm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0 0 16px}
body.cf .hm-tools[hidden]{display:none}
body.cf .hm-tools .hs-prov{margin:0}
body.cf .hm-tools .hs-type{grid-area:auto}
body.cf .hm-sum{flex-basis:100%;margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink2)}
body.cf .hm-sum[hidden]{display:none}
body.cf .hm-sum a{color:var(--pen2);font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* /hotels: "Hotel prices from" pills above the map, "Compare this search on" links under it */
body.cf .hs-prov{margin:0 0 16px;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
body.cf .hs-prov[hidden],body.cf .hs-compare[hidden]{display:none}
/* /hotels: the hotel-site pills and the currency pill (currency.css) share a row above the map */
body.cf .hs-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 16px}
body.cf .hs-row .hs-prov{margin:0}
body.cf .hs-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.cf .hs-prov legend:not(.hs-vh){float:inline-start;padding:0;font:600 .875rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
html[lang="ar"] body.cf .hs-prov legend{font:600 .8125rem/1.3 var(--fb);letter-spacing:0}
body.cf .hs-compare{margin:22px 0 0;padding:18px;border:1.5px dashed var(--line2);border-radius:14px;background:var(--paper2)}
body.cf .hc-h{margin:0 0 12px;font:600 .875rem/1.2 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
html[lang="ar"] body.cf .hc-h{font:600 .9375rem/1.3 var(--fb);letter-spacing:0}
body.cf .hc-links{display:flex;flex-wrap:wrap;gap:10px}
body.cf .hc-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:600 15px/1 var(--fb);text-decoration:none;box-shadow:2px 2px 0 var(--hard);transition:transform .15s,box-shadow .15s}
body.cf .hc-links a::after{content:"\2197";margin-inline-start:8px;font-size:13px;opacity:.7}
html[dir="rtl"] body.cf .hc-links a::after{content:"\2196"}
body.cf .hc-links a:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--hard)}
@media (prefers-reduced-motion:reduce){body.cf .hc-links a{transition:none}}
body.cf .hc-note{margin:12px 0 0;font-size:.875rem;line-height:1.5;color:var(--ink2)}
body.cf .hs-field{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
body.cf .hs-field label{font:600 .875rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang="ar"] body.cf .hs-field label{font:600 .8125rem/1.3 var(--fb);letter-spacing:0}
body.cf .hs-field input,body.cf .hs-field select{width:100%;height:3rem;margin:0;padding:0 14px;border:1.5px solid transparent;border-radius:10px;background:var(--field);color:var(--ink);font:500 1rem/1.2 var(--fb)}
body.cf .hs-field select{padding-inline:12px 8px}
body.cf .hs-field input::placeholder{color:#5B5F6E;opacity:1}
body.cf .hs-field input:focus,body.cf .hs-field select:focus{outline:2px solid var(--pen);outline-offset:1px;border-color:var(--pen)}
body.cf .hs-go{width:100%;height:3rem;min-height:3rem}
/* the suggestions: under the sticky header (.nav 100) and the phone menu (99) */
body.cf .hs-drop{display:none;position:absolute;top:100%;inset-inline:0;z-index:10;margin-top:6px;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--hard);overflow:hidden}
body.cf .hs-drop.open{display:block}
body.cf .hs-opt{padding:12px 14px;border-top:1px dashed var(--line2);font-size:.9375rem;line-height:1.4;color:var(--ink);cursor:pointer}
body.cf .hs-opt:first-child{border-top:0}
body.cf .hs-opt:hover,body.cf .hs-opt.active{background:var(--paper3)}
body.cf .hs-opt.active{box-shadow:inset 3px 0 0 var(--pen)}
html[dir="rtl"] body.cf .hs-opt.active{box-shadow:inset -3px 0 0 var(--pen)}
@media (forced-colors:active){body.cf .hs-opt.active{forced-color-adjust:none;background:Highlight;color:HighlightText}}
body.cf .hs-cities{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
body.cf .hs-cities a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:600 15px/1 var(--fb);text-decoration:none;box-shadow:2px 2px 0 var(--hard);transition:transform .15s,box-shadow .15s}
body.cf .hs-cities a:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--hard)}
@media (prefers-reduced-motion:reduce){body.cf .hs-cities a{transition:none}}
@container hs (min-width:16em){
  body.cf .hs-form{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"type type type" "dest dest dest" "in in in" "out out out" "ad ch rm" "go go go"}
}
@container hs (min-width:25em) and (min-width:400px){
  body.cf .hs-form{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"type type type type type type" "dest dest dest dest dest dest" "in in in out out out" "ad ad ch ch rm rm" "go go go go go go"}
}
@container hs (min-width:43em) and (min-width:688px){
  body.cf .hs-form{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"type type type type" "dest dest in out" "ad ch rm go"}
}
@container hs (min-width:62em) and (min-width:992px){
  body.cf .hs-form{grid-template-columns:minmax(10rem,1fr) minmax(calc(6.5rem + 48px),calc(7.75rem + 48px)) minmax(calc(6.5rem + 48px),calc(7.75rem + 48px)) 5.5rem 5.5rem 5.5rem auto;grid-template-areas:"type type type type type type type" "dest in out ad ch rm go"}
}
/* the search page's photo is decoration: on phones the form comes first */
@media (max-width:760px){body.cf .chero.compact .chero-art{display:none}}