/*==================================================
ALI SUPPORT WIDGET
CSS PART 1
==================================================*/

/*-----------------------------
Widget
------------------------------*/

#support-widget{

    position:fixed;

    left:16px;

    bottom:20px;

    z-index:999999;

    display:flex;

    flex-direction:column;

    align-items:center;

    direction:rtl;

    font-family:tahoma,sans-serif;

    user-select:none;

}

/*-----------------------------
Support Status
------------------------------*/

.support-text{

    display:flex;

    align-items:center;

    gap:6px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    padding:6px 11px;

    border-radius:30px;

    margin-bottom:3px;

    color:#6b21a8;

    font-size:10px;

    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

}

/*-----------------------------
Online Dot
------------------------------*/

.online-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 10px rgba(34,197,94,.8);

    animation:onlineBlink 1.6s infinite;

}

@keyframes onlineBlink{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.45;

        transform:scale(.8);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/*-----------------------------
Tooltip
------------------------------*/

.support-tooltip{

    position:relative;

    background:#ffffff;

    padding:10px 14px;

    border-radius:16px;

    text-align:center;

    line-height:1.9;

    color:#333;

    font-size:12px;

    max-width:220px;

    margin-bottom:2px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.13);

    animation:tooltipFloat 3.2s ease-in-out infinite;

}

.support-tooltip::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:16px;

    height:16px;

    background:#ffffff;

    transform:translateX(-50%) rotate(45deg);

}

.support-tooltip-content{

    line-height:1.9;

}

@keyframes tooltipFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
ALI SUPPORT WIDGET
CSS PART 2
==================================================*/

/*-----------------------------
Main Button
------------------------------*/

#support-btn{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#ff8a00,#ff6a00);

    box-shadow:
        0 12px 30px rgba(255,106,0,.35);

    transition:.25s;

    animation:pulse 2.8s infinite;

}

/*-----------------------------
Hover
------------------------------*/

#support-btn:hover{

    transform:scale(1.08);

    box-shadow:
        0 16px 36px rgba(255,106,0,.45);

}

/*-----------------------------
Headset Icon
------------------------------*/

.support-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    font-size:30px;

    line-height:1;

    user-select:none;

    pointer-events:none;

}

/*-----------------------------
Pulse Animation
------------------------------*/

@keyframes pulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(255,106,0,.40);

    }

    70%{

        box-shadow:
            0 0 0 16px rgba(255,106,0,0);

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(255,106,0,0);

    }

}

/*-----------------------------
Menu
------------------------------*/

.support-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:10px;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.28s ease;

    pointer-events:none;

}

.support-menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}

/*-----------------------------
Items
------------------------------*/

.support-item{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:120px;

    padding:10px 14px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border-radius:40px;

    text-decoration:none;

    color:#333;

    font-size:13px;

    font-weight:700;

    box-shadow:
        0 10px 24px rgba(0,0,0,.15);

    transition:.25s;

}

.support-item:hover{

    transform:translateX(-4px);

    box-shadow:
        0 14px 32px rgba(0,0,0,.18);

}

/*-----------------------------
SVG Icons
------------------------------*/

.support-item svg{

    width:20px;

    height:20px;

    display:block;

}

/*-----------------------------
WhatsApp
------------------------------*/

.whatsapp{

    color:#25D366;

}

/*-----------------------------
Rubika
------------------------------*/

.rubika{

    color:#1992d4;

}
/*==================================================
ALI SUPPORT WIDGET
CSS PART 3
==================================================*/

/*-----------------------------
Mobile
------------------------------*/

@media (max-width:768px){

    #support-widget{

        left:0px;

        right:auto;

        bottom:100px;

    }

    .support-text{

        font-size:9px;

        padding:5px 10px;

        margin-bottom:2px;

    }

    .support-tooltip{

        max-width:185px;

        font-size:11px;

        padding:9px 11px;

        margin-bottom:2px;

        line-height:1.8;

    }

    .support-tooltip::after{

        width:14px;

        height:14px;

        bottom:-7px;

    }

    #support-btn{

        width:50px;

        height:50px;

    }

    .support-icon{

        font-size:28px;

    }

    .support-item{

        min-width:110px;

        font-size:12px;

        padding:8px 11px;

    }

}


/*-----------------------------
Desktop
------------------------------*/

@media (min-width:769px){

    #support-widget{

        left:2px;

        bottom:20px;

    }

}


/*-----------------------------
Performance
------------------------------*/

#support-widget,
#support-btn,
.support-menu,
.support-item,
.support-tooltip{

    will-change:transform,opacity;

}


/*-----------------------------
Smooth Rendering
------------------------------*/

#support-widget *{

    box-sizing:border-box;

}


/*-----------------------------
Selection
------------------------------*/

#support-widget *::selection{

    background:transparent;

}


/*-----------------------------
Accessibility
------------------------------*/

#support-btn:focus{

    outline:none;

}

.support-item:focus{

    outline:none;

}


/*-----------------------------
Reduce Motion
------------------------------*/

@media (prefers-reduced-motion:reduce){

    #support-widget *{

        animation:none !important;

        transition:none !important;

    }

}
/*==================================================
FIX WIDGET POSITION
==================================================*/

#support-widget{

    position:fixed !important;

    left:2px !important;

    right:auto !important;

    margin:0 !important;

    width:max-content !important;

    max-width:none !important;

    transform:none !important;

}


/*-----------------------------
Mobile
------------------------------*/

@media (max-width:768px){

    #support-widget{

        position:fixed !important;

        left:0px !important;

        right:auto !important;

        bottom:100px !important;

        margin:0 !important;

        width:max-content !important;

        max-width:none !important;

        transform:none !important;

    }

}


/*-----------------------------
Desktop
------------------------------*/

@media (min-width:769px){

    #support-widget{

        position:fixed !important;

        left:2px !important;

        right:auto !important;

        bottom:20px !important;

        margin:0 !important;

        width:max-content !important;

        max-width:none !important;

        transform:none !important;

    }

}

/*==================================================
END CSS
==================================================*/