/* =====================================================================
   style.css — Bajuin Landing Page
   Role: Dark mode vars, animations, WAB FAB, 3rd-party lib overrides.
   Tailwind v4 handles all component/utility styles via the inline block.
   ===================================================================== */

/* ── Backward-Compatibility Aliases ─────────────────────────────────── */
/* HTML inline styles may use old var names like var(--coral), var(--teal) */
/* These aliases forward them to the new --color-* variables set by @theme */
:root {
  --teal: var(--color-teal);
  --teal-dark: var(--color-teal-dark);
  --teal-light: var(--color-teal-light);
  --teal-mist: var(--color-teal-mist);
  --coral: var(--color-coral);
  --coral-dark: var(--color-coral-dark);
  --canvas: var(--color-canvas);
  --surface: var(--color-surface);
  --ink: var(--color-ink);
  --ink2: var(--color-ink2);
  --body: var(--color-body);
  --muted: var(--color-muted);
  --disabled: var(--color-disabled);
  --border: var(--color-border);
  --border2: var(--color-border2);
}



/* ── Dark Mode: override @theme CSS variables ───────────────────────── */
body.dark {
  --color-canvas: #0f1117;
  --color-surface: #161a22;
  --color-ink: #eef2f7;
  --color-ink2: #c8d3e0;
  --color-body: #8ea3ba;
  --color-muted: #5a7090;
  --color-disabled: #2e3a4a;
  --color-border: #1e2a38;
  --color-border2: #26354a;
}

/* ── Page Loader ─────────────────────────────────────────────────────── */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-canvas);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s .2s, visibility .4s .2s;
}
#page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-logo { font-size: 32px; font-weight: 800; color: var(--color-ink); letter-spacing: -1px; }
.loader-logo span { color: var(--color-teal); }
.loader-bar { width: 160px; height: 3px; background: var(--color-border); border-radius: 9999px; margin: 16px auto 0; overflow: hidden; }
.loader-progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-teal), var(--color-coral)); border-radius: 9999px; animation: loader-fill .7s ease forwards; }
@keyframes loader-fill { to { width: 100%; } }

/* ── WhatsApp Floating Action Button ─────────────────────────────────── */
.wa-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 500;
  width: 56px; height: 56px; background: #25d366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.wa-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.wa-fab svg { width: 28px; height: 28px; }

/* ── Icon Library (Lucide) sizing ────────────────────────────────────── */
.hero-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.ill-badge svg  { width: 11px; height: 11px; }
.step-num svg   { width: 32px; height: 32px; }
.why-icon svg   { width: 26px; height: 26px; color: var(--color-teal); }
.testi-stars svg{ width: 14px; height: 14px; fill: #f59e0b; color: #f59e0b; }
.nav-darkmode svg { width: 16px; height: 16px; }
.nav-hamburger svg{ width: 22px; height: 22px; }

/* ── Swiper Pagination ───────────────────────────────────────────────── */
.swiper-pagination-bullet { background: var(--color-teal) !important; opacity: .4; }
.swiper-pagination-bullet-active { opacity: 1 !important; }

/* ── GLightbox cursor on catalog ─────────────────────────────────────── */
a.glightbox { cursor: zoom-in; display: block; }