/* =====================================================
   PWA · Banner installazione, Offline
   ===================================================== */

.install-banner {
  position: fixed;
  bottom: 90px;
  left: 12px;
  right: 12px;
  background: linear-gradient(135deg, #1a1a2e, #2a1a3e);
  border: 2px solid rgba(251, 191, 36, 0.4);
  border-radius: 16px;
  padding: 14px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(251, 191, 36, 0.25);
  z-index: 90;
  animation: slideUpBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.install-banner.show { display: flex; }
@keyframes slideUpBanner { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.install-banner-icon { font-size: 34px; flex-shrink: 0; animation: float 2.5s ease-in-out infinite; }
.install-banner-info { flex: 1; min-width: 0; }
.install-banner-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.install-banner-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); }

.install-banner-btn { background: linear-gradient(90deg, #fbbf24, #f59e0b); border: none; color: #1a1a2e; padding: 9px 16px; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: transform 0.15s; }
.install-banner-btn:active { transform: scale(0.94); }

.install-banner-close { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 20px; cursor: pointer; padding: 4px 8px; flex-shrink: 0; font-family: inherit; }

.offline-indicator { position: fixed; top: 65px; left: 50%; transform: translateX(-50%); background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; z-index: 95; display: none; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4); }
.offline-indicator.show { display: block; animation: fadeIn 0.3s ease; }

.audio-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.audio-toggle:active { transform: scale(0.9); }
.audio-toggle.muted { opacity: 0.5; background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }