/* ============================================================
   AL REEF — LIQUID GLASS DESIGN SYSTEM (LIGHT / WHITE THEME)
   Drop-in stylesheet. Load AFTER the Tailwind CDN script and
   AFTER any existing <style> block, so these rules win the cascade.
   No HTML class renames required — it reskins the classes that
   already exist in index.html / services.html.
   ============================================================ */

:root {
  /* --- Light luxury base — colors pulled directly from the logo file
     (logo/logoo.png), not approximated: --brand-orange, --logo-black
     and --logo-cream are the actual averaged pixel values sampled
     from the logo's orange stroke, its near-black fill and its
     off-white/cream tone. --pearl-50 is a slightly lighter derivative
     of the cream for card highlights; everything else derives from
     these three anchors. --- */
  --logo-cream: #eae3dc;
  --logo-black: #1b1b1b;

  --pearl-50:  #f4f1ee;  /* lighter derivative of --logo-cream, for card highlights */
  --pearl-100: var(--logo-cream); /* page canvas — exact logo cream */
  --pearl-200: #ded3c5;
  --pearl-300: #cdbda9;

  /* --- Glow accents — locked to the Al Reef LOGO palette ---
     primary = the exact orange sampled from the logo; everything
     else is a tonal variant of it, plus the logo's own cream for
     shine. No blue/teal. */
  --brand-orange:  #f15825;  /* sampled from logo/logoo.png */
  --brand-amber:   #ef8965;  /* lighter tonal variant (orange + logo-cream), for highlights */
  --brand-copper:  #a64322;  /* deeper tonal variant (orange + logo-black), for depth/shadow side */
  --brand-white:   var(--logo-cream); /* brand.accent, used sparingly for glass shine */

  /* legacy aliases so the rest of the file / any custom overrides keep working */
  --gold: var(--brand-orange);
  --gold-soft: var(--brand-amber);
  --deep-blue: var(--brand-copper);
  --teal: var(--brand-white);

  /* --- Glass material (frosted cream glass on the logo-cream canvas) --- */
  --glass-bg: rgba(234, 227, 220, 0.55);
  --glass-bg-strong: rgba(244, 241, 238, 0.82);
  --glass-border: rgba(27, 27, 27, 0.1);
  --glass-border-hover: rgba(241, 88, 37, 0.55);
  --glass-shadow: 0 8px 32px 0 rgba(27, 27, 27, 0.08);
  --glass-shadow-lg: 0 25px 60px -12px rgba(27, 27, 27, 0.18);

  /* --- Text on light — anchored to --logo-black, not pure #000 --- */
  --text-hi: var(--logo-black);
  --text-mid: #4a4642;
  --text-low: #837e78;
}

/* ============================================================
   1. BASE / LIGHT CANVAS
   ============================================================ */
html, body {
  background-color: var(--pearl-100) !important;
}

body {
  position: relative;
  color: var(--text-hi);
  isolation: isolate; /* keeps blob layer contained */
}

/* Liquid blob field — fixed behind everything, one instance per page.
   On a white canvas we use "multiply" instead of "screen" so the
   blobs read as soft warm tint washes instead of disappearing. */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.liquid-blob {
  position: absolute;
  border-radius: 48% 52% 60% 40% / 45% 55% 45% 55%;
  filter: blur(90px);
  opacity: 0.28;
  mix-blend-mode: multiply;
  will-change: transform, border-radius;
  animation: blobMorph 22s ease-in-out infinite alternate;
}

.liquid-blob--orange { width: 42vw; height: 42vw; top: -10%; left: -8%;  background: radial-gradient(circle at 30% 30%, var(--brand-amber), transparent 70%); animation-duration: 26s; }
.liquid-blob--copper { width: 38vw; height: 38vw; top: 30%;  right: -12%; background: radial-gradient(circle at 60% 40%, var(--brand-orange), transparent 70%); animation-duration: 30s; animation-delay: -6s; opacity: 0.2; }
.liquid-blob--amber  { width: 34vw; height: 34vw; bottom: -14%; left: 22%; background: radial-gradient(circle at 50% 50%, var(--brand-copper), transparent 70%); opacity: 0.16; animation-duration: 24s; animation-delay: -12s; }
/* back-compat: old class names still resolve to the same on-brand colors */
.liquid-blob--gold { width: 42vw; height: 42vw; top: -10%; left: -8%; background: radial-gradient(circle at 30% 30%, var(--brand-amber), transparent 70%); animation-duration: 26s; }
.liquid-blob--blue  { width: 38vw; height: 38vw; top: 30%; right: -12%; background: radial-gradient(circle at 60% 40%, var(--brand-orange), transparent 70%); animation-duration: 30s; animation-delay: -6s; }
.liquid-blob--teal  { width: 34vw; height: 34vw; bottom: -14%; left: 22%; background: radial-gradient(circle at 50% 50%, var(--brand-copper), transparent 70%); opacity: 0.16; animation-duration: 24s; animation-delay: -12s; }

@keyframes blobMorph {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg);   border-radius: 48% 52% 60% 40% / 45% 55% 45% 55%; }
  33%  { transform: translate(4%, 6%) scale(1.08) rotate(8deg); border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%; }
  66%  { transform: translate(-5%, 3%) scale(0.96) rotate(-6deg); border-radius: 40% 60% 55% 45% / 40% 60% 45% 55%; }
  100% { transform: translate(2%, -4%) scale(1.05) rotate(4deg); border-radius: 55% 45% 40% 60% / 50% 50% 55% 45%; }
}

/* ============================================================
   2. CORE GLASS MATERIAL
   ============================================================ */
.liquid-glass-card,
.car-card,
#date-filter-box,
.gallery-nav,
.gallery-caption,
.service-card,
#bookingModal .relative,
#drawer-content {
  background: linear-gradient(160deg, var(--glass-bg-strong), var(--glass-bg)) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  border-radius: 1.75rem;
  color: var(--text-hi);
}

/* Thin light-catching edge, top-left highlight like real glass */
.liquid-glass-card::before,
.car-card::before,
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), transparent 40%);
  pointer-events: none;
}
.car-card, .service-card { position: relative; overflow: hidden; }

/* ============================================================
   3. NAVIGATION — floating glass bar, shrinks on scroll
   ============================================================ */
.glass-nav {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-border) !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.35s ease;
}
.glass-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: var(--glass-shadow);
}
.glass-nav.is-scrolled .h-20 { height: 3.75rem; transition: height 0.35s ease; }
.glass-nav .h-20 { transition: height 0.35s ease; }

/* Drawer — same glass material, RTL/LTR safe (uses logical `inset-inline`) */
#drawer-content {
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)) !important;
}

/* ============================================================
   4. CAR / SERVICE CARDS — 3D tilt + intensifying glow
   ============================================================ */
.car-card, .service-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.car-card:hover, .service-card:hover {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-lg), 0 0 40px -8px rgba(241, 88, 37, 0.28);
}
/* JS sets --rx / --ry on mousemove; falls back to a gentle lift if JS is off */
.car-card, .service-card {
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(0);
}
.car-card:hover, .service-card:hover {
  transform: rotateX(var(--ry, -4deg)) rotateY(var(--rx, 4deg)) translateY(-6px);
}

/* Glow puck behind each card, intensifies on hover (mirrors --gold/--teal blobs) */
.car-image-container { position: relative; z-index: 1; }
.car-card::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 20%, rgba(241, 88, 37,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}
.car-card:hover::after { opacity: 1; }

/* Restyle the colour-tag backgrounds so they read as tinted glass, not flat gradient */
.car-card[data-car] .car-image-container {
  background: linear-gradient(150deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)) !important;
  border-bottom: 1px solid var(--glass-border);
}

/* ============================================================
   5. BUTTONS — liquid mercury / glowing glass
   Covers every "Book Now" / primary CTA variant found in the
   markup: .bg-brand-primary, .bg-orange-500 (hero "Our Fleet"),
   and .bg-black (the dynamically generated fleet "Book Now"
   buttons + modal close/submit buttons) — these previously had
   NO glass treatment at all.
   ============================================================ */
.bg-brand-primary,
a.bg-orange-500, button.bg-orange-500,
button[onclick^="checkDateAvailability"],
.filter-btn.active-filter,
.car-card button[onclick^="openBookingModal"],
.car-card button[onclick^="openBookingModalWithDates"],
button.bg-black, a.bg-black,
#bookingModal button.bg-black {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper)) !important;
  box-shadow: 0 6px 20px -4px rgba(241, 88, 37, 0.45);
  border: 1px solid rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.25s ease, filter 0.3s ease;
}
.bg-brand-primary:hover,
a.bg-orange-500:hover, button.bg-orange-500:hover,
button[onclick^="checkDateAvailability"]:hover,
.car-card button[onclick^="openBookingModal"]:hover,
.car-card button[onclick^="openBookingModalWithDates"]:hover,
button.bg-black:hover, a.bg-black:hover {
  filter: brightness(1.12) saturate(1.1);
  box-shadow: 0 10px 30px -4px rgba(241, 88, 37, 0.6);
  transform: translateY(-2px);
}
/* mercury sheen sweep on hover — now shared by every CTA above */
.bg-brand-primary::after,
a.bg-orange-500::after, button.bg-orange-500::after,
button.bg-black::after, a.bg-black::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.bg-brand-primary:hover::after,
a.bg-orange-500:hover::after, button.bg-orange-500:hover::after,
button.bg-black:hover::after, a.bg-black:hover::after { left: 130%; }

.filter-btn:not(.active-filter) {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-mid) !important;
  backdrop-filter: blur(10px);
}

/* Secondary / white CTA buttons (hero "تواصل معنا الآن", "الخدمات السياحية") -> frosted glass pill */
a.bg-white, button.bg-white,
.bg-white\/10 {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(12px);
  color: var(--text-hi) !important;
}
a.bg-white:hover, button.bg-white:hover, .bg-white\/10:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--glass-border-hover) !important;
}

/* ============================================================
   6. INPUTS — glass panels for date filter & booking widget
   ============================================================ */
input, textarea, select {
  background: rgba(255,255,255,0.65) !important;
  border: 1.5px solid var(--glass-border) !important;
  color: var(--text-hi) !important;
  backdrop-filter: blur(8px);
}
input::placeholder, textarea::placeholder { color: var(--text-low) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(241, 88, 37, 0.18);
  outline: none;
}
#date-filter-box, #bookingModal .relative {
  background: linear-gradient(165deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)) !important;
}

/* ============================================================
   7. SECTION / TEXT COLOUR RE-MAP (light theme pass)
   These target the Tailwind utility classes already present in
   the markup, so no HTML edits are required for the base recolor.
   ============================================================ */
section { background-color: transparent !important; }
.bg-slate-50, .bg-slate-100 { background-color: transparent !important; }

.text-slate-900 { color: var(--text-hi) !important; }
.text-slate-700, .text-slate-800 { color: var(--text-mid) !important; }
.text-slate-600, .text-slate-500 { color: var(--text-mid) !important; }
.text-slate-400 { color: var(--text-low) !important; }

.border-slate-100, .border-slate-200 { border-color: var(--glass-border) !important; }

/* "why us" / feature tiles, testimonial tiles, faq tiles -> glass */
section#faq details,
section article.bg-white,
section article.bg-slate-50,
#privacy-policy, #refund-policy {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

/* ------------------------------------------------------------
   7b. INFO / TERMS / INSURANCE BOXES
   These previously stayed flat pastel Tailwind tiles (bg-blue-50,
   bg-amber-50, bg-green-50, bg-orange-50, bg-red-50, bg-slate-50)
   with zero glass treatment — e.g. the "التأمين الشامل" /
   "تأمين المخالفات" / "شروط الاستئجار" cards in the booking modal.
   Give them the same frosted-glass material, keeping each hue as
   a subtle tint + colored border so the color-coding is preserved.
   ------------------------------------------------------------ */
.bg-blue-50 {
  background: linear-gradient(160deg, rgba(219,234,254,0.65), rgba(255,255,255,0.55)) !important;
  border-color: rgba(37,99,235,0.25) !important;
  backdrop-filter: blur(12px);
}
.bg-amber-50 {
  background: linear-gradient(160deg, rgba(254,243,199,0.65), rgba(255,255,255,0.55)) !important;
  border-color: rgba(217,119,6,0.25) !important;
  backdrop-filter: blur(12px);
}
.bg-green-50 {
  background: linear-gradient(160deg, rgba(220,252,231,0.65), rgba(255,255,255,0.55)) !important;
  border-color: rgba(22,163,74,0.25) !important;
  backdrop-filter: blur(12px);
}
.bg-orange-50 {
  background: linear-gradient(160deg, rgba(255,237,213,0.7), rgba(255,255,255,0.55)) !important;
  border-color: rgba(241, 88, 37,0.3) !important;
  backdrop-filter: blur(12px);
}
.bg-red-50 {
  background: linear-gradient(160deg, rgba(254,226,226,0.65), rgba(255,255,255,0.55)) !important;
  border-color: rgba(220,38,38,0.25) !important;
  backdrop-filter: blur(12px);
}
#bookingModal .bg-slate-50,
.bg-slate-50.border {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
}

/* ============================================================
   8. HERO — kept dark on purpose (photo slider + white overlay
   text). Converting this to white would make the hero copy
   unreadable against the background photography, so it stays
   as the one deliberate dark band on an otherwise white page.
   ============================================================ */
#hero { background-color: var(--logo-black) !important; }
#hero .inline-flex { backdrop-filter: blur(14px); }

/* ============================================================
   8b. FOOTER — kept as a dark contrast band (design choice, not
   part of the request: bg-black + white text was previously
   force-reset to transparent by rule 7, which on a white page
   would have made the white footer text unreadable).
   ============================================================ */
footer.bg-black, footer {
  background: linear-gradient(160deg, #262626, var(--logo-black)) !important;
  color: var(--logo-cream) !important;
}
footer .bg-white\/5 {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ============================================================
   9. STATS COUNTER (optional block, see JS init)
   ============================================================ */
.stat-counter {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-copper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   10. MOTION & ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .liquid-blob { animation: none; }
  .car-card, .service-card { transition: none; }
}

/* Mobile: fewer/cheaper blurs to protect frame rate & battery */
@media (max-width: 768px) {
  .liquid-blob { filter: blur(50px); opacity: 0.18; }
  .liquid-glass-card, .car-card, .service-card, #date-filter-box {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
}