/**
 * Vime Player Working CSS - Solução que funciona
 */

/* ====== REMOVER TODOS OS STYLES INLINE ====== */
.vime-yt-controls svg {
    /* Reset inline styles */
}

.vime-yt-controls svg[style] {
    display: revert !important;
}

/* ====== BIG PLAY BUTTON ====== */
.vime-yt-big-play {
    display: flex !important;
    width: 80px !important;
    height: 80px !important;
    background: var(--vime-player-accent, #6366f1) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.vime-yt-big-play svg {
    width: 40px !important;
    height: 40px !important;
    fill: white !important;
    margin-left: 5px !important;
}

/* Esconder big play quando está tocando */
.vime-yt-controls.is-playing ~ .vime-yt-big-play,
.is-playing .vime-yt-big-play,
.vime-yt-big-play[style*="display: none"] {
    display: none !important;
}

/* ====== CONTROLES DE ÍCONES ====== */

/* Tamanhos dos botões */
.vime-yt-controls button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: white !important;
    opacity: 0.9 !important;
}

.vime-yt-controls button:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.vime-yt-controls button svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

/* Play/Pause button maior */
.vime-yt-play-pause {
    width: 44px !important;
    height: 44px !important;
}

.vime-yt-play-pause svg {
    width: 28px !important;
    height: 28px !important;
}

/* ====== ESTADOS DOS ÍCONES - Play/Pause ====== */

/* Estado inicial - pausado */
.vime-yt-controls .vime-yt-play-pause .vime-yt-icon-play {
    display: block !important;
}

.vime-yt-controls .vime-yt-play-pause .vime-yt-icon-pause {
    display: none !important;
}

/* Estado tocando */
.vime-yt-controls.is-playing .vime-yt-play-pause .vime-yt-icon-play {
    display: none !important;
}

.vime-yt-controls.is-playing .vime-yt-play-pause .vime-yt-icon-pause {
    display: block !important;
}

/* ====== ESTADOS DOS ÍCONES - Volume/Mute ====== */

/* Estado inicial - com som */
.vime-yt-controls .vime-yt-mute .vime-yt-icon-volume-high {
    display: block !important;
}

.vime-yt-controls .vime-yt-mute .vime-yt-icon-volume-muted {
    display: none !important;
}

/* Estado mudo */
.vime-yt-controls.is-muted .vime-yt-mute .vime-yt-icon-volume-high {
    display: none !important;
}

.vime-yt-controls.is-muted .vime-yt-mute .vime-yt-icon-volume-muted {
    display: block !important;
}

/* ====== ESTADOS DOS ÍCONES - Fullscreen ====== */

/* Estado inicial - não fullscreen */
.vime-yt-controls .vime-yt-fullscreen .vime-yt-icon-fullscreen {
    display: block !important;
}

.vime-yt-controls .vime-yt-fullscreen .vime-yt-icon-fullscreen-exit {
    display: none !important;
}

/* Estado fullscreen */
.vime-yt-controls.is-fullscreen .vime-yt-fullscreen .vime-yt-icon-fullscreen {
    display: none !important;
}

.vime-yt-controls.is-fullscreen .vime-yt-fullscreen .vime-yt-icon-fullscreen-exit {
    display: block !important;
}

/* ====== OUTROS CONTROLES ====== */

/* Speed button */
.vime-yt-speed-button {
    width: auto !important;
    min-width: 50px !important;
    padding: 0 10px !important;
}

.vime-yt-speed-value {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Time display */
.vime-yt-time {
    font-size: 13px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
}

/* Loading */
.vime-yt-loading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
}

/* ====== RESPONSIVO ====== */
@media (max-width: 768px) {
    .vime-yt-controls button {
        width: 36px !important;
        height: 36px !important;
    }
    
    .vime-yt-controls button svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .vime-yt-play-pause {
        width: 40px !important;
        height: 40px !important;
    }
    
    .vime-yt-play-pause svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .vime-yt-big-play {
        width: 60px !important;
        height: 60px !important;
    }
    
    .vime-yt-big-play svg {
        width: 30px !important;
        height: 30px !important;
    }
}