/* =============================================================================
   xplay-player-logo.css
   Add these rules to your theme's main stylesheet or a dedicated player CSS file.
   ============================================================================= */

/* Base logo wrapper — positioned inside the Video.js player */
.xplay-player-logo {
    position: absolute;
    z-index: 3;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    padding: 6px;
}

.xplay-player-logo img {
    display: block;
    max-width: 100%;
}

/* Hover brightens slightly */
.xplay-player-logo:hover {
    opacity: 1 !important;
}

/* ------------------------------------------------------------------
 * Position classes — matches player_logo_position theme option values
 * ------------------------------------------------------------------ */

/* Top row */
.xplay-logo-top-left {
    top: 10px;
    left: 10px;
}

.xplay-logo-top-center {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.xplay-logo-top-right {
    top: 10px;
    right: 10px;
}

/* Center */
.xplay-logo-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bottom row — offset from control bar */
.xplay-logo-bottom-left {
    bottom: 50px;
    left: 10px;
}

.xplay-logo-bottom-center {
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.xplay-logo-bottom-right {
    bottom: 50px;
    right: 10px;
}

/* Hide logo during ad playback (belt-and-suspenders alongside JS hide) */
.vjs-ad-playing .xplay-player-logo {
    display: none !important;
}

/* Hide when player controls are hidden in fullscreen */
.vjs-user-inactive.vjs-playing .xplay-player-logo {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.vjs-user-active .xplay-player-logo,
.vjs-paused .xplay-player-logo {
    transition: opacity 0.3s ease;
}