/**
 * Mobile Bottom Action Bar — Mikal Germany
 * Fixed two-button bar (Call + WhatsApp) for mobile viewports
 * Glassmorphism · Spring animations · Haptic-style feedback
 */

/* ═══════════════════════════════════════════════════
   BASE — hidden on desktop
   ═══════════════════════════════════════════════════ */
.mikal-mobile-bar {
    display: none;
}

/* ═══════════════════════════════════════════════════
   MOBILE BAR — visible below 1024px
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Spacer so content isn't hidden behind the bar */
    body.has-mobile-bar {
        padding-bottom: 88px;
    }

    .mikal-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 98;

        /* Glass morphism surface */
        background: rgba(15, 26, 15, 0.88);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);

        /* Top accent — thin green gradient line */
        border-top: 1px solid rgba(237, 245, 232, 0.08);
        box-shadow:
            0 -8px 32px rgba(10, 92, 24, 0.12),
            0 -2px 8px rgba(0, 0, 0, 0.2);

        align-items: stretch;
        justify-content: center;
        gap: 12px;

        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));

        /* Entrance animation */
        animation: barSlideUp 0.5s var(--anim-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
        transform: translateY(100%);
    }

    @keyframes barSlideUp {
        to {
            transform: translateY(0);
        }
    }

    /* ─── Individual button ─── */
    .mikal-mobile-bar-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        padding: 14px 16px;
        border-radius: 14px;
        text-decoration: none;
        font-family: var(--font-body, 'Noto Sans Arabic', sans-serif);
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1;
        letter-spacing: 0.01em;

        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        transition:
            transform 220ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
            box-shadow 220ms ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mikal-mobile-bar-btn:active {
        transform: scale(0.95);
    }

    .mikal-mobile-bar-btn .material-symbols-outlined {
        font-size: 22px;
        flex-shrink: 0;
    }

    /* Shimmer overlay on hover */
    .mikal-mobile-bar-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0.14) 50%,
            rgba(255, 255, 255, 0.08) 55%,
            transparent 70%
        );
        transform: translateX(-120%);
        transition: transform 0.6s ease;
        pointer-events: none;
    }

    .mikal-mobile-bar-btn:hover::after {
        transform: translateX(120%);
    }

    /* ─── CALL button ─── */
    .mikal-mobile-bar-btn--call {
        background: linear-gradient(135deg, var(--clr-primary, #0a5c18), #0d6e1f);
        color: #ffffff;
        box-shadow:
            0 6px 20px rgba(10, 92, 24, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .mikal-mobile-bar-btn--call:hover {
        transform: translateY(-2px);
        box-shadow:
            0 10px 28px rgba(10, 92, 24, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    /* Pulsing ring on the call icon */
    .mikal-mobile-bar-btn--call .material-symbols-outlined {
        position: relative;
    }

    .mikal-mobile-bar-btn--call .material-symbols-outlined::after {
        content: '';
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        animation: callRing 2.5s ease-in-out infinite;
    }

    @keyframes callRing {
        0%, 100% { opacity: 0; transform: scale(0.8); }
        50%      { opacity: 1; transform: scale(1.15); }
    }

    /* ─── WHATSAPP button ─── */
    .mikal-mobile-bar-btn--whatsapp {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #ffffff;
        box-shadow:
            0 6px 20px rgba(37, 211, 102, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .mikal-mobile-bar-btn--whatsapp:hover {
        transform: translateY(-2px);
        box-shadow:
            0 10px 28px rgba(37, 211, 102, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* ─── Hide floating WhatsApp FAB when bar is present ─── */
    .floating-whatsapp {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   SMALL PHONES — tighter padding
   ═══════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .mikal-mobile-bar {
        gap: 8px;
        padding: 10px 12px;
    }

    .mikal-mobile-bar-btn {
        padding: 12px 10px;
        font-size: 0.85rem;
        gap: 6px;
    }

    .mikal-mobile-bar-btn .material-symbols-outlined {
        font-size: 20px;
    }
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .mikal-mobile-bar {
        animation: none;
        transform: none;
    }

    .mikal-mobile-bar-btn {
        transition: none;
    }

    .mikal-mobile-bar-btn::after {
        display: none;
    }

    .mikal-mobile-bar-btn--call .material-symbols-outlined::after {
        animation: none;
        display: none;
    }
}