/* ShopBooster - Hotline Phone Ring (call button) */
.sb-hotline {
    --sb-hpr-color: #00A651;
    --sb-hpr-v: 20px;
    --sb-hpr-h: 20px;
    position: fixed;
    bottom: var(--sb-hpr-v);
    z-index: 999999;
    box-sizing: border-box;
}
.sb-hotline * { box-sizing: border-box; }
.sb-hotline-left  { left: var(--sb-hpr-h); }
.sb-hotline-right { right: var(--sb-hpr-h); }

.sb-hotline-ring {
    position: relative;
    z-index: 10;
    width: 110px;
    height: 110px;
    cursor: pointer;
    display: block;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.sb-hotline-circle {
    width: 87px; height: 87px; top: 10px; left: 10px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid var(--sb-hpr-color);
    opacity: .5;
    transform-origin: 50% 50%;
    animation: sb-hpr-circle 1.2s infinite ease-in-out;
}
.sb-hotline-circle-fill {
    width: 57px; height: 57px; top: 25px; left: 25px;
    position: absolute;
    background-color: color-mix(in srgb, var(--sb-hpr-color) 70%, transparent);
    border-radius: 100%;
    border: 2px solid transparent;
    transform-origin: 50% 50%;
    animation: sb-hpr-fill 2.3s infinite ease-in-out;
}
.sb-hotline-icon {
    width: 33px; height: 33px; top: 37px; left: 37px;
    position: absolute;
    background-color: var(--sb-hpr-color);
    border-radius: 100%;
    border: 2px solid transparent;
    display: flex; align-items: center; justify-content: center;
    transform-origin: 50% 50%;
    animation: sb-hpr-shake 1s infinite ease-in-out;
}
.sb-hotline-icon a {
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; text-decoration: none !important;
}
.sb-hotline-icon svg { width: 24px; height: 24px; display: block; color: #fff !important; fill: #fff !important; }
.sb-hotline-icon svg path { fill: #fff !important; }

.sb-hotline-bar {
    position: absolute;
    bottom: 35px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background: color-mix(in srgb, var(--sb-hpr-color) 78%, transparent);
    box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.1);
    white-space: nowrap;
    z-index: 9;
}
.sb-hotline-bar a {
    color: #fff !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
}
.sb-hotline-left  .sb-hotline-bar { left: 33px;  padding: 0 18px 0 62px; text-align: left; }
.sb-hotline-right .sb-hotline-bar { right: 33px; padding: 0 62px 0 18px; text-align: right; }

@keyframes sb-hpr-circle {
    0%   { transform: rotate(0) scale(.5) skew(1deg); opacity: .1; }
    30%  { transform: rotate(0) scale(.7) skew(1deg); opacity: .5; }
    100% { transform: rotate(0) scale(1)  skew(1deg); opacity: .1; }
}
@keyframes sb-hpr-fill {
    0%   { transform: rotate(0) scale(.7) skew(1deg); opacity: .6; }
    50%  { transform: rotate(0) scale(1)  skew(1deg); opacity: .6; }
    100% { transform: rotate(0) scale(.7) skew(1deg); opacity: .6; }
}
@keyframes sb-hpr-shake {
    0%   { transform: rotate(0) scale(1); }
    10%  { transform: rotate(-25deg) scale(1); }
    20%  { transform: rotate(25deg) scale(1); }
    30%  { transform: rotate(-25deg) scale(1); }
    40%  { transform: rotate(25deg) scale(1); }
    50%  { transform: rotate(0) scale(1); }
    100% { transform: rotate(0) scale(1); }
}

/* Hide the number bar on small screens (keep the ringing button) */
@media (max-width: 768px) {
    .sb-hotline-bar { display: none; }
}