/* =====================================================================
   INFOX LOJA - FASE 5B
   EFEITOS VISUAIS DAS CAMPANHAS
   ===================================================================== */

html.infox-campaign-active{
    --ix-campaign-line:#0f5de2;
    --ix-campaign-glow:rgba(15,93,226,.13);
    --ix-campaign-glow-2:rgba(255,255,255,0);
}

html.infox-campaign-active body{
    background-image:
        radial-gradient(circle at 8% 3%,var(--ix-campaign-glow),transparent 27rem),
        radial-gradient(circle at 94% 7%,var(--ix-campaign-glow-2),transparent 24rem);
    background-attachment:fixed;
}

/* Barra superior discreta da campanha */
#infoxCampaignEffectLayer{
    position:fixed;
    inset:0;
    z-index:2147482000;
    pointer-events:none;
    overflow:hidden;
}

#infoxCampaignEffectLayer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--ix-campaign-line);
    box-shadow:0 2px 9px var(--ix-campaign-glow);
}

.infox-campaign-corner{
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    filter:blur(24px);
    opacity:.28;
}

.infox-campaign-corner.left{
    top:-92px;
    left:-66px;
    background:var(--ix-campaign-line);
}

.infox-campaign-corner.right{
    top:-84px;
    right:-66px;
    background:var(--ix-campaign-line);
}

/* ---------------------------------------------------------------------
   OUTUBRO ROSA
   --------------------------------------------------------------------- */
html.infox-campaign-outubro-rosa{
    --ix-campaign-line:linear-gradient(90deg,#b8155c,#ef80ad,#b8155c);
    --ix-campaign-glow:rgba(214,31,105,.10);
    --ix-campaign-glow-2:rgba(239,128,173,.08);
}

html.infox-campaign-outubro-rosa .primary,
html.infox-campaign-outubro-rosa a.primary{
    box-shadow:0 5px 16px rgba(214,31,105,.13);
}

/* ---------------------------------------------------------------------
   NOVEMBRO AZUL
   --------------------------------------------------------------------- */
html.infox-campaign-novembro-azul{
    --ix-campaign-line:linear-gradient(90deg,#075199,#58a7e3,#075199);
    --ix-campaign-glow:rgba(18,103,178,.10);
    --ix-campaign-glow-2:rgba(88,167,227,.08);
}

html.infox-campaign-novembro-azul .primary,
html.infox-campaign-novembro-azul a.primary{
    box-shadow:0 5px 16px rgba(18,103,178,.13);
}

/* ---------------------------------------------------------------------
   SETEMBRO AMARELO
   --------------------------------------------------------------------- */
html.infox-campaign-setembro-amarelo{
    --ix-campaign-line:linear-gradient(90deg,#e7bd00,#ffe15b,#e7bd00);
    --ix-campaign-glow:rgba(255,212,0,.10);
    --ix-campaign-glow-2:rgba(255,232,121,.08);
}

html.infox-campaign-setembro-amarelo .primary,
html.infox-campaign-setembro-amarelo a.primary{
    box-shadow:0 5px 16px rgba(216,177,0,.14);
}

/* ---------------------------------------------------------------------
   NATAL
   --------------------------------------------------------------------- */
html.infox-campaign-natal{
    --ix-campaign-line:linear-gradient(90deg,#b70f16 0%,#d71920 29%,#d7b04d 50%,#d71920 71%,#b70f16 100%);
    --ix-campaign-glow:rgba(215,25,32,.10);
    --ix-campaign-glow-2:rgba(215,176,77,.10);
}

html.infox-campaign-natal body{
    background-image:
        radial-gradient(circle at 7% 3%,rgba(215,25,32,.11),transparent 27rem),
        radial-gradient(circle at 94% 6%,rgba(215,176,77,.11),transparent 25rem);
}

html.infox-campaign-natal #infoxCampaignEffectLayer::before{
    background-size:220% 100%;
    animation:infoxChristmasLine 9s linear infinite;
}

html.infox-campaign-natal .hero,
html.infox-campaign-natal .productPage,
html.infox-campaign-natal .serviceBanner{
    box-shadow:
        0 0 0 1px rgba(176,24,30,.04),
        0 14px 34px rgba(128,28,31,.055);
}

html.infox-campaign-natal .primary,
html.infox-campaign-natal a.primary,
html.infox-campaign-natal button.primary{
    box-shadow:0 5px 16px rgba(183,15,22,.15);
}

/* ---------------------------------------------------------------------
   BLACK FRIDAY
   --------------------------------------------------------------------- */
html.infox-campaign-black-friday{
    --ix-campaign-line:linear-gradient(90deg,#0f1012,#c99932,#0f1012);
    --ix-campaign-glow:rgba(23,25,29,.09);
    --ix-campaign-glow-2:rgba(201,153,50,.09);
}

html.infox-campaign-black-friday .price,
html.infox-campaign-black-friday [class*="price"]{
    text-shadow:0 1px 0 rgba(255,255,255,.15);
}

html.infox-campaign-black-friday .primary,
html.infox-campaign-black-friday a.primary{
    box-shadow:0 5px 16px rgba(23,25,29,.16);
}

/* ---------------------------------------------------------------------
   PRÉVIA DO PAINEL
   O tema escolhido pode mostrar seus detalhes sem ativar som.
   --------------------------------------------------------------------- */
html.infox-campaign-preview.infox-preview-outubro-rosa{
    --ix-campaign-line:linear-gradient(90deg,#b8155c,#ef80ad,#b8155c);
    --ix-campaign-glow:rgba(214,31,105,.09);
}

html.infox-campaign-preview.infox-preview-novembro-azul{
    --ix-campaign-line:linear-gradient(90deg,#075199,#58a7e3,#075199);
    --ix-campaign-glow:rgba(18,103,178,.09);
}

html.infox-campaign-preview.infox-preview-setembro-amarelo{
    --ix-campaign-line:linear-gradient(90deg,#e7bd00,#ffe15b,#e7bd00);
    --ix-campaign-glow:rgba(255,212,0,.09);
}

html.infox-campaign-preview.infox-preview-natal{
    --ix-campaign-line:linear-gradient(90deg,#b70f16,#d71920,#d7b04d,#d71920,#b70f16);
    --ix-campaign-glow:rgba(215,25,32,.09);
}

html.infox-campaign-preview.infox-preview-black-friday{
    --ix-campaign-line:linear-gradient(90deg,#0f1012,#c99932,#0f1012);
    --ix-campaign-glow:rgba(23,25,29,.08);
}

html.infox-campaign-preview #infoxCampaignEffectLayer::before{
    background:var(--ix-campaign-line);
}

/* ---------------------------------------------------------------------
   CONTROLE DO JINGLE DE NATAL
   --------------------------------------------------------------------- */
.infox-campaign-audio-toggle{
    position:fixed;
    right:82px;
    bottom:19px;
    z-index:2147482500;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:7px 11px;
    border:1px solid rgba(179,15,22,.28);
    border-radius:999px;
    background:rgba(255,255,255,.96);
    color:#8d181d;
    font:700 11px/1.1 Arial,sans-serif;
    box-shadow:0 7px 22px rgba(65,23,24,.14);
    backdrop-filter:blur(8px);
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.infox-campaign-audio-toggle:hover,
.infox-campaign-audio-toggle:focus-visible{
    transform:translateY(-1px);
    box-shadow:0 9px 25px rgba(65,23,24,.18);
    background:#fff;
}

.infox-campaign-audio-toggle .note{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#b70f16;
    color:#fff;
    font-size:13px;
}

.infox-campaign-audio-toggle.is-muted{
    color:#6f7780;
    border-color:#cbd2da;
}

.infox-campaign-audio-toggle.is-muted .note{
    background:#8b949f;
}

.infox-campaign-audio-toggle small{
    display:block;
    margin-top:1px;
    color:#8b6d70;
    font-size:8px;
    font-weight:600;
}

@keyframes infoxChristmasLine{
    from{background-position:0 0}
    to{background-position:220% 0}
}

@media(max-width:700px){
    .infox-campaign-corner{
        width:100px;
        height:100px;
    }

    .infox-campaign-audio-toggle{
        right:70px;
        bottom:14px;
        min-height:35px;
        padding:6px 9px;
    }

    .infox-campaign-audio-toggle .label{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    html.infox-campaign-natal #infoxCampaignEffectLayer::before{
        animation:none;
    }

    .infox-campaign-audio-toggle{
        transition:none;
    }
}