/* =============================================================================
   xplay-player-logo.css
   Responsive player logo overlay for Video.js
   ============================================================================= */

/* ------------------------------------------------------------------
 * Base logo wrapper
 * ------------------------------------------------------------------ */
.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%;
    /* Height is set inline via JS (cfg.logoSize) but capped here for safety */
    max-height: 60px;
}

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

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

.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;
}

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

/* Bottom positions — offset above the control bar (50px desktop) */
.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;
}

/* ------------------------------------------------------------------
 * Responsive — Tablet (max 768px)
 * Scale logo down, tighten spacing, reduce bottom offset
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .xplay-player-logo {
        padding: 4px;
    }

    .xplay-player-logo img {
        max-height: 40px; /* smaller on tablet */
    }

    /* Tighten edge spacing */
    .xplay-logo-top-left    { top: 6px;  left: 6px;  }
    .xplay-logo-top-center  { top: 6px;              }
    .xplay-logo-top-right   { top: 6px;  right: 6px; }

    /* Control bar is shorter on mobile — reduce bottom offset */
    .xplay-logo-bottom-left   { bottom: 40px; left: 6px;  }
    .xplay-logo-bottom-center { bottom: 40px;             }
    .xplay-logo-bottom-right  { bottom: 40px; right: 6px; }
}

/* ------------------------------------------------------------------
 * Responsive — Mobile (max 480px)
 * Further scale down, move to corner to avoid covering controls
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {

    .xplay-player-logo {
        padding: 3px;
    }

    .xplay-player-logo img {
        max-height: 24px; /* compact on small screens */
    }

    /* Keep tight to edges on small screens */
    .xplay-logo-top-left    { top: 4px;  left: 4px;  }
    .xplay-logo-top-center  { top: 4px;              }
    .xplay-logo-top-right   { top: 4px;  right: 4px; }

    .xplay-logo-bottom-left   { bottom: 36px; left: 4px;  }
    .xplay-logo-bottom-center { bottom: 36px;             }
    .xplay-logo-bottom-right  { bottom: 36px; right: 4px; }

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

/* ------------------------------------------------------------------
 * Ad playback — hide logo entirely (JS also handles this)
 * ------------------------------------------------------------------ */
.vjs-ad-playing .xplay-player-logo {
    display: none !important;
}

/* ------------------------------------------------------------------
 * Fullscreen — keep logo visible but fade when controls hide
 * ------------------------------------------------------------------ */
.vjs-user-inactive.vjs-playing .xplay-player-logo {
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

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

/* ------------------------------------------------------------------
 * Fullscreen — bump bottom offset back up since controls reappear
 * ------------------------------------------------------------------ */
.vjs-fullscreen .xplay-logo-bottom-left,
.vjs-fullscreen .xplay-logo-bottom-right,
.vjs-fullscreen .xplay-logo-bottom-center {
    bottom: 55px;
}