/* The currency pill and its menu (currency.js), on the homepage card, /hotels, the hotel city pages
   and the guides. Colours come from the page's own tokens where it has them (the homepage card,
   body.cf pages by day and by night) and fall back to the homepage's paper and ink elsewhere
   (the guides' old design). Arabic text never gets letter-spacing (CLAUDE.md, PR #77). */
.cx-wrap{
  --cx-ink:var(--ink,#1D2233);--cx-ink2:var(--ink2,#4B5063);--cx-card:var(--card,#FFFDF8);--cx-paper:var(--paper2,#FBF6EC);
  --cx-sel:var(--paper3,#E8DCC5);--cx-stamp:var(--stamp,#C8176B);--cx-line:var(--line2,rgba(29,34,51,.34));--cx-hard:var(--hard,#1D2233);
  --cx-fb:var(--fb,'Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif);--cx-fm:var(--fm,'Handjet','Courier New',monospace);
  position:relative;display:inline-flex;flex:none;margin-inline-start:auto;min-width:0
}
.cx-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 12px 0 9px;border:1.5px solid var(--cx-ink);border-radius:999px;
  background:var(--cx-card);color:var(--cx-ink);font:500 14px/1 var(--cx-fb);letter-spacing:0;cursor:pointer;box-shadow:2px 2px 0 var(--cx-hard);
  transition:transform .15s,box-shadow .15s;white-space:nowrap}
.cx-pill:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--cx-hard)}
.cx-pill[aria-expanded="true"]{transform:none;box-shadow:1px 1px 0 var(--cx-hard)}
.cx-pill:focus-visible,.cx-o:focus-visible,.cx-x:focus-visible{outline:2.5px solid var(--cx-stamp);outline-offset:2px}
.cx-coin{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--cx-stamp);color:#fff;
  font:700 11px/1 var(--cx-fb);letter-spacing:0;white-space:nowrap}
.cx-coin.is-svg{width:24px;padding:0}
.cx-coin svg{width:14px;height:14px;fill:currentColor}
.cx-code{font:700 17px/1 var(--cx-fm);letter-spacing:.06em}
.cx-name{color:var(--cx-ink2);max-width:13em;overflow:hidden;text-overflow:ellipsis}
.cx-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the menu: a popover under the pill, aligned to its end */
.cx-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:95;width:min(330px,calc(100vw - 24px));padding:12px 10px 10px;
  background:var(--cx-paper);color:var(--cx-ink);border:1.5px solid var(--cx-ink);border-radius:14px;box-shadow:6px 6px 0 var(--cx-hard);
  text-align:start;font-family:var(--cx-fb);transform:translateX(var(--cx-shift,0));animation:cxIn .16s ease both}
.cx-menu[hidden]{display:none}
.cx-menu:focus{outline:none}
@keyframes cxIn{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.cx-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 6px}
.cx-h{margin:0;font:600 15px/1.3 var(--cx-fb);color:var(--cx-ink)}
.cx-x{display:none;width:44px;height:44px;place-items:center;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--cx-ink);cursor:pointer}
.cx-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cx-s{margin:2px 6px 8px;font:400 13px/1.45 var(--cx-fb);color:var(--cx-ink2)}
.cx-list{max-height:min(330px,55vh);overflow-y:auto;overscroll-behavior:contain}
.cx-g{margin:10px 8px 4px;font:600 12px/1 var(--cx-fb);color:var(--cx-ink2)}
.cx-o{display:grid;grid-template-columns:3.2em minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:0 10px;border:0;
  border-radius:9px;background:none;color:var(--cx-ink);font:400 15px/1.25 var(--cx-fb);letter-spacing:0;text-align:start;cursor:pointer}
.cx-o b{font:700 17px/1 var(--cx-fm);letter-spacing:.06em}
.cx-o:hover{background:color-mix(in srgb,var(--cx-sel) 55%,transparent)}
.cx-o[aria-selected="true"]{background:var(--cx-sel);font-weight:600}
.cx-ck{color:var(--cx-stamp);font-weight:700}
.cx-f{margin:10px 6px 0;padding-top:10px;border-top:1.5px dashed var(--cx-line);font:400 12.5px/1.45 var(--cx-fb);color:var(--cx-ink2)}
/* phones: a bottom sheet (currency.js moves it to <body> and copies the tokens onto it) */
.cx-back{position:fixed;inset:0;z-index:2147483600;background:rgba(14,21,36,.45);animation:cxFade .16s ease both}
@keyframes cxFade{from{opacity:0}}
.cx-menu.cx-sheet{position:fixed;top:auto;inset-inline:0;bottom:0;z-index:2147483601;width:auto;max-height:82vh;display:flex;flex-direction:column;
  padding:8px max(12px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -5px 0 var(--cx-hard);transform:none;animation:cxUp .2s ease both}
.cx-menu.cx-sheet::before{content:"";display:block;flex:none;width:44px;height:5px;margin:0 auto 10px;border-radius:9px;background:var(--cx-line)}
.cx-menu.cx-sheet .cx-x{display:grid}
.cx-menu.cx-sheet .cx-list{max-height:none;flex:1 1 auto;min-height:0}
@keyframes cxUp{from{translate:0 40px;opacity:.4}}
@media (max-width:760px){.cx-name{display:none}.cx-pill{gap:7px}}
@media (prefers-reduced-motion:reduce){.cx-menu,.cx-back,.cx-pill{animation:none;transition:none}}
@media (forced-colors:active){.cx-coin{forced-color-adjust:none;border:1px solid CanvasText}.cx-o[aria-selected="true"]{outline:2px solid Highlight}}
/* the hotel pages' note under "Compare this search on" */
.hc-cur{margin:6px 0 0;font-size:.875rem;line-height:1.5;color:var(--ink2,#4B5063)}
.hc-cur:empty{display:none}
/* the slot each page leaves for the pill: at the end of its row */
.cx-slot{display:flex;margin-inline-start:auto;min-width:0}
.cx-slot[hidden]{display:none}
.cx-slot .cx-wrap{margin-inline-start:0}