/* ZiyaraWay customer app: premium look, v1 2026-11-07 (Stage 1: home screen).
   Look only - no booking logic changed. Brand palette kept: Emerald #075743, Gold #C7A45A, Ivory #F6F0E5.
   Active only when zw-lux.js puts class "zw-lux" on <html>. Rollback: remove the two lines (css + js) from index.html. */
html.zw-lux{--lx-em:#075743;--lx-em2:#04382b;--lx-em3:#0b7a5e;--lx-gold:#C7A45A;--lx-gold2:#E9D49A;--lx-ivory:#F6F0E5;--lx-ink:#13231e;--lx-mut:#5d6b66;--lx-line:#eadfc7;--lx-r:20px;--lx-sh:0 14px 34px rgba(4,56,43,.14)}
html.zw-lux body{background:var(--lx-ivory)}

/* header */
html.zw-lux header{background:linear-gradient(180deg,var(--lx-em2),var(--lx-em));border-bottom:1px solid rgba(199,164,90,.55);box-shadow:0 6px 18px rgba(4,56,43,.25)}
html.zw-lux header .icon-btn,html.zw-lux header .lang-btn{width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;border:1px solid rgba(199,164,90,.55);background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
html.zw-lux header .lang-btn{width:auto;padding:0 12px;border-radius:999px}
html.zw-lux header .icon-btn:active,html.zw-lux header .lang-btn:active{transform:scale(.94);background:rgba(199,164,90,.25)}
html.zw-lux header .brand-logo i{color:var(--lx-gold)}

/* hero */
html.zw-lux #hero{position:relative;overflow:hidden;padding-bottom:58px!important}
html.zw-lux #hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,38,29,.15) 0%,rgba(4,38,29,.55) 55%,rgba(4,38,29,.85) 100%);pointer-events:none}
html.zw-lux #hero>*{position:relative;z-index:1}
html.zw-lux #hero .badge{background:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(233,212,154,.5)}
html.zw-lux .lx-hello{display:block;color:var(--lx-gold2);font-weight:700;font-size:.95rem;letter-spacing:.3px;margin:10px 0 2px}
html.zw-lux #hero h1{font-size:clamp(1.45rem,6.4vw,2.1rem)!important;line-height:1.2!important;letter-spacing:.5px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
html.zw-lux .lx-where{display:block;color:#fff;opacity:.92;font-size:1rem;margin-top:6px}

/* search card */
html.zw-lux .search-card{position:relative;z-index:3;margin-top:-44px!important;border-radius:24px!important;box-shadow:var(--lx-sh)!important;border:1px solid rgba(199,164,90,.35)!important;background:#fff!important}
html.zw-lux .services-tabs{background:var(--lx-ivory);border-radius:16px;padding:4px;gap:4px;border:0!important}
html.zw-lux .services-tabs .tab-btn{border-radius:12px;border:0!important;padding:9px 4px;color:var(--lx-mut);transition:background .2s,color .2s}
html.zw-lux .services-tabs .tab-btn.active{background:var(--lx-em);color:#fff;box-shadow:0 6px 14px rgba(7,87,67,.28)}
html.zw-lux .services-tabs .tab-btn.active i{color:var(--lx-gold2)}
html.zw-lux .services-tabs .tab-btn::after{display:none!important}
html.zw-lux .search-card label{letter-spacing:.6px;color:var(--lx-mut)}
html.zw-lux .search-card input.form-control,html.zw-lux .search-card select.form-control,html.zw-lux .search-card .zwpb-in{border-radius:14px!important;border:1px solid var(--lx-line)!important;background:#fffdf8!important;min-height:52px;transition:border-color .2s,box-shadow .2s}
html.zw-lux .search-card .form-control:focus,html.zw-lux .search-card .zwpb-in:focus{border-color:var(--lx-gold)!important;box-shadow:0 0 0 3px rgba(199,164,90,.22)!important;outline:0}
html.zw-lux .btn-primary{border-radius:16px!important;min-height:54px;background:linear-gradient(135deg,var(--lx-em),var(--lx-em3))!important;color:var(--lx-gold2)!important;font-weight:800!important;letter-spacing:.3px;box-shadow:0 10px 22px rgba(7,87,67,.3)!important;border:0!important;transition:transform .12s}
html.zw-lux .btn-primary:active{transform:scale(.98)}

/* ticker, quieter */
html.zw-lux .zh-ticker{border-radius:14px!important;background:var(--lx-em2)!important;border:1px solid rgba(199,164,90,.4)!important}

/* section titles */
html.zw-lux #home-screen .zh-sec>h2,html.zw-lux #home-screen .zh-sec h3,html.zw-lux #home-screen .section>h2,html.zw-lux #home-screen .section-title,html.zw-lux .zwh-head h3{position:relative;color:var(--lx-em)!important;font-weight:800!important;font-size:1.1rem!important;padding-inline-start:12px}
html.zw-lux #home-screen .zh-sec>h2::before,html.zw-lux #home-screen .section>h2::before,html.zw-lux #home-screen .section-title::before,html.zw-lux .zwh-head h3::before{content:"";position:absolute;inset-inline-start:0;top:15%;bottom:15%;width:4px;border-radius:4px;background:var(--lx-gold)}

/* cards */
html.zw-lux .zh-sv,html.zw-lux .zh-car,html.zw-lux .zwh-card,html.zw-lux #zh-hotels article,html.zw-lux #home-screen .section a,html.zw-lux #home-screen .section button{border-radius:var(--lx-r)!important}
html.zw-lux .zh-sv,html.zw-lux .zwh-card{box-shadow:0 8px 22px rgba(4,56,43,.12)!important;transition:transform .15s}
html.zw-lux .zh-sv:active,html.zw-lux .zwh-card:active{transform:scale(.98)}
html.zw-lux .zwh-rib{box-shadow:0 4px 10px rgba(0,0,0,.2)}
html.zw-lux .zwh-go{border-radius:14px!important;background:linear-gradient(135deg,var(--lx-em),var(--lx-em3))!important}

/* the long text list at the end repeats "Our services" - hidden on the home (still in the Guide) */
html.zw-lux #home-screen .lx-dup{display:none!important}

/* bottom bar: floating */
html.zw-lux .bottom-nav{left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;width:auto!important;border-radius:22px!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(4,56,43,.22)!important;border:1px solid rgba(199,164,90,.35)!important;padding:4px!important}
html.zw-lux .bottom-nav .nav-item{border-radius:16px;transition:background .2s,color .2s}
html.zw-lux .bottom-nav .nav-item.active{background:var(--lx-em)!important;color:#fff!important}
html.zw-lux .bottom-nav .nav-item.active i{color:var(--lx-gold2)!important}
html.zw-lux .bottom-nav .nav-item.active span{color:#fff!important}

/* screen change: soft slide */
@media (prefers-reduced-motion:no-preference){html.zw-lux [id$=-screen].active{animation:lxIn .22s ease-out}}
@keyframes lxIn{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
/* hero: greeting + question replace the long sub lines */
html.zw-lux #hero > p{display:none!important}
html.zw-lux #hero h1{margin:2px 0 0!important}

/* ===== Stage 2: vehicle choice + booking sheet ===== */
html.zw-lux .zwr-sh{border-radius:26px 26px 0 0!important;background:#fffdf8!important;box-shadow:0 -12px 40px rgba(4,38,29,.28)!important;padding-top:18px!important}
html.zw-lux .zwr-sh::before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:#dccfae;margin:-8px auto 10px}
html.zw-lux .zwr-x{width:36px;height:36px;border-radius:50%!important;background:var(--lx-ivory)!important;border:1px solid var(--lx-line)!important}
html.zw-lux .zwr-h{font-weight:800;color:var(--lx-em)}
html.zw-lux .zwr-v{border-radius:18px!important;border:1px solid var(--lx-line)!important;background:#fff!important;box-shadow:0 6px 16px rgba(4,56,43,.08);transition:transform .12s,border-color .2s,box-shadow .2s}
html.zw-lux .zwr-v:active{transform:scale(.97)}
html.zw-lux .zwr-v:hover,html.zw-lux .zwr-v:focus-visible{border-color:var(--lx-gold)!important;box-shadow:0 10px 24px rgba(199,164,90,.25)}
html.zw-lux .zwr-i{background:linear-gradient(180deg,#fff,var(--lx-ivory));border-radius:14px;overflow:hidden}
html.zw-lux .zwr-i img{object-fit:contain}
html.zw-lux .zwr-n{font-weight:800;color:var(--lx-ink)}
html.zw-lux .zwr-p{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--lx-em);color:var(--lx-gold2)!important;font-weight:800}
html.zw-lux .zwr-p.q{background:#fff3e0;color:#9a5b00!important}
html.zw-lux .zwr-top{border-radius:18px;background:linear-gradient(135deg,var(--lx-em2),var(--lx-em));color:#fff;padding:12px!important}
html.zw-lux .zwr-top .zwr-rt{color:rgba(255,255,255,.85)!important}
html.zw-lux .zwr-top .zwr-pr{color:var(--lx-gold2)!important;font-weight:800}
html.zw-lux .zwr-near{border-radius:16px;overflow:hidden}
html.zw-lux .zwr-sh input,html.zw-lux .zwr-sh select{border-radius:14px!important;border:1px solid var(--lx-line)!important;min-height:48px;background:#fff!important}
html.zw-lux .zwr-sh input:focus{border-color:var(--lx-gold)!important;box-shadow:0 0 0 3px rgba(199,164,90,.22)!important;outline:0}
html.zw-lux .zwr-st button{border-radius:12px!important}
html.zw-lux .zwr-pay label{border:1px solid var(--lx-line);border-radius:14px;padding:8px 12px;background:#fff}
html.zw-lux .zwr-go{position:sticky;bottom:6px;z-index:2;border-radius:16px!important;min-height:56px;background:linear-gradient(135deg,var(--lx-em),var(--lx-em3))!important;color:var(--lx-gold2)!important;font-weight:800;box-shadow:0 12px 26px rgba(7,87,67,.35)!important}

/* place search sheet */
html.zw-lux .zwp-sheet{border-radius:26px 26px 0 0!important;border-color:rgba(199,164,90,.45)!important}
html.zw-lux .zwp-pop input{border-radius:14px!important;min-height:48px}
html.zw-lux .zwr-top b{color:#fff!important;font-size:1.05rem}
html.zw-lux .zwr-sh{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
/* small phones: keep the full name next to the back button */
@media (max-width:440px){
html.zw-lux header{gap:6px!important;padding-left:8px!important;padding-right:8px!important}
html.zw-lux header .header-actions{gap:5px!important}
html.zw-lux header .icon-btn,html.zw-lux header .lang-btn{width:34px;height:34px;min-width:34px}
html.zw-lux header .back-btn{width:34px;height:34px;min-width:34px}
html.zw-lux header .brand-logo span{font-size:16px!important}
html.zw-lux header .brand-logo{min-width:0}
}
html.zw-lux.lx-inner header .brand-logo>i{display:none!important}
/* passengers / bags start empty: the customer chooses */
html.zw-lux .zwr-pax:empty::before,html.zw-lux .zwr-bag:empty::before{content:"—";color:#b9ad92;font-weight:700}
html.zw-lux .search-card .zwpb-in::placeholder{color:#8a9a94;opacity:1}