/**
 * BOTSAUTO Plyr Audio Player Custom Styling
 * 
 * Maps BOTSAUTO Opmaak CSS variables to Plyr player components
 * for full styling control via admin panel settings.
 */

/* Ensure Plyr player inherits container styling */
.botsauto-audio-player .plyr {
    /* Use BOTSAUTO CSS variables for all colors */
    --plyr-color-main: var(--ba-audio-control-fill, #007cba);
    --plyr-audio-controls-background: var(--ba-audio-control-bg, #ffffff);
    --plyr-audio-control-color: var(--ba-audio-text, #333333);
    --plyr-audio-progress-buffered-background: var(--ba-audio-control-track, #007cba);
    --plyr-audio-range-track-background: var(--ba-audio-control-track, #007cba);
    --plyr-audio-range-thumb-background: var(--ba-audio-control-fill, #007cba);
    --plyr-menu-background: var(--ba-audio-control-bg, #ffffff);
    --plyr-menu-color: var(--ba-audio-text, #333333);
    --plyr-tooltip-background: var(--ba-audio-control-bg, #ffffff);
    --plyr-tooltip-color: var(--ba-audio-text, #333333);
    
    /* Border and shadow from container */
    border-radius: 6px;
    overflow: hidden;
    margin: 0; /* Let parent container handle spacing */
}

/* Audio Controls Bar Spacing - Controlled via Opmaak settings */
.botsauto-audio-player .plyr__controls {
    margin-top: var(--ba-audio-controls-margin-top, 0);
    margin-bottom: var(--ba-audio-controls-margin-bottom, 0);
    padding-top: var(--ba-audio-controls-padding-top, 0.25rem);
    padding-bottom: var(--ba-audio-controls-padding-bottom, 0.25rem);
}

/* Play button styling */
.botsauto-audio-player .plyr__control--overlaid {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player .plyr__control--overlaid:hover,
.botsauto-audio-player .plyr__control--overlaid:focus {
    background: var(--ba-audio-control-fill, #007cba);
    opacity: 0.9;
}

/* Control buttons (play, pause, mute, etc.) */
.botsauto-audio-player .plyr__control {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
    border-radius: 9999px;
}

.botsauto-audio-player .plyr__control:hover,
.botsauto-audio-player .plyr__control[aria-expanded="true"] {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
}

/* Ensure inner SVG icons inherit text color */
.botsauto-audio-player .plyr__control svg {
    fill: var(--ba-audio-text, #333333);
}

/* Progress bar - sleek line with only visible thumb */
.botsauto-audio-player .plyr__progress {
    background: transparent !important; /* hide any blocky bar */
}

/* Keep Plyr's internal line colors driven by Opmaak */
.botsauto-audio-player .plyr__progress--played,
.botsauto-audio-player .plyr__progress__played,
.botsauto-audio-player .plyr__progress__marker {
    background: var(--ba-audio-control-fill, #007cba);
}

.botsauto-audio-player .plyr__progress--buffer,
.botsauto-audio-player .plyr__progress__buffer {
    background: var(--ba-audio-control-track, #007cba);
    opacity: 0.3;
}

/* General: hide the browser track, show only thumb */
.botsauto-audio-player .plyr__progress input[type="range"] {
    background: none !important;
    height: 16px;
    margin: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--ba-audio-control-fill, #007cba);
}

/* Chrome, Safari, Edge (Webkit) */
.botsauto-audio-player .plyr__progress input[type="range"]::-webkit-slider-runnable-track {
    background: transparent !important;
    height: 6px !important;
    border-radius: 3px;
    box-shadow: none;
}

.botsauto-audio-player .plyr__progress input[type="range"]::-webkit-slider-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    margin-top: -4px; /* vertically center */
    cursor: pointer;
    -webkit-appearance: none;
}

/* Firefox */
.botsauto-audio-player .plyr__progress input[type="range"]::-moz-range-track {
    background: transparent !important;
    height: 6px;
    border-radius: 3px;
}

.botsauto-audio-player .plyr__progress input[type="range"]::-moz-range-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    cursor: pointer;
}

/* IE/Edge */
.botsauto-audio-player .plyr__progress input[type="range"]::-ms-fill-lower,
.botsauto-audio-player .plyr__progress input[type="range"]::-ms-fill-upper {
    background: transparent !important;
}

.botsauto-audio-player .plyr__progress input[type="range"]::-ms-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    cursor: pointer;
}

.botsauto-audio-player .plyr__progress input[type="range"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--ba-audio-control-fill, #007cba);
}

.botsauto-audio-player .plyr__progress input[type="range"]::-ms-tooltip {
    display: none;
}

/* Volume control */
.botsauto-audio-player .plyr__volume {
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player .plyr__volume__progress {
    background: var(--ba-audio-control-fill, #007cba);
}

/* Time display */
.botsauto-audio-player .plyr__time {
    color: var(--ba-audio-text, #333333);
}

/* Settings menu */
.botsauto-audio-player .plyr__menu {
    background: var(--ba-audio-control-bg, #ffffff);
    border: 1px solid var(--ba-audio-border, #cccccc);
    box-shadow: 0 2px 8px var(--ba-audio-shadow, rgba(0,0,0,0.1));
}

.botsauto-audio-player .plyr__menu__container {
    background: var(--ba-audio-control-bg, #ffffff);
}

.botsauto-audio-player .plyr__menu__value {
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player .plyr__menu__container button {
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player .plyr__menu__container button:hover,
.botsauto-audio-player .plyr__menu__container button[aria-checked="true"] {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
}

/* Tooltip styling */
.botsauto-audio-player .plyr__tooltip {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
    border: 1px solid var(--ba-audio-border, #cccccc);
}

/* Range input (volume, progress) */
.botsauto-audio-player .plyr__control input[type="range"] {
    color: var(--ba-audio-control-fill, #007cba);
}

.botsauto-audio-player .plyr__control input[type="range"]::-webkit-slider-runnable-track {
    background: var(--ba-audio-control-track, #007cba);
}

.botsauto-audio-player .plyr__control input[type="range"]::-webkit-slider-thumb {
    background: var(--ba-audio-control-fill, #007cba);
}

.botsauto-audio-player .plyr__control input[type="range"]::-moz-range-track {
    background: var(--ba-audio-control-track, #007cba);
}

.botsauto-audio-player .plyr__control input[type="range"]::-moz-range-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: none;
}

/* Explicit volume slider styling (outside of button) */
.botsauto-audio-player input[data-plyr="volume"] {
    color: var(--ba-audio-control-fill, #007cba);
}

/* WebKit */
.botsauto-audio-player input[data-plyr="volume"]::-webkit-slider-runnable-track {
    background: var(--ba-audio-control-track, #007cba);
}
.botsauto-audio-player input[data-plyr="volume"]::-webkit-slider-thumb {
    background: var(--ba-audio-control-fill, #007cba);
}

/* Firefox */
.botsauto-audio-player input[data-plyr="volume"]::-moz-range-track {
    background: var(--ba-audio-control-track, #007cba);
}
.botsauto-audio-player input[data-plyr="volume"]::-moz-range-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: none;
}

/* Edge/IE */
.botsauto-audio-player input[data-plyr="volume"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.botsauto-audio-player input[data-plyr="volume"]::-ms-fill-lower {
    background: var(--ba-audio-control-fill, #007cba);
}
.botsauto-audio-player input[data-plyr="volume"]::-ms-fill-upper {
    background: var(--ba-audio-control-track, #007cba);
}

/* Also style by container class */
.botsauto-audio-player .plyr__volume input[type="range"]::-webkit-slider-runnable-track {
    background: var(--ba-audio-control-track, #007cba);
}
.botsauto-audio-player .plyr__volume input[type="range"]::-webkit-slider-thumb {
    background: var(--ba-audio-control-fill, #007cba);
}
.botsauto-audio-player .plyr__volume input[type="range"]::-moz-range-track {
    background: var(--ba-audio-control-track, #007cba);
}
.botsauto-audio-player .plyr__volume input[type="range"]::-moz-range-thumb {
    background: var(--ba-audio-control-fill, #007cba);
    border: none;
}

/* Focus states for accessibility */
.botsauto-audio-player .plyr__control:focus {
    outline: 2px solid var(--ba-audio-control-fill, #007cba);
    outline-offset: 2px;
}

/* Fullscreen button */
.botsauto-audio-player .plyr__control[data-plyr="fullscreen"] {
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player .plyr__control[data-plyr="fullscreen"]:hover {
    background: var(--ba-audio-control-fill, #007cba);
    color: var(--ba-audio-text, #333333);
}

/* Ensure audio element itself is hidden when Plyr is active */
.botsauto-audio-player .botsauto-plyr-audio:not([controls]) {
    display: none;
}

/* Fallback: Show native controls if Plyr fails to initialize */
.botsauto-audio-player .botsauto-plyr-audio[controls] {
    display: block;
    width: 100%;
    outline: none;
    background-color: var(--ba-audio-control-bg, #ffffff);
}

/* Ensure Plyr container matches BOTSAUTO styling */
.botsauto-audio-player .plyr--audio {
    background: transparent;
    border-radius: 6px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .botsauto-audio-player .plyr__controls {
        /* Preserve vertical padding from Opmaak settings, only adjust horizontal */
        padding-left: 8px;
        padding-right: 8px;
        /* margin-top/bottom and padding-top/bottom are controlled via CSS variables */
    }
    
    .botsauto-audio-player .plyr__time {
        font-size: 0.85em;
    }
}

/* Fallback: ensure settings button/menu never show on BOTSAUTO audio player */
.botsauto-audio-player .plyr__control[data-plyr="settings"],
.botsauto-audio-player .plyr__menu__container {
    display: none !important;
}