/**
 * BR Distribuidora - B2B Components
 * CTA cadastro, proteção de preços, WhatsApp float
 */

/* ── CTA B2B (cadastro) ── */
.brd-cta-b2b {
    background: linear-gradient(135deg, var(--brd-azul-escuro), var(--brd-azul-claro));
    padding: var(--brd-spacing-2xl);
    border-radius: var(--brd-border-radius-lg);
    text-align: center;
    margin: var(--brd-spacing-2xl) 0;
}
.brd-cta-b2b h2 { color: var(--brd-off-white); margin-bottom: var(--brd-spacing-md); }
.brd-cta-b2b p  { color: var(--brd-off-white); opacity: 0.9; margin-bottom: var(--brd-spacing-lg); }

/* ── CTA Login (proteção de preços) ── */
.brd-cta-login {
    background-color: var(--brd-azul-escuro);
    border-radius: var(--brd-border-radius-lg);
    padding: var(--brd-spacing-lg);
    text-align: center;
    margin-top: var(--brd-spacing-md);
}
.brd-cta-login .brd-cta-message {
    color: var(--brd-off-white);
    margin-bottom: var(--brd-spacing-md);
    font-size: var(--brd-font-size-base);
}
.brd-cta-login .button { display: inline-block; }

/* ── Preço oculto ── */
.brd-price-hidden {
    background-color: var(--brd-azul-escuro);
    color: var(--brd-off-white);
    padding: var(--brd-spacing-xs) var(--brd-spacing-sm);
    border-radius: var(--brd-border-radius);
    font-size: var(--brd-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

/* ── WhatsApp Float ── */
@keyframes brd-wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.brd-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    padding: 0 12px;
    background-color: #25D366;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    text-decoration: none;
    animation: brd-wa-pulse 2.5s ease-out infinite;
    transition: width 0.3s ease, box-shadow 0.3s ease;
}

.brd-whatsapp-float:hover,
.brd-whatsapp-float.brd-wa-expanded {
    width: 170px;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: none;
}

.brd-wafloat-icon {
    display: block;
    width: 30px;
    height: 30px;
    fill: #fff !important;
    flex-shrink: 0;
}

.brd-wa-label {
    color: #064E3B;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s, margin-left 0.3s ease;
}

.brd-whatsapp-float:hover .brd-wa-label,
.brd-whatsapp-float.brd-wa-expanded .brd-wa-label {
    max-width: 130px;
    opacity: 1;
    margin-left: 8px;
}

/* ── Instagram Float ── */
.brd-instagram-float {
    position: fixed;
    bottom: 88px;
    right: 24px;
    width: 52px;
    height: 52px;
    padding: 0 12px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    text-decoration: none;
    transition: width 0.3s ease, box-shadow 0.3s ease;
}

.brd-instagram-float:hover {
    width: 260px;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.brd-ig-label {
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s, margin-left 0.3s ease;
}

.brd-instagram-float:hover .brd-ig-label {
    max-width: 210px;
    opacity: 1;
    margin-left: 8px;
}

/* ── Scroll to Top (override Astra) ── */

/* Oculta em páginas fora do escopo (atacadista, categorias, rodapé) */
body.brd-hide-scroll-top #ast-scroll-top { display: none !important; }

#ast-scroll-top {
    bottom: 216px !important;
    right: 24px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(24, 51, 87, 0.5) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    transition: width 0.3s ease, border-radius 0.3s ease, box-shadow 0.2s ease !important;
}

#ast-scroll-top:hover {
    width: 190px !important;
    border-radius: 999px !important;
    background: var(--brd-azul-claro) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

#ast-scroll-top::after {
    content: 'Voltar ao topo';
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s, margin-left 0.3s ease;
}

#ast-scroll-top:hover::after {
    max-width: 130px;
    opacity: 1;
    margin-left: 8px;
}

#ast-scroll-top .ast-icon.icon-arrow svg,
#ast-scroll-top .ast-scroll-top-icon::before {
    fill: #fff !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 921px) {
    /* WA e Instagram migrados/ocultos no mobile */
    .brd-whatsapp-float  { display: none !important; }
    .brd-instagram-float { display: none !important; }

    /* Scroll-top: retângulo grudado à direita, alinhado ao topo do nav */
    #ast-scroll-top {
        right: 0 !important;
        bottom: 64px !important;
        width: 30px !important;
        height: 56px !important;
        border-radius: 9999px 0 0 9999px !important;
        background: rgba(32, 107, 179, 0.75) !important;
        box-shadow: -3px 0 12px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        padding: 0 !important;
        transform: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Sem hover/focus em touch — Astra injeta a:focus { border-color, outline } */
    #ast-scroll-top:hover,
    #ast-scroll-top:focus,
    #ast-scroll-top:focus-visible {
        width: 30px !important;
        background: rgba(32, 107, 179, 0.75) !important;
        transform: none !important;
        box-shadow: -3px 0 12px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        outline: none !important;
        border: none !important;
        border-color: transparent !important;
    }

    #ast-scroll-top::after { display: none !important; }

    /* Esconde ícone nativo do Astra */
    #ast-scroll-top .ast-icon { display: none !important; }

    /* Seta ponta + haste via SVG inline */
    #ast-scroll-top::before {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M5 11l7-7 7 7'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
    }
}