/* movie-player.css — extracted from detail.blade.php for browser caching */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-border {
    from { --angle: 0deg; }
    to   { --angle: 360deg; }
}

@keyframes button-press {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.animated-border-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 6px;
    background: conic-gradient(from var(--angle) at center, transparent 75%, #3b82f6 88%, #60a5fa 100%);
    animation: spin-border 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

.btn-pressed { animation: button-press 0.3s ease-in-out; }

/* Pure white-dots loading spinner (no FA, no dark line segments) */
.dots-spinner { display: inline-flex; gap: 0.5rem; }
.dots-spinner > span {
    width: 12px; height: 12px;
    border-radius: 9999px;
    background: #fff;
    display: inline-block;
    animation: dot-bounce 1.4s infinite ease-in-out both;
}
.dots-spinner > span:nth-child(1) { animation-delay: -0.32s; }
.dots-spinner > span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1); }
}

/* ─── Plyr theme overrides ──────────────────────────────────────────────── */
:root {
    --plyr-color-main:                     #2663EB;
    --plyr-video-background:               #000;
    --plyr-font-family:                    inherit;
    --plyr-control-radius:                 6px;
    --plyr-video-controls-background:      linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    --plyr-range-fill-background:          #2663EB;
    --plyr-video-range-thumb-shadow-color: rgba(38, 99, 235, 0.4);
    --plyr-badge-background:               #2663EB;
    --plyr-tab-focus-color:                #2663EB;
    --plyr-control-icon-size:              18px;
    --plyr-font-size-base:                 14px;
}

/* Force 16:9 container — ensures correct size before Plyr detects video ratio */
#playerWrapper {
    aspect-ratio: 16 / 9;
}

/* Plyr anchors to #playerWrapper via absolute positioning so it gets definite width + height */
#playerWrapper .plyr {
    position: absolute !important;
    inset: 0 !important;
}

/* Video/poster wrapper fills the Plyr container; override Plyr's padding-bottom ratio hack */
#playerWrapper .plyr__video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    padding-bottom: 0 !important;
}

/* Video element fills the wrapper */
#playerWrapper .plyr__video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Allow controls bar and its popup menus to overflow the player bounds without clipping */
#playerWrapper .plyr__controls {
    overflow: visible;
}