/* Replay Overlay */
.replay-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;z-index: 100;}
.replay-overlay.active {opacity: 1;visibility: visible;}
.replay-btn {display: flex;flex-direction: column;align-items: center;gap: 15px;background: rgba(255, 255, 255, 0.1);border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50%;padding: 30px;cursor: pointer;transition: all 0.3s;color: white;}
.replay-btn:hover {background: rgba(255, 255, 255, 0.2);transform: scale(1.1);}
.replay-btn span {font-size: 18px;font-weight: 600;margin-top: -10px;}
/* .replay-btn span {font-size: 18px;font-weight: 600;margin-top: -10px;} */

/* Buffering Indicator */
.popup-overlay.buffering::after {content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;border: 4px solid rgba(255, 255, 255, 0.3);border-top-color: white;border-radius: 50%;animation: spin 1s linear infinite;z-index: 1000;}

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

/* Enhanced Watermark */
.video-watermark {position: absolute;background: rgba(0, 0, 0, 0.5);color: rgba(255, 255, 255, 0.7);padding: 8px 12px;border-radius: 4px;font-size: 11px;font-family: monospace;pointer-events: none;z-index: 99;transition: all 0.5s ease;}
.video-watermark.top-left { top: 20px; left: 20px; }
.video-watermark.top-right { top: 20px; right: 20px; }
.video-watermark.bottom-left { bottom: 80px; left: 20px; }
.video-watermark.bottom-right { bottom: 80px; right: 20px; }
.video-watermark.center {top: 50%;left: 50%;transform: translate(-50%, -50%);}
.video-watermark small {font-size: 9px;opacity: 0.8;}

/* ============================================
   RED PROGRESS BAR STYLING
   ============================================ */

/* Progress bar container */
.progress-bar {position: relative;width: 100%;height: 5px;background: rgba(255, 255, 255, 0.3);cursor: pointer;border-radius: 2px;overflow: hidden;transition: height 0.2s;}
.progress-bar:hover {height: 8px;}

/* Progress filled - RED COLOR */
.progress-fill {position: absolute;top: 0;left: 0;height: 100%;background: #0089C8 !important;border-radius: 2px;transition: width 0.1s linear;pointer-events: none;  will-change: width;}

/* Add a glow effect on hover */
.progress-bar:hover .progress-fill {box-shadow: 0 0 10px rgba(0, 137, 200,0.5);}

/* Progress bar thumb (optional - shows on hover) */
/* .progress-bar::after {content: '';position: absolute;top: 50%;left: 0;width: 12px;height: 12px;background: #0089C8;border-radius: 50%;transform: translate(-50%, -50%);opacity: 0;transition: opacity 0.2s;pointer-events: none;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.progress-bar:hover::after {opacity: 1;left: var(--progress-percent, 0%);} */

/* ============================================
   UNMUTE HINT
============================================ */

.unmute-hint {position: absolute;top: 20px;left: 50%;transform: translateX(-50%) translateY(-20px);background: rgba(0, 0, 0, 0.8);color: white;padding: 12px 24px;border-radius: 8px;font-size: 14px;font-weight: 600;opacity: 0;transition: all 0.3s ease;z-index: 1000;pointer-events: none;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);}
.unmute-hint.show {opacity: 1;transform: translateX(-50%) translateY(0);}

/* ============================================
   ENHANCED CONTROL BAR
============================================ */

.custom-controls {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);padding: 15px;display: flex;align-items: center;gap: 15px;opacity: 0;transition: opacity 0.3s;z-index: 10;}
.popup-overlay:hover .custom-controls,.popup-overlay.needs-interaction .custom-controls {opacity: 1;}

/* Control buttons styling */
.play-pause-btn, .sr-rewind, .sr-forword, .volume-btn, .fullscreen-btn {background: rgba(255, 255, 255, 0.1);border: none;color: white;font-size: 18px;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s;}
.play-pause-btn:hover, .sr-rewind:hover, .sr-forword:hover, .volume-btn:hover, .fullscreen-btn:hover {background: rgba(255, 255, 255, 0.2);transform: scale(1.1);}

/* Time display */
.current-time, .duration {color: white;font-size: 13px;font-weight: 500;min-width: 45px;}
.time-separator {color: rgba(255, 255, 255, 0.7);margin: 0 5px;}

/* Progress bar wrapper in controls */
.progress-wrapper {flex: 1;display: flex;align-items: center;gap: 10px;}

/* Mobile responsive */
@media (max-width: 768px) {
    .custom-controls {padding: 10px;gap: 10px;}
    .play-pause-btn,.sr-rewind,.sr-forword,.volume-btn,.fullscreen-btn {width: 35px;height: 35px;font-size: 16px;}
    .current-time,.duration {font-size: 12px;min-width: 40px;}
    .progress-bar {height: 4px;}
    .progress-bar:hover {height: 6px;}
}

/* ============================================
   LOADING STATE WITH RED ACCENT
============================================ */

.popup-overlay.loading::before {content: '';position: absolute;top: 50%;left: 50%;width: 60px;height: 60px;margin: -30px 0 0 -30px;border: 4px solid rgba(255, 255, 255, 0.2);border-top-color: #0089C8;border-radius: 50%;animation: spin 0.8s linear infinite;z-index: 999;}

/*New popup css for testing */
/* Video Popup CSS - Add to your stylesheet */

.popup-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 9999;align-items: center;justify-content: center;-webkit-overflow-scrolling: touch;-webkit-transform: translateZ(0);transform: translateZ(0);}
.popup-overlay.active {display: flex;}
.popup-overlay.loading {display: flex;border-top-color: #0089C8;}
.popup-overlay.loading .popup-content::before {content: none;position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;border: 5px solid #f3f3f3;border-top: 5px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite;z-index: 10000;}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.popup-content {position: relative;width: 100%;max-width: 75%;background: #000;border-radius: 8px;overflow: hidden;}
.close-btnt {position: absolute;top: 10px;right: 10px;background: rgba(0, 0, 0, 0.7);color: white;border: none;font-size: 30px;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;z-index: 1000;display: flex;align-items: center;justify-content: center;line-height: 1;transition: background 0.3s;}
.close-btnt:hover {background: rgba(255, 0, 0, 0.7);}
.video-container {position: relative;width: 100%;padding-bottom: 56.25%;background: #000;}
.popupVideo {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;object-fit: contain;background: #000;}
.video-controls {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);padding: 20px 15px 15px;opacity: 0;transition: opacity 0.3s;z-index: 100;}
.video-container:hover .video-controls,.video-controls.show {opacity: 1;}
.progress-container {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;color: white;font-size: 14px;}
.progress-bar {position: relative;flex: 1;height: 5px;background: #555;cursor: pointer;border-radius: 3px;}
.sr-video-controls-btn {display: flex;align-items: center;gap: 15px;justify-content: center;}
.sr-video-controls-btn button {background: transparent;border: none;color: white;font-size: 24px;cursor: pointer;padding: 5px 10px;transition: transform 0.2s;}
.sr-video-controls-btn button:hover {transform: scale(1.1);}
.sr-video-controls-btn svg {width: 24px;height: 24px;}
.play-pause-btn {font-size: 28px !important;}
.volume-btn.muted {opacity: 0.5;}

/* iOS/iPad specific styles */
@supports (-webkit-touch-callout: none) {
  .popup-overlay.active {
    position: fixed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .popupVideo { -webkit-transform: translateZ(0);transform: translateZ(0);}

  /* Show controls on touch devices */
  .video-controls {opacity: 1;}
}

/* Tablet and mobile responsive */
@media (max-width: 991px) {
  /* .popup-content {width: 95%;max-width: none;} */
  .close-btnt {top: 5px;right: 5px;width: 35px;height: 35px;font-size: 25px;}
  .video-controls {opacity: 1;padding: 15px 10px 10px;}
  .sr-video-controls-btn {gap: 10px;}
  .sr-video-controls-btn button {font-size: 20px;padding: 3px 8px;}
  .sr-video-controls-btn svg {width: 20px;height: 20px;}
  .popup-content {max-width: 90%;}
}

/* iPad specific - landscape orientation */
/* @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .popup-content {width: 95%;height: 90vh;}
  .video-container {padding-bottom: 0;height: 100%;}
} */

/* Watermark styles */
.video-watermark {position: absolute;top: 20px;right: 20px;color: rgba(255, 255, 255, 0.3);font-size: 12px;text-align: right;pointer-events: none;z-index: 99;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);display: none;}

/* Needs interaction overlay (when autoplay fails) */
.popup-overlay.needs-interaction .video-container::after {content: '▶ Tap to Play';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 20px 40px;border-radius: 50px;font-size: 18px;pointer-events: none;z-index: 50;}

/* Animation for controls */
@keyframes fadeIn {
  from{opacity: 0;}
  to{opacity: 1;}
}

.video-controls.show {animation: fadeIn 0.3s;}



/* ========================================
   OPTIMIZED VIDEO PLAYER CSS v4.0
   Performance-focused, minimal repaints
   ======================================== */

/* Popup overlay - GPU accelerated */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: opacity;
}

.popup-overlay.active {
    display: flex;
    opacity: 1;
}

.popup-overlay.loading {
    display: flex;
    opacity: 1;
}

/* Popup content - hardware accelerated */
.popup-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* Close button - optimized */
.close-btnt {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    font-size: 32px;
    line-height: 32px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.close-btnt:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Video container - aspect ratio preserved */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    overflow: hidden;
}

/* Video element - GPU accelerated */
.popupVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateZ(0);
    will-change: transform;
}

/* Loading indicator - smooth animation */

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Custom controls - minimal layout shifts */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 40px 20px 20px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.video-container:hover .video-controls{
    opacity: 1;
    pointer-events: auto;
}

/* Progress bar container */
.progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.time-current,
.time-total {
    color: #fff;
    font-size: 14px;
    font-family: monospace;
    min-width: 40px;
}

/* Progress track - efficient rendering */
.progress-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Control buttons - optimized layout */
.controls-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.controls-buttons button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, opacity 0.2s;
}

.controls-buttons button:hover {
    transform: scale(1.1);
}

.controls-buttons button:active {
    transform: scale(0.95);
}

.btn-play {
    font-size: 24px;
}

.btn-rewind svg,
.btn-forward svg {
    width: 24px;
    height: 24px;
}

.btn-volume svg {
    width: 20px;
    height: 20px;
}

.btn-volume.muted {
    opacity: 0.5;
}

.btn-fullscreen {
    font-size: 20px;
    margin-left: auto;
}

/* Replay overlay - smooth transition */
.replay-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.replay-overlay.active {opacity: 1;pointer-events: auto;}
.replay-overlay button.replay-btn,.replay-overlay button.replay-btn:hover {background-color: transparent;background-repeat: no-repeat;background-position: center;background-size: cover;width: 80px;height: 80px;border: 0;outline: none;background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBkPSJNMTIuNyAyMi4xYy4yLjEuMy4xLjUuMXMuNCAwIC41LS4xbDctNC4yYy4zLS4yLjUtLjUuNS0uOXMtLjItLjctLjUtLjlsLTctNC4yYy0uMy0uMi0uNy0uMi0xIDBzLS41LjUtLjUuOXY4LjRjMCAuNC4yLjcuNS45eiIgZmlsbD0iI2ZmZiI+PC9wYXRoPgogICAgPHBhdGggZD0ibTE4IDUuMi41LS40Yy41LS4zLjYtLjkuMy0xLjRzLS45LS42LTEuNC0uM2wtMyAyYy0uMi4yLS40LjUtLjQuOHMuMS42LjMuOGwzIDNjLjIuMi40LjMuNy4zcy41LS4xLjctLjNjLjQtLjQuNC0xIDAtMS40bC0xLjItMS4yQzIyLjMgNy45IDI2IDEyIDI2IDE3YzAgNS41LTQuNSAxMC0xMCAxMFM2IDIyLjUgNiAxN2MwLTMuNCAxLjctNi41IDQuNS04LjQuNS0uMy42LS45LjMtMS40LS4zLS40LS45LS42LTEuMy0uMkM2IDkuMiA0IDEyLjkgNCAxN2MwIDYuNiA1LjQgMTIgMTIgMTJzMTItNS40IDEyLTEyYzAtNS45LTQuMy0xMC44LTEwLTExLjh6IiBmaWxsPSIjZmZmIj48L3BhdGg+Cjwvc3ZnPg==");font-size: 0;}


/* Responsive design - optimized breakpoints */
@media (max-width: 768px) {
    .popup-content {
        width: 95%;
    }

    .video-controls {
        padding: 30px 15px 15px;
    }

    .controls-buttons {
        gap: 10px;
    }

    .controls-buttons button {
        padding: 6px;
    }

    .btn-play {
        font-size: 20px;
    }

    .btn-rewind svg,
    .btn-forward svg {
        width: 20px;
        height: 20px;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .popupVideo {
        -webkit-transform: translateZ(0);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .popup-overlay,
    .video-controls,
    .replay-overlay,
    .spinner {
        animation: none;
        transition: none;
    }
}