/*
 * r_campaignmanager — banner promovido (highlight active).
 *
 * Cópia literal do CSS do blockcampaigns (components/styles.tpl +
 * displayBanner.mobile.tpl inline + displayBanner.tpl wrapper inline).
 * Mesmas classes para herdar o visual já validado:
 *
 *   .blockcampaigns                  banner desktop (azul + wipe vermelho)
 *   .container-campaigns             layout flex interno
 *   .campaign-text                   título + subtítulo
 *   .countdown / .countdown-campaign cor amarela do timer
 *   .countdown-value-desktop         monospace tabular, min-width fixo
 *   .buy-button-campaign             CTA amarelo com pulse
 *   .blockcampaigncontainer-*        visibilidade desktop/mobile
 *   .blockcampaigns-mobile           faixa mobile vermelha (3 colunas)
 *   .mobile-img / .mobile-text-* / .mobile--head / .mobile--p
 *   .buy-button-campaign-mobile / .icon-mobile / .countdown-value
 *
 * Convivência com blockcampaigns antigo: durante a transição ambos os módulos
 * podem renderizar. As regras CSS são idênticas, portanto não há conflito
 * visual; o que pode acontecer é vermos 2 banners empilhados (highlight +
 * promote ao mesmo tempo) — situação aceite na fase de teste.
 */

/* ===== Wrapper: visibilidade desktop / mobile ===== */
.blockcampaigncontainer-mobile {
    display: none;
}

@media screen and (max-width: 678px) {
    .blockcampaigncontainer-mobile {
        display: block;
    }

    .blockcampaigncontainer-desktop {
        display: none;
    }
}

/*
 * NOTA: a regra `.topbanner { display: none }` NÃO vive aqui — viria a esconder
 * o topbar do tema em todas as páginas (mesmo sem highlight active), porque
 * este CSS é carregado por hookHeader em qualquer request. A regra está
 * inline no banner.tpl, dentro do `{if $rcm_banner}`, para que só esconda o
 * topbar quando o nosso banner efectivamente renderiza.
 */

/* ===== Banner com wipe da esquerda p/ direita (só 1x) ===== */
.blockcampaigns {
    position: relative;
    background-color: #0075cf;
    /* azul base */
    width: 100%;
    overflow: hidden;
}

/* overlay vermelho que cobre da esquerda para a direita */
.blockcampaigns::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ca1616;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    z-index: 0;
}

/* conteúdo acima do overlay */
.blockcampaigns > .container {
    position: relative;
    z-index: 1;
}

/* arranque do wipe (apenas quando ganha esta classe) */
.blockcampaigns.is-mounted::before {
    animation: bannerWipe 1.2s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes bannerWipe {
    to {
        transform: scaleX(1);
    }
}

/* fade+lift do conteúdo (ligeiro atraso para casar com o wipe) */
.container-campaigns {
    opacity: 0;
    transform: translateY(-6px);
}

.blockcampaigns.is-mounted .container-campaigns {
    animation: contentIn .5s ease-out .35s forwards;
}

@keyframes contentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {

    .blockcampaigns.is-mounted::before,
    .blockcampaigns.is-mounted .container-campaigns {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ===== Layout interno ===== */
.container-campaigns {
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.campaign-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.countdown-campaign {
    color: #fffb00;
    font-weight: bold;
    margin: 0;
    font-size: 18px;
}

/* ===== CTA em loop (suave e contínuo) ===== */
.buy-button-campaign {
    background-color: #fffb00;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 14px;
    gap: 4px;
    font-weight: bold;
    /* animação em loop infinita com pequeno atraso (começa após o wipe) */
    animation: ctaPulse 1.8s ease-in-out 1.4s infinite;
    will-change: transform, box-shadow;
}

.buy-button-campaign:hover {
    /* mantém o loop; se preferires pausar no hover, usa animation-play-state:paused */
    transform: scale(1.05);
    box-shadow: rgba(0, 0, 0, .35) 0 1px 6px;
}

@keyframes ctaPulse {
    0% {
        transform: scale(1);
        box-shadow: rgba(0, 0, 0, 0.00) 0 0 0;
    }

    35% {
        transform: scale(1.04);
        box-shadow: rgba(0, 0, 0, 0.22) 0 4px 12px;
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(0, 0, 0, 0.00) 0 0 0;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(0, 0, 0, 0.00) 0 0 0;
    }
}

.shopping-icon-campaign {
    font-size: 16px;
}

/* ===== Countdown estável (sem "tremuras") ===== */
.countdown-value-desktop {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 13ch;
    /* espaço reservado p/ "DDd HH:MM:SS" */
    text-align: left;
    font-size: 18px;
}

.countdown-value-desktop.tick {
    animation: tickPop .18s ease-out;
}

@keyframes tickPop {
    0% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

/* Respeitar reduced motion também no CTA e no tick */
@media (prefers-reduced-motion: reduce) {

    .buy-button-campaign,
    .countdown-value-desktop.tick {
        animation: none !important;
    }
}

@media only screen and (min-width: 1024px) {
    body {
        padding-top: 7.9rem !important;
    }
}

/* ===== Mobile (originalmente inline no displayBanner.mobile.tpl) ===== */
.blockcampaigns-mobile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* img | texto | CTA */
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: #ca1616;
    overflow: hidden;
    /* garante que nada "sai" da faixa */
}

.mobile-img {
    display: block;
    border-radius: 4px;
}

.mobile-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    /* permite truncar corretamente */
}

.mobile--head {
    font-size: 14px;
    color: #fff;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile--p {
    font-size: 10px;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buy-button-campaign-mobile {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #FEDA00;
    color: #000;
    padding: 2px 2px;
    padding-top: 3px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
    will-change: transform, box-shadow;
}

.icon-mobile {
    font-size: 12px;
    margin-left: 2px;
    line-height: 1;
}

/* Countdown estável em mobile */
.countdown-value {
    min-width: 7ch;
    text-align: right;
    display: inline-block;
    font-size: 14px;
}