/* okaycab.in — "Neon Ride" 3D layer (GenZ dark theme).
   Loaded after the Tailwind sheet on every public page. Design only:
   re-maps the light palette to a dark neon one and adds 3D depth.
   Never transform header/sections/fixed parents (breaks position:fixed). */
:root{
  --nx-bg:#06051a;
  --nx-bg2:#0d0b2e;
  --nx-ink:#f4f2ff;
  --nx-soft:rgba(244,242,255,.72);
  --nx-mute:rgba(244,242,255,.52);
  --nx-violet:#8b5cff;
  --nx-pink:#ff3d9a;
  --nx-cyan:#22e4ff;
  --nx-lime:#c6ff3d;
  --nx-glass:rgba(255,255,255,.055);
  --nx-glass2:rgba(255,255,255,.09);
  --nx-edge:rgba(160,140,255,.22);
  --nx-grad:linear-gradient(100deg,var(--nx-violet),var(--nx-pink) 45%,var(--nx-cyan));
  --mist:#100e33;
  --line:rgba(160,140,255,.16);
  --indigo:#f4f2ff;
  --sapphire:#a99bff;
  --shadow-md:0 18px 40px -14px rgba(0,0,0,.6);
  --shadow-lg:0 40px 80px -24px rgba(0,0,0,.75),0 0 0 1px rgba(139,92,255,.25);
  --shadow-glow:0 0 0 1px rgba(34,228,255,.25),0 24px 60px -16px rgba(139,92,255,.55);
}
html{background:var(--nx-bg);color-scheme:dark}
body{background:transparent!important;color:var(--nx-ink)!important;position:relative}
::selection{background:var(--nx-pink);color:#fff}

/* ---------- fixed 3D canvas + glow layers ---------- */
#nx-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;display:block}
#nx-aura{position:fixed;inset:-20vmax;z-index:-3;pointer-events:none;
  background:radial-gradient(40vmax 40vmax at 15% 10%,rgba(139,92,255,.35),transparent 60%),
             radial-gradient(38vmax 38vmax at 90% 30%,rgba(255,61,154,.22),transparent 60%),
             radial-gradient(45vmax 45vmax at 50% 110%,rgba(34,228,255,.22),transparent 60%),var(--nx-bg);
  animation:nxAura 22s ease-in-out infinite alternate}
@keyframes nxAura{to{transform:translate3d(4vmax,-3vmax,0) rotate(8deg) scale(1.08)}}
#nx-cursor{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(139,92,255,.22),rgba(255,61,154,.10) 40%,transparent 70%);transition:opacity .4s;opacity:0}
#nx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:var(--nx-grad);box-shadow:0 0 14px var(--nx-pink)}

/* ---------- palette remap ---------- */
.text-indigo,.hover\:text-indigo:hover{color:var(--nx-ink)!important}
.text-indigo\/80{color:rgba(244,242,255,.86)!important}
.text-indigo\/70,.text-indigo\/65{color:rgba(244,242,255,.74)!important}
.text-indigo\/60,.text-indigo\/50{color:rgba(244,242,255,.62)!important}
.text-indigo\/40,.text-indigo\/35,.text-indigo\/30{color:rgba(244,242,255,.45)!important}
.text-indigo\/15{color:rgba(244,242,255,.2)!important}
.text-sapphire,.hover\:text-sapphire:hover{color:#b9a8ff!important}
.text-sapphire\/60{color:rgba(185,168,255,.7)!important}
.hover\:text-mint:hover{color:var(--nx-cyan)!important}
.bg-white,.bg-white\/90{background-color:var(--nx-glass)!important;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.bg-mist,.bg-mist\/60,.hover\:bg-mist:hover,.hover\:bg-mist\/60:hover{background-color:rgba(139,92,255,.08)!important}
.bg-sapphire\/5,.bg-indigo\/5,.bg-indigo\/10{background-color:rgba(139,92,255,.07)!important}
.bg-indigo{background-color:#0c0a2a!important}
.bg-sapphire{background-color:#120f3a!important}
footer.bg-sapphire{background:linear-gradient(180deg,rgba(18,15,58,.85),#05041a)!important;border-top:1px solid var(--line)}
.border-line,.divide-line>*{border-color:var(--line)!important}
.border-indigo\/10,.border-indigo\/15{border-color:rgba(160,140,255,.22)!important}
.hover\:border-sapphire:hover,.hover\:border-cyan:hover,.border-cyan{border-color:var(--nx-cyan)!important}
.bg-mint,.bg-mint\/40,.bg-mint\/30{background-color:rgba(198,255,61,.18)!important}
.text-emerald-700{color:#5dffb0!important}
.text-red-500{color:#ff6b8b!important}
[style*="background:#FFFFFF"],[style*="background:#fff"],[style*="background:#fbfcfe"],[style*="background:#f4f6fa"]{background:var(--nx-glass)!important}
[style*="color:#1a3f75"],[style*="color:#1A3F75"]{color:#b9a8ff!important}
[style*="background:#f0fdf4"],[style*="background:#e9fbf3"]{background:rgba(93,255,176,.1)!important}
[style*="background:#fef2f2"],[style*="background:#fdeeee"]{background:rgba(255,61,154,.12)!important}
header.glass,.glass{background:rgba(8,6,30,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
header.glass{border-bottom:1px solid rgba(139,92,255,.25)!important;box-shadow:0 10px 40px -20px rgba(139,92,255,.6)}
input,select,textarea{background-color:rgba(255,255,255,.06)!important;color:var(--nx-ink)!important;border-color:rgba(160,140,255,.28)!important}
input::placeholder,textarea::placeholder{color:rgba(244,242,255,.4)!important}
select option{background:#14113a;color:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--nx-cyan)!important;box-shadow:0 0 0 3px rgba(34,228,255,.18),0 0 24px rgba(139,92,255,.35)!important}
.focus-ring:focus-visible{outline:3px solid var(--nx-cyan)}
.modal-backdrop{background:rgba(3,2,15,.7)!important}
.progress-track{background:rgba(255,255,255,.1)!important}
.carousel-dot{background:rgba(255,255,255,.25)!important}
.carousel-dot.active,.grad-mint-cyan{background:var(--nx-grad)!important;background-size:200% 100%!important}
.grad-flow{background:linear-gradient(135deg,#3b1d9a,#8b5cff 50%,#22e4ff)!important}
.grad-mint-cyan.text-indigo,.grad-mint-cyan .text-indigo{color:#fff!important}
.text-grad,h1 .text-grad,h2 .text-grad{background:var(--nx-grad)!important;background-size:200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;animation:nxShift 6s linear infinite}
@keyframes nxShift{to{background-position:-200% 0}}
.carousel-nav-btn:hover{background:var(--nx-violet)!important}
.ride-opt.selected{border-color:var(--nx-cyan)!important;background:rgba(34,228,255,.1)!important}
img[src*="okaycab-logo.webp"],img[src*="okaycab-logo.png"]{filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(139,92,255,.7))}

/* ---------- headings: chunky 3D extrude ---------- */
h1.font-display,h1{letter-spacing:-.02em;text-shadow:0 1px 0 #c9bfff,0 2px 0 #9a88ff,0 3px 0 #7a63ff,0 4px 0 #5b41e6,0 5px 0 #4330b8,0 14px 30px rgba(139,92,255,.55)}
h2.font-display{text-shadow:0 1px 0 #b3a6ff,0 2px 0 #6e55f0,0 3px 0 #4330b8,0 12px 24px rgba(139,92,255,.45)}
h1 .text-grad,h2 .text-grad{text-shadow:none;filter:drop-shadow(0 3px 0 #3a1f9e) drop-shadow(0 10px 18px rgba(255,61,154,.45))}

/* ---------- 3D cards (tilt via js) ---------- */
.nx-card{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;will-change:transform;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 22px 44px -22px rgba(0,0,0,.8)}
.nx-card:hover{border-color:rgba(34,228,255,.45)!important;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -20px rgba(139,92,255,.55),0 0 0 1px rgba(34,228,255,.25)}
.nx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),rgba(139,92,255,.12) 30%,transparent 60%)}
.nx-card:hover>.nx-glare{opacity:1}

/* ---------- 3D buttons ---------- */
a.bg-indigo,button.bg-indigo,a.grad-mint-cyan,button.grad-mint-cyan,a.bg-sapphire,button.bg-sapphire,.nx-btn{
  position:relative;transform:translateZ(0);border:0;
  box-shadow:0 5px 0 #3a1f9e,0 10px 26px -6px rgba(255,61,154,.55),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .2s}
a.bg-indigo,button.bg-indigo,a.bg-sapphire,button.bg-sapphire{background:linear-gradient(135deg,#6a3dff,#b03dff 55%,#ff3d9a)!important;color:#fff!important}
a.bg-indigo:hover,button.bg-indigo:hover,a.grad-mint-cyan:hover,button.grad-mint-cyan:hover,a.bg-sapphire:hover,button.bg-sapphire:hover{transform:translateY(-3px);filter:brightness(1.12);
  box-shadow:0 8px 0 #3a1f9e,0 18px 36px -6px rgba(255,61,154,.7),inset 0 1px 0 rgba(255,255,255,.4)!important;opacity:1!important}
a.bg-indigo:active,button.bg-indigo:active,a.grad-mint-cyan:active,button.grad-mint-cyan:active{transform:translateY(4px);box-shadow:0 1px 0 #3a1f9e,0 4px 10px rgba(255,61,154,.4)!important}
a.grad-mint-cyan,button.grad-mint-cyan{animation:nxShift 5s linear infinite}

/* ---------- 3D scroll reveal ---------- */
.reveal{opacity:0;transform:perspective(900px) translateY(40px) rotateX(18deg) scale(.96)!important;transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)!important}
.reveal.in{opacity:1;transform:none!important}
.nx-pop{opacity:0;transform:perspective(800px) translateZ(-120px) rotateY(-14deg);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.nx-pop.in{opacity:1;transform:none}

/* ---------- GenZ marquee + stickers ---------- */
.nx-marquee{position:relative;overflow:hidden;padding:18px 0;transform:rotate(-2deg);margin:40px -10px;background:var(--nx-grad);background-size:200% 100%;animation:nxShift 8s linear infinite;
  box-shadow:0 20px 50px -10px rgba(255,61,154,.5);border-top:2px solid rgba(255,255,255,.35);border-bottom:2px solid rgba(0,0,0,.35)}
.nx-marquee.alt{transform:rotate(2deg);margin-top:-58px;background:#0c0a2a;opacity:.9;animation:none;box-shadow:none;border-color:rgba(139,92,255,.4)}
.nx-track{display:flex;gap:44px;width:max-content;animation:nxTicker 28s linear infinite;font:800 clamp(18px,3vw,30px)/1 'Sora',sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.nx-marquee.alt .nx-track{animation-direction:reverse;color:var(--nx-lime)}
.nx-track span{display:inline-flex;align-items:center;gap:44px}
@keyframes nxTicker{to{transform:translateX(-50%)}}
.nx-sticker{position:absolute;z-index:3;pointer-events:none;font:800 13px/1 'Sora',sans-serif;padding:9px 14px;border-radius:999px;color:#0b0820;background:var(--nx-lime);
  box-shadow:0 4px 0 #6f9a00,0 14px 30px -6px rgba(198,255,61,.55);transform:rotate(-8deg);animation:nxBob 4s ease-in-out infinite}
.nx-sticker.pink{background:var(--nx-pink);color:#fff;box-shadow:0 4px 0 #a3105c,0 14px 30px -6px rgba(255,61,154,.6);transform:rotate(7deg);animation-delay:-1.5s}
.nx-sticker.cyan{background:var(--nx-cyan);box-shadow:0 4px 0 #0a8ba0,0 14px 30px -6px rgba(34,228,255,.6);animation-delay:-2.6s}
@keyframes nxBob{50%{translate:0 -10px}}

/* ---------- intro loader (index only, once per session) ---------- */
#nx-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#05041a;transition:opacity .6s ease,visibility .6s}
#nx-intro.out{opacity:0;visibility:hidden}
.nx-cube{width:90px;height:90px;position:relative;transform-style:preserve-3d;animation:nxCube 1.6s cubic-bezier(.6,0,.4,1) infinite}
.nx-cube i{position:absolute;inset:0;border:2px solid var(--nx-cyan);background:rgba(139,92,255,.18);box-shadow:0 0 30px rgba(139,92,255,.6) inset;display:grid;place-items:center;font:800 15px 'Sora',sans-serif;color:#fff}
.nx-cube i:nth-child(1){transform:translateZ(45px)}.nx-cube i:nth-child(2){transform:rotateY(180deg) translateZ(45px)}
.nx-cube i:nth-child(3){transform:rotateY(90deg) translateZ(45px)}.nx-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(45px)}
.nx-cube i:nth-child(5){transform:rotateX(90deg) translateZ(45px)}.nx-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(45px)}
@keyframes nxCube{from{transform:rotateX(-25deg) rotateY(0)}to{transform:rotateX(-25deg) rotateY(360deg)}}
.nx-intro-txt{margin-top:34px;font:800 14px 'Sora',sans-serif;letter-spacing:.4em;background:var(--nx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}

/* phone mockups / hero visuals get a neon rim */
.tilt-3d{filter:drop-shadow(0 40px 60px rgba(139,92,255,.45))}
#bookingPhone{box-shadow:0 0 0 2px rgba(139,92,255,.5),0 50px 100px -30px rgba(255,61,154,.5)!important}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#06051a}
::-webkit-scrollbar-thumb{background:linear-gradient(#8b5cff,#ff3d9a);border-radius:10px;border:2px solid #06051a}

@media (max-width:640px){.nx-sticker{display:none}#nx-cursor{display:none}h1.font-display,h1{text-shadow:0 2px 0 #7a63ff,0 4px 0 #4330b8,0 10px 20px rgba(139,92,255,.5)}}
@media (prefers-reduced-motion:reduce){#nx-aura,.nx-track,.nx-sticker,.text-grad,.grad-mint-cyan{animation:none!important}.reveal,.nx-pop{opacity:1!important;transform:none!important}}

/* ---------- fixes for page-level components that paint var(--indigo) as a fill ---------- */
.btn-primary,.chip.active,.helper-msg.mine,[style*="background:var(--indigo)"]{background:linear-gradient(135deg,#6a3dff,#b03dff 55%,#ff3d9a)!important;color:#fff!important;border-color:transparent!important}
.btn-primary{box-shadow:0 5px 0 #3a1f9e,0 10px 26px -6px rgba(255,61,154,.55)!important}
.btn-primary:disabled,.btn-ghost:disabled{opacity:.45!important;filter:saturate(.6)}
.btn-ghost{background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(160,140,255,.35)!important;box-shadow:0 4px 0 rgba(58,31,158,.8)}
.btn-ghost:hover{border-color:var(--nx-cyan)!important}
.step-dot{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(160,140,255,.35)!important}
.step-dot.done,.step-dot.active{background:var(--nx-grad)!important;border-color:transparent!important;box-shadow:0 0 18px rgba(255,61,154,.6)}
.step-line.done{background:var(--nx-grad)!important}
.veh-card.active,.cat-tile.active{border-color:var(--nx-cyan)!important;background:rgba(34,228,255,.1)!important;box-shadow:0 0 0 2px var(--nx-cyan) inset,0 0 26px rgba(34,228,255,.3)!important}
.helper-msg.theirs,[style*="background:var(--mist)"]{background:rgba(255,255,255,.08)!important;color:#fff!important}
[style*="background:var(--mint)"]{background:var(--nx-lime)!important;color:#0b0820!important;border-color:var(--nx-lime)!important}
.pill{background:rgba(139,92,255,.14)!important;color:#d9d0ff!important;border-color:rgba(160,140,255,.3)!important}