/* ================================================================
   PWA & MOBILE — MODERN CRIMSON THEME
   ================================================================ */

/* PWA Safe Areas */
body.pwa-mode {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* PWA Install Button */
.pwa-install-button {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--text-white);
    border: none;
    box-shadow: var(--shadow-crimson);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all .3s ease;
    animation: pulse-install 2s infinite;
}
.pwa-install-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-crimson-lg); }
.pwa-install-button i { font-size: 1.2em; }

@keyframes pulse-install {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193,18,31,0.7); }
    50% { box-shadow: 0 0 0 10px rgba(193,18,31,0); }
}

/* PWA Install Badge */
.pwa-install-badge {
    position: fixed;
    bottom: -200px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.92);
    box-shadow: 0 -4px 20px rgba(193,18,31,.15);
    padding: 20px;
    z-index: 9999;
    transition: bottom .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 3px solid var(--crimson);
    backdrop-filter: blur(8px);
}
.pwa-install-badge.show { bottom: 0; }
.pwa-install-badge .badge-content {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}
.pwa-install-badge i { font-size: 2.5em; color: var(--crimson); }
.pwa-install-badge strong { display: block; font-size: 1.1em; margin-bottom: 4px; color: #1e1e24; }
.pwa-install-badge p { margin: 0; color: #4b5563; font-size: .9em; }

.install-badge-btn {
    margin-left: auto;
    padding: 10px 24px;
    background: var(--brand);
    color: var(--text-white);
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
}
.install-badge-btn:hover { box-shadow: var(--shadow-crimson); transform: scale(1.05); }

.close-badge-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #6b7280;
    cursor: pointer;
    padding: 0 10px;
    transition: color .3s ease;
}
.close-badge-btn:hover { color: #1e1e24; }

/* Touch improvements */
@media (hover: none) {
    .btn:hover, .card:hover { transform: none; }
    .btn:active { transform: scale(0.98); }
    .card:active { transform: scale(0.99); }
}

.btn {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Network notification */
.network-notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    transition: top .4s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: white;
    backdrop-filter: blur(6px);
}
.network-notification.show { top: 20px; }
.network-notification.online { background: var(--crimson); }
.network-notification.offline { background: var(--crimson-dark); }

/* Standalone PWA Mode */
@media (display-mode: standalone) {
    body { padding-top: var(--safe-area-top); padding-bottom: var(--safe-area-bottom); }
    html.native-app body, body.native-app { padding-top: 0 !important; padding-bottom: 0 !important; }
    .pwa-install-button, .pwa-install-badge { display: none !important; }
}

/* Mobile Bottom Navigation — Modern crimson */
.mobile-bottom-nav { display: none !important; }

html.native-app .native-app-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
html.native-app .native-icon-svg { width: 1em; height: 1em; display: block; }

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, rgba(193,18,31,.92), rgba(80,6,12,.92));
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-top: 1px solid rgba(255,255,255,.18);
        padding: 4px 0;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        align-items: stretch;
        z-index: 99999;
        box-shadow: 0 -2px 10px rgba(193,18,31,.25);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .mobile-bottom-nav::-webkit-scrollbar { display: none; }

    .mobile-bottom-nav a {
        flex: 0 0 auto;
        min-width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        color: rgba(255,255,255,.85);
        text-decoration: none;
        font-size: 0.65em;
        font-weight: 600;
        transition: all .2s;
        white-space: nowrap;
        position: relative;
        border-radius: 12px;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover {
        color: #ffffff;
        background: rgba(255,255,255,.18);
        border-radius: 12px;
    }

    .mobile-bottom-nav a i { font-size: 1.3em; margin-bottom: 2px; color: rgba(255,255,255,.85); }
    .mobile-bottom-nav a.active i { color: #ffffff; }

    .mobile-bottom-nav a .mobile-nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3em;
        line-height: 1;
        margin-bottom: 2px;
        min-height: 1.1em;
    }
    .mobile-bottom-nav a .mobile-icon-svg { width: 1.15em; height: 1.15em; display: block; }
}

/* FA emoji fallback */
i.fa-fallback, .fa-fallback {
    font-style: normal !important;
    font-family: inherit !important;
    -moz-osx-font-smoothing: auto !important;
    -webkit-font-smoothing: auto !important;
}
i.fa-fallback::before, .fa-fallback::before {
    content: attr(data-emoji) !important;
    font-family: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
}
i.fa-fallback.fa-spin::before { animation: none !important; }

/* Native app pwa overrides */
html.native-app main,
html.native-app .main-content,
html.native-app .container { padding-bottom: 0 !important; }