/* ════════════════════════════════════════════
   DestockGym — components/glow-pill.css
   Boutons pilule "glow verre" (repris du style Elementor
   .dg-glow-pill / .dg-glow-pill-teal, convertis en CSS pur
   appliqués directement sur un <a>).
   Variantes : .dg-glow-pill (indigo) · .dg-glow-pill--teal
════════════════════════════════════════════ */

.dg-glow-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 34px;
    min-height: 54px;
    border-radius: 999px;
    isolation: isolate;
    font-family: var(--dg-font-body);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: box-shadow .3s ease, transform .18s ease;

    /* — indigo (Eco-responsable) — */
    background: rgba(35, 48, 85, 0.32);
    box-shadow:
        0 0 80px rgba(110, 150, 255, 0.28),
        0 26px 80px rgba(80, 120, 240, 0.30),
        inset 0 0 28px rgba(150, 180, 255, 0.20),
        inset 0 -5px 30px rgba(175, 205, 255, 0.44),
        inset 0 10px 30px rgba(130, 160, 240, 0.10);
}

/* Liseré fin et doux (bord lumineux) */
.dg-glow-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.3px;
    background: linear-gradient(180deg,
        rgba(195, 215, 255, 0.9) 0%,
        rgba(130, 150, 220, 0.25) 40%,
        rgba(170, 195, 255, 0.5) 75%,
        rgba(215, 232, 255, 0.85) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: blur(0.6px) brightness(1);
    transition: filter .3s ease;
    pointer-events: none;
}

.dg-glow-pill > * { position: relative; z-index: 1; }

.dg-glow-pill:hover {
    color: #fff !important;
    box-shadow:
        0 0 90px rgba(120, 160, 255, 0.40),
        0 30px 85px rgba(90, 130, 250, 0.40),
        inset 0 0 32px rgba(160, 190, 255, 0.30),
        inset 0 -6px 34px rgba(185, 212, 255, 0.58),
        inset 0 10px 30px rgba(140, 170, 250, 0.14);
}

.dg-glow-pill:hover::before { filter: blur(0.6px) brightness(1.35); }

.dg-glow-pill:active { transform: translateY(1px) scale(0.99); }

.dg-glow-pill svg {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* ── Variante teal (Concept, Faq) ── */
.dg-glow-pill--teal {
    background: rgba(4, 48, 64, 0.32);
    box-shadow:
        0 0 80px rgba(60, 170, 210, 0.28),
        0 26px 80px rgba(1, 92, 122, 0.38),
        inset 0 0 28px rgba(110, 195, 220, 0.20),
        inset 0 -5px 30px rgba(150, 220, 240, 0.44),
        inset 0 10px 30px rgba(70, 160, 195, 0.10);
}

.dg-glow-pill--teal::before {
    background: linear-gradient(180deg,
        rgba(170, 225, 245, 0.9) 0%,
        rgba(75, 150, 180, 0.25) 40%,
        rgba(130, 205, 230, 0.5) 75%,
        rgba(200, 240, 250, 0.85) 100%);
}

.dg-glow-pill--teal:hover {
    box-shadow:
        0 0 90px rgba(75, 185, 225, 0.40),
        0 30px 85px rgba(10, 110, 145, 0.45),
        inset 0 0 32px rgba(125, 205, 230, 0.30),
        inset 0 -6px 34px rgba(165, 230, 245, 0.58),
        inset 0 10px 30px rgba(80, 170, 205, 0.14);
}

/* ── Variante orange (Offres flash, Explorer) ── */
.dg-glow-pill--orange {
    background: rgba(74, 36, 8, 0.32);
    box-shadow:
        0 0 80px rgba(240, 150, 70, 0.28),
        0 26px 80px rgba(216, 110, 40, 0.38),
        inset 0 0 28px rgba(250, 185, 130, 0.20),
        inset 0 -5px 30px rgba(255, 205, 150, 0.44),
        inset 0 10px 30px rgba(240, 140, 60, 0.10);
}

.dg-glow-pill--orange::before {
    background: linear-gradient(180deg,
        rgba(255, 215, 175, 0.9) 0%,
        rgba(210, 130, 60, 0.25) 40%,
        rgba(245, 185, 120, 0.5) 75%,
        rgba(255, 230, 200, 0.85) 100%);
}

.dg-glow-pill--orange:hover {
    box-shadow:
        0 0 90px rgba(245, 165, 85, 0.42),
        0 30px 85px rgba(200, 95, 30, 0.45),
        inset 0 0 32px rgba(252, 195, 140, 0.30),
        inset 0 -6px 34px rgba(255, 215, 170, 0.58),
        inset 0 10px 30px rgba(245, 150, 70, 0.14);
}

@media (max-width: 767px) {
    .dg-glow-pill {
        gap: 14px;
        padding: 14px 28px;
        min-height: 50px;
    }
    .dg-glow-pill svg { width: 30px; height: 30px; }
}