/* Custom Video.js skin */
.video-js {
    font-family: 'Arial', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative; /* For gradient effect */
}

/* Gradient effect on video load */
.video-js::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle at center, 
        rgba(255, 42, 109, 0.3) 0%, 
        rgba(255, 42, 109, 0.15) 30%, 
        rgba(184, 0, 107, 0.1) 50%, 
        rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
    animation: fadeInGradient 1.5s ease-out;
}

@keyframes fadeInGradient {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.video-js .vjs-control-bar {
    background-color: rgba(255, 42, 109, 0.15); /* Dark pink with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 48px; /* Reasonable height */
    border-radius: 0 0 16px 16px;
    border-top: 1px solid rgba(255, 110, 199, 0.3);
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background-color: #FF2A6D; /* Neon pink */
}

.video-js .vjs-load-progress {
    background-color: rgba(255, 42, 109, 0.2); /* Pink tinted */
}

.video-js .vjs-control {
    width: 36px; /* Smaller, reasonable size */
    height: 36px;
    line-height: 36px;
    font-size: 1.2em;
}

.video-js .vjs-play-control,
.video-js .vjs-volume-panel,
.video-js .vjs-fullscreen-control,
.video-js .vjs-playback-rate,
.vjs-skip-backward-30,
.vjs-skip-forward-30 {
    color: rgba(255, 255, 255, 0.9);
}

.video-js .vjs-play-control:hover,
.video-js .vjs-volume-panel:hover,
.video-js .vjs-fullscreen-control:hover,
.video-js .vjs-playback-rate:hover,
.vjs-skip-backward-30:hover,
.vjs-skip-forward-30:hover {
    color: #FF2A6D; /* Pink on hover */
    background-color: rgba(255, 42, 109, 0.2);
    border-radius: 4px;
}

.video-js .vjs-progress-control .vjs-progress-holder {
    height: 8px; /* Thinner progress bar */
    margin-top: 19px;
}

.video-js .vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.4em; /* Reasonable icon size */
    line-height: 36px;
}

.video-js .vjs-time-tooltip,
.video-js .vjs-progress-tooltip {
    background-color: rgba(255, 42, 109, 0.9);
    color: #fff;
    backdrop-filter: blur(5px);
}

/* Skip button custom styling */
.vjs-skip-backward-30 .vjs-icon-placeholder:before,
.vjs-skip-forward-30 .vjs-icon-placeholder:before {
    font-size: 1.2em;
}

/* Hide unneeded controls */
.video-js .vjs-text-track-display,
.video-js .vjs-captions-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-audio-button,
.video-js .vjs-chapters-button,
.video-js .vjs-descriptions-button {
    display: none !important;
}

.playback-error {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    max-width: 80vw;
    margin: 1rem auto;
    padding: 0.75rem 1rem;
    color: #fff;
    background: rgba(120, 20, 60, 0.9);
    border: 1px solid rgba(255, 110, 199, 0.6);
    border-radius: 8px;
}

.playback-error[hidden] {
    display: none !important;
}

.playback-error a {
    color: #fff;
    font-weight: 600;
}

/* The player box dimensions are computed in JS (see video-player.html) to fit
   the viewport at the video's native aspect ratio, so no per-orientation
   overrides are needed here. */