/* player.css */
/* Purpose: Styles specific to the inline video player and its controls. */

/* ==========================================================================
   VIDEO PLAYER PROGRESS BAR
   ========================================================================== */
#progress-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 24px;
   background: transparent;
   z-index: var(--z-max);
   pointer-events: none;
   opacity: 0;
   visibility: hidden; /* Restored from old */
   transition: opacity var(--speed-slow) var(--ease-standard), visibility var(--speed-slow) var(--ease-standard);
   cursor: pointer;
}

body.player-active #progress-container {
   opacity: 1;
   visibility: visible; /* Restored from old */
   pointer-events: auto;
   transition: opacity var(--speed-slow) var(--ease-standard), visibility var(--speed-slow) var(--ease-standard);
}

#progress-track {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: rgba(255, 255, 255, 0.15);
   transition: height var(--speed-fast) var(--ease-fluid);
   pointer-events: none;
}

#progress-hover {
   position: absolute;
   top: 0;
   left: 0;
   height: 5px;
   width: var(--hover-pos, 0%);
   background: rgba(255, 255, 255, 0.4);
   transition: height var(--speed-fast) var(--ease-fluid), opacity var(--speed-fast) var(--ease-standard);
   opacity: 0;
   pointer-events: none;
}

body.player-active #progress-container:hover #progress-hover {
   opacity: 1;
}

#progress-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 5px;
   background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
   box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
   transition: height var(--speed-fast) var(--ease-fluid);
   pointer-events: none;
}

body.player-active #progress-container:hover #progress-track,
body.player-active #progress-container:hover #progress-hover,
body.player-active #progress-container:hover #progress-bar,
body.player-active #progress-container.is-dragging #progress-track,
body.player-active #progress-container.is-dragging #progress-hover,
body.player-active #progress-container.is-dragging #progress-bar {
   height: 14px;
}

#progress-handle {
   position: absolute;
   right: -8px;
   top: 50%;
   transform: translateY(-50%) scale(0);
   width: 16px;
   height: 16px;
   background: var(--color-white);
   border-radius: var(--radius-circle);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   transition: transform var(--speed-fast) var(--ease-fluid);
   pointer-events: none;
}

body.player-active #progress-container:hover #progress-handle,
body.player-active #progress-container.is-dragging #progress-handle {
   transform: translateY(-50%) scale(1);
}

.progress-tutorial {
   position: absolute;
   top: 15px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-overlay-dark);
   backdrop-filter: blur(8px);
   color: var(--color-white);
   padding: var(--space-sm) 14px;
   border-radius: var(--radius-md);
   font-size: 12px;
   font-weight: 600;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--speed-slow) var(--ease-standard), visibility var(--speed-slow) var(--ease-standard), transform var(--speed-slow) var(--ease-fluid);
   z-index: 10001;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   letter-spacing: 0.01em;
}
body.modal-open #progress-container {
   z-index: 1400 !important;
}
.progress-tutorial.show {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(5px);
}

/* ==========================================================================
   VIDEO PLAYER OVERLAY
   ========================================================================== */
.player-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: var(--z-fixed);
}

.player-overlay.hidden {
   display: none;
}

.player-wrapper {
   position: relative;
   height: var(--device-h-player);
   max-height: var(--device-max-h-player);
   aspect-ratio: var(--device-aspect-ratio);
}

#main-video {
   position: absolute;
   z-index: var(--z-base);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: var(--screen-w, 90%);
   height: var(--screen-h, 95%);
   border-radius: var(--screen-r, 10%);
   object-fit: cover;
   transition: opacity var(--speed-slow) var(--ease-standard);
}

.player-controls {
   position: absolute;
   right: -70px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 20px;
   opacity: 1;
   transition: opacity var(--speed-slow) var(--ease-standard);
}

.player-controls.fade-out {
   opacity: 0;
   pointer-events: none;
}

.icon-btn {
   background: none;
   border: none;
   cursor: pointer;
   width: 33px;
   height: 33px;
}

.icon-btn span.hidden {
   display: none;
}

#btn-cc {
   transition: transform var(--speed-fast) var(--ease-standard);
}


.video-loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
   width: 50px;
   height: 50px;
   background-color: var(--color-white);
   border-radius: var(--radius-circle);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--color-black);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   pointer-events: none;
   transition: opacity var(--speed-normal) var(--ease-standard);
}

.video-loader.hidden {
   opacity: 0;
   display: none;
}

.spinner {
   width: 25px;
   height: 25px;
   animation: rotate 1s linear infinite;
}

.spinner circle {
   stroke-dasharray: 90, 150;
   stroke-dashoffset: 0;
}

@keyframes rotate {
   100% {
      transform: rotate(360deg);
   }
}

video::cue {
   visibility: hidden;
}

.custom-subtitle {
   position: absolute;
   bottom: 110px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 110;
   pointer-events: none;
   display: none;
   text-align: center;
   max-width: 85vw;
   width: fit-content;
   background-color: var(--color-gray-dark);
   color: var(--color-bg);
   font-family: var(--font-family);
   font-size: 18px;
   letter-spacing: -0.02em;
   line-height: 1.0;
   padding: var(--space-xs) 6px;
   border-radius: 2px;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (PLAYER)
   ========================================================================== */
@media (max-width: 768px) {
   #view-player.player-overlay {
      align-items: flex-start !important;
      padding-top: 5vh !important;
   }

   #view-player .iphone-17,
   #view-player .iphone-12 {
      --device-h-player: 67vh !important;
   }

   #view-player .iphone-x {
      --device-h-player: 42vh !important;
   }

   #view-player .iphone-8 {
      --device-h-player: 40vh !important;
   }

   #view-player .apple-watch {
      --device-h-player: 60vh !important;
   }

   #view-player .player-controls {
      bottom: auto !important;
      top: 40px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background-color: var(--color-player-bg) !important;
      border: 1px solid var(--color-bg) !important;
      border-radius: 50px !important;
      padding: 10px var(--space-xl) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 20px !important;
      z-index: 110 !important;
      width: max-content;
   }

   .custom-subtitle {
      max-width: 95vw !important;
      width: 90%;
      bottom: 250px;
      font-size: 16px !important;
      padding: 6px 10px !important;
      line-height: 1.2;
      transition: bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }
}