/* Glassmorphism v2 — frosted glass that actually looks like glass.
 *
 * The previous version applied backdrop-filter directly to cards, which
 * fell flat in two scenarios:
 *   1. backdrop-filter silently no-ops when ANY ancestor has
 *      transform / opacity / filter / will-change set (Elementor adds
 *      these on multiple wrapper layers).
 *   2. With nothing visually interesting BEHIND the card, the blur had
 *      nothing to sample — cards looked like washed-out tinted slabs.
 *
 * v2 fixes both:
 *   - Painted synthetic backdrop on the widget body using two radial
 *     accent-coloured orbs + a faint diagonal mesh — gives the blur
 *     real content to sample regardless of widget context.
 *   - Cards use saturate(180%) + brightness(105%) alongside blur(16px)
 *     so the light leaks through with the brand-correct chroma.
 *   - Gradient border highlight: top edge brighter (light hitting
 *     glass from above) — the signature glass-edge cue.
 *   - @supports gate around backdrop-filter so browsers that fail
 *     silently get a clean opaque fallback instead of a washed slab.
 *
 * Selectors keep the [class*="-card / -panel / -tile"] suffix-matching
 * pattern so every widget's per-widget naming gets the treatment
 * without per-widget opt-in. .cp-no-pack opts a widget out.
 */

/* ── Synthetic backdrop ─────────────────────────────────────────────
   Painted on .compos-widget-body via :before/:after — gives the blur
   layer real visual content to sample even on flat brand bg. Uses
   --cp-accent-rgb so the orbs follow the operator's brand colour. */
/* Operator directive 2026-05-06: no outer border on .compos-widget
   across any style pack. Glass aesthetic lives on inner glass-cards
   via suffix selectors below — outer wrapper stays clean. */
.compos-widget {
    border-radius: var(--cp-widget-radius, 20px) !important;
    overflow: hidden;
    position: relative;
}

.compos-widget .compos-widget-body {
    position: relative;
    isolation: isolate;
}

.compos-widget .compos-widget-body::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(var(--cp-accent-rgb,255,101,14),0.22) 0%, transparent 38%),
        radial-gradient(circle at 78% 78%, rgba(var(--cp-accent-rgb,255,101,14),0.16) 0%, transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
    filter: blur(48px);
    opacity: 0.85;
}

/* Light-mode variant: softer orbs on white. */
.compos-widget.xw-bg--light {
    border-color: rgba(0,0,0,0.06) !important;
}
.compos-widget.xw-bg--light .compos-widget-body::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(var(--cp-accent-rgb,255,101,14),0.14) 0%, transparent 38%),
        radial-gradient(circle at 78% 78%, rgba(var(--cp-accent-rgb,255,101,14),0.10) 0%, transparent 42%),
        linear-gradient(135deg, rgba(0,0,0,0.03) 0%, transparent 60%);
    opacity: 1;
}

/* All widget content sits above the backdrop. */
.compos-widget .compos-widget-body > * {
    position: relative;
    z-index: 1;
}

/* ── Glass cards ───────────────────────────────────────────────────
   Ranges of suffix excludes prevent inner card descendants
   (-card-body / -card-meta / -card-foot etc.) picking up the surface
   treatment. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

    .compos-widget [class*="-card"]:not([class*="-card-"]):not([class*="-cards"]):not([class*="card-h"]):not([class*="card-text"]):not([class*="card-num"]):not([class*="card-body"]):not([class*="card-meta"]):not([class*="card-cta"]):not([class*="card-stat"]):not([class*="card-head"]):not([class*="card-foot"]):not([class*="card-row"]):not([class*="card-link"]):not([class*="card-icon"]):not([class*="card-input"]):not(.cp-no-pack),
    .compos-widget [class*="-panel"]:not([class*="-panel-"]):not([class*="-panels"]):not(.cp-no-pack),
    .compos-widget [class*="-tile"]:not([class*="-tile-"]):not([class*="-tiles"]):not(.cp-no-pack),
    .compos-widget article[class*="xw-"]:not([class*="-row"]):not([class*="-meta"]):not([class*="-list"]):not([class*="-item"]):not([class*="-stats"]):not(.cp-no-pack) {
        background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
        backdrop-filter: blur(16px) saturate(180%) brightness(105%);
        -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(105%);
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-top-color: rgba(255,255,255,0.28) !important; /* edge-light cue */
        box-shadow:
            0 1px 0 0 rgba(255,255,255,0.12) inset,
            0 8px 32px rgba(0,0,0,0.18);
        transition: background 0.3s, border-color 0.3s, transform 0.2s;
    }

    /* Operator directive 2026-05-05: no hover effect on big cards. Glass
       tint shift on hover removed. */

    /* Light-mode glass — translucent white instead of translucent overlay. */
    .compos-widget.xw-bg--light [class*="-card"]:not([class*="-card-"]):not([class*="-cards"]):not([class*="card-h"]):not([class*="card-text"]):not([class*="card-num"]):not([class*="card-body"]):not([class*="card-meta"]):not([class*="card-cta"]):not([class*="card-stat"]):not([class*="card-head"]):not([class*="card-foot"]):not([class*="card-row"]):not([class*="card-link"]):not([class*="card-icon"]):not([class*="card-input"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light [class*="-panel"]:not([class*="-panel-"]):not([class*="-panels"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light [class*="-tile"]:not([class*="-tile-"]):not([class*="-tiles"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light article[class*="xw-"]:not([class*="-row"]):not([class*="-meta"]):not([class*="-list"]):not([class*="-item"]):not([class*="-stats"]):not(.cp-no-pack) {
        background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
        border: 1px solid rgba(0,0,0,0.08) !important;
        border-top-color: rgba(255,255,255,0.95) !important;
        box-shadow:
            0 1px 0 0 rgba(255,255,255,0.6) inset,
            0 6px 24px rgba(0,0,0,0.08);
    }

    /* Operator directive 2026-05-05: light-mode glass hover removed. */
}

/* ── Fallback for browsers without backdrop-filter ──
   Looks tasteful, just not "glass". Stronger card bg so it doesn't
   read as washed-out. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .compos-widget [class*="-card"]:not([class*="-card-"]):not([class*="-cards"]):not([class*="card-h"]):not([class*="card-text"]):not([class*="card-num"]):not([class*="card-body"]):not([class*="card-meta"]):not([class*="card-cta"]):not([class*="card-stat"]):not([class*="card-head"]):not([class*="card-foot"]):not([class*="card-row"]):not([class*="card-link"]):not([class*="card-icon"]):not([class*="card-input"]):not(.cp-no-pack),
    .compos-widget [class*="-panel"]:not([class*="-panel-"]):not([class*="-panels"]):not(.cp-no-pack),
    .compos-widget [class*="-tile"]:not([class*="-tile-"]):not([class*="-tiles"]):not(.cp-no-pack),
    .compos-widget article[class*="xw-"]:not([class*="-row"]):not([class*="-meta"]):not([class*="-list"]):not([class*="-item"]):not([class*="-stats"]):not(.cp-no-pack) {
        background: rgba(20,28,46,0.85);  /* darkish opaque fallback */
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-top-color: rgba(255,255,255,0.24) !important;
    }

    .compos-widget.xw-bg--light [class*="-card"]:not([class*="-card-"]):not([class*="-cards"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light [class*="-panel"]:not([class*="-panel-"]):not([class*="-panels"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light [class*="-tile"]:not([class*="-tile-"]):not([class*="-tiles"]):not(.cp-no-pack),
    .compos-widget.xw-bg--light article[class*="xw-"]:not(.cp-no-pack) {
        background: rgba(255,255,255,0.92);
        border: 1px solid rgba(0,0,0,0.10) !important;
    }
}

/* ── Buttons get a subtle glass treatment too. */
.compos-widget .compos-btn,
.compos-widget [class*="-btn"]:not([class*="-btn-"]):not([class*="-btns"]) {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

/* Eyebrows / chips / pills get glass treatment so they sit on top. */
.compos-widget .xw-eyebrow,
.compos-widget [class*="-eyebrow"],
.compos-widget [class*="-chip"]:not([class*="-chip-"]),
.compos-widget [class*="-pill"]:not([class*="-pill-"]) {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Hero / banner overlays use stronger blur for the signature
   frosted-banner look. */
.compos-widget [class*="-hero"]:not([class*="-hero-"]),
.compos-widget [class*="-banner"]:not([class*="-banner-"]) {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* prefers-reduced-motion: respect user preference, just skip the
   transition. (No animations to disable here, but future-proof.) */
@media (prefers-reduced-motion: reduce) {
    .compos-widget [class*="-card"],
    .compos-widget [class*="-panel"],
    .compos-widget [class*="-tile"],
    .compos-widget article[class*="xw-"] {
        transition: none !important;
    }
}