*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Keyboard-only focus ring for every interactive control. :focus-visible fires on keyboard/AT
navigation, not mouse/touch, so the pointer experience is unchanged; --teal is high-contrast
in both themes (navy on cream, bright blue on navy). Inputs keep their own teal focus border. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[role="switch"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Respect prefers-reduced-motion globally: near-instant transitions/animations while keeping end
states, so nothing slides, pulses, or spins for people who ask the OS to reduce motion. No JS
depends on transition/animation-end events (checked), so this is safe; the specific animation:none
rules elsewhere stay as belt-and-braces. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* stop the browser's pull-to-refresh (esp. iOS Chrome) from reloading the page and
wiping an in-progress edit when you swipe down near the top while using the form */
html{overscroll-behavior-y:contain}
body{margin:0;font-family:var(--ff-body);color:var(--ink);line-height:1.5;background:var(--paper);min-height:100vh;overscroll-behavior-y:contain;overflow-x:hidden}
/* form controls don't inherit the page font — without this 14 buttons render in Arial */
button,input,select,textarea{font-family:var(--ff-body)}
#topo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{max-width:680px;margin:0 auto;padding:20px 18px 64px;position:relative;z-index:1}
.langbar{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:8px}
.homebtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;padding:0}
.homebtn svg{width:16px;height:16px}
.homebtn:active{transform:translateY(1px)}
.langsel{appearance:none;-webkit-appearance:none;padding:10px 30px 10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card) url('data:image/svg+xml;utf8,') no-repeat right 12px center;color:var(--ink);font-size:14.5px;font-family:var(--ff-body);cursor:pointer;width:auto}
#app[dir="rtl"] .langsel{padding:10px 14px 10px 30px;background-position:left 12px center}
.lang{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:14.5px;cursor:pointer;user-select:none;transition:all .15s}
.lang.active{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.hero{text-align:center;padding:14px 4px 2px;position:relative}
/* a quiet halo behind the compass — dawn in the light theme, a deep night glow in the dark one.
pure gradient: no image to load, nothing to break offline */
.hero::before{content:"";position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:340px;height:230px;border-radius:50%;background:radial-gradient(closest-side,var(--amber-soft),transparent 70%);pointer-events:none}
.compass{width:70px;height:70px;margin:0 auto 8px;border-radius:50%;border:2px solid var(--amber);position:relative;background:var(--card);box-shadow:0 0 0 6px var(--amber-soft),var(--shadow)}
.compass::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:26px solid var(--amber);transform:translateY(-3px) rotate(38deg);transform-origin:50% 70%;animation:settle 1.5s cubic-bezier(.2,.85,.25,1) 1}
@keyframes settle{0%{transform:translateY(-3px) rotate(230deg)}60%{transform:translateY(-3px) rotate(20deg)}100%{transform:translateY(-3px) rotate(38deg)}}
@media (prefers-reduced-motion:reduce){.compass::before{animation:none}}
.compass::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--teal)}
h1{font-family:var(--ff-display);font-size:44px;margin:2px 0 0;letter-spacing:normal;font-weight:600}
.tag{color:var(--muted);font-size:15px;max-width:420px;margin:6px auto 0;text-wrap:balance}
.eyebrow{font-family:var(--ff-data);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--amber-ink);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px 20px;margin-top:22px;position:relative;overflow:hidden}
/* a hairline of light along the top edge gives the card a face without another border */
.card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--amber-soft) 30%,var(--amber) 50%,var(--amber-soft) 70%,transparent)}
/* 11px uppercase reads as decoration, not as a question you're meant to answer */
label{display:block;font-family:var(--ff-data);font-size:14.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;font-weight:600}
label:first-of-type{margin-top:0}
.hint{text-transform:none;letter-spacing:0;font-weight:400}
input,select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--paper2);color:var(--ink);font-size:16px;font-family:var(--ff-body);outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.combo{position:relative;margin-top:10px}
.combo input{padding-right:42px}
#app[dir="rtl"] .combo input{padding-right:14px;padding-left:42px}
.comboclear{position:absolute;top:50%;transform:translateY(-50%);right:10px;z-index:9;width:26px;height:26px;border-radius:50%;border:none;background:var(--line);color:var(--ink);font-size:14.5px;line-height:1;cursor:pointer;padding:0}
.comboclear:hover{background:var(--clay);color:#fff}
#app[dir="rtl"] .comboclear{right:auto;left:10px}
.combolist{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:8;max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px}
.comboitem{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;cursor:pointer}
.comboitem:hover,.comboitem.active{background:var(--teal-soft)}
.comboitem .cflag{font-size:19px;flex-shrink:0;line-height:1}
.comboitem .ccity{font-size:15px;font-weight:600;color:var(--ink)}
.comboitem .ccountry{color:var(--muted);font-size:14.5px;margin-left:auto}
#app[dir="rtl"] .comboitem .ccountry{margin-left:0;margin-right:auto}
.stepper{display:flex;align-items:stretch;gap:8px;direction:ltr}
.stepper input{flex:1;min-width:0;padding:14px 2px;text-align:center;font-size:18px;font-weight:700}
.stepbtn{flex:0 0 46px;border:1px solid var(--line);background:var(--paper2);color:var(--ink);border-radius:12px;font-size:22px;font-weight:600;cursor:pointer;font-family:var(--ff-body);line-height:1;transition:all .15s;user-select:none}
.stepbtn:hover{border-color:var(--teal);background:var(--teal-soft)}
.stepbtn:active{transform:translateY(1px)}
/* One question at a time. "How many days?" waits until somewhere has been named, so the first
thing anyone meets is a single field rather than a form. It never hides again once shown, and
a traveller who taps Plan without ever opening it simply gets the default five days — which is
the least-effort path working as intended, not a field they missed. */
.qwait{display:none}
.daypresets{display:flex;gap:6px;margin-top:8px;flex-wrap:nowrap;direction:ltr}
/* days-per-city rows: city name left, a small stepper right; the stepper stays LTR because
"− 4 +" is arithmetic, not prose, and flipping it in Arabic reads backwards */
.splitrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.splitrow .sc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--ink)}
.splitrow .sn{display:flex;align-items:center;gap:0;direction:ltr}
.splitbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:19px;font-weight:700;cursor:pointer;font-family:var(--ff-data)}
.splitbtn:disabled{opacity:.35;cursor:default}
.splitval{min-width:44px;text-align:center;font-size:16.5px;font-weight:700;color:var(--ink);font-family:var(--ff-data);font-variant-numeric:tabular-nums}
.daychip{flex:1;min-width:0;padding:9px 4px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--ff-data);transition:all .15s;font-variant-numeric:tabular-nums}
.daychip:hover{border-color:var(--teal)}
.daychip.active{background:var(--teal);border-color:var(--teal);color:#fff}
@media (prefers-color-scheme:dark){.daychip.active{color:#0a1310}}
:root[data-theme="dark"] .daychip.active{color:#0a1310}
:root[data-theme="light"] .daychip.active{color:#fff}
/* Sits directly above the Ask pill, same edge, never behind it. At the old bottom:22px it was
hidden under the tab bar with the pill sitting on top of what showed. */
/* Deliberately not teal: two teal pills stacked read as one button repeated. Cream/navy card
with an amber edge stands out over the itinerary card in both themes and stays the quieter
of the two. */
.editfab{position:fixed;bottom:138px;right:16px;z-index:7;padding:12px 18px;border-radius:999px;border:1.5px solid var(--amber);background:var(--card);color:var(--amber-ink);font-size:14px;font-weight:700;font-family:var(--ff-body);box-shadow:var(--shadow-fab);cursor:pointer;transition:filter .15s}
.editfab:hover{filter:brightness(1.06)}
/* Both floating buttons land exactly on top of the Back/Next controls, so while those are on
screen these get out of the way. Lifting them was tried and was worse: a button that hovers in
the middle of the itinerary covers the rows somebody is reading, which is more annoying than a
button that waits. Out of sight until the controls are gone. */
.editfab,.chatfab{transition:opacity .2s,transform .2s,bottom .25s}
body.pgnav-vis .editfab,body.pgnav-vis .chatfab{opacity:0;transform:translateY(10px);pointer-events:none}
/* The one button the whole form leads to must never have something floating over it. The Ask
pill sits 76px off the bottom, which is exactly where "Plan my trip" lands once the form is
tall — four cities and it was covering it. While that button is on screen the pill steps
aside; scroll it away and the pill comes back. */
body.planbtn-vis .chatfab,body.planbtn-vis .editfab{opacity:0;transform:translateY(10px);pointer-events:none}
/* the "how was your plan?" card lands there too — it can wait until they're not mid-navigation */
body.pgnav-vis .fbnudge.show{opacity:0;transform:translateX(-50%) translateY(30px);pointer-events:none}
/* No RTL flip: the Ask pill sits outside #app so it stays on the right in Arabic too, and these
two must share an edge or they drift apart. The back-to-top circle owns the left corner. */
.editfab.nudged{bottom:194px} /* rides up with the chat pill when the rating card appears */
.surprise{display:inline-block;margin-top:9px;background:none;border:none;color:var(--amber-ink);font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--ff-body);text-decoration:underline;text-decoration-color:var(--amber-ink);text-underline-offset:3px;padding:2px 0}
.surprise:hover{filter:brightness(1.1)}
.ideas{margin-top:10px}
.addcity{display:inline-flex;align-items:center;gap:4px;margin-top:12px;padding:9px 15px;border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--teal);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--ff-body);transition:all .15s}
.addcity:hover{border-color:var(--teal);background:var(--teal-soft)}
.is-hidden{display:none!important}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper2);color:var(--muted);font-size:14px;cursor:pointer;user-select:none;transition:all .15s}
.chip:hover{border-color:var(--teal)}
.chip.active{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){.chip.active{color:#0a1310}}
:root[data-theme="dark"] .chip.active{color:#0a1310}
:root[data-theme="light"] .chip.active{color:#fff}
.btn{width:100%;margin-top:22px;padding:16px;border:none;border-radius:12px;background-color:var(--amber-ink);background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.08));color:#211605;font-size:16px;font-weight:700;font-family:var(--ff-body);cursor:pointer;box-shadow:0 10px 22px rgba(120,88,20,.28);letter-spacing:.3px;transition:transform .12s,filter .15s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.out{margin-top:28px;display:none}
.out.show{display:block;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.out.show{animation:none}}
.ticket{background:linear-gradient(155deg,#194a72 0%,#0b2138 100%);color:#fdfaf1;border-radius:16px;padding:20px;border:1px solid rgba(233,214,168,.22);box-shadow:0 16px 34px rgba(9,38,30,.30)}
.ticket .eyebrow{color:#e9d6a8}
/* generated destination banner (climate-tinted scene, no external images) */
.hero-art{position:relative;height:104px;margin:-20px -20px 16px;border-radius:16px 16px 0 0;overflow:hidden}
.hero-art svg{display:block;width:100%;height:100%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(11,33,56,.55) 100%)}
.hero-flag{position:absolute;left:16px;bottom:9px;z-index:2;font-size:32px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
#app[dir="rtl"] .hero-flag{left:auto;right:16px}
/* gentle staggered reveal of result blocks */
.out.show .ticket,.out.show .day,.out.show .bookbar,.out.show .bud,.out.show .pack,.out.show .transfer{animation:rise .45s ease both}
.out.show .day:nth-of-type(2){animation-delay:.05s}.out.show .day:nth-of-type(3){animation-delay:.1s}.out.show .day:nth-of-type(4){animation-delay:.15s}
@media (prefers-reduced-motion:reduce){.out.show .ticket,.out.show .day,.out.show .bookbar,.out.show .bud,.out.show .pack,.out.show .transfer{animation:none}}
.ticket h2{font-family:var(--ff-display);font-size:25px;margin:4px 0 2px;font-weight:600;line-height:1.15}
.ticket .sub{opacity:.85;font-size:14px}
.ticket .blurb{font-size:15px;opacity:.92;margin-top:10px;font-style:italic;text-wrap:balance}
.ticket .season{display:inline-block;margin-top:11px;font-size:14.5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
.ticket a{color:#fff;text-decoration:underline;text-decoration-color:#e9d6a8;text-underline-offset:2px}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.stat{flex:1;min-width:120px;background:rgba(255,255,255,.1);border-radius:12px;padding:11px 13px}
.stat .k{font-family:var(--ff-data);font-size:15px;letter-spacing:1.2px;text-transform:uppercase;opacity:.75}
.stat .v{font-size:15px;font-weight:700;margin-top:3px}
.stat .v.num{font-variant-numeric:tabular-nums}
.realtag{font-family:var(--ff-data);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:16px 2px 4px;text-align:center}
.route{margin-top:6px;padding-left:4px}
.day{position:relative;padding:18px 0 4px 26px;margin-left:8px;border-left:2px solid var(--line)}
.day:last-child{border-left-color:transparent}
.day::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--amber);border:2px solid var(--card);box-shadow:0 0 0 3px var(--amber-soft)}
/* "Day 2 · Dubai" is what a traveller looks for on a page; "Arrival & first impressions" is a
nice line, not information. The sizes had it the other way round, so the eye landed on the
decoration and had to hunt for the day. Swapped. */
.day .dlabel{font-family:var(--ff-data);font-size:19.5px;letter-spacing:.2px;color:var(--amber-ink);font-weight:700;line-height:1.3}
.day h3{font-family:var(--ff-display);margin:3px 0 10px;font-size:16px;font-weight:600}
/* Ahmed's itinerary design: gold icon, small gold category above, the place name big and
clean, meta on its own quieter line. The icon is a mask so it wears the theme's gold. */
.slot{display:flex;align-items:center;gap:9px;padding:25px 2px 12px;position:relative;border-top:1px solid var(--line)}
.slot:first-of-type{border-top:none}
.slot::before{content:'';flex:0 0 22px;width:22px;height:22px;background:var(--amber);opacity:.92;
-webkit-mask:var(--ic,none) center/contain no-repeat;mask:var(--ic,none) center/contain no-repeat}
.slot .ico{display:none}
.slot .t{position:absolute;top:9px;inset-inline-start:33px;font-family:var(--ff-data);font-size:11px;
letter-spacing:1.6px;text-transform:uppercase;color:var(--amber-ink);opacity:.85;font-weight:700;line-height:1.2;width:auto;padding:0}
.slot .d{flex:1;min-width:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.slot .d>a:first-child{display:block;color:var(--ink);font-size:17px;font-weight:600;line-height:1.35;
text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .d a{color:inherit;text-decoration:underline;text-decoration-color:var(--amber-ink);text-underline-offset:3px}
.slot .d>a:first-child:active{color:var(--amber-ink)}
.slot .area{color:var(--muted);font-size:13.5px}
.slot[data-ic="bld"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="cup"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="sun"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="clk"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="shp"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="eve"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="frk"]{--ic:url("data:image/svg+xml;utf8,")}
.slot[data-ic="pin"]{--ic:url("data:image/svg+xml;utf8,")}
.swapbtn{flex:0 0 auto;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s,border-color .15s,color .15s}
.swapbtn:hover{opacity:1;border-color:var(--teal);color:var(--teal)}
.swapbtn svg{width:16px;height:16px}
.dhead{display:flex;align-items:flex-start;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dhtext{flex:1;min-width:0}
.dchev{flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.day.dcol .dchev{transform:rotate(-45deg)}
.day.dcol .dbody,.day.dcol .dayshuffle{display:none}
.dayshare{padding:6px 9px}
/* the icon is bare circles+lines — without an explicit stroke they fill black and vanish on dark */
.dayshare svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.day .dsum{display:none}
.day.dcol .dsum{display:block;color:var(--muted);font-size:14.5px;margin:-4px 0 4px;line-height:1.45}
.day.dcol .dsum .dsmore{color:var(--amber-ink);font-weight:600}
.day.dcol h3{margin-bottom:0}
.dayshuffle{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--amber);border-radius:999px;background:transparent;color:var(--amber-ink);font-size:14px;font-weight:700;font-family:var(--ff-body);cursor:pointer}
.dayshuffle:hover{border-color:var(--teal);color:var(--teal)}
.dayshuffle svg{width:14px;height:14px}
.swappick{margin:6px 0 2px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--paper2);display:flex;flex-wrap:wrap;gap:6px}
.swappick .spk{font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);width:100%;font-family:var(--ff-data)}
#app[dir="rtl"] .swappick .spk{letter-spacing:normal;font-family:var(--ff-body)}
.swappick button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:15px;font-family:var(--ff-body);cursor:pointer}
.swappick button:hover{border-color:var(--teal)}
.spkcustom{display:flex;gap:6px;width:100%;margin-top:2px}