/* Call Button Plugin - prikazuje se samo na mobilnim uređajima */

#cbp-call-button {
    display: none; /* sakriveno na desktopu */
}

@media only screen and (max-width: 768px) {

    /* ── Glavno dugme ─────────────────────────────── */
    #cbp-call-button {
        display: flex;
        align-items: center;
        justify-content: center;

        position: fixed;
        bottom: 24px;
        left: 20px;
        z-index: 99999;

        width: 56px;
        height: 56px;
        border-radius: 50%;

        background-color: #1a73e8;
        box-shadow: 0 4px 16px rgba(26, 115, 232, 0.45);

        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;

        transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;

        /* pulsiranje */
        animation: cbp-pulse 2.2s ease-in-out infinite;
    }

    /* ── Pulse ringovi iza dugmeta ─────────────────── */
    #cbp-pulse-ring,
    #cbp-pulse-ring-2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: rgba(26, 115, 232, 0.35);
        transform: translate(-50%, -50%) scale(1);
        animation: cbp-ripple 2.2s ease-out infinite;
        pointer-events: none;
    }

    #cbp-pulse-ring-2 {
        background-color: rgba(26, 115, 232, 0.2);
        animation-delay: 0.55s;
    }

    /* ── Animacije ──────────────────────────────────── */
    @keyframes cbp-pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 4px 16px rgba(26, 115, 232, 0.45);
        }
        50% {
            transform: scale(1.07);
            box-shadow: 0 6px 22px rgba(26, 115, 232, 0.6);
        }
    }

    @keyframes cbp-ripple {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.7;
        }
        100% {
            transform: translate(-50%, -50%) scale(2.1);
            opacity: 0;
        }
    }

    /* ── State: kliknuto → zeleno ───────────────────── */
    #cbp-call-button.cbp-clicked {
        background-color: #1db954;
        box-shadow: 0 4px 16px rgba(29, 185, 84, 0.5);
        animation: none;
        transform: scale(1.1);
    }

    #cbp-call-button.cbp-clicked #cbp-pulse-ring,
    #cbp-call-button.cbp-clicked #cbp-pulse-ring-2 {
        animation: none;
        opacity: 0;
    }

    /* ── Ikona ──────────────────────────────────────── */
    #cbp-icon-phone,
    #cbp-icon-check {
        position: relative;
        z-index: 1;
        pointer-events: none;
        flex-shrink: 0;
    }

    /* ── Focus ring za accessibility ─────────────────── */
    #cbp-call-button:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 3px;
    }
}