/* 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/festive.css; page-specific styles live in each page's
   own inline <style>, after these files.
   Last edited: 06-06-2026

   CACHE-BUST: every time you change this file (or festive.css / js/main.js /
   js/festive.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=1. */

:root{
  /* Brand */
  --c-orange:#D5521A; --c-orange-deep:#B5400F; --c-coral:#E07748; --c-ink:#141210;
  /* Warm neutrals */
  --c-sand-50:#FDFBF8; --c-sand-100:#F4EEE7; --c-sand-200:#E7D8C6;
  --c-sand-300:#C9A983; --c-mocha:#8D6F64; --c-olive:#5E4A2C;
  /* Functional */
  --c-muted:#6B6560; --c-line:#E3DAD0;
  /* Oasis (foliage = Success Green from palette + tonal shades; water = deep oasis tone, same green family) */
  --c-leaf:#2F8F5B; --c-leaf-deep:#1F6E45; --c-leaf-back:#6BAE89;
  --c-water:#2C7A66; --c-water-hi:#7DB8A6;
  /* 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 rgba(60,40,15,.45), 0 0 0 1px rgba(60,40,15,.12); transition:background .18s ease, transform .18s ease}
.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 rgba(94,74,44,.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:rgba(213,82,26,.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}}