/* ==========================================================
   SAJMI CONTACT WIDGET
========================================================== */

.sajmi-contact-float {

    position: fixed;

    right: 20px;
    bottom: 22px;

    width: 55px;

    z-index: 999999;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

}


/* ===============================
   ALL SMALL BUTTONS
================================ */

.sajmi-contact-item {

    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;

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

    text-decoration: none !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.20);

    opacity: 0;

    pointer-events: none;

    transform: translateY(15px) scale(.7);

    transition:
        opacity .25s ease,
        transform .25s ease;

}


/* ===============================
   BUTTON COLORS
================================ */

.sajmi-wa {
    background: #25D366;
}

.sajmi-messenger {
    background: #0084FF;
}

.sajmi-call {
    background: #F57C00;
}


/* ===============================
   ICON
================================ */

.sajmi-contact-item svg {

    width: 25px;
    height: 25px;

    fill: #fff;

    display: block;

}


/* ===============================
   OPEN STATE
================================ */

.sajmi-contact-float.open .sajmi-contact-item {

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0) scale(1);

}


/* ===============================
   ORDER / ANIMATION
================================ */

.sajmi-contact-float.open .sajmi-call {
    transition-delay: .03s;
}

.sajmi-contact-float.open .sajmi-messenger {
    transition-delay: .08s;
}

.sajmi-contact-float.open .sajmi-wa {
    transition-delay: .13s;
}


/* ===============================
   MAIN CHAT BUTTON
================================ */

.sajmi-contact-main {

    width: 55px;
    height: 55px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #1877F2;

    display: flex;

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

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0,0,0,.25);

    position: relative;

    z-index: 5;

}


/* ===============================
   CHAT BUBBLE
================================ */

.sajmi-chat-icon {

    position: relative;

    width: 29px;
    height: 24px;

    background: #fff;

    border-radius: 8px;

    display: flex;

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

}


/* Bubble tail */

.sajmi-chat-icon::after {

    content: "";

    position: absolute;

    left: 4px;
    bottom: -5px;

    width: 9px;
    height: 9px;

    background: #fff;

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    );

}


/* ===============================
   THREE DOTS
================================ */

.sajmi-chat-dots {

    display: flex;

    align-items: center;

    gap: 3px;

    position: relative;

    z-index: 2;

}


.sajmi-chat-dots i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #1877F2;

    display: block;

}


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

.sajmi-contact-item:hover {

    transform:
        translateY(-2px) scale(1.05) !important;

}


.sajmi-contact-main:hover {

    transform: translateY(-2px);

}


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

@media (max-width: 700px) {

    .sajmi-contact-float {

        right: 15px;

        bottom: 18px;

        gap: 8px;

    }

    .sajmi-contact-item {

        width: 46px;
        height: 46px;

    }

    .sajmi-contact-item svg {

        width: 23px;
        height: 23px;

    }

    .sajmi-contact-main {

        width: 50px;
        height: 50px;

    }

}


/* ===============================
   ACCESSIBILITY
================================ */

.sajmi-contact-main:focus-visible,
.sajmi-contact-item:focus-visible {

    outline: 3px solid rgba(24,119,242,.35);

    outline-offset: 3px;

}


/* GLOBAL_CONTROL_OVERRIDES */
.sajmi-mobile-bottom-nav{display:none!important}
.sajmi-contact-float{z-index:1000!important}
body.sajmi-global-obscured .sajmi-mobile-bottom-nav,
body.sajmi-global-obscured .sajmi-contact-float{visibility:hidden!important;pointer-events:none!important;opacity:0!important}
body.sajmi-quick-order-open #sajmi-floating-cart,
#sajmi-cart-root.open #sajmi-floating-cart{visibility:hidden!important;pointer-events:none!important}
@media(max-width:767px){
 body.sajmi-global-nav-ready{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important}
 .sajmi-mobile-bottom-nav{position:fixed!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));bottom:0!important;left:0!important;right:0!important;width:100%!important;height:calc(64px + env(safe-area-inset-bottom,0px));padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px));box-sizing:border-box;z-index:1000!important;background:#fff!important;border-top:1px solid #e1e8e2;box-shadow:0 -3px 16px #153b2410;gap:0;margin:0}
 .sajmi-mobile-bottom-nav .sajmi-bottom-item{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;border:0!important;border-radius:8px;background:transparent!important;color:#2e5a44!important;font:600 11px/1.2 Arial,sans-serif!important;text-decoration:none!important;padding:5px!important;box-shadow:none!important;cursor:pointer}
 .sajmi-mobile-bottom-nav .sajmi-bottom-item svg{display:block;width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
 .sajmi-mobile-bottom-nav .sajmi-bottom-item[aria-current="page"]{background:#eff5f0!important}
 .sajmi-mobile-bottom-nav .sajmi-bottom-item:focus-visible{outline:2px solid #2e5a44;outline-offset:-2px}
 .sajmi-contact-float{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;right:14px!important;width:50px!important}
}
@media(prefers-reduced-motion:reduce){.sajmi-contact-float *{animation:none!important;transition:none!important}}