/* goplay-loading.css */
:root {
    --brand-primary: #08AFD1; /* xanh logo */
    --brand-accent: #27D0B3; /* nhấn xanh ngọc */
    --brand-dark: #2E3A43; /* xám đậm */
    --brand-paper: #ffffff;
}

body.loading-locked {
    overflow: hidden !important;
    touch-action: none !important;
}

#goplayLoadingProcess.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10550;
    display: block;
    visibility: hidden;
}

#goplayLoadingProcess .loading-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% 0%, rgba(8,175,209,.12), rgba(39,208,179,.06) 40%, rgba(0,0,0,.45) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
}

#goplayLoadingProcess .loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width: 280px;
    max-width: 92vw;
    background-color: transparent;
    border-radius: 16px;
/*    box-shadow: 0 22px 60px rgba(0,0,0,.28);*/
    padding: 18px 22px;
    text-align: center;
}

.loading-badge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin: 2px auto 10px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 0deg, var(--brand-primary), var(--brand-accent), var(--brand-primary));
    -webkit-mask: radial-gradient(circle 24px at 50% 50%, transparent 32px, black 33px);
    mask: radial-gradient(circle 24px at 50% 50%, transparent 32px, black 33px);
    animation: sweep 1.2s linear infinite;
}

@keyframes sweep {
    to {
        transform: rotate(360deg);
    }
}

.spinner-fallback {
    width: 2.25rem;
    height: 2.25rem;
    border: .35rem solid rgba(0,0,0,.08);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-title {
    font-weight: 600;
    color: var(--brand-dark);
}

.loading-msg {
    color: #5b6a75;
    font-size: .925rem;
}

.loading-rail {
    position: relative;
    height: 6px;
    width: 100%;
    background: linear-gradient(180deg, rgba(8,175,209,.18), rgba(39,208,179,.18));
    border-radius: 999px;
    overflow: hidden;
    margin-top: 14px;
}

    .loading-rail::before, .loading-rail::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40%;
        background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.65), rgba(255,255,255,.0));
        transform: translateX(-100%);
        animation: shimmer 1.4s ease-in-out infinite;
    }

    .loading-rail::after {
        animation-delay: .5s;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(260%);
    }
}

#goplayLoadingProcess .loading-topright {
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--brand-paper);
    color: var(--brand-dark);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.loading-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.btn-brand {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

    .btn-brand:hover {
        filter: brightness(1.05);
    }


@keyframes rotate-loop {
    from {
        transform: rotate(0deg)
    }

    10% {
        transform: rotate(-16deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.rotate-loop {
    width: 56px;
    height: 56px;
    aspect-ratio: 1/1;
    animation: rotate-loop 0.85s ease-in-out infinite;
}