/* ============================================================
   BioMeBar Landing Page — Custom Styles
   Ported from lovable/lovable/src/styles.css
   ============================================================ */

/* ===== Brand palette (OKLch) ===== */
:root {
  --ivory: oklch(0.972 0.012 85);
  --beige: oklch(0.905 0.025 75);
  --crimson: oklch(0.48 0.205 27);
  --ink: oklch(0.16 0.01 30);
  --primary: oklch(0.48 0.205 27);
  --primary-foreground: oklch(0.98 0.008 85);
  --foreground: oklch(0.16 0.01 30);
}

/* ===== Self-hosted Cormorant Garamond (replaces Google Fonts CDN) ===== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;               /* single file covers 400, 500, 600 */
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Base reset for landing template ===== */
/*
 * Bricks + LiteSpeed inject CSS that overrides font sizes and spacing.
 * Tailwind uses rem units (relative to html font-size), so we MUST
 * lock html to 16px. The body class scoping avoids affecting other pages.
 */
html:has(body.landing-page) {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.landing-page {
  background: var(--ivory) !important;
  color: var(--foreground) !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  margin: 0 !important;
  padding: 0 !important;
}
.landing-page * { box-sizing: border-box; }
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page .font-serif {
  font-family: "Cormorant Garamond", "Playfair Display", ui-serif, serif !important;
  color: inherit !important;          /* override Bricks h2{color:var(--dark)} */
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.landing-page p {
  font-size: 1rem;
  line-height: 1.6;
}
.landing-page a { color: inherit; }

/* ===== Mobile: compact cards ===== */
@media (max-width: 639px) {
  .landing-page .why-card {
    min-height: auto !important;
    padding: 1.25rem !important;
  }
  .landing-page .why-card .card-num {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem;
  }
  .landing-page .process-card {
    min-height: auto !important;
    padding: 1.25rem !important;
  }
  .landing-page .process-card .step-num {
    font-size: 2.5rem !important;
  }
  .landing-page .category-card {
    min-height: auto !important;
    padding: 1rem !important;
    flex-direction: column;
    text-align: center;
  }
  .landing-page .category-card > div:first-of-type {
    width: 5rem !important;
    height: 5rem !important;
  }
  .landing-page .category-card .cat-icon {
    width: 4rem !important;
    height: 4rem !important;
  }
}

/* ===== Glass card ===== */
.glass-card {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.55), oklch(1 0 0 / 0.25));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid oklch(1 0 0 / 0.5);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.6) inset,
    0 20px 50px -25px oklch(0.16 0.01 30 / 0.25);
}

/* ===== Pill button ===== */
.pill {
  border-radius: 9999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, background .25s ease, color .25s ease;
}
.pill:hover { transform: translateY(-1px); }

/* ===== Shimmer button ===== */
.shimmer-btn { position: relative; overflow: hidden; isolation: isolate; }
.shimmer-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, oklch(1 0 0 / .45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* ===== Fade in ===== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in .9s cubic-bezier(.2,.7,.2,1) both; }

/* ===== Aurora gradient text ===== */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.text-aurora {
  background: linear-gradient(90deg, var(--ivory), var(--primary), var(--ivory));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* ===== Lift on hover ===== */
.lift-on-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.lift-on-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px oklch(0.48 0.205 27 / 0.35);
}

/* ===== Product frame ===== */
.product-frame {
  position: relative;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(1 0 0 / 0.9), oklch(0.972 0.012 85 / 0.4) 55%, oklch(0.905 0.025 75 / 0.55) 100%);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.9) inset,
    0 0 0 1px oklch(0.48 0.205 27 / 0.08),
    0 30px 60px -34px oklch(0.16 0.01 30 / 0.35);
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
}
.product-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.5);
  pointer-events: none;
}
.product-frame:hover { transform: translateY(-6px); }
.product-frame-flush {
  background: oklch(1 0 0 / 0.68);
  padding: 0;
  line-height: 0;
  box-shadow:
    0 0 0 1px oklch(0.16 0.01 30 / 0.08),
    0 26px 58px -34px oklch(0.16 0.01 30 / 0.38);
}
.product-frame-flush img { border-radius: inherit; }

/* ===== Rotating ring animation ===== */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.ring-spin { animation: spin-slow 24s linear infinite; }
.ring-spin-reverse { animation: spin-slow 18s linear infinite reverse; transform-origin: 50% 50%; }

/* ===== Category card hover ===== */
.category-card .underline-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transition: transform .5s ease;
  transform-origin: left;
}
.category-card:hover .underline-bar { transform: scaleX(1); }
.category-card:hover .ring-spin { animation-duration: 6s; }
.category-card:hover .ring-counter { opacity: 0.6; }
.category-card:hover .cat-icon { transform: scale(1.1); }
.category-card:hover .cat-aura { background: oklch(0.48 0.205 27 / 0.1); }
.category-card:hover h3 { color: var(--crimson); }

/* ===== Process card hover ===== */
.process-card:hover { background: oklch(0.972 0.012 85 / 0.95) !important; }
.process-card:hover .step-num { color: var(--crimson) !important; transform: scale(1.1); }
.process-card:hover h3 { transform: translateX(4px); }

/* ===== Why card hover ===== */
.why-card:hover { border-color: oklch(0.48 0.205 27 / 0.4) !important; }
.why-card:hover .card-num { color: var(--crimson) !important; transform: scale(1.1); }
.why-card:hover h3 { transform: translateX(4px); }

/* ===== Text balance ===== */
.text-balance { text-wrap: balance; }

/* ===== WhatsApp floating button ===== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}

/* ===== Hide the site-wide Click-to-Chat WhatsApp widget on the landing page ===== */
/* The Click-to-Chat plugin injects its own #ht-ctc-chat button via wp_footer
   (independent of the asset handles dequeued in functions.php). The landing
   template intentionally carries no chat button, so suppress it here. */
.landing-page #ht-ctc-chat { display: none !important; }

/* ===== Remove the Easy Login/Register (xoo-el) blank band under the footer ===== */
/* xoo-el injects a login modal + notice popup at wp_footer with inline
   visibility:hidden. Their stylesheet AND script are dequeued on this page
   (functions.php), so without position:fixed they sit IN FLOW — invisible but
   still occupying height — leaving a tall cream gap below the footer. Drop them
   from layout (the modal is non-functional here anyway: its JS is dequeued). */
.landing-page .xoo-el-container,
.landing-page .xoo-el-popup-notice { display: none !important; }