/* ============================================================
   VOD AUDIO PLAYER — CSS
   ============================================================
   Lecteur audio custom intégré aux cards du Loop Grid.
   Forme d'onde réelle via Web Audio API + Canvas.
   Design cohérent avec vod-filters.css (DM Sans, --vod-primary).
   ============================================================ */

/* ── Conteneur principal du lecteur ────────────────────────── */
.vod-player {
    display         : flex;
    align-items     : center;
    gap             : 0.625rem;
    width           : 100%;
    padding         : 0.625rem 0.875rem;
    background      : #f8f6f2;
    border-top      : 1px solid #ebe7e0;
    font-family     : var(--vod-font, 'DM Sans', system-ui, sans-serif);
    position        : relative;
    box-sizing      : border-box;
}

/* ── Bouton Play/Pause ──────────────────────────────────────── */
.vod-player__play {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 44px !important;
    height          : 44px !important;
    flex-shrink     : 0;
    border-radius   : 50% !important;
    border          : none !important;
    background      : transparent !important;
    box-shadow      : none !important;
    color           : #f6ad17;
    cursor          : pointer;
    transition      : transform 0.18s ease, filter 0.18s ease;
    outline         : none !important;
    padding         : 0 !important;
    line-height     : 1;
}

.vod-player__play:hover {
    transform : scale(1.1);
    filter    : drop-shadow(0 2px 6px rgba(246, 173, 23, 0.50));
}

.vod-player__play:focus,
.vod-player__play:focus-visible {
    outline    : none !important;
    box-shadow : none !important;
}

.vod-player__play svg {
    width      : 44px;
    height     : 44px;
    flex-shrink: 0;
    display    : block;
}

/* Icône pause cachée par défaut */
.vod-player__play .icon-pause { display: none; }
.vod-player__play .icon-play  { display: block; }

/* En lecture */
.vod-player.is-playing .vod-player__play .icon-pause { display: block; }
.vod-player.is-playing .vod-player__play .icon-play  { display: none; }

/* ── Zone centrale : waveform + progress ───────────────────── */
.vod-player__center {
    flex        : 1;
    min-width   : 0;
    display     : flex;
    flex-direction : column;
    gap         : 3px;
    cursor      : pointer;
    position    : relative;
}

/* Canvas waveform */
.vod-player__canvas {
    display      : block;
    width        : 100%;
    height       : 36px;
    border-radius: 3px;
    /* Anti-aliasing */
    image-rendering : -webkit-optimize-contrast;
}

/* Barre de progression sous le canvas */
.vod-player__progress-wrap {
    position    : relative;
    height      : 2px;
    background  : #ddd9d1;
    border-radius: 2px;
    overflow    : hidden;
}

.vod-player__progress-fill {
    position    : absolute;
    left        : 0;
    top         : 0;
    height      : 100%;
    width       : 0%;
    background  : #f6ad17;
    border-radius: 2px;
    transition  : width 0.05s linear;
}

/* ── Temps ──────────────────────────────────────────────────── */
.vod-player__time {
    font-family  : var(--vod-font-mono, 'DM Mono', monospace);
    font-size    : 0.625rem;
    color        : var(--vod-text-muted, #8a8a9a);
    white-space  : nowrap;
    flex-shrink  : 0;
    letter-spacing: 0.03em;
    line-height  : 1;
    min-width    : 2.5rem;
    text-align   : right;
}

/* ── État chargement ────────────────────────────────────────── */
.vod-player.is-loading .vod-player__play {
    pointer-events : none;
}

.vod-player.is-loading .vod-player__play svg {
    opacity   : 0.45;
    animation : vod-player-spin 1.2s linear infinite;
}

@keyframes vod-player-spin {
    to { transform: rotate(360deg); }
}

/* ── État erreur ────────────────────────────────────────────── */
.vod-player.is-error .vod-player__canvas {
    opacity : 0.4;
}

.vod-player__error-msg {
    display    : none;
    font-size  : 0.625rem;
    color      : #1e73be;
    position   : absolute;
    bottom     : 2px;
    left       : 0;
}

.vod-player.is-error .vod-player__error-msg {
    display : block;
}

/* ── Intégration dans les cards Elementor Loop Grid ─────────── */

/* Remplace le placeholder audio existant */
.e-loop-item .vod-player {
    padding      : 0.5rem 1rem 0.625rem;
    background   : #f8f6f2;
    border-top   : 1px solid #ebe7e0;
    border-radius: 0 0 9px 9px;
}

/* Si le player est en haut de card (sans image) */
.e-loop-item .elementor-widget-shortcode:first-child .vod-player {
    border-radius : 0;
    border-top    : none;
    border-bottom : 1px solid #ebe7e0;
}

/* Hover card → léger brightening du player */
.e-loop-item > .e-con-boxed:hover .vod-player {
    background : #f4f1eb;
}

/* ── Player vide (pas de fichier audio) ─────────────────────── */
.vod-player--empty {
    height     : 54px;
    background : #f4f1eb;
    border-top : 1px solid #ebe7e0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .vod-player {
        gap     : 0.5rem;
        padding : 0.5rem 0.75rem;
    }

    .vod-player__play {
        width  : 30px;
        height : 30px;
    }

    .vod-player__canvas {
        height : 28px;
    }
}