/* ==========================================================
   Luvrix Tools Pro — Liquid Glass System (iOS 26 inspired)
   Multi-layered, refractive, specular glass for every card
   ========================================================== */

/* -------- Base liquid glass class --------
   Apply to any element. Adds:
   • base translucent fill
   • backdrop blur + saturation
   • SVG displacement refraction (lx-liquid filter)
   • inner top-edge highlight
   • bottom inner shadow ring
   • outer soft shadow
   • specular sheen layer (.liquid-glass::after)
   • mouse-tracked highlight via --mx/--my
*/
.liquid-glass{
  position:relative;
  background:var(--lx-glass-bg);
  -webkit-backdrop-filter:blur(var(--lx-blur)) saturate(180%);
  backdrop-filter:blur(var(--lx-blur)) saturate(180%);
  border:1px solid var(--lx-glass-border-soft);
  border-top-color:var(--lx-glass-border);
  border-radius:var(--lx-radius);
  box-shadow:
    inset 0 1px 0 var(--lx-glass-edge),
    inset 0 -1px 0 var(--lx-glass-edge-bottom),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 1px 2px rgba(15,17,28,.04),
    0 12px 30px -10px var(--lx-glass-shadow-color),
    0 30px 60px -25px var(--lx-glass-shadow-color);
  isolation:isolate;
  overflow:hidden;
  --mx:50%; --my:0%;
  transition:
    transform .45s var(--lx-anim),
    box-shadow .45s var(--lx-anim),
    border-color .35s var(--lx-anim);
}

/* Inner refraction tint layer — sits below content, above blurred backdrop */
.liquid-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.16) 30%,
      rgba(255,255,255,0)   55%,
      rgba(255,255,255,0)   75%,
      rgba(255,255,255,.10) 100%);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}

/* Specular sheen — follows the cursor for liquid feel */
.liquid-glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(420px 240px at var(--mx) var(--my),
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 25%,
      rgba(255,255,255,0)   55%);
  mix-blend-mode:overlay;
  opacity:.55;
  transition:opacity .5s var(--lx-anim), background-position .2s linear;
  pointer-events:none;
  z-index:1;
}
.liquid-glass:hover::after{ opacity:.95; }

/* Ensure children sit above pseudo layers */
.liquid-glass > *{ position:relative; z-index:2; }

/* Hover lift uses the same physics */
.liquid-glass.hover-lift:hover{
  transform:translateY(-4px);
  border-top-color:var(--lx-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--lx-glass-edge),
    inset 0 -1px 0 var(--lx-glass-edge-bottom),
    0 1px 2px rgba(15,17,28,.05),
    0 24px 48px -14px var(--lx-glass-shadow-color),
    0 40px 80px -30px var(--lx-glass-shadow-color);
}

/* -------- Variants -------- */
.liquid-glass.strong{
  background:var(--lx-glass-bg-strong);
  -webkit-backdrop-filter:blur(40px) saturate(190%);
  backdrop-filter:blur(40px) saturate(190%);
  border-color:var(--lx-glass-border);
}
.liquid-glass.subtle{
  background:color-mix(in oklab, var(--lx-glass-bg) 70%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.liquid-glass.tinted{
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--lx-primary) 14%, transparent), color-mix(in oklab, var(--lx-primary-2) 10%, transparent)),
    var(--lx-glass-bg);
}

/* Pill/bar — the header chip */
.liquid-glass.pill{ border-radius:999px; }

/* Bigger glassy hero/CTA shells */
.liquid-glass.xl{
  border-radius:var(--lx-radius-xl);
  -webkit-backdrop-filter:blur(50px) saturate(190%);
  backdrop-filter:blur(50px) saturate(190%);
}

/* Apply real refraction (SVG filter) — falls back gracefully on unsupported browsers */
@supports ((backdrop-filter:url(#lx-liquid)) or (-webkit-backdrop-filter:url(#lx-liquid))){
  .liquid-glass.refract,
  .liquid-glass-refract{
    -webkit-backdrop-filter:blur(var(--lx-blur)) saturate(180%) url(#lx-liquid);
    backdrop-filter:blur(var(--lx-blur)) saturate(180%) url(#lx-liquid);
  }
  .liquid-glass.refract.strong{
    -webkit-backdrop-filter:blur(40px) saturate(190%) url(#lx-liquid-strong);
    backdrop-filter:blur(40px) saturate(190%) url(#lx-liquid-strong);
  }
}

/* -------- Component-level glass mappings --------
   The PHP outputs semantic class names (lx-tool-card, lx-blog-card …)
   plus legacy utility names (.glass-card, .glass-bar, .glass-pill).
   We make every important surface a liquid-glass surface here so
   markup stays clean and theme remains consistent.
*/
.glass-card,
.glass-bar,
.glass-pill,
.lx-header-inner,
.lx-tool-card,
.lx-cat-card,
.lx-why-card,
.lx-blog-card,
.lx-hero-search,
.lx-newsletter,
.lx-eyebrow,
.lx-empty,
.lx-page-card,
.lx-accordion,
.lx-drawer-inner,
.lx-to-top,
.lx-comments,
.lx-share,
.lx-toc,
.lx-author-card,
.lx-article-hero,
.lx-spotlight,
.lx-blog-toolbar,
.lx-searchform{
  position:relative;
  background:var(--lx-glass-bg);
  -webkit-backdrop-filter:blur(var(--lx-blur)) saturate(180%);
  backdrop-filter:blur(var(--lx-blur)) saturate(180%);
  border:1px solid var(--lx-glass-border-soft);
  border-top-color:var(--lx-glass-border);
  box-shadow:
    inset 0 1px 0 var(--lx-glass-edge),
    inset 0 -1px 0 var(--lx-glass-edge-bottom),
    0 1px 2px rgba(15,17,28,.04),
    0 12px 30px -10px var(--lx-glass-shadow-color),
    0 30px 60px -25px var(--lx-glass-shadow-color);
  isolation:isolate;
  overflow:hidden;
}

/* Edge highlight + specular layer for component-mapped glass surfaces */
.glass-card::before,
.glass-bar::before,
.glass-pill::before,
.lx-tool-card::before,
.lx-cat-card::before,
.lx-why-card::before,
.lx-blog-card::before,
.lx-hero-search::before,
.lx-newsletter::before,
.lx-eyebrow::before,
.lx-empty::before,
.lx-page-card::before,
.lx-accordion::before,
.lx-drawer-inner::before,
.lx-header-inner::before,
.lx-author-card::before,
.lx-spotlight::before,
.lx-blog-toolbar::before,
.lx-searchform::before,
.lx-comments::before,
.lx-share::before,
.lx-toc::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.14) 28%,
    rgba(255,255,255,0)   55%,
    rgba(255,255,255,.08) 100%);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}

.lx-tool-card::after,
.lx-cat-card::after,
.lx-why-card::after,
.lx-blog-card::after,
.lx-page-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 60%);
  mix-blend-mode:overlay;
  opacity:.45;
  transition:opacity .5s var(--lx-anim);
  pointer-events:none;
  z-index:1;
}
.lx-tool-card:hover::after,
.lx-cat-card:hover::after,
.lx-why-card:hover::after,
.lx-blog-card:hover::after,
.lx-page-card:hover::after{ opacity:.95; }

.lx-tool-card > *,
.lx-cat-card > *,
.lx-why-card > *,
.lx-blog-card > *,
.lx-hero-search > *,
.lx-newsletter > *,
.lx-page-card > *,
.lx-accordion > *,
.lx-drawer-inner > *,
.lx-header-inner > *,
.glass-card > *,
.glass-bar > *,
.glass-pill > *{ position:relative; z-index:2; }

/* Round shapes that should stay pill-shaped */
.glass-bar,
.glass-pill,
.lx-header-inner,
.lx-hero-search,
.lx-newsletter,
.lx-eyebrow{ border-radius:999px; }

/* Initialize mouse vars on every glass card */
.lx-tool-card,.lx-cat-card,.lx-why-card,.lx-blog-card,.lx-page-card{ --mx:50%; --my:0%; }

/* Fallbacks for browsers without backdrop-filter */
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .liquid-glass,
  .glass-card,.glass-bar,.glass-pill,
  .lx-tool-card,.lx-cat-card,.lx-why-card,.lx-blog-card,
  .lx-header-inner,.lx-hero-search,.lx-newsletter,.lx-eyebrow,
  .lx-page-card,.lx-accordion,.lx-drawer-inner,.lx-empty,.lx-to-top{
    background:var(--lx-surface);
    border-color:var(--lx-border);
  }
}

/* SVG host element kept off-canvas */
.lx-svg-defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }