/* ================================
   JOE Call Button — Frontend CSS
   ================================ */

/* Floating Wrapper */
.jcb-floating {
    position: fixed;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
}
.jcb-floating.jcb-right { right: 20px; flex-direction: row-reverse; }
.jcb-floating.jcb-left  { left:  20px; flex-direction: row; }

/* Button Base */
.jcb-btn {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.jcb-btn:hover { transform: scale(1.1) !important; }
.jcb-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

/* Label base styles */
.jcb-label {
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    display: none;
}

/* Show on desktop (769px+) */
@media (min-width: 769px) {
    .jcb-label.jcb-show-desktop {
        display: inline-block;
    }
}

/* Show on mobile (768px and below) */
@media (max-width: 768px) {
    .jcb-label.jcb-show-mobile {
        display: inline-block;
    }
}

/* ==============================
   ANIMATION EFFECTS
   ============================== */

/* 1. Pulse */
@keyframes jcb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.jcb-effect-pulse { animation: jcb-pulse 2s infinite; }

/* 2. Heartbeat */
@keyframes jcb-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.12); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.08); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}
.jcb-effect-heartbeat { animation: jcb-heartbeat 1.5s infinite; }

/* 3. Bounce */
@keyframes jcb-bounce {
    0%,100% { transform: translateY(0); }
    25%     { transform: translateY(-12px); }
    50%     { transform: translateY(0); }
    75%     { transform: translateY(-6px); }
}
.jcb-effect-bounce { animation: jcb-bounce 1.8s infinite; }

/* 4. Ring (single) */
@keyframes jcb-ring {
    0%  { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
    80% { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
    100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.jcb-effect-ring { animation: jcb-ring 2.5s infinite; }

/* 5. Double Ring */
@keyframes jcb-ring1 {
    0%  { box-shadow: 0 0 0 0 rgba(255,255,255,0.5), 0 0 0 0 rgba(255,255,255,0.3); }
    50% { box-shadow: 0 0 0 15px rgba(255,255,255,0.1), 0 0 0 25px rgba(255,255,255,0); }
    100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); }
}
.jcb-effect-double-ring { animation: jcb-ring1 2s infinite; }

/* 6. Shake */
@keyframes jcb-shake {
    0%,100% { transform: rotate(0deg); }
    10%,50%,90% { transform: rotate(-8deg); }
    30%,70% { transform: rotate(8deg); }
}
.jcb-effect-shake { animation: jcb-shake 1.2s infinite; }

/* 7. Rotate */
@keyframes jcb-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.jcb-effect-rotate { animation: jcb-rotate 4s linear infinite; }

/* 8. Slide-in */
@keyframes jcb-slide-in {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(-8px); }
}
.jcb-effect-slide-in { animation: jcb-slide-in 2s ease-in-out infinite; }

/* 9. None */
.jcb-effect-none { animation: none; }

/* Hover override for animated buttons */
.jcb-btn:hover { animation-play-state: paused; }

/* Responsive */
@media (max-width: 480px) {
    .jcb-floating.jcb-right { right: 12px; }
    .jcb-floating.jcb-left  { left:  12px; }
}