/* ============================================================
   STICKY-CALL.CSS
   Mobile sticky "Call Now" bar - 24/7 emergency electrician
   ============================================================ */

.sticky-call-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background-color: var(--color-dark, #050505);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.is-cms .sticky-call-bar {
    display: none !important;
}

.sticky-call-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    padding: 0.9em 1em;
    border-radius: 0.4rem;
    background-color: var(--color-accent-dark, #3b6013);
    background-image: var(--gradient-green, linear-gradient(45deg, #31ab4d 0%, #8bc03b 100%));
    color: #fff;
    font-family: var(--font-body, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
}

.sticky-call-bar__link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: sticky-call-ring 2.2s ease-in-out infinite;
}

@keyframes sticky-call-ring {
    0%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(-15deg); }
    10% { transform: rotate(12deg); }
    15% { transform: rotate(-8deg); }
    20% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-call-bar__link svg {
        animation: none;
    }
}

@media (max-width: 768px) {
    .sticky-call-bar {
        display: block;
    }

    /* Keep the WhatsApp widget clear of the sticky call bar on mobile */
    .whatsapp-widget {
        bottom: calc(1em + 64px);
    }

    body {
        padding-bottom: 64px;
    }
}