*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:root{
  --gold:#d4af37;
  --gold-soft:#f5df8d;
  --gold-bright:#fff0ad;
  --bg:#050505;
  --panel:rgba(12,12,13,.74);
  --glass:rgba(18,18,20,.64);
  --line:rgba(212,175,55,.28);
  --line-strong:rgba(212,175,55,.62);
  --text:#f7f4ea;
  --muted:#a6a6a6;
  --danger:#ff726f;
  --success:#28c76f;
}
html{width:100%;height:100%;background:#050505}
body{
  width:100%;min-height:100dvh;overflow-x:hidden;overscroll-behavior:none;touch-action:manipulation;
  font-family:Arial,sans-serif;color:var(--text);
  background:
    radial-gradient(circle at 50% -8%,rgba(212,175,55,.22),transparent 34%),
    radial-gradient(circle at 10% 90%,rgba(212,175,55,.08),transparent 30%),
    linear-gradient(180deg,#0b0b0c 0%,#050505 48%,#000 100%);
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.app-shell{min-height:100dvh;background:#000;overflow-x:hidden}
.screen{
  min-height:100dvh;display:none;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 84px) clamp(12px,3vw,34px) calc(env(safe-area-inset-bottom) + 24px);
  opacity:0;transform:translateY(20px);
}
.screen.is-active{display:flex;opacity:1;transform:translateY(0);animation:screenIn .58s cubic-bezier(.22,1,.36,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.landing-screen{
  overflow:hidden;text-align:center;background:
    radial-gradient(circle at 50% 26%,rgba(212,175,55,.22),transparent 31%),
    radial-gradient(circle at 50% 92%,rgba(212,175,55,.13),transparent 36%),
    linear-gradient(180deg,#0b0b0b 0%,#030303 60%,#000 100%);
}
.landing-inner{position:relative;z-index:2;width:min(92vw,480px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand-orbit{
  position:absolute;width:min(82vw,410px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.15),rgba(212,175,55,.05) 44%,transparent 68%);
  filter:blur(2px);animation:slowPulse 4.8s ease-in-out infinite;
}
.landing-logo{
  position:relative;z-index:2;width:clamp(138px,30vw,220px);display:block;margin-bottom:clamp(18px,3.4dvh,28px);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(212,175,55,.36)) drop-shadow(0 0 42px rgba(212,175,55,.18));
}
.landing-kicker{position:relative;z-index:2;color:var(--gold);font-size:clamp(10px,1.3vw,12px);font-weight:900;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.landing-screen h1{position:relative;z-index:2;color:#fff;font-size:clamp(30px,5vw,54px);line-height:1.02;font-weight:950;margin-bottom:clamp(24px,4dvh,36px)}
.primary-cta,.wide-action,.secondary-action{
  min-height:clamp(50px,6dvh,58px);border-radius:22px;font-weight:950;letter-spacing:.55px;text-transform:uppercase;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,opacity .22s ease;
}
.primary-cta,.wide-action{
  border:1px solid rgba(255,231,137,.74);color:#080808;padding:0 26px;background:
    radial-gradient(circle at 32% 16%,rgba(255,255,255,.88),transparent 16%),
    linear-gradient(135deg,#76540b 0%,#d4af37 32%,#fff1a6 56%,#b8860b 78%,#563a06 100%);
  box-shadow:0 18px 46px rgba(0,0,0,.45),0 0 30px rgba(212,175,55,.30),inset 0 1px 0 rgba(255,255,255,.34);
}
.primary-cta{position:relative;z-index:3;width:min(100%,350px)}
.wide-action{width:100%;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:20px}
.primary-cta:active,.wide-action:active,.secondary-action:active,.destination-button:active{transform:scale(.98)}
.wide-action:disabled{opacity:.52;cursor:not-allowed}
.road-reflection{
  position:absolute;left:50%;bottom:-10dvh;width:min(64vw,390px);height:30dvh;transform:translateX(-50%) perspective(420px) rotateX(68deg);
  background:
    linear-gradient(90deg,transparent 7%,rgba(255,255,255,.72) 10%,transparent 13%,transparent 46%,rgba(255,255,255,.58) 49%,transparent 52%,transparent 86%,rgba(255,255,255,.72) 89%,transparent 92%),
    radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.20),transparent 64%);
  opacity:.26;filter:blur(.3px);border-radius:50% 50% 0 0;
}
@keyframes slowPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
.booking-layout{width:min(100%,1160px);display:grid;grid-template-columns:minmax(560px,820px) minmax(260px,320px);gap:clamp(16px,2.4vw,30px);align-items:stretch}
.glass-shell{
  border:1px solid rgba(212,175,55,.23);border-radius:30px;background:
    linear-gradient(180deg,rgba(255,239,171,.08),transparent 20%),
    var(--panel);
  box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 34px rgba(212,175,55,.08),inset 0 1px 0 rgba(255,244,190,.10);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.booking-panel,.review-panel,.loading-panel,.success-panel{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,16px);padding:clamp(16px,2.2vw,24px)}
.panel-header{display:flex;align-items:center;gap:13px;padding:2px 2px 4px}
.panel-mark{width:50px;height:50px;border-radius:16px;object-fit:cover;border:1px solid rgba(212,175,55,.34);box-shadow:0 0 18px rgba(212,175,55,.16)}
.panel-header p,.section-title p,.aside-kicker,.map-title-row p{color:var(--gold);font-size:10px;font-weight:950;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:4px}
.panel-header h2,.section-title h2{color:#fff;font-size:clamp(24px,2.5vw,32px);line-height:1.05;font-weight:950}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,14px)}
.glass-field,.glass-panel{
  border:1px solid var(--line);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,244,190,.08),0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.glass-field{min-height:76px;border-radius:22px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.phone-field,.destination-field{grid-column:1 / -1}
.field-label{color:var(--muted);font-size:10px;font-weight:950;letter-spacing:1.15px;text-transform:uppercase}
.phone-row{display:flex;align-items:center;gap:10px}
.prefix{color:var(--gold);font-size:18px;font-weight:950}
input{width:100%;border:none;outline:none;background:transparent;color:#fff;font-size:16px;font-weight:850;min-width:0;color-scheme:dark}
input::placeholder{color:#747474}
.destination-button{width:100%;border:none;background:transparent;color:#fff;display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:11px;text-align:left;min-height:44px}
.pin-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#080808;background:linear-gradient(145deg,#79550b,#d4af37,#ffe99a,#a9780d)}
.pin-icon svg,.map-search-box svg,.center-pin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.destination-copy{min-width:0}
.destination-copy strong{display:block;font-size:16px;font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.destination-copy small{display:block;margin-top:3px;color:#8b8b8b;font-size:12px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chevron{color:var(--gold);font-size:26px;line-height:1}
.clear-destination,.text-action{width:max-content;border:none;background:transparent;color:var(--gold);font-size:12px;font-weight:900;text-decoration:underline;text-underline-offset:4px}
.payment-section{width:100%;text-align:left}
.payment-title{display:flex;align-items:center;justify-content:space-between;margin:0 3px 8px;color:#a9a9a9;font-size:10px;font-weight:900;letter-spacing:1.15px;text-transform:uppercase}
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-option{position:relative;min-height:56px;padding:10px;display:flex;align-items:center;gap:10px;border:1px solid rgba(212,175,55,.28);border-radius:18px;background:rgba(11,11,11,.68);box-shadow:inset 0 0 14px rgba(212,175,55,.035)}
.payment-option.active{border-color:rgba(212,175,55,.74);background:linear-gradient(180deg,rgba(44,36,13,.62),rgba(10,10,10,.82));box-shadow:0 0 18px rgba(212,175,55,.10),inset 0 0 14px rgba(212,175,55,.08)}
.payment-dot{width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:1px solid rgba(212,175,55,.64);display:grid;place-items:center}
.payment-option.active .payment-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#d4af37;box-shadow:0 0 8px rgba(212,175,55,.7)}
.payment-name{color:#f2f2f2;font-size:14px;font-weight:900;letter-spacing:.2px}
.payment-sub{display:block;margin-top:2px;color:#777;font-size:10px;font-weight:700;letter-spacing:.2px}
.payment-option.disabled{opacity:.50}
.payment-option.disabled::after{content:"COMING SOON";position:absolute;top:6px;right:7px;padding:3px 5px;border-radius:7px;color:#d4af37;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.24);font-size:6px;font-weight:900;letter-spacing:.45px}
.estimate-card{border-radius:22px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.estimate-card p{grid-column:1 / -1;color:#8e8e8e;font-size:12px;line-height:1.4}
.estimate-card span,.review-list span{display:block;color:#8f8f8f;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.9px;margin-bottom:4px}
.estimate-card strong,.review-list strong{color:#fff;font-size:16px;font-weight:950;line-height:1.25;overflow-wrap:anywhere;white-space:pre-line}
.estimate-card[data-state="long"] strong{color:var(--gold)}
.estimate-card[data-state="error"] strong{color:var(--danger)}
#msg{min-height:20px;color:var(--gold);font-size:13px;line-height:1.35;text-align:center;font-weight:800}
#msg.error{color:var(--danger)}
.manual-wa-text{width:max-content;align-self:center;border:none;background:transparent;color:#d4af37;font-size:14px;font-weight:850;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.92;padding:2px 0}
.booking-aside{padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:100%}
.booking-aside h3{font-size:clamp(22px,2.1vw,28px);line-height:1.08;margin-top:6px}
.aside-map{height:230px;border-radius:26px;border:1px solid rgba(212,175,55,.22);margin:22px 0;background:radial-gradient(circle at 50% 48%,rgba(212,175,55,.20),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));position:relative;overflow:hidden}
.aside-map::before{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.11);border-radius:45% 55% 48% 52%;transform:rotate(-18deg)}
.aside-map span{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 24px rgba(212,175,55,.8);transform:translate(-50%,-50%)}
.aside-stat{border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.aside-stat span{display:block;color:#888;font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:1px;margin-bottom:5px}
.aside-stat strong{color:#fff;font-size:18px}
.review-panel,.loading-panel,.success-panel{width:min(100%,720px)}
.section-title.centered{text-align:center}
.review-list{border-radius:24px;padding:16px;display:grid;gap:10px}
.review-list div{display:grid;grid-template-columns:minmax(130px,.45fr) 1fr;gap:18px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.review-list div:last-child{border-bottom:none;padding-bottom:0}
.review-list em{grid-column:2;color:var(--success);font-size:11px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.button-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}
.secondary-action{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#f4e6b0;background:rgba(255,255,255,.045);border:1px solid rgba(212,175,55,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.full-width{width:100%}
.lux-loader{width:104px;height:104px;margin:4px auto 2px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid rgba(212,175,55,.36);box-shadow:0 0 38px rgba(212,175,55,.22),inset 0 0 20px rgba(212,175,55,.08)}
.lux-loader::before{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid transparent;border-top-color:var(--gold);border-right-color:rgba(212,175,55,.48);animation:spin 1.15s linear infinite}
.lux-loader span{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 20%,#fff6c1,transparent 18%),linear-gradient(135deg,#7d590d,#d4af37,#fff0a8,#9d700d)}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-list{border-radius:24px;padding:15px;display:grid;gap:13px}
.progress-step{display:flex;align-items:center;gap:11px;color:#8f8f8f}
.progress-step span{width:20px;height:20px;border-radius:50%;border:1px solid rgba(212,175,55,.38);display:grid;place-items:center;flex:0 0 20px}
.progress-step strong{font-size:13px;font-weight:900}
.progress-step.active{color:#fff}
.progress-step.done{color:var(--gold)}
.progress-step.done span{background:var(--gold);border-color:var(--gold);color:#050505}
.progress-step.done span::before{content:"✓";font-size:12px;font-weight:950}
.success-medallion{width:88px;height:88px;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#061508;font-size:42px;font-weight:950;background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.88),transparent 16%),linear-gradient(135deg,#0f7a3c,#28c76f,#b7ffd7);box-shadow:0 0 34px rgba(40,199,111,.42),inset 0 1px 0 rgba(255,255,255,.30)}
.map-modal{position:fixed;inset:0;z-index:100000;padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.map-dialog{width:min(100%,1040px);height:min(780px,calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));display:grid;grid-template-columns:340px 1fr;grid-template-rows:1fr auto;border:1px solid rgba(212,175,55,.35);border-radius:30px;overflow:hidden;background:#090909;box-shadow:0 34px 80px rgba(0,0,0,.62),0 0 34px rgba(212,175,55,.13)}
.map-search-panel{padding:18px;background:linear-gradient(180deg,rgba(255,239,171,.08),transparent 28%),rgba(12,12,13,.95);border-right:1px solid rgba(212,175,55,.20);overflow:auto}
.map-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.map-title-row h2{font-size:24px;line-height:1.05}
.icon-button{width:42px;height:42px;border-radius:15px;border:1px solid rgba(212,175,55,.26);background:rgba(255,255,255,.045);color:var(--gold);font-size:28px;line-height:1}
.map-search-box{display:grid;grid-template-columns:24px 1fr 34px;align-items:center;gap:9px;min-height:54px;padding:0 10px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--gold)}
.map-search-box input{font-size:14px}
.map-search-box button{width:32px;height:32px;border-radius:10px;border:none;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
.suggestions{display:grid;gap:8px;margin-top:12px}
.suggestion{border:1px solid rgba(212,175,55,.18);border-radius:16px;background:rgba(255,255,255,.04);color:#fff;text-align:left;padding:11px 12px;min-height:54px}
.suggestion strong{display:block;font-size:13px;margin-bottom:3px}
.suggestion small{display:block;color:#8d8d8d;font-size:11px;line-height:1.3}
.map-message{margin-top:12px;color:#aaa;font-size:12px;line-height:1.4;font-weight:750}
.map-canvas-wrap{position:relative;min-height:420px;background:#111;grid-column:2;grid-row:1 / 3}
.map-canvas{position:absolute;inset:0;z-index:1}
.center-pin{position:absolute;left:50%;top:50%;z-index:2;color:#d4af37;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.center-pin svg{width:42px;height:42px;fill:rgba(212,175,55,.20)}
.map-confirm-panel{padding:16px 18px;background:rgba(12,12,13,.98);border-top:1px solid rgba(212,175,55,.20)}
.map-confirm-panel span{display:block;color:#8f8f8f;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:1px;margin-bottom:4px}
.map-confirm-panel strong{display:block;color:#fff;font-size:17px;line-height:1.25}
.map-confirm-panel small{display:block;color:#aaa;font-size:12px;line-height:1.35;margin:4px 0 14px;overflow-wrap:anywhere}
.leaflet-container{font-family:Arial,sans-serif;background:#151515}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane > svg,.leaflet-pane > canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden}
.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{user-select:none;-webkit-user-drag:none}
.leaflet-tile{filter:saturate(.82) contrast(.92) brightness(.82)}
.leaflet-control-container .leaflet-top,.leaflet-control-container .leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-control{position:relative;z-index:800;pointer-events:auto;margin:10px}
.leaflet-control-attribution{font-size:10px}
.top-home-btn{
  position:fixed;top:max(13px,env(safe-area-inset-top));left:13px;z-index:99999;width:152px;height:46px;padding:5px 13px 5px 5px;display:inline-flex;align-items:center;gap:10px;color:#f5df8d;text-decoration:none;border:1px solid rgba(212,175,55,.62);border-radius:17px;background:linear-gradient(180deg,rgba(255,238,165,.10),transparent 38%),linear-gradient(135deg,rgba(35,29,12,.97),rgba(7,7,7,.94) 62%,rgba(24,19,7,.95));box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 20px rgba(212,175,55,.14),inset 0 1px 0 rgba(255,245,188,.18),inset 0 -1px 0 rgba(212,175,55,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;isolation:isolate;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.top-home-btn::before{content:"";position:absolute;inset:1px;border-radius:15px;border:1px solid rgba(255,235,151,.06);pointer-events:none}
.top-home-btn::after{content:"";position:absolute;top:-75%;left:-40%;width:38%;height:250%;background:linear-gradient(90deg,transparent,rgba(255,238,160,.18),transparent);transform:rotate(18deg);pointer-events:none}
.home-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;color:#111;background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.92),transparent 18%),linear-gradient(145deg,#79550b 0%,#d4af37 34%,#ffe99a 58%,#a9780d 100%);border:1px solid rgba(255,231,137,.76);box-shadow:0 0 14px rgba(212,175,55,.35),inset 0 0 10px rgba(255,255,255,.26)}
.home-icon svg{width:17px;height:17px;fill:none;stroke:#111;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.home-copy{display:flex;align-items:center;min-width:0;line-height:1}
.home-copy strong{color:#fff0ad;font-size:11px;font-weight:950;letter-spacing:1.35px;white-space:nowrap;text-shadow:0 0 10px rgba(212,175,55,.22)}
.home-copy span{display:none}
.top-home-btn:active{transform:scale(.965);border-color:rgba(255,228,124,.92);box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 24px rgba(212,175,55,.23),inset 0 1px 0 rgba(255,245,188,.19)}
.wallet-preview{position:fixed;top:max(12px,env(safe-area-inset-top));right:13px;z-index:99999;display:flex;align-items:center;gap:8px;user-select:none;-webkit-user-select:none;pointer-events:none}
.wallet-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(212,175,55,.45);background:linear-gradient(180deg,rgba(27,24,15,.92),rgba(7,7,7,.88));box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 18px rgba(212,175,55,.13),inset 0 1px 0 rgba(255,241,166,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.wallet-icon svg{width:22px;height:22px;stroke:#d4af37;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wallet-coming{text-align:left;line-height:1.05;white-space:nowrap}
.wallet-coming strong{display:block;color:#d4af37;font-size:9px;letter-spacing:.8px;font-weight:900}
.wallet-coming span{display:block;margin-top:3px;color:#8f8f8f;font-size:8px;letter-spacing:.25px;font-weight:700}
.wa-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100001}
.wa-modal.show{display:flex}
.wa-box{width:100%;max-width:360px;padding:24px 20px;border-radius:24px;border:1px solid rgba(212,175,55,.48);background:radial-gradient(circle at top,rgba(212,175,55,.22),transparent 38%),linear-gradient(180deg,#111,#050505);box-shadow:0 0 34px rgba(212,175,55,.22);text-align:center}
.wa-box h2{color:#d4af37;font-size:22px;margin-bottom:8px}
.wa-box p{color:#bbb;font-size:13px;margin-bottom:18px}
.wa-link{display:block;width:100%;text-decoration:none;color:#000;font-size:15px;font-weight:900;padding:14px 16px;margin:10px 0;border-radius:16px;background:linear-gradient(135deg,#8a6610,#d4af37,#fff2a8,#b8860b);box-shadow:0 0 18px rgba(212,175,55,.42)}
.wa-close{margin-top:14px;background:transparent;border:none;color:#aaa;font-size:13px;font-weight:700;cursor:pointer}
@media(max-width:980px){
  .booking-layout{grid-template-columns:1fr;width:min(100%,760px)}
  .booking-aside{display:none}
}
@media(max-width:680px){
  body{overflow-y:auto}
  .screen{align-items:flex-start;padding:calc(env(safe-area-inset-top) + 76px) 12px calc(env(safe-area-inset-bottom) + 18px)}
  .landing-screen{align-items:center;min-height:100dvh}
  .form-grid{grid-template-columns:1fr}
  .booking-panel,.review-panel,.loading-panel,.success-panel{border-radius:26px;padding:15px}
  .panel-mark{width:44px;height:44px}
  .payment-options{gap:9px}
  .estimate-card{grid-template-columns:1fr 1fr}
  .review-list div,.review-list em{grid-template-columns:1fr;grid-column:auto;gap:4px}
  .review-list strong{text-align:left}
  .map-modal{padding:0}
  .map-dialog{width:100%;height:100dvh;border-radius:0;border:none;grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .map-search-panel{border-right:none;border-bottom:1px solid rgba(212,175,55,.20);padding:calc(env(safe-area-inset-top) + 14px) 14px 12px;max-height:36dvh}
  .map-canvas-wrap{grid-column:auto;grid-row:auto;min-height:0}
  .map-confirm-panel{padding:14px 14px calc(env(safe-area-inset-bottom) + 14px)}
}
@media(min-width:681px) and (max-height:760px){
  .screen{padding-top:72px;padding-bottom:14px;align-items:flex-start}
  .booking-layout{gap:18px}
  .booking-panel,.review-panel,.loading-panel,.success-panel{padding:14px;gap:9px;border-radius:24px}
  .panel-mark{width:42px;height:42px}
  .panel-header h2,.section-title h2{font-size:25px}
  .glass-field{min-height:58px;border-radius:18px;padding:9px 12px;gap:5px}
  .destination-button{min-height:38px}
  .destination-copy strong{font-size:14px}
  .destination-copy small{font-size:11px}
  .payment-option{min-height:45px;padding:7px 9px}
  .payment-sub{display:none}
  .estimate-card{padding:10px;border-radius:18px;gap:7px}
  .estimate-card p{font-size:10px}
  .primary-cta,.wide-action,.secondary-action{min-height:48px;border-radius:18px;font-size:13px}
  .manual-wa-text{font-size:13px}
  .booking-aside{padding:18px;border-radius:24px}
  .booking-aside h3{font-size:23px}
  .aside-map{height:170px;margin:14px 0}
}
@media(max-width:360px){
  .top-home-btn{width:142px}
  .home-copy strong{font-size:10px}
  .wallet-coming{display:none}
  .glass-field{min-height:68px}
  .payment-name{font-size:13px}
}
@media(max-height:650px) and (orientation:landscape){
  .screen{padding-top:70px}
  .landing-logo{width:110px;margin-bottom:12px}
  .landing-screen h1{font-size:28px;margin-bottom:16px}
  .booking-layout{grid-template-columns:1fr}
  .booking-aside{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* =====================================================
   ORVO Booking 4.6 — Premium Adaptive UI Patch
   Preserves all v4.5 booking and backend behaviour.
   ===================================================== */
:root{
  --app-height:100dvh;
  --header-clearance:76px;
  --mobile-bottom-clearance:calc(env(safe-area-inset-bottom, 0px) + 72px);
  --panel-solid:#0b0b0c;
  --hairline:rgba(255,224,119,.18);
}
html,body{min-height:100%;background:#030303}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(1000px 520px at 50% -140px,rgba(219,177,49,.17),transparent 66%),
    radial-gradient(600px 520px at -10% 65%,rgba(219,177,49,.055),transparent 72%),
    #030303;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.app-shell{position:relative;z-index:1;min-height:var(--app-height);background:transparent}
.screen{
  min-height:var(--app-height);
  padding:calc(env(safe-area-inset-top,0px) + var(--header-clearance)) clamp(14px,3vw,42px) calc(env(safe-area-inset-bottom,0px) + 28px);
}
.glass-shell{
  border-color:rgba(255,222,108,.20);
  background:
    linear-gradient(145deg,rgba(255,243,188,.075),transparent 24%),
    linear-gradient(180deg,rgba(17,17,19,.94),rgba(7,7,8,.91));
  box-shadow:0 36px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.018) inset,0 0 60px rgba(202,154,25,.055);
}
.booking-layout{width:min(100%,1240px);grid-template-columns:minmax(620px,850px) minmax(270px,330px);gap:clamp(18px,2.2vw,34px)}
.booking-panel{position:relative;overflow:hidden;padding:clamp(20px,2.2vw,28px);gap:15px}
.booking-panel::before,.review-panel::before,.success-panel::before,.loading-panel::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,230,137,.52),transparent);
}
.panel-header{padding:0 1px 7px;gap:15px}
.panel-mark{width:54px;height:54px;border-radius:18px;background:#030303;box-shadow:0 0 0 1px rgba(255,230,132,.12),0 14px 30px rgba(0,0,0,.36),0 0 25px rgba(212,175,55,.10)}
.panel-header p,.section-title p,.aside-kicker,.map-title-row p{letter-spacing:2px}
.panel-header h2,.section-title h2{letter-spacing:-.035em}
.form-grid{gap:12px}
.glass-field{
  min-height:78px;border-radius:20px;padding:13px 15px;
  border-color:rgba(255,224,119,.19);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(7,7,8,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 28px rgba(0,0,0,.18);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.glass-field:focus-within{border-color:rgba(255,220,95,.55);background:linear-gradient(180deg,rgba(255,226,119,.055),rgba(255,255,255,.014)),rgba(8,8,9,.88);box-shadow:0 0 0 3px rgba(212,175,55,.075),inset 0 1px 0 rgba(255,255,255,.06)}
.field-label{font-size:9px;letter-spacing:1.45px;color:#9b9b9d}
input{font-size:16px;letter-spacing:.01em}
.destination-button{grid-template-columns:38px 1fr 22px;gap:12px}
.pin-icon{width:38px;height:38px;border-radius:13px;box-shadow:0 7px 20px rgba(212,175,55,.16),inset 0 1px 0 rgba(255,255,255,.55)}
.destination-copy strong{font-size:15px;letter-spacing:-.012em}
.destination-copy small{font-size:11px;color:#858587}
.payment-title{margin:2px 4px 9px}
.payment-option{min-height:60px;border-radius:18px;padding:11px 13px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),rgba(5,5,6,.72)}
.payment-option.active{background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(255,255,255,.012) 58%),rgba(7,7,8,.86)}
.estimate-card{border-radius:20px;padding:15px 16px;background:linear-gradient(135deg,rgba(212,175,55,.07),transparent 45%),rgba(7,7,8,.82);border-color:rgba(255,224,119,.20)}
.estimate-card strong{font-size:19px;letter-spacing:-.025em}
#msg{min-height:17px;font-size:12px}
.primary-cta,.wide-action{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(110deg,#6f4b05 0%,#bb8b17 22%,#f2d66c 47%,#fff1aa 55%,#ce991e 76%,#6e4904 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.38),0 8px 28px rgba(194,143,18,.18),inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(73,46,0,.55);
}
.primary-cta::after,.wide-action::after{content:"";position:absolute;inset:-80% auto -80% -55%;width:32%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transition:left .6s cubic-bezier(.22,1,.36,1);z-index:-1}
.primary-cta:hover::after,.wide-action:hover::after{left:125%}
.wide-action{min-height:58px;letter-spacing:.9px}
.manual-wa-text{padding:5px 10px 1px;color:#e3c55f;text-decoration-thickness:1px}
.booking-aside{position:relative;overflow:hidden;padding:24px}
.booking-aside::before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-105px;top:-105px;background:radial-gradient(circle,rgba(212,175,55,.18),transparent 68%)}
.booking-aside h3{font-size:clamp(25px,2.1vw,32px);letter-spacing:-.04em;line-height:1.08}
.aside-map{border-radius:24px;border-color:rgba(255,224,119,.18);background:radial-gradient(circle at 63% 42%,rgba(212,175,55,.25),transparent 10%),linear-gradient(145deg,rgba(212,175,55,.08),transparent 55%),#060607}
.review-panel,.success-panel,.loading-panel{position:relative;width:min(100%,760px);padding:clamp(19px,2.4vw,28px)}
.review-list{border-radius:22px;background:rgba(5,5,6,.73)}
.review-list div{padding:13px 15px;border-bottom-color:rgba(255,255,255,.055)}
.button-row{gap:12px}
.secondary-action{border-color:rgba(255,224,119,.21);background:rgba(255,255,255,.025)}
.map-dialog{background:#070708;border-color:rgba(255,224,119,.24);box-shadow:0 44px 110px rgba(0,0,0,.7),0 0 70px rgba(212,175,55,.08)}
.map-search-panel,.map-confirm-panel{background:linear-gradient(180deg,rgba(255,240,177,.045),transparent 25%),rgba(8,8,9,.98)}
.wa-box{border-radius:28px;padding:27px 22px;background:linear-gradient(145deg,rgba(255,239,170,.09),transparent 30%),linear-gradient(180deg,#111113,#050506)}
.wa-link{min-height:54px;display:flex;align-items:center;justify-content:center}

/* iPhone Safari / dynamic browser chrome protection */
@media(max-width:680px){
  :root{--header-clearance:70px}
  html,body{height:auto;min-height:var(--app-height)}
  body{overflow:hidden}
  .app-shell{height:var(--app-height);min-height:0;overflow:hidden}
  .screen{
    height:var(--app-height);min-height:0;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
    align-items:flex-start;
    padding:calc(env(safe-area-inset-top,0px) + var(--header-clearance)) 11px var(--mobile-bottom-clearance);
    scrollbar-width:none;
  }
  .screen::-webkit-scrollbar{display:none}
  .landing-screen{align-items:center;justify-content:center;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 34px);overflow:hidden}
  .landing-inner{transform:translateY(-1.5vh)}
  .landing-logo{width:clamp(132px,39vw,175px);margin-bottom:16px}
  .landing-screen h1{font-size:clamp(31px,9vw,43px);margin-bottom:24px;max-width:360px}
  .landing-kicker{font-size:9px;letter-spacing:1.7px}
  .primary-cta{width:min(92%,350px);min-height:56px;border-radius:19px}
  .booking-layout{display:block;width:100%;max-width:600px;margin:0 auto}
  .booking-panel,.review-panel,.loading-panel,.success-panel{width:100%;border-radius:24px;padding:15px 13px 17px;gap:12px}
  .panel-header{gap:11px;padding-bottom:3px}
  .panel-mark{width:43px;height:43px;border-radius:14px}
  .panel-header h2,.section-title h2{font-size:24px}
  .panel-header p,.section-title p{font-size:8px;letter-spacing:1.55px}
  .form-grid{grid-template-columns:1fr;gap:9px}
  .glass-field{min-height:66px;border-radius:18px;padding:10px 12px;gap:6px}
  .compact-field{min-height:62px}
  .destination-button{min-height:42px;grid-template-columns:34px 1fr 18px;gap:9px}
  .pin-icon{width:34px;height:34px;border-radius:11px}
  .destination-copy strong{font-size:14px}
  .destination-copy small{font-size:10px}
  .payment-options{gap:8px}
  .payment-option{min-height:52px;padding:9px 10px;border-radius:16px}
  .payment-sub{font-size:9px}
  .estimate-card{padding:12px;border-radius:18px;gap:8px}
  .estimate-card strong{font-size:16px}
  .estimate-card p{font-size:10px;line-height:1.35}
  .wide-action{min-height:54px;border-radius:18px;font-size:13px}
  .manual-wa-text{font-size:12px;padding-bottom:2px}
  .review-list div{padding:11px 12px}
  .review-list strong{font-size:14px}
  .button-row{position:relative;z-index:2}
  .top-home-btn{top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;width:143px;height:44px;border-radius:16px}
  .wallet-preview{top:calc(env(safe-area-inset-top,0px) + 10px);right:10px}
  .wallet-icon{width:42px;height:42px}
  .map-modal{height:var(--app-height);padding:0;align-items:stretch}
  .map-dialog{height:var(--app-height);min-height:0;grid-template-rows:auto minmax(170px,1fr) auto}
  .map-search-panel{padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 10px;max-height:34%;overflow:auto}
  .map-confirm-panel{padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 26px)}
  .wa-modal{height:var(--app-height);padding:18px 14px calc(env(safe-area-inset-bottom,0px) + 26px)}
}
@media(max-width:390px){
  .wallet-coming{display:none}
  .top-home-btn{width:139px}
  .home-copy strong{font-size:9.5px}
  .estimate-card{grid-template-columns:1fr 1fr}
}
@media(max-width:350px){
  .screen{padding-left:8px;padding-right:8px}
  .booking-panel,.review-panel,.loading-panel,.success-panel{padding-left:10px;padding-right:10px}
  .payment-options{grid-template-columns:1fr}
  .wallet-icon{width:39px;height:39px}
  .top-home-btn{height:41px;width:135px}
}
@media(min-width:681px) and (max-height:820px){
  .screen{padding-top:70px;padding-bottom:18px;align-items:flex-start}
  .booking-panel{gap:10px;padding:15px 18px}
  .glass-field{min-height:62px;padding:9px 13px;gap:5px}
  .panel-mark{width:43px;height:43px}
  .panel-header h2{font-size:25px}
  .payment-option{min-height:48px}
  .estimate-card{padding:10px 13px}
  .wide-action{min-height:50px}
}

/* v4.6.1 optional drop-off label */
.optional-label{
  display:inline-flex;
  align-items:center;
  margin-left:.45rem;
  padding:.16rem .46rem;
  border:1px solid rgba(212,175,55,.28);
  border-radius:999px;
  color:rgba(244,218,130,.88);
  background:rgba(212,175,55,.07);
  font-size:.68em;
  font-style:normal;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* =====================================================
   ORVO Booking 4.7 — Executive Minimal UI
   Mobile action-lock + compact adaptive confirmation flow
   ===================================================== */
:root{
  --ivory:#f7f3e8;
  --champagne:#e6c96c;
  --deep-gold:#a87912;
  --surface:#0a0a0b;
  --surface-2:#101011;
}
body{
  background:
    radial-gradient(900px 520px at 78% -12%,rgba(230,201,108,.12),transparent 62%),
    radial-gradient(680px 520px at -8% 74%,rgba(230,201,108,.055),transparent 68%),
    linear-gradient(135deg,#060607 0%,#020203 55%,#080706 100%);
}
body::before{
  opacity:.24;
  background-image:
    linear-gradient(118deg,transparent 0 47.8%,rgba(230,201,108,.055) 48%,transparent 48.25%),
    linear-gradient(62deg,transparent 0 49.8%,rgba(255,255,255,.018) 50%,transparent 50.18%);
  background-size:220px 220px,170px 170px;
}
.booking-screen::before,.review-screen::before,.success-screen::before{
  content:"";position:fixed;inset:auto -12vw -26vh auto;width:min(72vw,900px);height:min(72vw,900px);
  border:1px solid rgba(230,201,108,.075);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 76px rgba(230,201,108,.018),0 0 0 152px rgba(230,201,108,.010);
  transform:skewX(-12deg);opacity:.8;
}
.glass-shell{
  border:1px solid rgba(230,201,108,.17);
  background:linear-gradient(160deg,rgba(255,255,255,.045),transparent 23%),rgba(8,8,9,.91);
  box-shadow:0 34px 88px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
}
.booking-panel{border-radius:34px}
.panel-header{border-bottom:1px solid rgba(255,255,255,.055);padding-bottom:14px;margin-bottom:1px}
.panel-header p{color:#bda34d}
.panel-header h2{font-weight:720;color:var(--ivory)}
.glass-field{
  border-color:rgba(255,255,255,.085);
  background:rgba(255,255,255,.025);
  box-shadow:none;
}
.glass-field:focus-within{border-color:rgba(230,201,108,.46);box-shadow:0 0 0 1px rgba(230,201,108,.10)}
.field-label{color:#858589;font-weight:760}
.pin-icon{background:linear-gradient(145deg,#f3dc88,#b88920);box-shadow:none}
.payment-option{border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.022);box-shadow:none}
.payment-option.active{border-color:rgba(230,201,108,.32);background:rgba(230,201,108,.055);box-shadow:none}
.estimate-card{
  border-color:rgba(230,201,108,.15);
  background:linear-gradient(120deg,rgba(230,201,108,.055),transparent 50%),rgba(255,255,255,.018);
  box-shadow:none;
}
.estimate-card strong{color:var(--ivory)}
.wide-action,.primary-cta{
  background:linear-gradient(135deg,#a87712 0%,#e7cb6d 42%,#f5e5a0 55%,#bd8d20 100%);
  border-color:rgba(255,237,164,.58);
  box-shadow:0 14px 34px rgba(0,0,0,.38),0 8px 20px rgba(174,126,18,.13),inset 0 1px 0 rgba(255,255,255,.48);
}
.review-list{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.018);box-shadow:none}
.review-list div{border-bottom-color:rgba(255,255,255,.055)}
.review-list span{color:#858589}
.review-list strong{font-weight:720;color:var(--ivory)}
.secondary-action{background:rgba(255,255,255,.028);border-color:rgba(255,255,255,.10);color:#e8e3d6}

@media(min-width:681px){
  .booking-layout{grid-template-columns:minmax(650px,850px) minmax(260px,310px)}
  .booking-panel{padding:26px 28px}
  .booking-aside{background:linear-gradient(155deg,rgba(230,201,108,.08),transparent 42%),rgba(7,7,8,.90)}
}

/* Mobile: keep primary actions visible even after destination/review content expands. */
@media(max-width:680px){
  :root{--mobile-action-space:124px}
  .screen{
    overflow:hidden;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  .booking-screen,.review-screen,.success-screen,.loading-screen{align-items:stretch}
  .booking-layout{height:100%;min-height:0}
  .booking-panel,.review-panel,.success-panel,.loading-panel{
    height:100%;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-radius:25px;padding:14px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
    scrollbar-width:none;
  }
  .booking-panel::-webkit-scrollbar,.review-panel::-webkit-scrollbar,.success-panel::-webkit-scrollbar{display:none}
  .booking-panel{gap:9px}
  .panel-header{padding-bottom:9px;margin-bottom:0;flex:0 0 auto}
  .panel-header h2{font-size:22px}
  .panel-mark{width:40px;height:40px}
  .form-grid{gap:7px;flex:0 0 auto}
  .glass-field{min-height:59px;padding:8px 11px;border-radius:16px;gap:4px}
  .compact-field{min-height:56px}
  .destination-field{min-height:61px}
  .destination-button{min-height:36px}
  .destination-copy strong,.destination-copy small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .clear-destination{font-size:10px;margin-top:1px}
  .payment-title{margin-bottom:6px}
  .payment-option{min-height:46px;padding:7px 9px;border-radius:14px}
  .payment-sub{display:none}
  .estimate-card{padding:9px 10px;border-radius:15px;gap:5px}
  .estimate-card span{font-size:8px}
  .estimate-card strong{font-size:15px}
  .estimate-card p{font-size:9px;line-height:1.28}
  #msg{min-height:13px;font-size:10px}

  /* Sticky dual-action dock inside the scrollable card. */
  #bookBtn{
    position:sticky;bottom:42px;z-index:12;flex:0 0 auto;min-height:50px;
    box-shadow:0 -18px 30px rgba(7,7,8,.96),0 12px 28px rgba(0,0,0,.42),0 7px 18px rgba(174,126,18,.15);
  }
  .manual-wa-text{
    position:sticky;bottom:0;z-index:13;flex:0 0 auto;width:100%;min-height:38px;
    display:flex;align-items:center;justify-content:center;
    margin-top:-2px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 7px);
    background:linear-gradient(180deg,rgba(8,8,9,.94),#080809 45%);
    text-decoration:none;border-top:1px solid rgba(230,201,108,.10);
  }

  .review-panel{display:flex}
  .review-panel .section-title{flex:0 0 auto}
  .review-panel .review-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .review-panel .button-row{
    position:sticky;bottom:0;z-index:15;flex:0 0 auto;padding-top:10px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 2px);
    background:linear-gradient(180deg,transparent 0,rgba(8,8,9,.95) 22%,#080809 52%);
  }
  .review-panel .button-row .secondary-action,.review-panel .button-row .wide-action{min-height:49px}

  .success-panel .review-list{max-height:42vh;overflow-y:auto}
  .success-panel .button-row{position:sticky;bottom:0;z-index:10;padding-top:10px;background:linear-gradient(180deg,transparent,rgba(8,8,9,.98) 28%)}
}

@media(max-width:390px), (max-height:740px) and (max-width:680px){
  .screen{padding-left:8px;padding-right:8px}
  .booking-panel,.review-panel,.success-panel,.loading-panel{padding-left:10px;padding-right:10px}
  .panel-header p{display:none}
  .panel-header h2{font-size:20px}
  .glass-field{min-height:55px}
  .payment-name{font-size:12px}
  .estimate-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .review-list div{padding:9px 10px}
  .review-list span{font-size:8px}
  .review-list strong{font-size:13px}
}

/* =====================================================
   ORVO Booking 5.0 - Luxury Edition UI Redesign
   UI-only layer. Business logic, APIs, maps, GPS, booking
   submission, WhatsApp, Apps Script, and Malaysia rules stay
   in the production JavaScript unchanged.
   ===================================================== */
:root{
  --lux-black:#030304;
  --lux-panel:#090909;
  --lux-panel-2:#0d0d0e;
  --lux-line:rgba(216,190,118,.18);
  --lux-line-strong:rgba(216,190,118,.42);
  --lux-gold:#d8be76;
  --lux-gold-deep:#8f6b21;
  --lux-cream:#f7f2e7;
  --lux-muted:#9c9890;
  --lux-shadow:0 34px 90px rgba(0,0,0,.62);
  --lux-ease:cubic-bezier(.22,1,.36,1);
}
html{background:var(--lux-black)}
body{
  color:var(--lux-cream);
  background:
    radial-gradient(900px 580px at 50% -18%,rgba(216,190,118,.13),transparent 68%),
    radial-gradient(720px 460px at 96% 16%,rgba(216,190,118,.055),transparent 68%),
    radial-gradient(760px 540px at -12% 82%,rgba(255,255,255,.032),transparent 66%),
    linear-gradient(180deg,#070708 0%,#020203 64%,#050505 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.52;
  background:
    linear-gradient(115deg,transparent 0 41%,rgba(216,190,118,.045) 41.1%,transparent 41.45%),
    linear-gradient(64deg,transparent 0 56%,rgba(255,255,255,.022) 56.08%,transparent 56.34%),
    radial-gradient(ellipse at 50% 100%,rgba(216,190,118,.10),transparent 48%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.09;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light;
}
.app-shell,.screen{position:relative;z-index:1}
.screen{
  animation-duration:.34s;
  animation-timing-function:var(--lux-ease);
}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.landing-screen{
  background:
    radial-gradient(520px 380px at 50% 30%,rgba(216,190,118,.14),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 24%),
    transparent;
}
.landing-screen::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:clamp(-80px,-9vh,-28px);
  width:min(92vw,920px);
  height:min(43vh,360px);
  transform:translateX(-50%) perspective(560px) rotateX(68deg);
  opacity:.42;
  background:
    linear-gradient(90deg,transparent 4%,rgba(255,255,255,.18) 5.2%,transparent 6.4%,transparent 49%,rgba(216,190,118,.20) 50%,transparent 51%,transparent 93.6%,rgba(255,255,255,.14) 94.8%,transparent 96%),
    radial-gradient(ellipse at 50% 6%,rgba(216,190,118,.22),transparent 58%);
  filter:blur(.2px);
}
.landing-inner{width:min(92vw,560px)}
.brand-orbit{
  width:min(86vw,520px);
  background:
    radial-gradient(circle,rgba(216,190,118,.13),rgba(216,190,118,.04) 42%,transparent 70%);
  animation:luxBreath 4.8s var(--lux-ease) infinite;
}
@keyframes luxBreath{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.9;transform:scale(1.025)}}
.landing-logo{
  width:clamp(178px,24vw,286px);
  margin-bottom:clamp(28px,4.6vh,44px);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.68)) drop-shadow(0 0 30px rgba(216,190,118,.18));
}
.landing-kicker{
  color:rgba(216,190,118,.92);
  font-size:clamp(10px,1vw,12px);
  letter-spacing:.28em;
  margin-bottom:clamp(13px,2vh,18px);
}
.landing-screen h1{
  color:var(--lux-cream);
  font-weight:680;
  letter-spacing:.01em;
  font-size:clamp(39px,5.4vw,72px);
  line-height:.98;
  margin-bottom:clamp(32px,5vh,52px);
  text-shadow:0 22px 60px rgba(0,0,0,.72);
}
.primary-cta,.wide-action{
  position:relative;
  isolation:isolate;
  min-height:62px;
  border-radius:23px;
  color:#090806;
  letter-spacing:.14em;
  font-weight:850;
  background:
    linear-gradient(180deg,rgba(255,255,255,.32),transparent 38%),
    linear-gradient(135deg,#8f6b21 0%,#d8be76 38%,#f4e4aa 52%,#b68832 100%);
  border:1px solid rgba(247,228,168,.48);
  box-shadow:
    0 18px 48px rgba(0,0,0,.52),
    0 10px 28px rgba(143,107,33,.18),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -10px 26px rgba(96,65,12,.18);
  transition:transform .24s var(--lux-ease),box-shadow .24s var(--lux-ease),filter .24s var(--lux-ease);
}
.primary-cta{width:min(100%,380px)}
.primary-cta:hover,.wide-action:hover{
  filter:saturate(1.02) brightness(1.03);
  box-shadow:
    0 22px 56px rgba(0,0,0,.58),
    0 12px 34px rgba(143,107,33,.24),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -10px 26px rgba(96,65,12,.16);
}
.primary-cta:active,.wide-action:active,.secondary-action:active{transform:scale(.982)}
.road-reflection{display:none}
.glass-shell{
  border:1px solid var(--lux-line);
  border-radius:38px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.047),transparent 18%),
    linear-gradient(135deg,rgba(216,190,118,.045),transparent 38%),
    rgba(6,6,7,.92);
  box-shadow:var(--lux-shadow),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.booking-layout{
  width:min(100%,1280px);
  grid-template-columns:minmax(680px,900px) minmax(280px,330px);
  gap:clamp(22px,3vw,38px);
}
.booking-panel,.review-panel,.success-panel,.loading-panel{
  padding:clamp(24px,2.5vw,34px);
}
.booking-panel{gap:16px}
.panel-header{
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.panel-mark{
  width:54px;
  height:54px;
  border-radius:18px;
  border-color:rgba(216,190,118,.22);
  box-shadow:0 18px 34px rgba(0,0,0,.34);
}
.panel-header p,.section-title p,.aside-kicker,.map-title-row p{
  color:rgba(216,190,118,.86);
  letter-spacing:.22em;
  font-weight:780;
}
.panel-header h2,.section-title h2{
  color:var(--lux-cream);
  font-weight:680;
  letter-spacing:-.025em;
}
.form-grid{gap:14px}
.glass-field{
  min-height:78px;
  border-radius:24px;
  padding:14px 16px;
  border-color:rgba(255,255,255,.085);
  background:rgba(255,255,255,.024);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .22s var(--lux-ease),background .22s var(--lux-ease),box-shadow .22s var(--lux-ease),transform .22s var(--lux-ease);
}
.glass-field:hover{border-color:rgba(216,190,118,.24);background:rgba(255,255,255,.032)}
.glass-field:focus-within{
  border-color:rgba(216,190,118,.56);
  background:rgba(255,255,255,.037);
  box-shadow:0 0 0 1px rgba(216,190,118,.12),0 16px 40px rgba(0,0,0,.24);
}
.field-label{
  color:rgba(247,242,231,.52);
  letter-spacing:.16em;
  font-weight:760;
}
.optional-label{
  border-color:rgba(216,190,118,.25);
  color:rgba(216,190,118,.82);
  background:rgba(216,190,118,.055);
}
input{
  color:var(--lux-cream);
  font-weight:760;
  letter-spacing:.01em;
}
input::placeholder{color:rgba(247,242,231,.33)}
.prefix{color:var(--lux-gold);font-weight:760}
.destination-button{grid-template-columns:38px 1fr 22px}
.pin-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.36),transparent 38%),
    linear-gradient(145deg,#8f6b21,#d8be76 54%,#b68832);
  box-shadow:0 10px 22px rgba(0,0,0,.30);
}
.destination-copy strong{font-weight:760;color:var(--lux-cream)}
.destination-copy small{color:rgba(247,242,231,.44)}
.chevron{color:rgba(216,190,118,.82)}
.payment-title{color:rgba(247,242,231,.48)}
.payment-option{
  border-radius:19px;
  border-color:rgba(255,255,255,.075);
  background:rgba(255,255,255,.018);
}
.payment-option.active{
  border-color:rgba(216,190,118,.38);
  background:linear-gradient(135deg,rgba(216,190,118,.075),rgba(255,255,255,.018));
}
.payment-dot{border-color:rgba(216,190,118,.62)}
.payment-option.active .payment-dot::after{background:var(--lux-gold);box-shadow:0 0 12px rgba(216,190,118,.48)}
.estimate-card{
  border-radius:24px;
  padding:16px;
  border-color:rgba(216,190,118,.16);
  background:
    linear-gradient(120deg,rgba(216,190,118,.055),transparent 48%),
    rgba(255,255,255,.016);
}
.estimate-card span,.review-list span{color:rgba(247,242,231,.48);letter-spacing:.15em}
.estimate-card strong,.review-list strong{color:var(--lux-cream);font-weight:680}
.estimate-card p{color:rgba(247,242,231,.48)}
.manual-wa-text{
  color:rgba(216,190,118,.88);
  text-decoration:none;
}
.manual-wa-text:hover{text-decoration:underline;text-underline-offset:5px}
.booking-aside{
  border-radius:38px;
  background:
    linear-gradient(150deg,rgba(216,190,118,.08),transparent 42%),
    rgba(7,7,8,.88);
}
.booking-aside h3{font-weight:650;color:var(--lux-cream)}
.aside-map{
  border-radius:30px;
  border-color:rgba(216,190,118,.16);
  background:
    radial-gradient(circle at 52% 48%,rgba(216,190,118,.32),transparent 7%),
    radial-gradient(circle at 52% 48%,rgba(216,190,118,.12),transparent 24%),
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 52%),
    #050506;
}
.aside-map::before{
  border-color:rgba(247,242,231,.08);
  transform:rotate(-18deg) skewX(-10deg);
}
.review-screen,.success-screen,.loading-screen{align-items:stretch}
.review-panel,.success-panel,.loading-panel{
  width:min(100%,790px);
  max-height:calc(var(--app-height,100dvh) - 128px);
  overflow:hidden;
}
.review-panel,.success-panel{display:flex}
.section-title{
  flex:0 0 auto;
  padding-bottom:12px;
}
.section-title.centered{text-align:center}
.review-list{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-width:none;
  border-radius:28px;
  padding:8px;
  background:rgba(255,255,255,.014);
  border:1px solid rgba(255,255,255,.065);
}
.review-list::-webkit-scrollbar{display:none}
.review-list div{
  grid-template-columns:minmax(150px,.42fr) 1fr;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.review-list .summary-group{
  display:block;
  padding:18px 16px 8px;
  border-bottom:none;
}
.review-list .summary-group:first-child{padding-top:8px}
.summary-group span{
  color:rgba(216,190,118,.82);
  font-size:10px;
  letter-spacing:.22em;
}
.review-list em{
  color:rgba(88,214,141,.82);
  letter-spacing:.14em;
}
.review-panel .button-row,.success-panel > .wide-action,.success-panel > .secondary-action{
  flex:0 0 auto;
}
.review-panel .button-row{
  padding-top:14px;
}
.success-medallion{
  width:94px;
  height:94px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 40%),
    linear-gradient(145deg,#8f6b21,#d8be76 52%,#f1dea0);
  color:#080704;
  box-shadow:0 28px 60px rgba(0,0,0,.48),0 0 46px rgba(216,190,118,.18);
  animation:successIn .34s var(--lux-ease) both;
}
@keyframes successIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.success-panel .section-title h2{
  color:var(--lux-gold);
  font-size:clamp(26px,3.1vw,38px);
}
.secondary-action{
  border-radius:20px;
  min-height:56px;
  color:rgba(247,242,231,.86);
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.105);
}
.map-dialog,.wa-box{
  border-color:rgba(216,190,118,.26);
  background:#070708;
  box-shadow:0 44px 110px rgba(0,0,0,.74),0 0 70px rgba(216,190,118,.08);
}
.map-search-panel,.map-confirm-panel{
  background:
    linear-gradient(180deg,rgba(216,190,118,.05),transparent 28%),
    rgba(7,7,8,.98);
}
.map-search-box,.suggestion{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.026);
}
.map-search-box:focus-within{border-color:rgba(216,190,118,.52);box-shadow:0 0 0 1px rgba(216,190,118,.10)}
.wa-link{
  background:
    linear-gradient(180deg,rgba(255,255,255,.32),transparent 38%),
    linear-gradient(135deg,#8f6b21,#d8be76 48%,#b68832);
}

@media(min-width:1180px){
  .landing-inner{transform:translateY(-10px)}
}
@media(max-width:980px){
  .booking-layout{width:min(100%,780px)}
}
@media(max-width:680px){
  :root{--mobile-action-space:130px}
  body{background:linear-gradient(180deg,#070708 0%,#010102 58%,#050505 100%)}
  .screen{
    padding-top:calc(env(safe-area-inset-top,0px) + 76px);
    padding-left:12px;
    padding-right:12px;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  .landing-screen{
    padding-top:calc(env(safe-area-inset-top,0px) + 66px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  }
  .landing-logo{width:clamp(152px,43vw,190px);margin-bottom:24px}
  .landing-kicker{font-size:9px;letter-spacing:.22em;margin-bottom:13px}
  .landing-screen h1{font-size:clamp(34px,10vw,46px);line-height:1;margin-bottom:30px}
  .primary-cta{width:min(100%,350px);min-height:60px;border-radius:22px}
  .booking-panel,.review-panel,.success-panel,.loading-panel{
    border-radius:30px;
    padding:16px 14px calc(env(safe-area-inset-bottom,0px) + 12px);
    background:
      linear-gradient(180deg,rgba(255,255,255,.04),transparent 16%),
      rgba(7,7,8,.94);
  }
  .booking-panel{gap:10px}
  .panel-header{padding-bottom:12px}
  .panel-header h2{font-size:24px}
  .panel-header p{font-size:8px}
  .glass-field{min-height:62px;border-radius:18px;padding:10px 12px}
  .destination-field{min-height:66px}
  .destination-button{grid-template-columns:34px 1fr 18px}
  .pin-icon{width:34px;height:34px;border-radius:12px}
  .payment-option{min-height:50px}
  .estimate-card{border-radius:18px;padding:11px 12px}
  #bookBtn{
    bottom:45px;
    min-height:56px;
    border-radius:20px;
    box-shadow:
      0 -22px 32px rgba(7,7,8,.96),
      0 16px 34px rgba(0,0,0,.44),
      0 9px 22px rgba(143,107,33,.18);
  }
  .manual-wa-text{
    min-height:42px;
    color:rgba(216,190,118,.86);
    background:linear-gradient(180deg,rgba(7,7,8,.92),#070708 48%);
  }
  .review-panel,.success-panel,.loading-panel{max-height:none}
  .review-list{
    border-radius:22px;
    padding:7px;
  }
  .review-list div{
    grid-template-columns:1fr;
    gap:5px;
    padding:12px 12px;
  }
  .review-list .summary-group{padding:16px 12px 6px}
  .review-panel .button-row{
    position:sticky;
    bottom:0;
    z-index:20;
    padding:14px 0 calc(env(safe-area-inset-bottom,0px) + 3px);
    background:linear-gradient(180deg,transparent,rgba(7,7,8,.96) 30%,#070708 72%);
  }
  .review-panel .button-row .secondary-action,.review-panel .button-row .wide-action{min-height:54px}
  .success-panel .review-list{max-height:43vh}
  .success-panel > .wide-action{
    margin-top:10px;
    min-height:58px;
  }
  .success-panel > .secondary-action{
    min-height:52px;
  }
  .map-dialog{background:#070708}
  .map-confirm-panel{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
}
@media(max-width:380px){
  .screen{padding-left:9px;padding-right:9px}
  .landing-screen h1{font-size:33px}
  .booking-panel,.review-panel,.success-panel,.loading-panel{border-radius:26px;padding-left:11px;padding-right:11px}
  .panel-header h2{font-size:21px}
  .payment-options{gap:7px}
  .payment-name{font-size:12px}
  .wide-action{letter-spacing:.10em}
}
@media(max-height:720px) and (max-width:680px){
  .landing-logo{width:132px;margin-bottom:16px}
  .landing-screen h1{font-size:31px;margin-bottom:22px}
  .primary-cta{min-height:54px}
  .glass-field{min-height:56px}
  .panel-header p{display:none}
}
@media(min-width:681px) and (max-height:820px){
  .booking-panel{padding:18px 22px;gap:11px}
  .glass-field{min-height:64px;border-radius:20px}
  .wide-action{min-height:52px}
}
@media(prefers-reduced-motion:reduce){
  .brand-orbit,.success-medallion{animation:none!important}
}

@media(min-width:681px) and (max-height:760px){
  .screen{padding-top:66px;padding-bottom:12px;align-items:flex-start}
  .booking-layout{grid-template-columns:minmax(640px,820px) minmax(250px,300px);gap:18px}
  .booking-panel{padding:14px 20px;gap:8px;border-radius:30px}
  .panel-header{padding-bottom:8px}
  .panel-mark{width:42px;height:42px;border-radius:14px}
  .panel-header h2{font-size:24px}
  .panel-header p{font-size:8px}
  .form-grid{gap:8px}
  .glass-field{min-height:54px;border-radius:17px;padding:8px 12px;gap:4px}
  .destination-field{min-height:58px}
  .destination-button{min-height:34px;grid-template-columns:32px 1fr 18px}
  .pin-icon{width:32px;height:32px;border-radius:11px}
  .destination-copy strong{font-size:14px}
  .destination-copy small{font-size:10px}
  .payment-title{margin-bottom:5px}
  .payment-option{min-height:42px;padding:6px 9px;border-radius:14px}
  .payment-sub{display:none}
  .estimate-card{padding:8px 11px;border-radius:16px;gap:4px}
  .estimate-card span{font-size:8px}
  .estimate-card strong{font-size:14px}
  .estimate-card p{font-size:9px;line-height:1.25}
  #msg{min-height:12px;font-size:10px}
  .wide-action{min-height:46px;border-radius:17px;font-size:12px}
  .manual-wa-text{font-size:11px;min-height:18px;padding:2px 8px 0}
  .booking-aside{padding:16px;border-radius:30px}
  .booking-aside h3{font-size:22px}
  .aside-map{height:156px;margin:13px 0}
}

/* =====================================================
   ORVO Booking 5.0.1 — Viewport & Action Dock Fix
   UI-only patch. No booking/backend behaviour changed.
   ===================================================== */

/* Desktop: every application screen occupies exactly one viewport.
   This removes the empty document scrollbar caused by min-height + padding. */
@media (min-width:681px){
  html,body{width:100%;height:100%;min-height:0;overflow:hidden}
  .app-shell{width:100%;height:100vh;min-height:0;overflow:hidden}
  .screen{
    width:100%;height:100vh;min-height:0;overflow:hidden;
    padding-top:max(70px,calc(env(safe-area-inset-top,0px) + 70px));
    padding-bottom:18px;
  }
  .booking-layout{max-height:calc(100vh - 88px);min-height:0}
  .booking-panel,.booking-aside,.review-panel,.success-panel,.loading-panel{min-height:0;max-height:calc(100vh - 88px)}
  .review-panel,.success-panel{overflow:hidden}
  .review-panel .review-list,.success-panel .review-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* Mobile: the browser page itself never grows. The card is the scroll
   container and the primary actions remain docked above Safari/Chrome UI. */
@media (max-width:680px){
  :root{--mobile-screen-gap:10px;--mobile-action-bg:rgba(7,7,8,.985)}
  html,body{width:100%;height:var(--app-height);min-height:0;overflow:hidden}
  body{position:fixed;inset:0}
  .app-shell{height:var(--app-height);min-height:0;overflow:hidden}
  .screen{
    height:var(--app-height);min-height:0;overflow:hidden;
    padding-top:calc(env(safe-area-inset-top,0px) + 68px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--mobile-screen-gap));
  }
  .booking-layout{height:100%;min-height:0;display:block}
  .booking-panel,.review-panel,.success-panel,.loading-panel{
    height:100%;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  }
  .booking-panel::-webkit-scrollbar,.review-panel::-webkit-scrollbar,.success-panel::-webkit-scrollbar,.loading-panel::-webkit-scrollbar{display:none}

  /* Long selected addresses may wrap naturally without widening the card. */
  .destination-copy strong,.destination-copy small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .destination-copy strong{-webkit-line-clamp:2}
  .destination-copy small{-webkit-line-clamp:2}
  .destination-field{flex:0 0 auto}

  /* Booking actions remain visible while the form content scrolls behind. */
  #bookBtn{
    position:sticky;bottom:34px;z-index:30;flex:0 0 auto;margin-top:2px;
    box-shadow:0 -18px 28px rgba(7,7,8,.96),0 14px 34px rgba(0,0,0,.44),0 8px 20px rgba(174,126,18,.16),inset 0 1px 0 rgba(255,255,255,.48);
  }
  #manualWaBtn{
    position:sticky;bottom:0;z-index:29;flex:0 0 auto;width:100%;min-height:34px;
    margin-top:-1px;padding:9px 10px 4px;background:var(--mobile-action-bg);
    text-align:center;border-radius:0 0 18px 18px;
  }

  /* Review: summary scrolls, footer never leaves the visible card. */
  .review-panel{display:flex;overflow:hidden}
  .review-panel .section-title{flex:0 0 auto}
  .review-panel .review-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .review-panel .button-row{
    position:relative;bottom:auto;flex:0 0 auto;z-index:30;margin-top:0;
    padding:12px 0 max(2px,env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(7,7,8,.18),var(--mobile-action-bg) 24%);
  }

  /* Success uses the same bounded-card behaviour. */
  .success-panel{display:flex;overflow:hidden}
  .success-panel .section-title,.success-panel .success-medallion{flex:0 0 auto}
  .success-panel .review-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
  .success-panel > .wide-action,.success-panel > .secondary-action{flex:0 0 auto}
}

/* Very short phones: preserve the action dock and compact only non-critical spacing. */
@media (max-width:680px) and (max-height:720px){
  .screen{padding-top:calc(env(safe-area-inset-top,0px) + 64px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 7px)}
  .booking-panel,.review-panel,.success-panel,.loading-panel{gap:9px;padding-top:11px}
  .panel-header{padding-bottom:8px}
  .estimate-card{padding-top:9px;padding-bottom:9px}
  .review-panel .button-row{padding-top:9px}
}


/* =====================================================
   ORVO Booking 5.0.2 — Compact Mobile One-Screen Layout
   UI-only patch. Business logic and integrations unchanged.
   ===================================================== */
@media (max-width:680px){
  /* The card is the only vertical scroll surface. Touch gestures may begin
     anywhere inside it, including labels, buttons and empty panel areas. */
  .booking-panel,.review-panel,.success-panel,.loading-panel{
    touch-action:pan-y;
    overscroll-behavior-y:contain;
  }

  /* Use available width efficiently: date and time share one row. */
  .form-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .phone-field,.destination-field{grid-column:1 / -1}

  /* Compact luxury proportions so the normal booking state fits inside the
     visible Safari viewport on common iPhones without sacrificing tap size. */
  .screen{
    padding-top:calc(env(safe-area-inset-top,0px) + 62px);
    padding-left:9px;
    padding-right:9px;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 7px);
  }
  .booking-panel{
    gap:8px;
    padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
    border-radius:26px;
  }
  .panel-header{gap:10px;padding:0 1px 8px}
  .panel-mark{width:40px;height:40px;border-radius:13px}
  .panel-header p{font-size:7px;letter-spacing:1.35px;margin-bottom:2px}
  .panel-header h2{font-size:21px;line-height:1}

  .glass-field{
    min-height:52px;
    border-radius:16px;
    padding:8px 10px;
    gap:5px;
  }
  .destination-field{min-height:58px}
  .field-label{font-size:8px;letter-spacing:1px}
  input{font-size:14px}
  .prefix{font-size:16px}
  .destination-button{min-height:37px;grid-template-columns:30px 1fr 16px;gap:9px}
  .pin-icon{width:30px;height:30px;border-radius:10px}
  .pin-icon svg{width:17px;height:17px}
  .destination-copy strong{font-size:13px;line-height:1.15;-webkit-line-clamp:1}
  .destination-copy small{font-size:10px;line-height:1.15;-webkit-line-clamp:1}
  .chevron{font-size:22px}

  .payment-title{margin:0 3px 5px;font-size:8px}
  .payment-options{gap:7px}
  .payment-option{min-height:43px;padding:6px 9px;border-radius:14px}
  .payment-name{font-size:13px}
  .payment-sub{display:none}
  .payment-option.disabled::after{top:4px;right:5px;font-size:5px;padding:2px 4px}

  .estimate-card{
    min-height:58px;
    border-radius:16px;
    padding:8px 10px;
    gap:4px 8px;
  }
  .estimate-card span{font-size:7px;margin-bottom:2px}
  .estimate-card strong{font-size:14px}
  .estimate-card p{display:none}
  .estimate-card .text-action{grid-column:1 / -1;font-size:10px}

  #msg{min-height:0;font-size:10px;line-height:1.2}
  #msg:empty{display:none}

  /* No overlapping sticky stack in the compact state. The actions sit in the
     normal card flow and remain reachable with one continuous panel scroll. */
  #bookBtn{
    position:relative;
    bottom:auto;
    z-index:1;
    min-height:49px;
    margin-top:0;
    border-radius:17px;
    font-size:13px;
    box-shadow:0 12px 26px rgba(0,0,0,.42),0 7px 18px rgba(143,107,33,.16),inset 0 1px 0 rgba(255,255,255,.42);
  }
  #manualWaBtn{
    position:relative;
    bottom:auto;
    z-index:1;
    width:max-content;
    min-height:24px;
    margin:0 auto;
    padding:2px 8px 0;
    border-radius:0;
    background:transparent;
    font-size:11px;
  }
}

/* Slightly taller phones keep a little more breathing room while preserving
   the one-screen composition. */
@media (max-width:680px) and (min-height:860px){
  .booking-panel{gap:9px;padding-top:14px}
  .glass-field{min-height:55px}
  .destination-field{min-height:61px}
  .payment-option{min-height:46px}
  .estimate-card{min-height:62px}
  #bookBtn{min-height:52px}
}

/* =====================================================
   ORVO Booking 5.0.3 — Mobile Natural-Height Card Fix
   Removes the stretched empty card while preserving all logic.
   ===================================================== */
@media (max-width:680px){
  /* Let the screen be the scroll surface only when a small viewport needs it. */
  .booking-screen{
    align-items:flex-start;
    justify-content:flex-start;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
  }
  .booking-screen::-webkit-scrollbar{display:none}

  /* The previous 100%-height rule stretched the luxury shell far below its
     content. Keep the card naturally sized and remove the dead black area. */
  .booking-panel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:0 0 auto;
    align-self:stretch;
    overflow:visible !important;
    margin-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  }

  /* Booking content remains compact, but does not look vertically crushed. */
  .booking-panel .form-grid{flex:0 0 auto}
  .booking-panel #bookBtn,
  .booking-panel #manualWaBtn{flex:0 0 auto}
}

/* =====================================================
   ORVO Booking 5.1 — Mobile Native Layout
   Mobile-only visual restructuring. No logic/API changes.
   ===================================================== */
@media (max-width:680px){
  /* Keep the desktop luxury shell untouched. On phones the page becomes a
     native app surface instead of a desktop card squeezed into the viewport. */
  .booking-screen{
    display:none;
    height:var(--app-height);
    min-height:0;
    padding:calc(env(safe-area-inset-top,0px) + 64px) 14px calc(env(safe-area-inset-bottom,0px) + 12px);
    overflow-y:auto;
    overflow-x:hidden;
    align-items:flex-start;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  .booking-screen.is-active{display:flex}
  .booking-layout{width:100%;height:auto;min-height:100%;display:block}

  .booking-panel.glass-shell{
    width:100%;
    min-height:calc(var(--app-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 76px) !important;
    height:auto !important;
    max-height:none !important;
    margin:0;
    padding:10px 0 8px;
    gap:11px;
    overflow:visible !important;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Strong app-style title without an oversized enclosing card. */
  .booking-panel .panel-header{
    padding:3px 2px 13px;
    margin-bottom:1px;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .booking-panel .panel-mark{width:44px;height:44px;border-radius:14px}
  .booking-panel .panel-header p{font-size:8px;letter-spacing:1.55px}
  .booking-panel .panel-header h2{font-size:25px;line-height:1.04}

  .booking-panel .form-grid{gap:10px}
  .booking-panel .glass-field{
    min-height:58px;
    padding:10px 12px;
    border-radius:19px;
    background:linear-gradient(180deg,rgba(19,19,21,.94),rgba(10,10,11,.94));
    border-color:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 9px 22px rgba(0,0,0,.22);
  }
  .booking-panel .destination-field{min-height:66px;border-color:rgba(212,175,55,.32)}
  .booking-panel .field-label{font-size:8px;letter-spacing:1.2px}
  .booking-panel input{font-size:15px}
  .booking-panel .destination-copy strong{font-size:14px}
  .booking-panel .destination-copy small{font-size:10px}

  .booking-panel .payment-section{padding:0 1px}
  .booking-panel .payment-title{margin:0 3px 6px}
  .booking-panel .payment-option{min-height:48px;border-radius:16px}

  .booking-panel .estimate-card{
    min-height:64px;
    padding:10px 12px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(19,19,20,.9),rgba(8,8,9,.94));
    border-color:rgba(212,175,55,.24);
  }

  .booking-panel #bookBtn{
    min-height:54px;
    border-radius:19px;
    margin-top:1px;
    font-size:14px;
  }
  .booking-panel #manualWaBtn{font-size:11px;min-height:26px}

  /* Intentional brand footer uses any spare viewport space, replacing the
     former empty bordered card area with a deliberate native-app ending. */
  .booking-panel::after{
    content:"OUR ROAD, YOUR VOYAGE";
    display:flex;
    align-items:flex-end;
    justify-content:center;
    flex:1 0 48px;
    min-height:48px;
    padding:24px 0 5px;
    color:rgba(212,175,55,.34);
    font-size:7px;
    font-weight:900;
    letter-spacing:2.4px;
  }

  /* Review and success retain their bounded scrolling/action behaviour. */
  .review-screen,.success-screen,.loading-screen{
    padding-left:12px;
    padding-right:12px;
  }
}

@media (max-width:680px) and (max-height:760px){
  .booking-screen{padding-top:calc(env(safe-area-inset-top,0px) + 60px)}
  .booking-panel.glass-shell{gap:8px;padding-top:7px}
  .booking-panel .panel-header{padding-bottom:9px}
  .booking-panel .glass-field{min-height:52px;padding:8px 10px}
  .booking-panel .destination-field{min-height:59px}
  .booking-panel .payment-option{min-height:43px}
  .booking-panel .estimate-card{min-height:57px;padding:8px 10px}
  .booking-panel #bookBtn{min-height:49px}
  .booking-panel::after{min-height:24px;padding-top:10px}
}

/* =====================================================
   ORVO Booking 5.1.1 — Mobile centred content rhythm
   UI-only adjustment. Header/title and brand footer stay anchored while
   the booking controls sit visually centred with more breathing room.
   ===================================================== */
@media (max-width:680px){
  .booking-panel.glass-shell{
    display:flex;
    flex-direction:column;
    min-height:calc(var(--app-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 76px) !important;
    gap:0;
  }

  .booking-panel .panel-header{
    flex:0 0 auto;
    margin-bottom:0;
  }

  /* Centre the complete booking control group between the fixed title and
     the bottom brand line without changing DOM or any booking behaviour. */
  .booking-panel .form-grid{
    margin-top:auto;
    padding-top:18px;
    gap:14px;
  }
  .booking-panel .payment-section{margin-top:14px}
  .booking-panel .payment-title{margin-bottom:8px}
  .booking-panel .payment-options{gap:14px}
  .booking-panel .estimate-card{margin-top:14px}
  .booking-panel #msg{margin-top:8px}
  .booking-panel #bookBtn{margin-top:14px}
  .booking-panel #manualWaBtn{
    margin-top:9px;
    margin-bottom:auto;
  }

  .booking-panel::after{
    flex:0 0 auto;
    min-height:34px;
    padding:14px 0 3px;
  }
}

@media (max-width:680px) and (max-height:760px){
  .booking-panel .form-grid{padding-top:10px;gap:10px}
  .booking-panel .payment-section{margin-top:9px}
  .booking-panel .payment-options{gap:10px}
  .booking-panel .estimate-card{margin-top:9px}
  .booking-panel #bookBtn{margin-top:9px}
  .booking-panel #manualWaBtn{margin-top:5px}
  .booking-panel::after{min-height:24px;padding-top:8px}
}

/* =====================================================
   ORVO Booking 5.2 — Unified centred mobile composition
   UI-only. The title travels with the form as one visual group, while the
   brand signature remains at the bottom. No business logic is changed.
   ===================================================== */
@media (max-width:680px){
  .booking-panel.glass-shell{
    display:flex;
    flex-direction:column;
    min-height:calc(var(--app-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 76px) !important;
    gap:0;
  }

  /* The title is now part of the centred booking composition. */
  .booking-panel .panel-header{
    flex:0 0 auto;
    margin-top:auto;
    margin-bottom:0;
    padding-bottom:15px;
  }
  .booking-panel .panel-header p{
    font-size:7.5px;
    letter-spacing:1.45px;
  }

  /* More deliberate breathing room between every booking section. */
  .booking-panel .form-grid{
    margin-top:16px;
    padding-top:0;
    gap:16px;
  }
  .booking-panel .payment-section{margin-top:17px}
  .booking-panel .payment-title{margin-bottom:10px}
  .booking-panel .payment-options{gap:16px}
  .booking-panel .estimate-card{margin-top:17px}
  .booking-panel #msg{margin-top:9px}
  .booking-panel #bookBtn{margin-top:17px}
  .booking-panel #manualWaBtn{
    margin-top:12px;
    margin-bottom:auto;
  }

  /* Keep the signature visually anchored at the lower edge. */
  .booking-panel::after{
    flex:0 0 auto;
    min-height:34px;
    padding:14px 0 3px;
  }
}

/* Shorter phones preserve the same rhythm while allowing natural scrolling. */
@media (max-width:680px) and (max-height:820px){
  .booking-panel .panel-header{padding-bottom:11px}
  .booking-panel .form-grid{margin-top:11px;gap:11px}
  .booking-panel .payment-section{margin-top:11px}
  .booking-panel .payment-title{margin-bottom:7px}
  .booking-panel .payment-options{gap:11px}
  .booking-panel .estimate-card{margin-top:11px}
  .booking-panel #bookBtn{margin-top:11px}
  .booking-panel #manualWaBtn{margin-top:7px}
  .booking-panel::after{min-height:25px;padding-top:8px}
}

/* =====================================================
   ORVO Booking 5.2 Final — travelling gold divider
   Mobile UI only: the gold divider belongs to the centred hero/form group.
   ===================================================== */
@media (max-width:680px){
  .booking-panel .panel-header{
    border-bottom:0 !important;
    border-top:1px solid rgba(216,190,118,.58) !important;
    padding-top:14px !important;
  }
}

@media (max-width:680px) and (max-height:820px){
  .booking-panel .panel-header{
    padding-top:11px !important;
  }
}

/* =====================================================
   ORVO Booking 5.2 Final — single travelling gold divider fix
   Move the original faded divider down with the title/form group.
   Do not create a second divider.
   ===================================================== */
@media (max-width:680px){
  /* Remove the original divider from the top edge of the mobile panel. */
  .booking-panel::before{display:none !important}

  /* Remove the temporary solid border added in the earlier 5.2 Final patch. */
  .booking-panel .panel-header{
    position:relative;
    border-top:0 !important;
    border-bottom:0 !important;
    padding-top:15px !important;
  }

  /* Reuse the original divider design: transparent at both ends, gold in the centre. */
  .booking-panel .panel-header::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,230,137,.52),transparent);
  }
}

@media (max-width:680px) and (max-height:820px){
  .booking-panel .panel-header{padding-top:12px !important}
}

/* =====================================================
   ORVO Booking 5.2.2 — Locked premium phone editor
   The page is frozen at its exact position while iOS opens the keyboard.
   The editor fades in softly and keeps the same position when the keyboard closes.
   ===================================================== */
#phone[readonly]{cursor:pointer;caret-color:transparent}
html:has(body.phone-editor-open){overflow:hidden}
body.phone-editor-open{
  position:fixed;
  left:0;right:0;top:var(--phone-page-top,0);
  width:100%;
  height:var(--phone-locked-height,100dvh);
  overflow:hidden;
  touch-action:none;
}
body.phone-editor-open .app-shell,
body.phone-editor-open .top-home-btn,
body.phone-editor-open .wallet-preview{
  filter:blur(9px) brightness(.52);
  transition:filter .3s ease,opacity .3s ease;
  pointer-events:none;
  user-select:none;
}
.phone-editor-modal[hidden]{display:none!important}
.phone-editor-modal{
  position:fixed;
  z-index:5000;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.phone-editor-backdrop{
  position:absolute;inset:0;border:0;padding:0;
  background:rgba(0,0,0,.36);
  opacity:1;
}
.phone-editor-card{
  position:fixed;
  z-index:1;
  left:50%;
  top:var(--phone-card-top,32%);
  transform:translateX(-50%);
  width:min(430px,calc(100% - 36px));
  padding:22px;
  border:1px solid rgba(219,184,78,.32);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(24,24,26,.94),rgba(7,7,8,.97));
  box-shadow:0 24px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
}
.phone-editor-heading p{margin:0 0 7px;color:#d7b64f;font-size:10px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase}
.phone-editor-heading h2{margin:0;color:#fff;font-size:24px;line-height:1.08}
.phone-editor-heading small{display:block;margin-top:7px;color:rgba(255,255,255,.52);font-size:12px}
.phone-editor-input-wrap{
  margin-top:20px;min-height:68px;display:flex;align-items:center;gap:13px;padding:0 16px;
  border:1px solid rgba(219,184,78,.48);border-radius:20px;background:rgba(0,0,0,.3);
  box-shadow:0 0 0 3px rgba(212,175,55,.055),inset 0 1px 0 rgba(255,255,255,.045);
}
.phone-editor-prefix{flex:none;color:#e1bd55;font-size:21px;font-weight:850}
#phoneEditorInput{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:22px;font-weight:760;letter-spacing:.5px;padding:0}
#phoneEditorInput::placeholder{color:rgba(255,255,255,.25)}
.phone-editor-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:16px}
.phone-editor-actions button{min-height:48px;border-radius:16px;font-size:13px;font-weight:850;letter-spacing:.7px}
.phone-editor-cancel{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.72)}
.phone-editor-done{border:1px solid rgba(255,240,178,.72);background:linear-gradient(135deg,#b88a28,#f3d87d 52%,#c79a35);color:#090909;box-shadow:0 10px 28px rgba(189,145,43,.2)}
@media (max-width:680px){
  .phone-editor-card{padding:19px 18px 17px;border-radius:24px}
  .phone-editor-heading h2{font-size:22px}
}
@media (prefers-reduced-motion:no-preference){
  .phone-editor-backdrop{animation:orvoPhoneBackdropIn .28s ease-out both}
  .phone-editor-card{animation:orvoPhoneEditorFadeIn .32s cubic-bezier(.2,.7,.2,1) both}
  @keyframes orvoPhoneBackdropIn{from{opacity:0}to{opacity:1}}
  @keyframes orvoPhoneEditorFadeIn{from{opacity:0;transform:translateX(-50%) scale(.985)}to{opacity:1;transform:translateX(-50%) scale(1)}}
}


/* =====================================================
   ORVO Booking 5.2.5 — Hero slogan polish
   Keep the brand slogan visually intact on desktop and mobile.
   ===================================================== */
.landing-inner{
  width:min(94vw,980px);
}
.landing-logo{
  width:clamp(150px,18vw,205px);
}
.landing-kicker{
  letter-spacing:clamp(1.7px,.24vw,3px);
}
.landing-screen h1{
  width:100%;
  max-width:none;
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(30px,4.35vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin-inline:auto;
}
@media (max-width:680px){
  .landing-inner{width:min(94vw,560px)}
  .landing-logo{width:clamp(140px,40vw,182px)}
  .landing-screen h1{
    white-space:nowrap;
    text-wrap:nowrap;
    font-size:clamp(23px,7.25vw,34px);
    letter-spacing:-.045em;
    line-height:1.04;
  }
}
@media (max-width:340px){
  .landing-screen h1{font-size:22px}
}

/* =====================================================
   ORVO Booking 5.2.6 — Cinematic horizon road refinement
   CSS-only background; no external image and no logic changes.
   ===================================================== */
.landing-screen{
  isolation:isolate;
  background:
    radial-gradient(ellipse 72% 38% at 50% 76%,rgba(205,154,48,.22),transparent 58%),
    radial-gradient(ellipse 48% 44% at 50% 30%,rgba(216,190,118,.12),transparent 70%),
    linear-gradient(180deg,#060606 0%,#090806 42%,#020202 100%);
}
.landing-screen::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  width:100%;
  height:38vh;
  min-height:220px;
  transform:none;
  opacity:1;
  filter:none;
  pointer-events:none;
  background:
    radial-gradient(ellipse 27% 18% at 50% 43%,rgba(255,202,82,.48),rgba(189,129,25,.14) 30%,transparent 72%),
    linear-gradient(180deg,transparent 0 42%,rgba(7,7,7,.28) 42.4%,rgba(0,0,0,.96) 77%);
  z-index:0;
}
.landing-screen::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:20vh;
  height:15vh;
  min-height:86px;
  pointer-events:none;
  z-index:0;
  opacity:.92;
  background:linear-gradient(180deg,rgba(8,8,8,.15),rgba(0,0,0,.98));
  clip-path:polygon(
    0 78%,3% 68%,5% 73%,8% 56%,10% 66%,13% 51%,15% 61%,18% 43%,20% 59%,23% 49%,25% 67%,28% 50%,31% 61%,34% 45%,37% 63%,40% 53%,43% 68%,46% 58%,49% 72%,52% 59%,55% 69%,58% 51%,61% 64%,64% 47%,67% 63%,70% 50%,73% 67%,76% 53%,79% 62%,82% 45%,85% 61%,88% 50%,91% 67%,94% 55%,97% 70%,100% 61%,100% 100%,0 100%
  );
  box-shadow:0 -1px 0 rgba(212,175,55,.12),0 -10px 42px rgba(174,121,25,.08);
}
.road-reflection{
  display:block!important;
  position:absolute;
  left:50%;
  bottom:-2px;
  width:min(112vw,1700px);
  height:34vh;
  min-height:210px;
  transform:translateX(-50%);
  border-radius:0;
  clip-path:polygon(46.8% 0,53.2% 0,100% 100%,0 100%);
  opacity:.88;
  filter:none;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,216,113,.46),transparent 1.2%,transparent 98.8%,rgba(255,216,113,.46)),
    linear-gradient(180deg,rgba(143,96,20,.25) 0%,rgba(17,14,9,.92) 22%,rgba(1,1,1,.99) 100%);
  box-shadow:inset 0 10px 30px rgba(221,171,62,.12),0 -10px 70px rgba(185,127,29,.14);
}
.road-reflection::before{
  content:"";
  position:absolute;
  left:49.65%;
  top:2%;
  width:.7%;
  height:100%;
  transform-origin:top center;
  background:repeating-linear-gradient(180deg,rgba(255,208,90,.88) 0 14px,transparent 14px 31px);
  filter:drop-shadow(0 0 5px rgba(255,196,61,.44));
  opacity:.9;
}
.road-reflection::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(72deg,transparent 0 49.25%,rgba(255,218,118,.55) 49.5%,transparent 49.85%),
    linear-gradient(108deg,transparent 0 49.25%,rgba(255,218,118,.55) 49.5%,transparent 49.85%),
    radial-gradient(ellipse 18% 10% at 50% 0%,rgba(255,200,76,.72),transparent 72%);
  opacity:.7;
}
.landing-inner{
  z-index:3;
  transform:translateY(-2.2vh);
}
@media (max-width:680px){
  .landing-screen::before{height:31vh;min-height:185px}
  .landing-screen::after{bottom:17vh;height:11vh;min-height:68px;opacity:.76}
  .road-reflection{height:25vh;min-height:155px;width:150vw;opacity:.74}
  .road-reflection::before{background:repeating-linear-gradient(180deg,rgba(255,208,90,.82) 0 9px,transparent 9px 23px)}
  .landing-inner{transform:translateY(-1vh)}
}
@media (max-height:700px){
  .landing-screen::after{bottom:14vh}
  .road-reflection{height:22vh;min-height:135px}
}

/* =====================================================
   ORVO Booking 5.3 — Premium Cinematic Hero
   Landing background only. Removes the diagram-like CSS
   road and replaces it with layered cinematic scenery.
   ===================================================== */
.landing-screen{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 58% 38% at 50% 30%,rgba(216,190,118,.105),transparent 72%),
    linear-gradient(180deg,#050506 0%,#080706 48%,#020202 100%)!important;
}
.landing-screen::before,
.landing-screen::after,
.road-reflection{
  display:none!important;
  content:none!important;
}
.landing-cinematic-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 42% at 50% 28%,rgba(216,190,118,.10),transparent 70%),
    linear-gradient(180deg,#050506 0%,#070605 50%,#010101 100%);
}
.landing-cinematic-bg *{pointer-events:none}
.cinematic-ambient{
  position:absolute;
  inset:-10% -6% 0;
  opacity:.84;
  background:
    radial-gradient(ellipse 34% 22% at 50% 30%,rgba(216,190,118,.18),transparent 73%),
    radial-gradient(ellipse 70% 18% at 50% 69%,rgba(183,122,31,.13),transparent 68%),
    radial-gradient(ellipse 70% 72% at 50% 50%,transparent 50%,rgba(0,0,0,.70) 100%);
}
.cinematic-horizon{
  position:absolute;
  left:0;
  right:0;
  top:68.4%;
  height:16%;
  opacity:.92;
  background:
    radial-gradient(ellipse 18% 34% at 50% 18%,rgba(246,187,70,.36),rgba(165,105,24,.13) 38%,transparent 76%),
    radial-gradient(ellipse 68% 30% at 50% 34%,rgba(179,119,28,.16),transparent 72%),
    linear-gradient(180deg,transparent 0%,rgba(1,1,1,.92) 78%);
  animation:horizonBreath 9s ease-in-out infinite;
}
@keyframes horizonBreath{
  0%,100%{opacity:.82;transform:scaleX(.985)}
  50%{opacity:.98;transform:scaleX(1.015)}
}
.cinematic-mountains{
  position:absolute;
  left:-6%;
  right:-6%;
  top:66.2%;
  height:13.5%;
  opacity:.78;
  background:
    linear-gradient(180deg,rgba(0,0,0,0) 0 42%,rgba(1,1,1,.94) 72%),
    radial-gradient(ellipse 16% 42% at 8% 66%,rgba(13,12,10,.98) 0 58%,transparent 60%),
    radial-gradient(ellipse 20% 44% at 24% 68%,rgba(15,13,10,.98) 0 56%,transparent 58%),
    radial-gradient(ellipse 24% 42% at 43% 71%,rgba(12,11,9,.97) 0 55%,transparent 57%),
    radial-gradient(ellipse 22% 44% at 68% 70%,rgba(14,12,10,.98) 0 55%,transparent 57%),
    radial-gradient(ellipse 18% 42% at 88% 67%,rgba(13,12,10,.98) 0 57%,transparent 59%);
  filter:blur(1px);
}
.cinematic-city{
  position:absolute;
  top:70.1%;
  width:32%;
  height:8.6%;
  display:flex;
  align-items:flex-end;
  gap:clamp(3px,.45vw,8px);
  opacity:.76;
  filter:drop-shadow(0 0 8px rgba(190,123,24,.15));
}
.cinematic-city-left{left:5.8%;justify-content:flex-start}
.cinematic-city-right{right:5.8%;justify-content:flex-end}
.cinematic-city span{
  width:clamp(5px,.58vw,11px);
  height:var(--h,34%);
  border-radius:1px 1px 0 0;
  background:
    linear-gradient(180deg,rgba(36,30,18,.95),rgba(3,3,3,.98)),
    repeating-linear-gradient(180deg,transparent 0 7px,rgba(216,163,55,.62) 7px 8px,transparent 8px 14px);
  box-shadow:inset 0 0 0 1px rgba(216,190,118,.05);
}
.cinematic-city span:nth-child(1){--h:36%}
.cinematic-city span:nth-child(2){--h:62%;width:clamp(7px,.7vw,13px)}
.cinematic-city span:nth-child(3){--h:42%}
.cinematic-city span:nth-child(4){--h:74%;width:clamp(6px,.62vw,12px)}
.cinematic-city span:nth-child(5){--h:51%}
.cinematic-city span:nth-child(6){--h:30%}
.cinematic-city span:nth-child(7){--h:58%;width:clamp(8px,.78vw,14px)}
.cinematic-city span:nth-child(8){--h:40%}
.cinematic-road{
  position:absolute;
  left:50%;
  bottom:-.5%;
  width:min(150vw,2200px);
  height:31%;
  min-height:215px;
  transform:translateX(-50%);
  overflow:visible;
}
.road-asphalt{
  position:absolute;
  inset:0;
  clip-path:polygon(48.55% 0,51.45% 0,99.5% 100%,.5% 100%);
  background:
    radial-gradient(ellipse 16% 8% at 50% 0%,rgba(225,160,49,.28),transparent 75%),
    linear-gradient(90deg,rgba(0,0,0,.97),rgba(24,21,15,.96) 44%,rgba(34,29,20,.94) 50%,rgba(24,21,15,.96) 56%,rgba(0,0,0,.98)),
    linear-gradient(180deg,rgba(44,34,20,.64) 0%,rgba(9,9,8,.98) 42%,#010101 100%);
  box-shadow:
    inset 0 18px 50px rgba(223,158,42,.10),
    inset 0 -44px 90px rgba(0,0,0,.92);
}
.road-asphalt::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  background:
    repeating-linear-gradient(102deg,rgba(255,255,255,.14) 0 1px,transparent 1px 10px),
    repeating-linear-gradient(2deg,rgba(255,255,255,.08) 0 1px,transparent 1px 13px);
  mix-blend-mode:soft-light;
}
.road-edge{
  position:absolute;
  inset:0;
  opacity:.82;
  filter:blur(.05px) drop-shadow(0 0 5px rgba(205,146,44,.22));
}
.road-edge-left{
  clip-path:polygon(48.45% 0,48.78% 0,6% 100%,3.6% 100%);
  background:linear-gradient(180deg,rgba(216,190,118,.10),rgba(216,190,118,.72) 100%);
}
.road-edge-right{
  clip-path:polygon(51.22% 0,51.55% 0,96.4% 100%,94% 100%);
  background:linear-gradient(180deg,rgba(216,190,118,.10),rgba(216,190,118,.72) 100%);
}
.road-dashes{
  position:absolute;
  inset:0;
  clip-path:polygon(47.6% 0,52.4% 0,59% 100%,41% 100%);
  animation:dashDrift 9.5s linear infinite;
}
@keyframes dashDrift{
  0%,100%{transform:translateY(0);opacity:.95}
  50%{transform:translateY(2.5px);opacity:.88}
}
.road-dashes span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(247,219,143,.86),rgba(167,112,31,.62));
  box-shadow:0 0 9px rgba(205,146,44,.20);
}
.road-dashes span:nth-child(1){bottom:7%;width:18px;height:66px;opacity:.82}
.road-dashes span:nth-child(2){bottom:27%;width:13px;height:44px;opacity:.68}
.road-dashes span:nth-child(3){bottom:43%;width:9px;height:28px;opacity:.54}
.road-dashes span:nth-child(4){bottom:56%;width:6px;height:17px;opacity:.42}
.road-dashes span:nth-child(5){bottom:66%;width:4px;height:10px;opacity:.31}
.road-dashes span:nth-child(6){bottom:73%;width:3px;height:6px;opacity:.22}
.road-dashes span:nth-child(7){bottom:78%;width:2px;height:3px;opacity:.14}
.cinematic-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 88% 62% at 50% 45%,transparent 0 54%,rgba(0,0,0,.66) 100%),
    linear-gradient(180deg,rgba(0,0,0,.18),transparent 28%,transparent 66%,rgba(0,0,0,.72));
}
.landing-inner{
  z-index:4;
  width:min(94vw,760px);
  transform:translateY(-5.6vh);
}
.landing-logo{
  width:clamp(154px,16vw,245px);
  margin-bottom:clamp(24px,3.3vh,36px);
}
.landing-kicker{
  letter-spacing:.34em;
  margin-bottom:clamp(15px,2.1vh,20px);
}
.landing-screen h1{
  white-space:nowrap;
  max-width:none;
  font-size:clamp(38px,5vw,72px);
  margin-bottom:clamp(28px,4vh,42px);
}
.primary-cta{
  min-height:clamp(56px,6.4vh,66px);
}
@media (min-width:1600px){
  .landing-inner{transform:translateY(-5.2vh)}
  .cinematic-road{height:32%;min-height:265px}
}
@media (max-width:920px){
  .landing-inner{width:min(94vw,660px)}
  .landing-screen h1{font-size:clamp(31px,7vw,58px)}
}
@media (max-width:680px){
  .landing-screen{
    padding-top:calc(env(safe-area-inset-top,0px) + 68px);
  }
  .landing-inner{
    width:min(94vw,430px);
    transform:translateY(-4.2vh);
  }
  .landing-logo{
    width:clamp(132px,36vw,168px);
    margin-bottom:18px;
  }
  .landing-kicker{
    font-size:8.6px;
    letter-spacing:.26em;
    margin-bottom:12px;
  }
  .landing-screen h1{
    font-size:clamp(27px,8.2vw,38px);
    line-height:1.02;
    margin-bottom:24px;
    white-space:nowrap;
  }
  .primary-cta{
    width:min(92vw,350px);
    min-height:56px;
    border-radius:21px;
  }
  .cinematic-horizon{top:72%;height:12.5%}
  .cinematic-mountains{top:70%;height:10.8%;opacity:.66}
  .cinematic-city{top:73.4%;width:36%;height:6.5%;gap:3px;opacity:.58}
  .cinematic-city-left{left:3%}
  .cinematic-city-right{right:3%}
  .cinematic-road{
    width:174vw;
    height:24.5%;
    min-height:170px;
  }
  .road-dashes span:nth-child(1){bottom:7%;width:13px;height:46px}
  .road-dashes span:nth-child(2){bottom:29%;width:9px;height:29px}
  .road-dashes span:nth-child(3){bottom:46%;width:6px;height:17px}
  .road-dashes span:nth-child(4){bottom:59%;width:4px;height:10px}
  .road-dashes span:nth-child(n+5){opacity:.18}
}
@media (max-width:340px){
  .landing-screen h1{
    white-space:normal;
    max-width:300px;
  }
  .landing-screen h1::first-line{line-height:1.02}
}
@media (max-height:700px){
  .landing-inner{transform:translateY(-3.4vh)}
  .landing-logo{width:clamp(118px,28vh,150px);margin-bottom:14px}
  .landing-screen h1{font-size:clamp(27px,6.8vh,42px);margin-bottom:18px}
  .primary-cta{min-height:52px}
  .cinematic-horizon{top:73%}
  .cinematic-road{height:22.5%;min-height:132px}
}
@media (prefers-reduced-motion:reduce){
  .cinematic-horizon,.road-dashes{animation:none!important}
}

/* =====================================================
   ORVO Booking 5.4 - Photoreal luxury hero background
   Landing background only. Uses a compressed local WebP
   artwork instead of CSS-generated road geometry.
   ===================================================== */
.landing-screen{
  background:#020202!important;
}
.landing-cinematic-bg{
  background:#020202!important;
}
.landing-cinematic-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 42% 26% at 50% 38%,rgba(220,174,78,.16),transparent 72%),
    radial-gradient(ellipse 92% 62% at 50% 45%,transparent 0 54%,rgba(0,0,0,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.10) 65%,rgba(0,0,0,.48) 100%);
  pointer-events:none;
}
.landing-cinematic-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:3px 3px,4px 4px;
  mix-blend-mode:soft-light;
}
.landing-cinematic-art{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:.98;
  transform:scale(1.012);
  filter:saturate(.94) contrast(1.04) brightness(.86);
  animation:heroArtBreath 12s ease-in-out infinite;
}
@keyframes heroArtBreath{
  0%,100%{transform:scale(1.012)}
  50%{transform:scale(1.026)}
}
.cinematic-ambient,
.cinematic-horizon,
.cinematic-mountains,
.cinematic-city,
.cinematic-road,
.cinematic-vignette,
.road-reflection{
  display:none!important;
}
.landing-inner{
  z-index:5;
}
@media (max-width:680px){
  .landing-cinematic-art{
    object-position:center center;
    filter:saturate(.92) contrast(1.05) brightness(.80);
  }
  .landing-cinematic-bg::before{
    background:
      radial-gradient(ellipse 62% 30% at 50% 38%,rgba(220,174,78,.13),transparent 74%),
      radial-gradient(ellipse 98% 68% at 50% 46%,transparent 0 50%,rgba(0,0,0,.76) 100%),
      linear-gradient(180deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.08) 66%,rgba(0,0,0,.54) 100%);
  }
}
@media (orientation:landscape) and (max-height:520px){
  .landing-cinematic-art{
    object-position:center 52%;
  }
}
@media (prefers-reduced-motion:reduce){
  .landing-cinematic-art{
    animation:none!important;
  }
}

/* Desktop-only hero balance refinement. Mobile layout remains untouched. */
@media (min-width:681px){
  .landing-inner{
    transform:translateY(clamp(3.4vh,3.8vh,4.6vh))!important;
  }
  .landing-cinematic-art{
    inset:-3.5% 0 -2% 0;
    height:105.5%;
    object-position:center center;
  }
  .landing-cinematic-bg::before{
    background:
      radial-gradient(ellipse 42% 26% at 50% 43%,rgba(220,174,78,.15),transparent 72%),
      radial-gradient(ellipse 92% 62% at 50% 48%,transparent 0 56%,rgba(0,0,0,.68) 100%),
      linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.30) 100%);
  }
}

/* ORVO Care+ advisory card for the booking review summary. */
.care-reminder{
  display:block;
  margin:4px 0 2px;
  padding:14px 15px 13px;
  border:1px solid rgba(212,175,55,.26);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,232,166,.055),transparent 38%),
    rgba(4,4,5,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 34px rgba(0,0,0,.18);
}
.care-reminder header{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:9px;
}
.care-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#e4c36c;
  background:linear-gradient(180deg,rgba(255,232,166,.13),rgba(92,68,23,.18));
  border:1px solid rgba(212,175,55,.24);
}
.care-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.care-heading{
  display:block;
  min-width:0;
  margin:0;
  color:inherit;
  text-transform:none;
  letter-spacing:0;
}
.care-heading small{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:0 0 5px;
  padding:4px 7px 3px;
  border-radius:999px;
  color:#0b0904;
  background:linear-gradient(135deg,#c49b3c,#f0d78d 56%,#aa7f2f);
  font-size:8px;
  font-weight:950;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.care-heading strong{
  display:block;
  color:var(--lux-cream,#f7f2e7);
  font-size:13px;
  line-height:1.18;
  font-weight:760;
  letter-spacing:.01em;
}
.care-reminder p{
  margin:0;
  color:rgba(247,242,231,.70);
  font-size:11.5px;
  line-height:1.48;
  font-weight:500;
}
.care-reminder p + p{
  margin-top:7px;
}
.care-reminder p[lang]{
  color:rgba(247,242,231,.66);
}
@media (min-width:681px){
  .care-reminder{
    padding:13px 15px 12px;
  }
}
@media (max-width:680px){
  .care-reminder{
    margin-top:2px;
    padding:12px 12px 11px;
    border-radius:16px;
  }
  .care-reminder header{
    gap:9px;
    margin-bottom:8px;
  }
  .care-icon{
    width:31px;
    height:31px;
    border-radius:12px;
  }
  .care-heading strong{
    font-size:12.5px;
  }
  .care-reminder p{
    font-size:10.8px;
    line-height:1.45;
  }
  .care-reminder p + p{
    margin-top:6px;
  }
}