/* ============================================================
   Offline / connection banner — Sky Original Group Store
   ------------------------------------------------------------
   Injected by public/js/offline.js. Kept in its own file so the
   markup never depends on Bootstrap or an inline <style> tag.
   ============================================================ */

.sg-net-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(14px + var(--sg-safe-bottom, env(safe-area-inset-bottom, 0px)));
    z-index: 9500; /* above content + bottom nav, below drawers/sheets */
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
    padding: 11px 12px 11px 14px;
    border-radius: 16px;
    background: #0F172A;
    color: #F8FAFC;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .55);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(130%);
    pointer-events: none;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, background .22s ease;
    -webkit-tap-highlight-color: transparent;
}

.sg-net-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sg-net-banner.is-online {
    background: #064E3B;
}

.sg-net-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #F79009;
    box-shadow: 0 0 0 4px rgba(247, 144, 9, .22);
    animation: sg-net-blink 1.7s ease-in-out infinite;
}

.sg-net-banner.is-online .sg-net-dot {
    background: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
    animation: none;
}

.sg-net-text {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-net-text strong {
    font-weight: 800;
}

.sg-net-action {
    flex: none;
    appearance: none;
    border: 0;
    border-radius: 11px;
    min-height: 34px;
    padding: 0 13px;
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
}

.sg-net-action:hover { background: rgba(255, 255, 255, .26); }
.sg-net-action:active { transform: scale(.97); }
.sg-net-action:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: 2px;
}

.sg-net-action[hidden] { display: none; }

/* Make room above the app's mobile bottom navigation bar. */
body.sg-has-bottom-nav .sg-net-banner {
    bottom: calc(var(--sg-bottom-nav-height, 60px) + 14px + var(--sg-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 575.98px) {
    .sg-net-banner {
        left: 10px;
        right: 10px;
        font-size: 12.5px;
        border-radius: 14px;
    }
}

@keyframes sg-net-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-net-banner { transition: opacity .15s ease; transform: none; }
    .sg-net-banner:not(.is-visible) { opacity: 0; visibility: hidden; }
    .sg-net-dot { animation: none; }
}

/* When the page is opened from cache while the server is unreachable,
   JS sets data-sg-network="offline" so pages can soften network-only
   controls (checkout, "load more", etc.) if they want to. */
html[data-sg-network="offline"] .needs-network {
    opacity: .55;
    pointer-events: none;
}