/* ==========================================================================
   SOUL HEALING BALI — Premium design system
   Shared across all pages. Tailwind (CDN) handles utility classes; this file
   holds brand tokens, typography, bespoke components and the i18n toggle.
   ========================================================================== */

:root{
  /* ---- Colour tokens -------------------------------------------------- */
  --ink:        #1B2118;   /* near-black, deep temple ink            */
  --forest:     #263323;   /* primary dark ground                    */
  --forest-2:   #34452D;   /* secondary dark, panels on dark ground  */
  --moss:       #55684A;   /* mid green                              */
  --sage:       #93A883;   /* soft sage accent                       */
  --sand:       #E8DCC0;   /* warm sand                               */
  --sand-deep:  #D7C296;   /* deeper tan                              */
  --ivory:      #FBF8F1;   /* page background                        */
  --ivory-2:    #F4EEE1;   /* secondary panel background             */
  --brass:      #B4924C;   /* refined brass / gold                   */
  --brass-deep: #8C6F31;   /* brass hover / pressed                  */
  --clay:       #8C4A34;   /* temple clay — rare accent only         */
  --charcoal:   #24231F;   /* body text                              */
  --ease-soul: cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Jost', sans-serif;
  background:var(--ivory);
  color:var(--charcoal);
  overflow-x:hidden;
}
h1,h2,h3,.font-head{ font-family:'Fraunces', serif; font-optical-sizing:auto; }
.font-display{ font-family:'Cormorant Garamond', serif; }

::selection{ background:var(--brass); color:var(--ivory); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--ivory-2); }
::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:8px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px; border-radius:4px;
}

/* ---- Utility colour classes (mirrors old Tailwind config names) -------- */
.bg-ivory{ background-color:var(--ivory); } .bg-ivory-2{ background-color:var(--ivory-2); }
.bg-sand-30{ background-color:rgba(232,220,192,.35); } .bg-sand-40{ background-color:rgba(232,220,192,.45); }
.bg-forest{ background-color:var(--forest); } .bg-forest-2{ background-color:var(--forest-2); }
.text-forest{ color:var(--forest); } .text-moss{ color:var(--moss); } .text-sage{ color:var(--sage); }
.text-sand{ color:var(--sand); } .text-brass{ color:var(--brass); } .text-brassdeep{ color:var(--brass-deep); }
.text-clay{ color:var(--clay); } .text-charcoal{ color:var(--charcoal); } .text-ivory{ color:var(--ivory); }
.border-brass{ border-color:var(--brass); }

/* ---- Glass ------------------------------------------------------------- */
.glass{ background:rgba(251,248,241,.6); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.5); }
.glass-dark{ background:rgba(38,51,35,.4); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1); }

/* ---- Nav ---------------------------------------------------------------- */
#navbar{ transition:all .5s var(--ease-soul); }
#navbar.scrolled{ background:rgba(251,248,241,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 rgba(38,51,35,.08); }
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--brass); transition:width .4s var(--ease-soul); }
.nav-link:hover::after, .nav-link.current::after{ width:100%; }
.nav-link.current{ color:var(--brass-deep); }

/* ---- Language toggle ------------------------------------------------- */
.lang-toggle{ display:inline-flex; align-items:center; border:1px solid rgba(180,146,76,.45); border-radius:999px; padding:3px; gap:2px; background:rgba(180,146,76,.06); }
.lang-toggle button{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.08em; padding:5px 11px; border-radius:999px; color:var(--brass-deep); transition:all .35s var(--ease-soul); cursor:pointer; }
.lang-toggle button.active{ background:var(--forest); color:var(--ivory); }
#navbar.scrolled .lang-toggle, .lang-toggle.on-dark{ }

/* ---- i18n visibility ---------------------------------------------------
   Default language is English; JS adds lang-en or lang-id to <html>.
   Everything is authored as pairs of spans/blocks carrying these classes. */
html.lang-en .i18n-id{ display:none !important; }
html.lang-id .i18n-en{ display:none !important; }
/* fallback before JS runs: show English so there is never a blank flash */
html:not(.lang-en):not(.lang-id) .i18n-id{ display:none !important; }

/* ---- Breath ring signature --------------------------------------------- */
.breath-ring{ animation:breathe 8s ease-in-out infinite; transform-origin:center; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.12); opacity:1; } }
.breath-ring-outer{ animation-delay:-1s; } .breath-ring-inner{ animation-delay:-3s; }
@media (prefers-reduced-motion: reduce){ .breath-ring, .breath-ring-outer, .breath-ring-inner{ animation:none !important; } }

/* ---- Reveal on scroll ---------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-soul), transform .9s var(--ease-soul); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1s var(--ease-soul), transform 1s var(--ease-soul); }
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }
.stagger-1{ transition-delay:.08s; } .stagger-2{ transition-delay:.16s; } .stagger-3{ transition-delay:.24s; } .stagger-4{ transition-delay:.32s; }

/* ---- Ornamental divider (padma motif) ------------------------------------ */
.petal-divider{ display:flex; align-items:center; justify-content:center; gap:14px; }
.petal-divider .line{ height:1px; width:64px; background:linear-gradient(90deg, transparent, var(--brass)); }
.petal-divider .line.rev{ background:linear-gradient(90deg, var(--brass), transparent); }

/* ---- Hover lift ----------------------------------------------------------- */
.lift{ transition:transform .5s var(--ease-soul), box-shadow .5s var(--ease-soul); }
.lift:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -20px rgba(38,51,35,.35); }

/* ---- Buttons --------------------------------------------------------------- */
.btn-brass{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--brass); color:var(--ivory); padding:1rem 2rem; border-radius:999px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:all .5s var(--ease-soul); }
.btn-brass:hover{ background:var(--brass-deep); transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(140,111,49,.5); }
.btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--brass); color:var(--brass-deep); padding:1rem 2rem; border-radius:999px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:all .5s var(--ease-soul); }
.btn-outline:hover{ background:var(--brass); color:var(--ivory); }
.btn-outline-light{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid rgba(251,248,241,.5); color:var(--ivory); padding:1rem 2rem; border-radius:999px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:all .5s var(--ease-soul); }
.btn-outline-light:hover{ background:rgba(251,248,241,.12); border-color:var(--brass); }
.text-link{ position:relative; padding-bottom:2px; border-bottom:1px solid rgba(180,146,76,.5); transition:border-color .4s var(--ease-soul); }
.text-link:hover{ border-color:var(--brass); }

/* ---- Page hero band (interior pages) --------------------------------------- */
.page-hero{ position:relative; padding-top:9.5rem; padding-bottom:5rem; background:var(--forest); overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 60% 60% at 85% 20%, rgba(180,146,76,.16), transparent 60%),
  radial-gradient(ellipse 50% 50% at 10% 100%, rgba(147,168,131,.12), transparent 60%); }

/* ---- Service tabs ----------------------------------------------------------- */
.service-tab{ transition:all .5s var(--ease-soul); }
.service-tab.active{ background:var(--forest); color:var(--ivory); }
.service-tab:not(.active):hover{ background:rgba(147,168,131,.14); }
.service-panel{ display:none; }
.service-panel.active{ display:grid; animation:fadeUp .7s var(--ease-soul); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ---- Pricing tabs & tables ---------------------------------------------------- */
.price-tab{ transition:all .45s var(--ease-soul); }
.price-tab.active{ background:var(--brass); color:var(--ivory); border-color:var(--brass); }
.price-panel{ display:none; }
.price-panel.active{ display:block; animation:fadeUp .6s var(--ease-soul); }
.price-row{ transition:background .3s var(--ease-soul); }
.price-row:hover{ background:rgba(180,146,76,.06); }
.price-featured{ background:linear-gradient(160deg, var(--forest) 0%, var(--forest-2) 100%); color:var(--ivory); }

/* ---- Curriculum module list (Class page) --------------------------------------- */
.module-num{ font-family:'Fraunces',serif; font-variation-settings:'opsz' 40; }
.module-row{ border-top:1px solid rgba(38,51,35,.12); }
.module-row:last-child{ border-bottom:1px solid rgba(38,51,35,.12); }
.module-row summary{ list-style:none; cursor:pointer; }
.module-row summary::-webkit-details-marker{ display:none; }
.module-row .chev{ transition:transform .4s var(--ease-soul); }
.module-row[open] .chev{ transform:rotate(135deg); }
.module-row[open] summary{ padding-bottom:.5rem; }

/* ---- Testimonial slider ------------------------------------------------------- */
.t-track{ display:flex; transition:transform .7s var(--ease-soul); }
.t-slide{ min-width:100%; }

/* ---- Marquee ------------------------------------------------------------------- */
.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- Mobile menu ---------------------------------------------------------------- */
.hamburger span{ transition:all .4s var(--ease-soul); }
#menu-toggle:checked ~ .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#menu-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
#menu-toggle:checked ~ .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#mobile-panel{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease-soul); }
#mobile-panel.open{ max-height:640px; }

/* ---- Lightbox ---------------------------------------------------------------------- */
.lightbox-overlay{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,12,10,.88); }
.lightbox-overlay.open{ display:flex; }
.lightbox-content{ position:relative; max-width:min(92vw,1100px); max-height:92vh; }
.lightbox-content img{ display:block; width:100%; height:auto; max-height:92vh; object-fit:contain; border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.lightbox-close{ position:absolute; top:12px; right:12px; width:42px; height:42px; border:0; border-radius:999px; background:rgba(251,248,241,.95); color:var(--charcoal); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.2); }

/* ---- Ads / promo popup -------------------------------------------------------------- */
.ads-popup-overlay{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(10,12,10,.82); opacity:0; transition:opacity .4s var(--ease-soul); }
.ads-popup-overlay.open{ display:flex; } .ads-popup-overlay.show{ opacity:1; }
.ads-popup-content{ position:relative; width:min(92vw,460px); background:transparent; border-radius:24px; padding:10px; box-shadow:0 24px 70px rgba(0,0,0,.4); transform:scale(.94) translateY(10px); transition:transform .45s var(--ease-soul); }
.ads-popup-overlay.show .ads-popup-content{ transform:scale(1) translateY(0); }
.ads-popup-carousel{ overflow:hidden; border-radius:18px; }
.ads-popup-track{ display:flex; transition:transform .5s var(--ease-soul); }
.ads-popup-slide{ min-width:100%; }
.ads-popup-content img{ display:block; width:100%; height:auto; max-height:82vh; object-fit:contain; border-radius:18px; cursor:pointer; }
.ads-popup-close{ position:absolute; top:-14px; right:-14px; width:38px; height:38px; border:0; border-radius:999px; background:var(--ink); color:var(--ivory); font-size:22px; line-height:1; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:2; }
.ads-popup-nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:999px; background:rgba(251,248,241,.9); color:var(--charcoal); font-size:22px; line-height:1; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.25); display:none; align-items:center; justify-content:center; }
.ads-popup-prev{ left:4px; } .ads-popup-next{ right:4px; }
.ads-popup-content.has-nav .ads-popup-nav{ display:flex; }
.ads-popup-dots{ display:none; justify-content:center; gap:6px; margin-top:10px; }
.ads-popup-content.has-nav .ads-popup-dots{ display:flex; }
.ads-popup-dot{ width:7px; height:7px; border-radius:999px; background:rgba(38,51,35,.25); cursor:pointer; border:0; padding:0; transition:background .3s var(--ease-soul); }
.ads-popup-dot.active{ background:var(--brass); }

/* ---- Documentary / doc modal ------------------------------------------------------------ */
.doc-btn{ margin-top:.85rem; display:inline-flex; justify-content:center; align-items:center; width:100%; border:1px solid rgba(180,146,76,.35); color:var(--brass-deep); background:rgba(180,146,76,.08); border-radius:999px; padding:.9rem 1rem; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:all .35s var(--ease-soul); }
.doc-btn:hover{ background:rgba(180,146,76,.16); color:var(--forest); transform:translateY(-2px); }
.doc-modal{ position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(10,12,10,.9); overflow-y:auto; }
.doc-modal.open{ display:flex; }
.doc-content{ position:relative; width:min(100%,980px); max-width:100%; max-height:min(92vh,900px); overflow-y:auto; background:var(--ivory); border-radius:28px; padding:24px 24px 20px; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.doc-close{ position:sticky; top:8px; float:right; z-index:2; width:42px; height:42px; border:0; border-radius:999px; background:var(--ink); color:var(--ivory); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.doc-carousel{ overflow:hidden; clear:both; }
.doc-track{ display:flex; transition:transform .6s var(--ease-soul); }
.doc-slide{ min-width:100%; padding:2px; }
.doc-preview, .doc-media{ display:flex; align-items:center; justify-content:center; min-height:220px; max-height:min(68vh,620px); overflow:hidden; border-radius:20px; background:#FFFDF8; }
.doc-preview img, .doc-media video{ width:100%; height:100%; max-height:min(68vh,620px); border-radius:20px; object-fit:contain; display:block; background:#FFFDF8; }
.doc-media{ border:1px solid rgba(38,51,35,.12); padding:12px; }
.doc-media h4{ font-family:'Fraunces',serif; color:var(--forest); margin-bottom:10px; font-size:1rem; }
.doc-caption{ margin-top:10px; text-align:center; color:var(--moss); font-size:.95rem; font-family:'Jost',sans-serif; }
.doc-nav{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.doc-arrow{ width:40px; height:40px; border:0; border-radius:999px; background:var(--forest); color:var(--ivory); cursor:pointer; }
.doc-dots{ display:flex; gap:6px; }
.doc-dot{ width:9px; height:9px; border-radius:999px; border:0; background:rgba(38,51,35,.25); cursor:pointer; }
.doc-dot.active{ background:var(--brass); }

/* ---- WhatsApp float ------------------------------------------------------------------------ */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:1200; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; background:linear-gradient(135deg,#25D366 0%,#128C7E 100%); color:#fff; box-shadow:0 10px 24px rgba(18,140,126,.28); transition:transform .3s var(--ease-soul), box-shadow .3s var(--ease-soul); }
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(18,140,126,.35); }

@media (max-width:768px){
  .doc-content{ padding:16px 14px 14px; } .doc-close{ top:6px; right:6px; }
  .doc-preview, .doc-media{ min-height:180px; max-height:min(60vh,420px); }
  .doc-preview img, .doc-media video{ max-height:min(60vh,420px); }
  .wa-float{ width:48px; height:48px; right:14px; bottom:14px; }
  .page-hero{ padding-top:8rem; padding-bottom:3.5rem; }
}