/* ==============================================================================
   PWA ANIMATED POP-UP BANNER & MODAL (Fade Down Animation)
   ============================================================================== */

.pwa-install-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 520px;
    z-index: 9999;
}

@keyframes pwaSlideFadeDown {
    0% {
        opacity: 0;
        transform: translate(-50%, -30px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.animate-fade-down {
    animation: pwaSlideFadeDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pwa-banner-card {
    border-top: 4px solid var(--amber-500) !important;
    backdrop-filter: blur(10px);
}

.pwa-app-icon {
    width: 48px;
    height: 48px;
}

@media (max-width: 576px) {
    .pwa-install-banner {
        top: auto;
        bottom: 20px;
        transform: translateX(-50%);
    }
    @keyframes pwaSlideFadeDown {
        0% {
            opacity: 0;
            transform: translate(-50%, 30px);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }
}