/* ============================================
   MOBILE CALL BUTTON
   Sticky bottom bar with tap-to-call
   Mobile only (hidden on desktop)
   ============================================ */

/* Mobile Call Bar - Sticky Bottom */
.mobile-call-bar {
    display: none;
    /* Hidden by default */
}

@media (max-width: 768px) {
    .mobile-call-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, white 100%);
        padding: 12px 16px 16px 16px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        z-index: 9997;
        /* Below search/cart buttons (9998, 9999) */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mobile-call-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 24px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
            0 2px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        cursor: pointer;
        min-height: 56px;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-call-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    }

    .mobile-call-icon {
        font-size: 1.3rem;
        animation: pulse 2s infinite;
    }

    .mobile-call-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .mobile-call-label {
        font-size: 0.75rem;
        font-weight: 500;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-call-number {
        font-size: 1.1rem;
        font-weight: 700;
    }

    /* Pulse animation for call icon */
    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    /* Adjust floating buttons to avoid overlap */
    .floating-cart {
        bottom: 90px !important;
        /* Above call button (56px + 16px padding + 18px gap) */
    }

    .floating-search-btn {
        bottom: 156px !important;
        /* Above cart button */
    }

    /* Alternative: Simple single-line version */
    .mobile-call-btn.simple {
        flex-direction: row;
        padding: 18px 24px;
    }

    .mobile-call-btn.simple .mobile-call-text {
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

    .mobile-call-btn.simple .mobile-call-label {
        display: none;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .mobile-call-bar {
        display: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    @media (max-width: 768px) {
        .mobile-call-bar {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 20%, #000 100%);
            border-top-color: rgba(255, 255, 255, 0.1);
        }
    }
}

/* Landscape mode on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-call-bar {
        padding: 8px 16px 12px 16px;
    }

    .mobile-call-btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 1rem;
    }

    .mobile-call-icon {
        font-size: 1.1rem;
    }

    .floating-cart {
        bottom: 72px !important;
    }

    .floating-search-btn {
        bottom: 132px !important;
    }
}

/* Very small phones (<= 360px) */
@media (max-width: 360px) {
    .mobile-call-btn {
        font-size: 1rem;
        padding: 14px 20px;
    }

    .mobile-call-number {
        font-size: 1rem;
    }
}