/* ============================================================
 * WIDGET AJUDA / SUPORTE
 * ============================================================ */

#floating-box {

    position: fixed !important;

    /*
     * O círculo azul possui 52px e fica acima do badge.
     * A posição 97px deixa o botão de suporte acima dele,
     * com aproximadamente 10px de distância.
     */
    right: 10px !important;
    bottom: 97px !important;

    width: 52px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    top: auto !important;
    left: auto !important;

    float: none !important;

    z-index: 2147483646 !important;

    pointer-events: none !important;
}


/* ============================================================
 * CONTAINER
 * ============================================================ */

#widgets {

    position: static !important;

    width: 52px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    float: none !important;

    border: none !important;

    text-align: center !important;

    pointer-events: none !important;
}


/* ============================================================
 * BOTÃO
 * ============================================================ */

#widgets .widget-item {

    position: relative !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: rgba(220, 53, 69, 0.60) !important;

    border: none !important;

    border-radius: 50% !important;

    box-shadow:
        0 3px 9px rgba(0,0,0,0.22) !important;

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease !important;

    pointer-events: auto !important;
}


/* ============================================================
 * LINK
 * ============================================================ */

#widgets .widget-item a {

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    text-align: center !important;

    text-decoration: none !important;

    border-radius: 50% !important;
}


/* ============================================================
 * ÍCONE
 * ============================================================ */

.icon-widget {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;

    line-height: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,0.18) !important;

    transition:
        transform 0.15s ease !important;
}


/* ============================================================
 * HOVER
 * ============================================================ */

#widgets .widget-item:hover {

    margin: 0 !important;

    background: #c82333 !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(0,0,0,0.26) !important;
}


#widgets .widget-item:hover .icon-widget {

    transform:
        scale(1.05) !important;
}


#widgets .widget-item a:hover {

    color: #ffffff !important;

    text-decoration: none !important;
}


/* ============================================================
 * FOCUS
 * ============================================================ */

#widgets .widget-item a:focus,
#widgets .widget-item a:focus-visible {

    outline:
        2px solid #ffffff !important;

    outline-offset:
        2px !important;
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 600px) {

    #floating-box {

        right: 8px !important;

        /*
         * Mesma lógica do desktop:
         * botão azul + distância entre os dois.
         */
        bottom: 95px !important;

        width: 52px !important;
        height: 52px !important;
    }


    #widgets {

        width: 52px !important;
        height: 52px !important;
    }


    #widgets .widget-item {

        width: 52px !important;
        min-width: 52px !important;

        height: 52px !important;
        min-height: 52px !important;
    }


    .icon-widget {

        font-size: 19px !important;
    }

}