/* Fix video layout to prevent overlapping */
.video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Inherits border-radius from styles.css */
}

.video-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 240px;
    aspect-ratio: 21/9;
    max-width: 100%;
}

.video-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 100%;
    /* Removed border-radius here to let container handle it */
}

/* Ensure videos don't overlap by using proper grid layout */
.row.g-3 {
    gap: 1.5rem !important;
}

.col-lg-6 {
    position: relative;
    z-index: 1;
}

/* Remove any absolute positioning that might cause overlap */
.video-element, .video-wrapper, .video-container {
    position: relative !important;
}

/* Purple button styling - Kept for reference but styles.css handles it now */
.btn-purple {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border: none;
    color: white;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
}

/* Modern Full-Screen Countdown Overlay */
.countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.countdown-content {
    text-align: center;
    color: white;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.countdown-icon {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 2rem;
    animation: pulse 1s infinite;
    position: absolute;
    top: 20%;
}

.countdown-number {
    font-size: 8rem;
    font-weight: bold;
    color: #ffc107;
    text-shadow: 0 0 30px rgba(255, 193, 7, 0.5);
    margin: 0;
    line-height: 1;
    animation: countdownPulse 1s ease-in-out;

    /* Center absolutely */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.countdown-text {
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.8;
    position: absolute;
    bottom: 25%;
}

.countdown-progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.progress-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
}

/* Picture-in-Picture Camera Overlay Container */
/* Kept hidden as we use System PIP which pops the video out */
.pip-camera-overlay {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.pip-camera-overlay video {
    width: 100%;
    height: 100%;
}

/* Hide custom controls since we use System PIP */
.pip-camera-controls, .pip-camera-label {
    display: none;
}

@keyframes countdownPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}