/* KFLoader - film reel / clapperboard loading animation (see static/js/kfloader.js).
   Sized in em so the TV's scaled rem works too; no gap/inset/:has for older TV browsers. */
.kf-ld {
    --kf-a: #818cf8;
    --kf-line: rgba(255, 255, 255, .7);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 2.5em 0; text-align: center;
    animation: kfLdIn .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes kfLdIn { from { opacity: 0; transform: scale(.94); } }
@keyframes kfLdSpin { to { transform: rotate(360deg); } }

.kf-ld-vis { position: relative; margin-bottom: 1.6em; transition: filter .6s ease; }
.kf-ld-vis svg { display: block; margin: 0 auto; overflow: visible; }
.kf-ld-done .kf-ld-vis { filter: brightness(1.25); }

/* ── Film reel ── */
.kf-reel { width: 8.75em; height: 8.75em; }
.kf-reel-spin { transform-origin: 70px 70px; animation: kfLdSpin 2.2s linear infinite; }
.kf-ld-done .kf-reel-spin { animation-duration: .35s; }
.kf-reel-rim { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.kf-reel-rim2 { stroke-opacity: .3; }
.kf-reel-hub { fill: rgba(255, 255, 255, .8); }
.kf-reel-hole { fill: transparent; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.kf-reel-hole.kf-on { fill: rgba(129, 140, 248, .55); stroke: var(--kf-a); filter: drop-shadow(0 0 5px var(--kf-a)); }
.kf-reel-hole.kf-now { animation: kfReelNow 1s ease-in-out infinite; }
@keyframes kfReelNow { 50% { fill: rgba(129, 140, 248, .3); stroke: var(--kf-a); } }
.kf-ld-indet .kf-reel-hole { animation: kfReelNow 1s ease-in-out infinite; }
.kf-ld-done .kf-reel-hole { animation: none; }

.kf-reel-strip {
    width: 15em; height: 2.1em; margin: .9em auto 0; position: relative; overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
            mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.kf-reel-strip i {
    position: absolute; top: 0; bottom: 0; left: 0; right: -60px;
    border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 15px) top 3px left 0 / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 15px) bottom 3px left 0 / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, rgba(129, 140, 248, .18) 0 26px, transparent 26px 30px) center / 100% 50% no-repeat;
    animation: kfReelFilm 1s linear infinite;
}
@keyframes kfReelFilm { to { transform: translateX(-60px); } }
.kf-ld-done .kf-reel-strip i { animation-duration: .2s; background-color: rgba(255, 255, 255, .1); }

/* ── Clapperboard ── */
.kf-clap { width: 10.6em; height: 8.75em; }
.kf-clap-board { fill: rgba(255, 255, 255, .04); stroke: var(--kf-line); stroke-width: 2; }
.kf-clap-bar { fill: rgba(255, 255, 255, .06); stroke: var(--kf-line); stroke-width: 2; }
.kf-clap-stripes path { fill: rgba(255, 255, 255, .55); }
.kf-clap-line { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.kf-clap-cap { fill: rgba(255, 255, 255, .5); font: 400 9px Inter, system-ui, sans-serif; letter-spacing: .12em; }
.kf-clap-val { fill: #fff; font: 300 16px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.kf-clap-top {
    transform-origin: 22px 52px; transform: rotate(-30deg);
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
/* No fixed stages: it flaps gently until it's done */
.kf-ld-indet .kf-clap-top { animation: kfClapFlap 1.6s ease-in-out infinite; }
@keyframes kfClapFlap { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-14deg); } }
/* Done: snap shut, a jolt and a spark */
.kf-ld-done .kf-clap-top { animation: none; transition: transform .14s cubic-bezier(.6, 0, 1, .6); }
.kf-ld-done.kf-ld-clap .kf-ld-vis { animation: kfClapShake .3s .14s; }
@keyframes kfClapShake { 30% { transform: translate(2px, 1px); } 60% { transform: translate(-2px, -1px); } }
.kf-clap-spark { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.kf-ld-done .kf-clap-spark { animation: kfClapSpark .5s .14s ease-out; }
@keyframes kfClapSpark { 0% { opacity: 1; stroke-dasharray: 0 20; } 100% { opacity: 0; stroke-dasharray: 10 20; stroke-dashoffset: -10; } }

/* ── Status text ── */
.kf-ld-label {
    font-size: .95em; font-weight: 300; letter-spacing: .01em; color: rgba(255, 255, 255, .92);
    min-height: 1.4em; transition: opacity .26s ease, transform .26s ease, filter .26s ease;
}
.kf-ld-label.kf-out { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
.kf-ld-label.kf-pre { opacity: 0; transform: translateY(6px); filter: blur(4px); transition: none; }
.kf-ld-detail {
    margin-top: .45em; min-height: 1.2em; font-size: .7em; letter-spacing: .08em;
    font-variant-numeric: tabular-nums; color: rgba(226, 228, 233, .45);
}

/* While loading, the modal panel disappears entirely: it stretches to fill the
   screen with no fill, edge, shadow or blur of its own (so there is no faint
   rectangle left), and the title and X are hidden. Esc / Back still close it. */
.kf-bare {
    background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: hidden !important;
    animation: none !important;
    display: flex !important; flex-direction: column; justify-content: center;
}
.kf-bare::before, .kf-bare::after { display: none !important; }
.kf-bare .modal-header, .kf-bare .modal-topbar { display: none !important; }
.kf-bare .stream-loading, .kf-bare .loading-container { min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .kf-ld, .kf-ld * { animation-duration: 0s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Every other spinner (web .loading, TV .spinner, player .kf-spinner), restyled
   in one place: a glowing comet ring with a counter-spinning inner arc. Same
   single element as before, so no markup changes; the old inline sizes and
   borders are overridden here.
   ═══════════════════════════════════════════════════════════════════════ */
.loading, .spinner, .kf-spinner {
    position: relative; display: inline-block; vertical-align: middle;
    border: 0 !important; border-radius: 50%; background: none !important;
    animation: none !important;
    -webkit-filter: drop-shadow(0 0 8px rgba(103, 232, 249, .45)) drop-shadow(0 0 3px rgba(129, 140, 248, .8)); filter: drop-shadow(0 0 8px rgba(103, 232, 249, .45)) drop-shadow(0 0 3px rgba(129, 140, 248, .8));
}
.loading::before, .spinner::before, .kf-spinner::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(129, 140, 248, 0) 0deg, rgba(129, 140, 248, .14) 80deg,
                #818cf8 250deg, #67e8f9 335deg, #fff 354deg, rgba(129, 140, 248, 0) 355deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    animation: kfSpinRing .85s linear infinite;
}
.loading::after, .spinner::after, .kf-spinner::after {
    content: ''; position: absolute; top: 26%; left: 26%; right: 26%; bottom: 26%; border-radius: 50%;
    border: 1.5px solid rgba(103, 232, 249, .12); border-top-color: rgba(103, 232, 249, .9);
    animation: kfSpinRing 1.4s linear infinite reverse;
}
@keyframes kfSpinRing { to { transform: rotate(360deg); } }

/* Stand-alone loaders: bigger, centred, with the status text styled like the main loader */
#personalisedLoading .loading, #latestMoviesLoading .loading, #latestEpisodesLoading .loading,
#serverLoading .loading, #securityLoading .loading, #footballLoading .loading,
.ltv-state .loading, .details-loading .loading, .share-state .loading, .loading-container .loading {
    display: block; width: 52px !important; height: 52px !important; margin: 0 auto !important;
}
#personalisedLoading, #latestMoviesLoading, #latestEpisodesLoading,
#serverLoading, #securityLoading, #footballLoading, .details-loading {
    padding: 14vh 0 !important; text-align: center;
}
#personalisedLoading > div, #latestMoviesLoading > div, #latestEpisodesLoading > div, #footballLoading > div,
.ltv-state > div, .ltv-state > p, .loading-container > div {
    margin-top: 20px !important; color: rgba(255, 255, 255, .85) !important;
    font-size: .95rem !important; font-weight: 300; letter-spacing: .01em;
}
.ltv-state:has(> .loading) { min-height: 40vh; align-content: center; }
.ltv-state small { color: rgba(226, 228, 233, .45); }

/* Details popup: no panel or X while it loads, just the spinner */
.details-modal:has(> #detailsBody > .details-loading) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.details-modal:has(> #detailsBody > .details-loading)::before,
.details-modal:has(> #detailsBody > .details-loading) .details-close { display: none !important; }
.details-modal .details-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 0 !important; }

/* Player: buffering and switching source */
.kf-spinner { width: 58px !important; height: 58px !important; }
.kf-source-switching { background: rgba(5, 6, 10, .72) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kf-source-switching-label { font-weight: 300 !important; letter-spacing: .01em; color: rgba(255, 255, 255, .92) !important; }

/* TV: page loaders centred in the screen, text like the main loader */
.stream-loading .spinner { width: 3.4rem; height: 3.4rem; margin: 0 auto 1.3rem; display: block; }
.stream-loading { font-weight: 300 !important; color: rgba(255, 255, 255, .85) !important; text-align: center; }
.loading-state, .stream-loading:not(#streamLoading):not(#episodeLoading) { min-height: 60vh; align-items: center; }