/* ZiyaraWay customer app v2 look, v2 2026-11-09.2 (v1 2026-11-09) (design docs/design/app-v2/SPEC.md section 3).
   Active only when zw-v2.js puts class "zw-v2" on <html>. Loaded after zw-lux.css. Look only - no booking logic.
   Rollback: remove the zw-v2.css and zw-v2.js lines from index.html. */
html.zw-v2{
  --em-900:#032a20;--em-800:#04382b;--em-700:#075743;--em-600:#0b6e55;--em-050:#eef5f2;
  --gold:#C7A45A;--gold-hi:#EAD08A;--champagne:#E6D3A3;--champagne-100:#F5EEDC;--gold-ink:#8a6d1f;
  --ivory:#F6F0E5;--surface:#fff;--ink:#17201d;--ink-2:#4f5955;--ink-3:#7a827e;--hairline:#E8E1CF;--hairline-gold:rgba(201,169,97,.45);--wa:#128C4B;
  --r-sm:12px;--r-md:16px;--r-lg:20px;
  --sh-1:0 1px 2px rgba(3,42,32,.05),0 2px 8px rgba(3,42,32,.05);--sh-2:0 2px 4px rgba(3,42,32,.04),0 12px 32px rgba(3,42,32,.10);--sh-3:0 4px 8px rgba(3,42,32,.06),0 24px 56px rgba(3,42,32,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:'Cormorant Garamond','Amiri',Georgia,serif;--f-ui:'Manrope','IBM Plex Sans Arabic','Noto Sans',system-ui,sans-serif;
  --fs-display:34px;--lh-display:1.15;--fs-h2:24px;--lh-body:1.6;--ls-caps:.14em;
  --gold-grad:linear-gradient(180deg,#E9D49A 0%,#C7A45A 55%,#A8863F 100%);
  /* zw-lux palette follows the v2 tokens, so every existing lux rule already matches */
  --lx-em:#075743;--lx-em2:#04382b;--lx-gold:#C7A45A;--lx-gold2:#E6D3A3;--lx-ivory:#F6F0E5;--lx-line:#E8E1CF;--lx-ink:#17201d
}
html.zw-v2[lang=ar]{--f-display:'Amiri',serif;--f-ui:'IBM Plex Sans Arabic','Noto Sans Arabic','Manrope',system-ui,sans-serif;--lh-display:1.5;--ls-caps:0;--fs-display:32px}
html.zw-v2[lang=ur]{--f-display:'Noto Nastaliq Urdu','Amiri',serif;--f-ui:'Noto Naskh Arabic','Noto Sans Arabic','Manrope',system-ui,sans-serif;--lh-display:2.05;--ls-caps:0;--fs-display:24px;--fs-h2:19px;--lh-body:1.85}
html.zw-v2 body,html.zw-v2[lang] body{font-family:var(--f-ui);background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased}
html.zw-v2 .app-container{background-color:var(--ivory);background-image:none;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
html.zw-v2 :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Header: locked logo on a white plate ---------- */
html.zw-v2 header{background:var(--em-800);border-bottom:1px solid var(--hairline-gold);box-shadow:none;min-height:60px;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top))}
html.zw-v2 .brand-logo{gap:12px;align-items:center}
html.zw-v2 .brand-logo .v2-plate{width:40px;height:40px;flex:none;border-radius:10px;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--hairline-gold);display:block}
html.zw-v2 .brand-logo .v2-plate img{width:100%;height:100%;object-fit:contain;display:block}
html.zw-v2 .brand-logo>span{font-family:'Cormorant Garamond','Amiri',serif;font-weight:600;font-size:21px;color:var(--champagne);letter-spacing:.06em;line-height:1;min-width:0}
html.zw-v2 .brand-logo small{font-family:var(--f-ui);font-size:11px;color:#c9d9d3;margin-top:4px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zw-v2 header .icon-btn,html.zw-v2 header .lang-btn,html.zw-v2 header .back-btn{width:44px;height:44px;min-width:44px;border-color:rgba(230,211,163,.35);background:transparent;color:var(--champagne)}
html.zw-v2 header .lang-btn{width:auto;padding:0 12px}
html.zw-v2 header [data-phone-link],html.zw-v2 header [data-wa-link]{display:none!important}   /* call + WhatsApp: floating button and Support */
@media (max-width:400px){html.zw-v2 header .icon-btn,html.zw-v2 header .lang-btn,html.zw-v2 header .back-btn{width:40px;height:40px;min-width:40px}html.zw-v2 header .lang-btn{width:auto}html.zw-v2 .brand-logo>span{font-size:18px}}

/* ---------- Home hero: app-style photo crossfade (owner's app pictures, images/slides/), rounded bottom, fixed greeting ----------
   v2 (2026-11-09.2): about 48% of the phone height, rounded bottom corners, the route card overlaps it; 23 pictures, 7 dots shown. */
html.zw-v2 #hero.v2-hero{position:relative;min-height:340px;min-height:clamp(320px,48vh,460px);min-height:clamp(320px,48svh,460px);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 24px 88px!important;border-radius:0 0 28px 28px;background:var(--em-900)!important;isolation:isolate;overflow:hidden;touch-action:pan-y}
html.zw-v2 #hero.v2-hero::before{content:"";position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,42,32,.45) 0%,rgba(3,42,32,0) 28%,rgba(3,42,32,.30) 58%,rgba(3,42,32,.90) 100%)!important;background-size:auto}
html.zw-v2 #hero.v2-hero::after{display:none}
html.zw-v2 #hero.v2-hero>*{position:relative;z-index:2}
html.zw-v2 .v2-slides{position:absolute!important;inset:0;z-index:0!important}
html.zw-v2 .v2-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease),visibility 1.2s}
html.zw-v2 .v2-slide.cur{opacity:1;visibility:visible}
html.zw-v2 .v2-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
html.zw-v2 .v2-slide img:not([src]){visibility:hidden}
html.zw-v2 .v2-slide.cur img{animation:v2kb 9s linear both}
@keyframes v2kb{from{transform:scale(1.1)}to{transform:scale(1.02)}}
html.zw-v2 #hero .badge{background:rgba(3,42,32,.35);border-color:rgba(230,211,163,.45);color:var(--champagne);font-size:11px;letter-spacing:var(--ls-caps);text-transform:uppercase}
html.zw-v2 #hero .lx-hello{color:var(--champagne);font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.4)}
html.zw-v2 #hero h1{font-family:var(--f-display)!important;font-weight:600;font-size:var(--fs-display)!important;line-height:var(--lh-display)!important;color:#fff!important;letter-spacing:0!important;text-transform:none;text-shadow:0 2px 16px rgba(0,0,0,.35)}
html.zw-v2 #hero .lx-where{font-size:14px;color:#e3ece8;text-shadow:0 1px 8px rgba(0,0,0,.4)}
html.zw-v2 .v2-hero-ui{position:absolute!important;z-index:3!important;left:24px;right:24px;bottom:46px;display:flex;align-items:center;justify-content:center;gap:10px}
html.zw-v2 .v2-dots{display:flex;align-items:center;gap:0}
html.zw-v2 .v2-dots button{width:24px;height:28px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
html.zw-v2 .v2-dots button[hidden]{display:none}
html.zw-v2 .v2-dots button i{display:block;width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .32s var(--ease),background .32s,transform .32s}
html.zw-v2 .v2-dots button.v2-far i{transform:scale(.6)}
html.zw-v2 .v2-dots button[aria-current=true] i{width:20px;background:var(--champagne)}
html.zw-v2 .v2-pause{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(3,42,32,.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
html.zw-v2 .v2-pause .v2-ic{width:12px;height:12px}

/* ---------- Route card (primary call to action): raised white card, gold button ---------- */
html.zw-v2 .search-card{margin:-40px 16px 0!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-3)!important;border:1px solid var(--hairline)!important}
html.zw-v2 .services-tabs{background:#f2efe6}
html.zw-v2 .services-tabs .tab-btn.active{background:var(--gold-grad)!important;color:var(--em-900)!important;box-shadow:0 2px 8px rgba(199,164,90,.3)!important}
html.zw-v2 .services-tabs .tab-btn.active i{color:var(--em-900)!important}
html.zw-v2 .search-card label{font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
html.zw-v2 #quick-go,html.zw-v2 #b-submit{min-height:56px;border-radius:var(--r-md)!important;background:var(--gold-grad)!important;color:var(--em-900)!important;font-weight:700!important;font-size:16px;box-shadow:0 8px 20px rgba(199,164,90,.32),inset 0 1px 0 rgba(255,255,255,.5)!important;border:0!important}
html.zw-v2 #quick-go i,html.zw-v2 #b-submit i{color:var(--em-900)}
html.zw-v2 .btn-primary{border-radius:var(--r-md)!important}

/* ---------- Section heads ---------- */
html.zw-v2 .v2-caps{display:block;font-size:11px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-ink);margin-bottom:4px}
html.zw-v2 .v2-sec{padding:0 16px;margin-top:32px}
html.zw-v2 .v2-sec-h{margin-bottom:16px}
html.zw-v2 .v2-sec-h h2,html.zw-v2 #home-screen .section-title,html.zw-v2 #home-screen .zh-sec>h3,html.zw-v2 .zwh-head h3,html.zw-v2 .page-banner h3{font-family:var(--f-display)!important;font-weight:600!important;color:var(--em-800)!important;font-size:var(--fs-h2)!important;line-height:var(--lh-display)!important}
html.zw-v2 .page-banner h3{color:#fff!important;font-size:22px!important}
html.zw-v2 #home-screen .section-title::before,html.zw-v2 .zwh-head h3::before{background:var(--gold)!important}

/* ---------- Services grid ---------- */
html.zw-v2 #zh-services{display:none!important}   /* zw-home.js grid: kept in the page (its buttons open the sheets), shown by our grid */
html.zw-v2 .v2-svc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html.zw-v2 .v2-sv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:116px;padding:16px 12px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--sh-1);cursor:pointer;color:var(--ink);font:600 14px/1.35 var(--f-ui);text-align:center;text-decoration:none;transition:transform .16s var(--ease),box-shadow .32s var(--ease)}
html.zw-v2 .v2-sv::after{content:"";position:absolute;left:24%;right:24%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
html.zw-v2 .v2-sv:active{transform:scale(.98)}
html.zw-v2 .v2-sv .v2-ic{width:34px;height:34px;stroke-width:1.3;color:var(--gold-ink)}
html.zw-v2 .v2-sv.v2-wide{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:16px;min-height:84px;padding:16px 20px;text-align:start;flex-wrap:wrap}
html.zw-v2 .v2-sv.v2-wide .v2-sv-t{flex:1}
html.zw-v2 .v2-sv.v2-wide small{flex-basis:100%;font-weight:500;font-size:12px;color:var(--ink-2);margin-top:-6px;padding-inline-start:50px}
html.zw-v2 .v2-tag{position:absolute;top:8px;inset-inline-end:8px;font-size:10px;font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--em-900);background:var(--champagne);padding:2px 8px;border-radius:999px}
html.zw-v2 .v2-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Existing home cards follow the v2 tokens ---------- */
html.zw-v2 .zwh-card,html.zw-v2 #zh-hotels article,html.zw-v2 .ql{border-radius:var(--r-md)!important;border:1px solid var(--hairline)!important;box-shadow:var(--sh-1)!important}
html.zw-v2 .ql i{color:var(--gold-ink)}
html.zw-v2 .card{border-color:var(--hairline);border-radius:var(--r-md)}
html.zw-v2 .zwh-go{background:linear-gradient(135deg,var(--em-700),var(--em-800))!important;color:var(--champagne)!important}

/* ---------- Website + channels ---------- */
html.zw-v2 .v2-foot{margin:32px 0 0;padding:32px 16px 24px;border-top:1px solid var(--hairline);background:linear-gradient(180deg,var(--ivory),var(--champagne-100))}
html.zw-v2 #guide-screen .v2-foot{margin:24px -16px 0}
html.zw-v2 .v2-foot h3{font-family:var(--f-display);color:var(--em-800);font-size:var(--fs-h2);line-height:var(--lh-display);font-weight:600}
html.zw-v2 .v2-foot p{font-size:13px;color:var(--ink-2);margin:4px 0 16px;line-height:1.6}
html.zw-v2 .v2-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
html.zw-v2 .v2-lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--em-700);color:var(--em-700);font-weight:600;font-size:13px;text-decoration:none;background:transparent}
html.zw-v2 .v2-lnk.solid{background:var(--em-700);color:var(--champagne)}
html.zw-v2 .v2-lnk .v2-ic{width:16px;height:16px}
html.zw-v2 .v2-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
html.zw-v2 .v2-social a{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none}
html.zw-v2 .v2-social .v2-ic{width:18px;height:18px;color:var(--em-700)}

/* ---------- Floating WhatsApp (home only, above the tab bar) ---------- */
html.zw-v2 .v2-fab{position:fixed;z-index:120;bottom:calc(84px + env(safe-area-inset-bottom));inset-inline-end:max(12px,calc(50% - 228px));width:48px;height:48px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2);border:2px solid #fff}
html.zw-v2 .v2-fab[hidden]{display:none}
html.zw-v2 .v2-fab .v2-ic{width:22px;height:22px;stroke-width:1.7}
html.zw-v2 #home-screen{padding-bottom:56px}

/* ---------- Bottom tab bar: Home, Bookings, Support, Profile ---------- */
html.zw-v2 .bottom-nav.v2-tabs{left:auto!important;right:auto!important;bottom:0!important;width:100%!important;max-width:480px;border-radius:0!important;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96)!important;border:0!important;border-top:1px solid var(--hairline)!important;box-shadow:none!important;padding:4px 8px calc(8px + env(safe-area-inset-bottom))!important}
html.zw-v2 .bottom-nav.v2-tabs .nav-item.v2-off{display:none!important}
html.zw-v2 .bottom-nav.v2-tabs .nav-item{position:relative;min-height:56px;justify-content:center;gap:2px;border-radius:0!important;background:none!important;color:var(--ink-3)!important;font:600 12px/1.3 var(--f-ui)}
html.zw-v2 .bottom-nav.v2-tabs .nav-item>i{display:none}
html.zw-v2 .bottom-nav.v2-tabs .nav-item .v2-ic{width:22px;height:22px;margin-bottom:2px}
html.zw-v2 .bottom-nav.v2-tabs .nav-item span{color:inherit!important}
html.zw-v2 .bottom-nav.v2-tabs .nav-item.active{color:var(--em-700)!important;background:none!important}
html.zw-v2 .bottom-nav.v2-tabs .nav-item.active .v2-ic{color:var(--gold-ink)}
html.zw-v2 .bottom-nav.v2-tabs .nav-item.active::before{content:"";position:absolute;top:0;left:50%;width:24px;margin-left:-12px;height:2px;border-radius:2px;background:var(--gold)}
html.zw-v2 .slip-bar{bottom:calc(76px + env(safe-area-inset-bottom))}

/* ---------- Inner screens ---------- */
html.zw-v2 .page-banner::after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
html.zw-v2 .form-control{border-color:var(--hairline);border-radius:var(--r-sm);min-height:48px}
html.zw-v2 .form-control:focus{outline:none;border-color:var(--em-700);box-shadow:0 0 0 3px rgba(7,87,67,.12)}
html.zw-v2 .result-card{border-radius:var(--r-lg);border-top-color:var(--gold)}
html.zw-v2 .result-ref{font-family:ui-monospace,Menlo,Consolas,monospace}

@media (prefers-reduced-motion:reduce){
  html.zw-v2 .v2-slide,html.zw-v2 .v2-slide.cur img{transition:none;animation:none}
  html.zw-v2 .v2-sv{transition:none}
}