/* =====================================================
   PWA Styling — Mantep Radio
   ===================================================== */
:root {
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-primary: #ff0044;
    --pwa-bg:      #0a0a0f;
    --pwa-surface: #16161d;
    --pwa-text:    #ffffff;
    --pwa-muted:   #a0a0b0;
}

/* ===== STANDALONE MODE ===== */
.pwa-standalone body {
    padding-bottom: calc( 70px + var(--safe-bottom) );
    background: var(--pwa-bg);
    color: var(--pwa-text);
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}
.pwa-standalone .site-header { padding-top: calc( 20px + var(--safe-top) ); }
.pwa-standalone .site-title a,
.pwa-standalone .section-title { color: var(--pwa-text); }
.pwa-standalone .radio-card { background: var(--pwa-surface); color: var(--pwa-text); }
.pwa-standalone .site-footer { display: none; }

/* ===== BOTTOM NAV ===== */
.pwa-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc( 60px + var(--safe-bottom) );
    padding-bottom: var(--safe-bottom);
    background: rgba( 15, 15, 20, 0.95 );
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-top: 1px solid rgba( 255, 255, 255, 0.06 );
    display: none;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
}
.pwa-standalone .pwa-bottom-nav { display: flex; }
.pwa-nav-item {
    flex: 1; max-width: 90px;
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 8px 14px;
    color: var(--pwa-muted); text-decoration: none;
    font-size: 10px; font-weight: 600;
    border-radius: 12px; transition: color .2s;
}
.pwa-nav-item i { font-size: 18px; }
.pwa-nav-item.is-active { color: var(--pwa-primary); }

/* ===== INSTALL BANNER ===== */
.pwa-install-banner {
    position: fixed;
    bottom: calc( 80px + var(--safe-bottom) );
    left: 12px; right: 12px;
    background: linear-gradient( 135deg, #1a1a24, #0f0f16 );
    border: 1px solid rgba( 255, 0, 68, 0.3 );
    border-radius: 16px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    color: #fff; z-index: 10000;
    box-shadow: 0 10px 40px rgba( 0, 0, 0, .5 );
    transform: translateY( 200% ); opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.pwa-install-banner--visible {
    transform: translateY( 0 ); opacity: 1; pointer-events: auto;
}
.pwa-install-banner__icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--pwa-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.pwa-install-banner__text { flex: 1; min-width: 0; }
.pwa-install-banner__text strong { display: block; font-size: 14px; }
.pwa-install-banner__text small { color: var(--pwa-muted); font-size: 12px; }
.pwa-install-banner__actions { display: flex; gap: 6px; flex-shrink: 0; }
.pwa-install-banner button {
    border: none; padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
#pwa-install-btn { background: var(--pwa-primary); color: #fff; }
#pwa-install-dismiss {
    background: rgba( 255, 255, 255, .1 ); color: #fff;
    width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* ===== UPDATE TOAST ===== */
.pwa-update-toast {
    position: fixed;
    bottom: calc( 80px + var(--safe-bottom) );
    left: 12px; right: 12px;
    background: linear-gradient( 135deg, #001f3f, #00122a );
    border: 1px solid rgba( 0, 200, 255, .4 );
    border-radius: 14px;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 12px;
    color: #fff; z-index: 10001;
    box-shadow: 0 10px 40px rgba( 0, 0, 0, .5 );
    transform: translateY( 200% ); opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.pwa-update-toast--show {
    transform: translateY( 0 ); opacity: 1; pointer-events: auto;
}
.pwa-update-toast__icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba( 0, 200, 255, .15 );
    color: #00c8ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    animation: pwa-spin 2s linear infinite;
}
.pwa-update-toast__text { flex: 1; min-width: 0; }
.pwa-update-toast__text strong { display: block; font-size: 14px; }
.pwa-update-toast__text small { color: #a0d8ff; font-size: 12px; }
#pwa-update-btn {
    background: #00c8ff; color: #001a33;
    border: none; padding: 8px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    flex-shrink: 0;
}
@keyframes pwa-spin { to { transform: rotate( 360deg ); } }

/* Offline indicator */
.is-offline::before {
    content: '⚠️ Mode Offline';
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #ff9500; color: #000;
    text-align: center; padding: 6px;
    padding-top: calc( 6px + var(--safe-top) );
    font-size: 12px; font-weight: 700;
    z-index: 10001;
}