/* =========================================================
   BESTSOL FLOATING WIDGETS
   Bubble default / Flag on hover
   ========================================================= */

html body .actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:14px !important;
}

/* =========================================================
   BASE
   ========================================================= */

html body .actions .action-item-c2c,
html body .actions .action-item-whatsapp{
    position:relative !important;
    display:block !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:999px !important;
    overflow:hidden !important;
    transition:
        width .25s ease,
        min-width .25s ease,
        max-width .25s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
    z-index:30 !important;
}

html body .actions .action-item-c2c:hover,
html body .actions .action-item-whatsapp:hover{
    width:172px !important;
    min-width:172px !important;
    max-width:172px !important;
}

/* =========================================================
   C2C
   ========================================================= */

html body .actions .action-item-c2c{
    background:transparent !important;
    box-shadow:none !important;
}

html body .actions #c2c_call_btn{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    overflow:hidden !important;
    cursor:pointer !important;
    background:linear-gradient(135deg,#3350E0 0%,#009DFF 100%) !important;
    color:#FFFFFF !important;
    box-shadow:0 12px 28px rgba(0,157,255,.24) !important;
}

html body .actions .action-item-c2c:hover #c2c_call_btn{
    box-shadow:0 14px 32px rgba(0,157,255,.30) !important;
}

html body .actions #c2c_call_btn svg,
html body .actions #c2c_svg_icon{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    transform:translate(-50%,-50%) !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    margin:0 !important;
    padding:0 !important;
    fill:#FFFFFF !important;
    color:#FFFFFF !important;
    transition:
        left .22s ease,
        right .22s ease,
        transform .22s ease !important;
}

html body .actions .action-item-c2c:hover #c2c_call_btn svg,
html body .actions .action-item-c2c:hover #c2c_svg_icon{
    left:auto !important;
    right:18px !important;
    transform:translateY(-50%) !important;
}

html body .actions #c2c_call_btn strong{
    margin:0 !important;
    padding:0 !important;
}

html body .actions #c2c_call_btn .llamame,
html body .actions #c2c_call_btn strong span{
    position:absolute !important;
    left:20px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:block !important;
    max-width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    transition:
        max-width .22s ease,
        opacity .18s ease !important;
}

html body .actions .action-item-c2c:hover #c2c_call_btn .llamame,
html body .actions .action-item-c2c:hover #c2c_call_btn strong span{
    max-width:95px !important;
    opacity:1 !important;
}

html body .actions #c2c_call_btn.c2c_call_btn_hangup{
    background:linear-gradient(135deg,#E5484D 0%,#C72F3B 100%) !important;
    box-shadow:0 12px 28px rgba(199,47,59,.24) !important;
}

html body .actions .action-item-c2c:hover #c2c_call_btn.c2c_call_btn_hangup{
    box-shadow:0 14px 32px rgba(199,47,59,.30) !important;
}

/* =========================================================
   WHATSAPP
   ========================================================= */

html body .actions .action-item-whatsapp{
    position:relative !important;
    display:block !important;
    text-decoration:none !important;
    background:linear-gradient(135deg,#25D366 0%,#1EBE5A 100%) !important;
    box-shadow:0 12px 28px rgba(37,211,102,.24) !important;
}

html body .actions .action-item-whatsapp:hover{
    text-decoration:none !important;
    box-shadow:0 14px 32px rgba(37,211,102,.30) !important;
}

html body .actions .action-item-whatsapp .wapp_content{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
}

/* Icono mejor centrado */
html body .actions .action-item-whatsapp .icon-whatsapp{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    transform:translate(-50%,-50%) !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    transition:
        left .22s ease,
        right .22s ease,
        transform .22s ease !important;
}

html body .actions .action-item-whatsapp .icon-whatsapp::before{
    display:block !important;
    font-size:22px !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateY(0) !important;
}

html body .actions .action-item-whatsapp:hover .icon-whatsapp{
    left:auto !important;
    right:18px !important;
    transform:translateY(-50%) !important;
}

html body .actions .action-item-whatsapp .wapp{
    position:absolute !important;
    left:20px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:block !important;
    max-width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    transition:
        max-width .22s ease,
        opacity .18s ease !important;
}

html body .actions .action-item-whatsapp:hover .wapp{
    max-width:100px !important;
    opacity:1 !important;
}

/* =========================================================
   ELEMENTOS INTERNOS C2C
   ========================================================= */

html body .actions #c2c_quality_info_div,
html body .actions #c2c_widget,
html body .actions #c2c_message,
html body .actions #c2c_local_video,
html body .actions #c2c_remote_video{
    z-index:31 !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991px){
    html body .actions{
        gap:12px !important;
    }

    html body .actions .action-item-c2c,
    html body .actions .action-item-whatsapp{
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
        height:58px !important;
        min-height:58px !important;
        max-height:58px !important;
    }

    html body .actions .action-item-c2c:hover,
    html body .actions .action-item-whatsapp:hover{
        width:160px !important;
        min-width:160px !important;
        max-width:160px !important;
    }
}

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

@media (max-width:576px){

    html body .actions{
        gap:10px !important;
    }

    html body .actions .action-item-c2c,
    html body .actions .action-item-whatsapp{
        width:54px !important;
        min-width:54px !important;
        max-width:54px !important;
        height:54px !important;
        min-height:54px !important;
        max-height:54px !important;
    }

    html body .actions .action-item-c2c:hover,
    html body .actions .action-item-whatsapp:hover{
        width:148px !important;
        min-width:148px !important;
        max-width:148px !important;
    }

    html body .actions #c2c_call_btn svg,
    html body .actions #c2c_svg_icon,
    html body .actions .action-item-whatsapp .icon-whatsapp{
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        min-height:20px !important;
    }

    html body .actions .action-item-whatsapp .icon-whatsapp::before{
        font-size:20px !important;
    }

    html body .actions .action-item-c2c:hover #c2c_call_btn svg,
    html body .actions .action-item-c2c:hover #c2c_svg_icon,
    html body .actions .action-item-whatsapp:hover .icon-whatsapp{
        right:16px !important;
    }

    html body .actions #c2c_call_btn .llamame,
    html body .actions #c2c_call_btn strong span,
    html body .actions .action-item-whatsapp .wapp{
        left:16px !important;
        font-size:13px !important;
    }
}