/* /public/css/offline.css */

/* ---- Reset / variables (already in your app? adjust as needed) ---- */
:root {
    --primary: #6c5ce7;
    --primary-dark: #5a4bd1;
    --primary-light: #a29bfe;
    --bg: #0f0f1a;
    --surface: #1a1a2e;
    --surface-light: #2d2d44;
    --text: #ffffff;
    --text-muted: #b0b0c8;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --radius: 16px;
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Offline overlay ---- */
#offline-overlay {
    transition: opacity 0.5s ease;
}
#offline-overlay.visible {
    display: flex !important;
    opacity: 1;
    pointer-events: all;
}
#offline-overlay .offline-icon {
    animation: float 2.8s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
#offline-overlay .retry-btn.loading .spinner {
    display: inline-block;
}
#offline-overlay .retry-btn.loading .btn-text {
    display: none;
}

/* ---- Connection bar ---- */
#connBar {
    transition: transform 0.4s ease;
}
#connBar.visible {
    display: block !important;
    transform: translateY(0);
}
#connBar .highlight {
    color: var(--primary-light);
    font-weight: 600;
}

/* ---- Status badge (if you use it in your header) ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(108, 92, 231, 0.15);
    color: var(--primary-light);
    border: 1px solid rgba(108, 92, 231, 0.2);
    transition: all var(--transition);
}
.status-badge.online {
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    border-color: rgba(46, 213, 115, 0.25);
}
.status-badge.offline {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.25);
    animation: pulse-badge 1.6s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    transition: all var(--transition);
}