/* Fit the Kasbah — shared styles
   Loaded by index.html, booking.html, payment.html.
   Holds only what is identical across all three pages: brand tokens, reset,
   base body, film grain, and the floating help widget. The animated oasis
   scene lives in css/oasis.css; page-specific styles live in each page's
   own inline <style>, after these files.
   Last edited: 25-06-2026

   CACHE-BUST: every time you change this file (or oasis.css / js/main.js /
   js/oasis.js), bump the ?v=N number on that file's link/script tag on
   EVERY page that loads it (index.html, booking.html, payment.html), e.g.
   ?v=1 -> ?v=2, then push. That forces phones and browsers to fetch the new
   version instead of serving a stale cached copy. Keep all four files on the
   same version number so it stays simple. Currently at v=2. */

:root{
  /* Brand */
  --c-orange:oklch(60.59% 0.1768 40.17); --c-orange-deep:oklch(53.06% 0.1612 40.17); --c-coral:oklch(67.97% 0.1445 40.17); --c-ink:oklch(18.38% 0.0052 67.50);
  /* Warm neutrals */
  --c-sand-50:oklch(98.88% 0.0045 71.42); --c-sand-100:oklch(95.19% 0.0114 71.42); --c-sand-200:oklch(88.95% 0.0293 71.42);
  --c-sand-300:oklch(75.38% 0.0636 71.42); --c-mocha:oklch(56.80% 0.0418 41.09); --c-olive:oklch(42.25% 0.0522 71.42);
  /* Functional */
  --c-muted:oklch(51.07% 0.0109 62.43); --c-line:oklch(89.28% 0.0168 71.42);
  /* Oasis (foliage = Success Green from palette + tonal shades; water = oasis-v3 blue tone) */
  --c-leaf:oklch(58.05% 0.1201 155.64); --c-leaf-deep:oklch(47.98% 0.1008 155.64); --c-leaf-back:oklch(69.55% 0.0881 155.64);
  --c-water:oklch(55.20% 0.0905 222.00); --c-water-hi:oklch(76.00% 0.0760 215.00);
  /* Type */
  --font-display:'Anton',Impact,sans-serif; --font-body:'Poppins',system-ui,sans-serif;
  /* Space */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-sand-50);
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
}

/* ===== Film grain (texture overlay) ===== */
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Floating help (contact) ===== */
.help{position:fixed; z-index:60; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.help-toggle{width:54px; height:54px; border-radius:50%; border:3px solid #fff; background:var(--c-orange); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px oklch(29.52% 0.0484 70.00 / 0.45), 0 0 14px 2px oklch(60.59% 0.1768 40.17 / 0.45), 0 0 0 1px oklch(29.52% 0.0484 70.00 / 0.12); transition:background .18s ease, transform .18s ease}
@media (prefers-reduced-motion:no-preference){
  .help-toggle{animation:helpGlow 2.6s ease-in-out infinite}
  @keyframes helpGlow{
    0%   {box-shadow:0 6px 18px oklch(29.52% 0.0484 70.00 / 0.45), 0 0 14px 2px oklch(60.59% 0.1768 40.17 / 0.45), 0 0 0 0 oklch(60.59% 0.1768 40.17 / 0.50)}
    70%  {box-shadow:0 6px 18px oklch(29.52% 0.0484 70.00 / 0.45), 0 0 20px 5px oklch(60.59% 0.1768 40.17 / 0.30), 0 0 0 12px oklch(60.59% 0.1768 40.17 / 0)}
    100% {box-shadow:0 6px 18px oklch(29.52% 0.0484 70.00 / 0.45), 0 0 14px 2px oklch(60.59% 0.1768 40.17 / 0.45), 0 0 0 0 oklch(60.59% 0.1768 40.17 / 0)}
  }
}
.help-toggle:hover{background:var(--c-orange-deep); transform:translateY(-2px)}
.help-toggle:active{transform:translateY(0)}
.help-toggle svg{width:26px; height:26px}
.help-toggle .ic-close{display:none}
.help.is-open .help-toggle .ic-q{display:none}
.help.is-open .help-toggle .ic-close{display:block}
.help-panel{display:none; width:min(300px,calc(100vw - 32px)); background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border:1px solid var(--c-line); border-radius:14px; box-shadow:0 18px 50px oklch(42.25% 0.0522 71.42 / 0.18); padding:var(--sp-5)}
.help.is-open .help-panel{display:block; animation:helpIn .18s ease}
@keyframes helpIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.help-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:1.15rem; line-height:1; color:var(--c-ink); margin-bottom:6px}
.help-text{font-size:.85rem; color:var(--c-muted); margin-bottom:var(--sp-4)}
.help-link{display:flex; align-items:center; gap:.6em; min-width:0; font-size:.9rem; font-weight:500; color:var(--c-ink); text-decoration:none; padding:.6em .7em; border:1px solid var(--c-line); border-radius:10px; overflow-wrap:anywhere; transition:border-color .16s ease, color .16s ease, background .16s ease}
.help-link + .help-link{margin-top:10px}
.help-link:hover{border-color:var(--c-orange); color:var(--c-orange); background:oklch(60.59% 0.1768 40.17 / 0.05)}
.help-link svg{width:1.15em; height:1.15em; flex:none; color:var(--c-orange)}
@media (prefers-reduced-motion:reduce){.help-toggle{transition:none} .help.is-open .help-panel{animation:none}}