/* ============================================================
   InnRoot Amenities – Dark / Light Mode System
   v2 – clean, non-conflicting, premium
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ════════════════════════════════════════════════════════════ */
:root {
  /* backgrounds */
  --c-bg: #F6F8FC;
  --c-card: #ffffff;
  --c-section: #E9EFF9;
  --c-chip: #DCE6F5;
  --c-chip2: #E9EFF9;

  /* foregrounds */
  --c-body: #16294A;
  --c-muted: #44577a;
  --c-accent: #2A4F8F;
  --c-accent2: #A9C6F2;

  /* borders */
  --c-bdr: #d9e2f1;
  --c-bdr-in: #c5d0e6;

  /* shadows */
  --c-shadow: rgba(22, 41, 74, .08);

  /* header */
  --c-hdr-bg: rgba(255, 255, 255, .78);
  --c-hdr-bdr: rgba(22, 41, 74, .08);

  /* stage/image backgrounds */
  --c-stage: radial-gradient(circle at 50% 70%, #fff 0, #E2EAF7 78%);
  --c-im: radial-gradient(circle at 50% 68%, #fff 0, #E2EAF7 82%);

  /* theme transition speed */
  --dm-dur: .52s;
  --dm-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ════════════════════════════════════════════════════════════
   2. DARK MODE TOKEN OVERRIDES
   ════════════════════════════════════════════════════════════ */
html.dark {
  --c-bg: #08111f;
  --c-card: #0f1e35;
  --c-section: #0b1729;
  --c-chip: rgba(169, 198, 242, .13);
  --c-chip2: rgba(169, 198, 242, .10);

  --c-body: #dce8f5;
  --c-muted: #7b9bbf;
  --c-accent: #A9C6F2;
  --c-accent2: #A9C6F2;

  --c-bdr: rgba(169, 198, 242, .16);
  --c-bdr-in: rgba(169, 198, 242, .22);

  --c-shadow: rgba(0, 0, 0, .45);

  --c-hdr-bg: rgba(8, 17, 31, .88);
  --c-hdr-bdr: rgba(169, 198, 242, .14);

  --c-stage: radial-gradient(circle at 50% 70%, #192d4c 0, #0e1d34 78%);
  --c-im: radial-gradient(circle at 50% 68%, #192d4c 0, #0e1d34 82%);
}

/* ════════════════════════════════════════════════════════════
   3. SMOOTH THEME TRANSITION
   Applied only via .dm-transitioning class (set by JS for ~600ms)
   so it never conflicts with hover/animation transitions
   ════════════════════════════════════════════════════════════ */
html.dm-transitioning,
html.dm-transitioning * {
  transition:
    background-color var(--dm-dur) var(--dm-ease),
    background var(--dm-dur) var(--dm-ease),
    border-color var(--dm-dur) var(--dm-ease),
    color var(--dm-dur) var(--dm-ease),
    box-shadow var(--dm-dur) var(--dm-ease),
    opacity var(--dm-dur) var(--dm-ease) !important;
}

/* ════════════════════════════════════════════════════════════
   4. DARK MODE TOGGLE BUTTON
   ════════════════════════════════════════════════════════════ */
.dm-toggle {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--c-chip2);
  color: var(--c-body);
  flex-shrink: 0;
  overflow: hidden;
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}

.dm-toggle:hover {
  background: var(--c-body);
  color: var(--c-bg);
  transform: scale(1.08) rotate(12deg);
  box-shadow: 0 6px 18px var(--c-shadow);
}

.dm-toggle:active {
  transform: scale(.95);
}

/* Icon states: moon visible in light, sun visible in dark */
.dm-toggle .dm-sun {
  display: none;
}

.dm-toggle .dm-moon {
  display: block;
}

html.dark .dm-toggle .dm-sun {
  display: block;
}

html.dark .dm-toggle .dm-moon {
  display: none;
}

/* Icon entrance animation */
@keyframes dm-spin-in {
  from {
    transform: rotate(-180deg) scale(.3);
    opacity: 0;
  }

  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.dm-toggle.dm-anim .dm-ic {
  animation: dm-spin-in .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Pulse ring on click */
@keyframes dm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(169, 198, 242, .6);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(169, 198, 242, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(169, 198, 242, 0);
  }
}

.dm-toggle.dm-pulse {
  animation: dm-pulse .65s ease-out;
}

/* ════════════════════════════════════════════════════════════
   5. RIPPLE ANIMATION (full-screen expand on toggle)
   ════════════════════════════════════════════════════════════ */
@keyframes dm-ripple {
  from {
    transform: scale(0);
    opacity: .9;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

.dm-ripple-el {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform-origin: center;
  animation: dm-ripple .65s var(--dm-ease) forwards;
}

.dm-ripple-el.to-dark {
  background: radial-gradient(circle, #1a3060 30%, #08111f);
}

.dm-ripple-el.to-light {
  background: radial-gradient(circle, #dce8f5 30%, #F6F8FC);
}

/* ════════════════════════════════════════════════════════════
   6. GLOBAL PAGE & BODY
   ════════════════════════════════════════════════════════════ */
.pg {
  background: var(--c-bg) !important;
  color: var(--c-body) !important;
}

/* Dark mode ambient star effect */
html.dark .pg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(169, 198, 242, .4) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 10%, rgba(169, 198, 242, .3) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 52%, rgba(169, 198, 242, .2) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 65%, rgba(169, 198, 242, .25) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 80%, rgba(169, 198, 242, .18) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 32%, rgba(255, 255, 255, .15) 0%, transparent 100%),
    radial-gradient(1px 1px at 4% 48%, rgba(255, 255, 255, .1) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 88%, rgba(169, 198, 242, .2) 0%, transparent 100%);
  animation: dm-stars 6s ease-in-out infinite alternate;
}

@keyframes dm-stars {
  0% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════
   7. HEADER
   ════════════════════════════════════════════════════════════ */
.hdr {
  background: var(--c-hdr-bg) !important;
  border-color: var(--c-hdr-bdr) !important;
  box-shadow: 0 10px 36px var(--c-shadow) !important;
}

html.dark .hdr {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Header logo: navy in light, white in dark */
#hdrLogo {
  content: url('../img/web/logo-navy.png');
}

html.dark #hdrLogo {
  content: url('../img/web/logo-white.png');
}

/* Mobile menu dropdown */
html.dark #mn:checked~.hdr .nav {
  background: rgba(8, 17, 31, .97) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important;
}

/* ════════════════════════════════════════════════════════════
   8. NAV LINKS
   ════════════════════════════════════════════════════════════ */
html.dark .nav a {
  color: var(--c-body) !important;
}

html.dark .nav a:hover {
  background: var(--c-chip2) !important;
}

html.dark .nav a.on,
html.dark [style*="background:#16294A"] .nav a.on {
  background: var(--c-accent2) !important;
  color: #0A1628 !important;
}

/* Nav active animation in dark mode */
@keyframes tabon-dark {
  0% {
    background-color: transparent;
    color: var(--c-body);
    box-shadow: none;
  }

  7% {
    background-color: #A9C6F2;
    color: #0A1628;
    box-shadow: 0 8px 20px rgba(169, 198, 242, .3);
  }

  93% {
    background-color: #A9C6F2;
    color: #0A1628;
    box-shadow: 0 8px 20px rgba(169, 198, 242, .3);
  }

  100% {
    background-color: transparent;
    color: var(--c-body);
    box-shadow: none;
  }
}

html.dark .nav a[href="#"] {
  animation-name: tabon-dark !important;
}

html.dark .nav a[href="#about"] {
  animation-name: tabon-dark !important;
}

html.dark .nav a[href="#services"] {
  animation-name: tabon-dark !important;
}

html.dark .nav a[href="#products"] {
  animation-name: tabon-dark !important;
}

html.dark .nav a[href="#reviews"] {
  animation-name: tabon-dark !important;
}

html.dark .nav a[href="#contact"] {
  animation-name: tabon-dark !important;
}

/* Phone chip button in header */
html.dark a.chip[href^="tel"] {
  background: var(--c-chip2) !important;
  color: var(--c-body) !important;
}

html.dark a.chip[href^="tel"]:hover {
  background: var(--c-body) !important;
  color: var(--c-bg) !important;
}

/* ════════════════════════════════════════════════════════════
   9. HERO SECTION
   ════════════════════════════════════════════════════════════ */
html.dark .hero {
  color: var(--c-body) !important;
}

html.dark .hero h1 {
  color: var(--c-body) !important;
}

html.dark .hero p {
  color: var(--c-muted) !important;
}

/* Shimmer text in dark */
html.dark .shim {
  background: linear-gradient(100deg,
      #A9C6F2 0%, #A9C6F2 38%,
      #ffffff 50%,
      #A9C6F2 62%, #A9C6F2 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shim 4.5s ease-in-out 1.6s infinite;
}

/* Stat numbers */
html.dark [style*="font:600 42px 'Playfair Display'"] {
  color: var(--c-body) !important;
}

html.dark [style*="letter-spacing:1.5px;text-transform:uppercase"] {
  color: var(--c-muted) !important;
}

/* Dividers */
html.dark [style*="background:#c5d0e6"] {
  background: var(--c-bdr-in) !important;
}

/* Hero orb */
html.dark [style*="radial-gradient(ellipse at center,rgba(169,198,242,.45)"] {
  opacity: 0.35;
}

/* ════════════════════════════════════════════════════════════
   10. BUTTONS
   ════════════════════════════════════════════════════════════ */
/* Ghost button */
html.dark .ghost {
  color: var(--c-body) !important;
  border-color: var(--c-bdr) !important;
}

html.dark .ghost:hover {
  background: var(--c-body) !important;
  color: var(--c-bg) !important;
}

/* Gold button – stays mostly same, subtle tweak */
html.dark .gold {
  background: #A9C6F2 !important;
  color: #0A1628 !important;
}

html.dark .gold:hover {
  background: #c3d8f7 !important;
}

/* ════════════════════════════════════════════════════════════
   11. MARQUEE BAND
   ════════════════════════════════════════════════════════════ */
html.dark [style*="background:#16294A;color:#E2EAF7;padding:22px 0"] {
  background: #040c18 !important;
}

/* ════════════════════════════════════════════════════════════
   12. ABOUT SECTION
   ════════════════════════════════════════════════════════════ */
html.dark #about h2,
html.dark #about p {
  color: var(--c-body) !important;
}

html.dark #about p[style] {
  color: var(--c-muted) !important;
}

html.dark #about [style*="color:#2A4F8F"] {
  color: var(--c-accent) !important;
}

html.dark #about [style*="color:#44577a"] {
  color: var(--c-muted) !important;
}

html.dark #about img[style*="border:6px solid #F6F8FC"] {
  border-color: var(--c-bg) !important;
}

/* About chips */
html.dark .chip[style*="background:#DCE6F5"] {
  background: var(--c-chip) !important;
  color: var(--c-body) !important;
}

/* ════════════════════════════════════════════════════════════
   13. SERVICES SECTION
   ════════════════════════════════════════════════════════════ */
#services {
  background: var(--c-section) !important;
}

html.dark #services [style*="color:#2A4F8F"] {
  color: var(--c-accent) !important;
}

html.dark #services h2 {
  color: var(--c-body) !important;
}

/* Amenity cards */
.am {
  background: var(--c-card) !important;
  border-color: var(--c-bdr) !important;
}

html.dark .am {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}

html.dark .am h3 {
  color: var(--c-body) !important;
}

html.dark .am p {
  color: var(--c-muted) !important;
}

html.dark .am .no {
  color: var(--c-accent) !important;
}

/* Stage (image container) */
.am .stage {
  background: var(--c-stage) !important;
}

html.dark .am .stage img {
  mix-blend-mode: normal;
  opacity: .92;
}

/* Dark variant card (.am.dk) – already dark, keep it */
html.dark .am.dk {
  background: linear-gradient(135deg, #0d1e3a 0%, #162b50 130%) !important;
  border-color: rgba(169, 198, 242, .2) !important;
}

html.dark .am.dk h3,
html.dark .am.dk .no {
  color: #e8eff8 !important;
}

html.dark .am.dk p {
  color: #8aa4cc !important;
}

html.dark .am.dk .stage {
  background: linear-gradient(160deg, #1a2e50, #0e1d35) !important;
}

/* Light variant card (.am.mt) in dark */
html.dark .am.mt {
  background: linear-gradient(135deg, #122040, #1b2e52) !important;
}

/* Available badge */
.av {
  background: var(--c-chip) !important;
  color: var(--c-accent) !important;
}

html.dark .am.dk .av {
  background: rgba(169, 198, 242, .15) !important;
  color: #A9C6F2 !important;
}

/* Arrow button */
.ar {
  border-color: var(--c-body) !important;
}

html.dark .am:hover .ar {
  background: var(--c-body) !important;
  color: var(--c-bg) !important;
}

html.dark .am.dk .ar {
  border-color: rgba(169, 198, 242, .6) !important;
}

html.dark .am.dk:hover .ar {
  background: #A9C6F2 !important;
  color: #0A1628 !important;
  border-color: #A9C6F2 !important;
}

/* Filter chips */
.fc {
  background: var(--c-chip) !important;
  color: var(--c-body) !important;
}

.fc:hover {
  background: var(--c-body) !important;
  color: var(--c-bg) !important;
}

#f-all:checked~.phd .l-all,
#f-soap:checked~.phd .l-soap,
#f-kits:checked~.phd .l-kits,
#f-bottles:checked~.phd .l-bottles,
#f-ess:checked~.phd .l-ess {
  background: var(--c-body) !important;
  color: var(--c-bg) !important;
}

/* ════════════════════════════════════════════════════════════
   14. PRODUCTS SECTION
   ════════════════════════════════════════════════════════════ */
html.dark #products [style*="color:#2A4F8F"] {
  color: var(--c-accent) !important;
}

html.dark #products h2 {
  color: var(--c-body) !important;
}

/* Product cards */
.pc {
  background: var(--c-card) !important;
  border-color: var(--c-bdr) !important;
}

.pc .im {
  background: var(--c-im) !important;
}

html.dark .pc .im img {
  mix-blend-mode: normal;
  opacity: .9;
}

html.dark .pc .im::before {
  background: rgba(10, 22, 40, .8) !important;
  color: #A9C6F2 !important;
}

html.dark .pc .tx b {
  color: var(--c-body) !important;
}

html.dark .pc .tx div {
  color: var(--c-muted) !important;
}

/* Arrow button on product card */
html.dark .pc .tx::after {
  border-color: var(--c-bdr) !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dce8f5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/43% no-repeat !important;
}

html.dark .pc:hover .tx::after {
  background: var(--c-body) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308111f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/43% no-repeat !important;
}

/* ════════════════════════════════════════════════════════════
   15. CTA BAND
   ════════════════════════════════════════════════════════════ */
html.dark [style*="background:linear-gradient(90deg,rgba(22,41,74,.92)"] {
  background: linear-gradient(90deg, rgba(4, 10, 22, .97), rgba(4, 10, 22, .45)) !important;
}

/* ════════════════════════════════════════════════════════════
   16. REVIEWS SECTION
   ════════════════════════════════════════════════════════════ */
html.dark #reviews {
  background: linear-gradient(160deg, #040c18, #08111f) !important;
}

html.dark #reviews [style*="background:rgba(255,255,255,.07)"] {
  background: rgba(169, 198, 242, .06) !important;
  border-color: rgba(169, 198, 242, .14) !important;
}

html.dark #reviews blockquote {
  color: #e8eff8 !important;
}

html.dark #reviews [style*="color:#A9C6F2"] {
  color: #A9C6F2 !important;
}

/* Testimonial dots */
html.dark .dt {
  background: rgba(169, 198, 242, .25) !important;
}

html.dark #ts1:checked~.ctl .d1,
html.dark #ts2:checked~.ctl .d2,
html.dark #ts3:checked~.ctl .d3 {
  background: #A9C6F2 !important;
}

/* ════════════════════════════════════════════════════════════
   17. CONTACT SECTION
   ════════════════════════════════════════════════════════════ */
html.dark #contact [style*="color:#2A4F8F"] {
  color: var(--c-accent) !important;
}

html.dark #contact h2 {
  color: var(--c-body) !important;
}

html.dark #contact p[style] {
  color: var(--c-muted) !important;
}

/* Info cards */
html.dark a.card[href^="tel"],
html.dark a.card[href^="mailto"],
html.dark div.card[style*="background:#fff"] {
  background: var(--c-card) !important;
  border-color: var(--c-bdr) !important;
}

html.dark .card span[style*="background:#A9C6F2"] {
  background: rgba(169, 198, 242, .18) !important;
}

/* Contact form */
html.dark #contactForm {
  background: var(--c-card) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4) !important;
}

html.dark .inp {
  color: var(--c-body) !important;
  border-color: var(--c-bdr-in) !important;
}

html.dark .inp:focus {
  border-color: #A9C6F2 !important;
  box-shadow: 0 2px 0 0 #A9C6F2 !important;
}

html.dark label[style*="color:#44577a"] {
  color: var(--c-muted) !important;
}

html.dark label[for="name"],
html.dark label[for="email"],
html.dark label[for="subject"],
html.dark label[for="message"] {
  color: var(--c-muted) !important;
}

/* ════════════════════════════════════════════════════════════
   18. LOCATION SECTION
   ════════════════════════════════════════════════════════════ */
html.dark #location [style*="background:#fff"] {
  background: var(--c-card) !important;
  border-color: var(--c-bdr) !important;
}

html.dark #location [style*="color:#2A4F8F"] {
  color: var(--c-accent) !important;
}

html.dark #location h2 {
  color: var(--c-body) !important;
}

html.dark #location span[style*="line-height:1.6"] {
  color: var(--c-body) !important;
}

html.dark #location [style*="background:#E9EFF9;color:#16294A"] {
  background: var(--c-chip) !important;
  color: var(--c-body) !important;
}

html.dark #location [style*="background:#E4ECF8"] {
  background: #0b1729 !important;
}

/* ════════════════════════════════════════════════════════════
   19. FOOTER
   ════════════════════════════════════════════════════════════ */
html.dark footer {
  background: #030810 !important;
}

html.dark footer [style*="border-top:1px solid rgba(255,255,255,.12)"] {
  border-color: rgba(169, 198, 242, .12) !important;
}

html.dark footer p {
  color: #8aa4cc !important;
}

/* ════════════════════════════════════════════════════════════
   20. WHATSAPP FLOAT & SOCIAL ICONS
   ════════════════════════════════════════════════════════════ */
html.dark .wa .lb {
  background: var(--c-card) !important;
  color: var(--c-body) !important;
}

/* ════════════════════════════════════════════════════════════
   21. LIGHTBOX
   ════════════════════════════════════════════════════════════ */
html.dark .lbx img {
  background: var(--c-card) !important;
}

/* ════════════════════════════════════════════════════════════
   22. SCROLL PROGRESS BAR (stays same)
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   23. INLINE STYLE GENERIC OVERRIDES (dark mode only)
   ════════════════════════════════════════════════════════════ */
html.dark [style*="color:#44577a"] {
  color: var(--c-muted) !important;
}

html.dark [style*="color:#2A4F8F"]:not(svg):not(path) {
  color: var(--c-accent) !important;
}

html.dark [style*="background:#F6F8FC"] {
  background: var(--c-bg) !important;
}

html.dark [style*="background:#fff;border-radius"] {
  background: var(--c-card) !important;
}

/* ════════════════════════════════════════════════════════════
   24. HEADING COLORS
   ════════════════════════════════════════════════════════════ */
html.dark h1,
html.dark h2,
html.dark h3 {
  color: var(--c-body) !important;
}

/* ════════════════════════════════════════════════════════════
   25. REDUCED MOTION RESPECT
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .dm-ripple-el {
    animation: none !important;
  }

  .dm-toggle.dm-pulse {
    animation: none !important;
  }

  html.dm-transitioning * {
    transition-duration: .01ms !important;
  }
}