.custom-video-player{position:relative;width:100%;aspect-ratio:1;background-color:var(--color-bg-app);border-radius:var(--radius-card);overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.custom-video-player.fullscreen:active{background-color:#000!important;transform:none!important}.video-loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none}.video-loading-spinner .spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--color-brand);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 768px){.custom-video-player{max-width:600px;max-height:600px;margin-left:auto;margin-right:auto}}.custom-video-player:active{background-color:var(--color-bg-app)!important}.custom-video-player:focus{outline:none}.custom-video-player.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;aspect-ratio:unset;z-index:9999;border-radius:0;background-color:#000!important;display:flex;align-items:center;justify-content:center;transition:none!important}.custom-video-element{width:100%;height:100%;display:block;object-fit:contain;object-position:center;background-color:#000;outline:none;-webkit-tap-highlight-color:transparent}.custom-video-player.fullscreen .custom-video-element:active,.custom-video-player.fullscreen .custom-video-element:focus{background-color:#000!important;outline:none!important;transform:none!important}.custom-video-player:not(.fullscreen) .custom-video-element{object-fit:contain}.custom-video-element:active,.custom-video-element:focus{outline:none;background-color:#000}.custom-video-player.fullscreen:active .custom-video-element,.custom-video-player.fullscreen .custom-video-element:active{background-color:#000!important;transform:none!important;outline:none!important}.custom-video-player.fullscreen .custom-video-element{width:auto;height:auto;max-width:100vw;max-height:100vh;object-fit:contain;margin:0}@media (orientation: portrait){.custom-video-player.fullscreen .custom-video-element{width:100vw;height:auto;max-height:100vh}}@media (orientation: landscape){.custom-video-player.fullscreen .custom-video-element{width:auto;height:100vh;max-width:100vw}}.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 50%,transparent 100%);padding:var(--spacing-screen);opacity:0;transition:opacity var(--transition-fast) var(--transition-timing);pointer-events:none}.video-controls.visible{opacity:1;pointer-events:all}.progress-bar-wrapper{width:100%;height:8px;margin-bottom:var(--spacing-base);cursor:pointer;position:relative;padding:2px 0;touch-action:none;-webkit-tap-highlight-color:transparent}.progress-bar-bg{width:100%;height:4px;background-color:#ffffff4d;border-radius:2px;position:relative;overflow:visible}.progress-bar-fill{height:100%;background-color:var(--color-accent);border-radius:2px;transition:width .1s linear;position:relative;will-change:width}.progress-bar-fill.dragging{transition:none;will-change:width}.progress-bar-hover{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:12px;height:12px;background-color:var(--color-accent);border-radius:50%;opacity:.6;pointer-events:none;z-index:2}.progress-bar-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:10px;height:10px;background-color:var(--color-accent);border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 4px #0000004d;pointer-events:none;z-index:3;opacity:1!important;transition:left .1s linear;will-change:left}.progress-bar-wrapper:hover .progress-bar-bg,.progress-bar-wrapper:active .progress-bar-bg{height:6px}.controls-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-base)}.controls-left,.controls-right{display:flex;align-items:center;gap:var(--spacing-base)}.control-btn{background:none;border:none;color:#fff;cursor:pointer;padding:var(--spacing-base);display:flex;align-items:center;justify-content:center;transition:opacity var(--transition-fast) var(--transition-timing);outline:none;-webkit-tap-highlight-color:transparent}.control-btn:focus{outline:none}.control-btn:hover{opacity:.8}.control-btn:active{background:none;opacity:.9;outline:none}@media (max-width: 767px){.video-controls{padding:var(--spacing-base)}}
