/* ============================================
   LIQUID-GLASS LAYER — sitewide
   Loaded last (before responsive.css) on every
   page. The whole site is now glass panels over
   the Himalayan gallery photo, on a dark-GREY
   (not pitch-black) canvas. Monochrome: colour
   comes from the photo, not the UI. No neon, no
   hard-coded brand fills. Strong frosted blur,
   bright specular edges — "liquid glass".
   ============================================ */

:root {
  /* Spring easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* — Dark-GREY canvas (was greenish near-black; site felt dead) — */
  --black:    #0f1113;
  --bg:       #181b20;
  --bg-alt:   #1d2127;
  --bg-dark:  #141619;
  --bg-card:  #21262d;
  --bg-elev:  #292f37;

  /* — Neutralise brand colour → monochrome glass —
     (colour now comes from the gallery photo behind the glass) */
  --primary:      #d8dee2;
  --primary-dark: #c2cacf;
  --crimson:      #d8dee2;
  --gold:         #d8dee2;
  --orange:       #d8dee2;
  --sky:          #d8dee2;
  --violet:       #d8dee2;
  --accent:       #d8dee2;
  --grad-brand:   linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  --grad-sunset:  linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));

  /* — Liquid-glass surfaces (dark green tint, translucent) — */
  --lg-fill:        rgba(16, 42, 35, 0.35);   /* standard panel */
  --lg-fill-strong: rgba(10, 28, 23, 0.54);   /* floating chrome */
  --lg-fill-soft:   rgba(20, 50, 42, 0.22);   /* faint chip */
  --lg-border:      rgba(255, 255, 255, 0.20);
  --lg-border-hi:   rgba(255, 255, 255, 0.34);
  --lg-blur:        9px;
  --lg-blur-lg:     16px;
  /* bright specular top-edge + soft depth */
  --lg-edge:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  --lg-shadow: 0 14px 38px rgba(0,0,0,0.34);
  --sheen: linear-gradient(145deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 24%, rgba(255,255,255,0.018) 56%, rgba(255,255,255,0) 100%);
}

html { background: var(--bg) !important; }

/* ───────── Gallery photo behind the entire site ─────────
   Fixed, full-bleed, with a dark-grey scrim for readability.
   Home & Explore (body.immersive) get their fixed hero photo from refine.css. */
body:not(.immersive) { background: transparent; }
body:not(.immersive)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('https://ik.imagekit.io/dn2zdxiu3/Dharamshala%20Tours%20%20Gallery/Triund%20Trekking/triund-trekking-001.webp?tr=w-1920,q-55') center / cover no-repeat;
}
body:not(.immersive)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20,23,28,0.62) 0%,
    rgba(20,23,28,0.72) 42%,
    rgba(16,18,22,0.82) 100%);
}

/* Let the page bands go translucent so the photo reads through */
.section,
.section-sm,
.values-section, .assoc-section, .packages-section, .adventures-section,
.dest-section, .sr-section, .plan-section, .why-section, .how-section,
.testimonial-section, .faq-section, .ex-culture, .spot-guide {
  background: transparent !important;
}
/* inline dark band overrides (e.g. about's bg-alt sections) */
section[style*="background"] { background: transparent !important; }

/* ───────── Liquid-glass cards ───────── */
.product-card,
.sr-card,
.value-item,
.faq-item,
.testimonial-card,
.blog-card,
.cta-box,
.contact-opt,
.album-card,
.rental-card,
.fact-cell,
.timeline-item,
.culture-panel,
.spot-item,
.detail-block,
.cart-item,
.scroll-card > a,
.glass-card,
details.read-card,
.plan-card {
  background: var(--sheen), var(--lg-fill) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-edge), var(--lg-shadow);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.35) contrast(1.04);
  backdrop-filter: blur(var(--lg-blur)) saturate(1.35) contrast(1.04);
  transition:
    transform var(--duration-slow) var(--ease-spring),
    border-color var(--duration-slow) var(--ease),
    box-shadow var(--duration-slow) var(--ease),
    background var(--duration-slow) var(--ease);
}

/* Subtle (not neon) lift */
.product-card:hover,
.sr-card:hover,
.value-item:hover,
.blog-card:hover,
.rental-card:hover,
.contact-opt:hover,
.album-card:hover,
.spot-item:hover,
.glass-card:hover {
  border-color: var(--lg-border-hi) !important;
  box-shadow: var(--lg-edge), 0 16px 44px rgba(0,0,0,0.42) !important;
}

/* ───────── Floating chrome: stronger blur ───────── */
.navbar,
.bottom-nav,
.sticky-cta,
.plan-card,
.gallery-lightbox,
.modal,
.toast,
.map-hero,
.footer {
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(1.35) contrast(1.05);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(1.35) contrast(1.05);
}
.navbar     { background: var(--lg-fill-strong) !important; border-bottom: 1px solid var(--lg-border) !important; }
.bottom-nav { background: var(--lg-fill-strong) !important; border-top: 1px solid var(--lg-border) !important; }
.sticky-cta { background: var(--lg-fill-strong) !important; border-top: 1px solid var(--lg-border) !important; box-shadow: 0 -10px 34px rgba(0,0,0,0.4); }

/* ───────── Footer → glass (was a green gradient) ───────── */
.footer {
  background: var(--sheen), var(--lg-fill-strong) !important;
  border-top: 1px solid var(--lg-border);
}
.footer::before { background: var(--lg-border) !important; height: 1px !important; }  /* kill prayer-flag colour stripe */
.footer-brand span { color: inherit !important; }

/* ───────── Buttons → neutral liquid glass (hierarchy by brightness) ───────── */
.btn-primary,
.btn-white {
  background: var(--sheen), rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.34) !important;
  color: #fff !important;
  box-shadow: var(--lg-edge), 0 8px 24px rgba(0,0,0,0.30);
  -webkit-backdrop-filter: blur(8px) saturate(1.25) contrast(1.04);
  backdrop-filter: blur(8px) saturate(1.25) contrast(1.04);
}
.btn-primary:hover,
.btn-white:hover { background: var(--sheen), rgba(255,255,255,0.30) !important; color: #fff !important; transform: translateY(-1px); }
.btn-whatsapp {
  background: var(--sheen), rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.24) !important;
  color: #fff !important;
  box-shadow: var(--lg-edge);
  -webkit-backdrop-filter: blur(8px) saturate(1.25) contrast(1.04);
  backdrop-filter: blur(8px) saturate(1.25) contrast(1.04);
}
.btn-whatsapp:hover { background: var(--sheen), rgba(255,255,255,0.22) !important; transform: translateY(-1px); }
.product-card-arrow { background: rgba(255,255,255,0.18) !important; color: #fff !important; }

/* Outline/ghost button → glass */
.btn:not(.btn-primary):not(.btn-white):not(.btn-whatsapp) {
  background: var(--sheen), rgba(255,255,255,0.05);
  border-color: var(--lg-border-hi);
  -webkit-backdrop-filter: blur(7px) saturate(1.22) contrast(1.04);
  backdrop-filter: blur(7px) saturate(1.22) contrast(1.04);
}
.btn:not(.btn-primary):not(.btn-white):not(.btn-whatsapp):hover {
  background: rgba(255,255,255,0.12); color: var(--text); border-color: var(--lg-border-hi);
}

/* Pills / chips / tags → glass; active = brighter glass */
.filter-pill, .dest-chip, .cp-tag, .sr-tag, .badge, .hero-badge, .map-filter {
  background: var(--sheen), var(--lg-fill-soft) !important;
  border-color: var(--lg-border) !important;
  color: var(--text-soft) !important;
}
.filter-pill.active, .filter-pill:hover,
.map-filter[aria-pressed="true"] {
  background: var(--sheen), rgba(255,255,255,0.20) !important;
  border-color: var(--lg-border-hi) !important;
  color: #fff !important;
}

/* ───────── Forms → glass + neutral focus ───────── */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea, .search-bar input {
  background: rgba(18, 21, 25, 0.5) !important;
  border: 1px solid var(--lg-border) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
input:focus, select:focus, textarea:focus, .search-bar input:focus {
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10) !important;
}

/* Neutral, accessible focus ring (no neon) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Neutralise the crimson section kicker */
.section-kicker { color: var(--text-soft) !important; }
.section-kicker::before { background: rgba(255,255,255,0.45) !important; }

/* Detail-block header → glass (was hard teal) */
.detail-block-header {
  background: var(--sheen), rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--lg-border);
}
.detail-block-body { background: transparent !important; }

/* ============================================
   COLLAPSIBLE READING CARD  —  <details class="read-card">
   CTA-first, SEO-safe (content stays in the DOM).
   Smooth open/close enhanced by main.js.
   ============================================ */
details.read-card {
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  margin: 0 0 var(--s4);
}
details.read-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s5);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  color: var(--text);
  letter-spacing: -0.01em;
  -webkit-user-select: none; user-select: none;
}
details.read-card > summary::-webkit-details-marker { display: none; }
details.read-card > summary::marker { content: ''; }
.read-card .rc-title { flex: 1; min-width: 0; }
.read-card .rc-sub {
  font-family: var(--font);
  font-weight: var(--fw-normal);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0;
}
.read-card .rc-chevron {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--lg-border);
  color: var(--text);
  transition: transform var(--duration-slow) var(--ease-spring), background var(--duration) var(--ease);
}
details.read-card[open] > summary .rc-chevron { transform: rotate(180deg); background: rgba(255,255,255,0.16); }
.read-card .rc-body { overflow: hidden; transition: height 0.34s var(--ease-spring); }
.read-card .rc-body-inner { padding: 0 var(--s5) var(--s5); }
.read-card .rc-body-inner > *:first-child { margin-top: 0; }
.read-card .rc-body p { color: var(--text-soft); }

/* Faint hairline divider (was a neon seam) */
.neon-seam { position: relative; }
.neon-seam::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--max-w));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .read-card .rc-body, .read-card .rc-chevron { transition: none !important; }
}