/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-------------------------------------@DEFAULT-----------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.wb_button-whatsapp {
    width:48px;
    height:48px;

    display:flex;
    justify-content: center;
    align-items: center;

    position:fixed;
    right:var(--gap-s);
    bottom:var(--gap-s);
    z-index:9999;

    background-color: var(--color-blue-prussian);

    border-radius:100%;

    transition: all calc(1/3*1s) ease-in-out;
}
.wb_button-whatsapp:hover {
    background-color:var(--color-blue-powder);
}

/*--------------------------------------------------------------------------------*/
/*------------------------------------@SUPPORT NOTICE-----------------------------*/
/*--------------------------------------------------------------------------------*/

.wb_button-whatsapp:has( .support-notice ) {
    width:fit-content;
    height:auto;

    display:flex;
    flex-direction: row;
    align-items: center;

    padding:12px 20px 12px 20px;

    border-radius: 50px;
}
.wb_button-whatsapp:has( .support-notice ):hover {
    background-color:hsl( 208 41 28 );
}


.wb_button-whatsapp .support-notice {
    display:flex;
    flex-direction: column;

    padding-left:12px;
}

.wb_button-whatsapp .support-notice .status-ping {
    display:flex;
    flex-direction: row;
    align-items: center;

    font-family:var(--text-family-body);
    font-size:var(--text-body-xs-size);
    line-height:1.5em;
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:#2FBF71;
    text-decoration: none;
}

.wb_button-whatsapp .support-notice .status-ping::before {
    width:6px;
    height:6px;

    flex-shrink: 0;

    margin-right:4px;

    border-radius:100%;

    content: '';

    background-color:#2FBF71;
}

.wb_button-whatsapp .support-notice .message {
    font-family:var(--text-family-body);
    font-size:var(--text-body-xs-size);
    line-height:1em;
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:var(--color-white);
    text-decoration: none;
}

.wb_button-whatsapp:has( .support-notice ) svg {
    flex-shrink: 0;
}


@media ( min-width: 1025px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------#DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( min-width:768px ) and ( max-width:1024px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( max-width:767px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}