/* ==========================================================================
   PLUGIN: VMusic Track Player - Estilos Completos
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOTÓN DE PORTADA (PLAY GIGANTE)
   -------------------------------------------------------------------------- */
   .vmc-cover-as-play { 
    position: relative; 
    display: block; 
}

.vmc-cover-as-play .vmc-cover-play {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    width: 80px; 
    height: 80px; 
    display: grid; 
    place-items: center; 
    gap: 10px;
    border-radius: 50%; 
    background: rgba(0, 0, 0, .6); 
    color: #fff; 
    cursor: pointer;
    z-index: 10; 
    pointer-events: auto; 
    transition: transform .15s ease, background .2s ease;
    border: 2px solid rgba(255, 255, 255, .4);
}

.vmc-cover-as-play .vmc-cover-play:hover { 
    transform: translate(-50%, -50%) scale(1.1); 
    background: rgba(0, 0, 0, .8); 
}

/* Triángulo de Play (CSS puro) */
.vmc-cover-as-play .vmc-icon { 
    width: 0; 
    height: 0; 
    border-left: 20px solid #fff; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    margin-left: 4px; 
    display: inline-block; 
}

/* Estado Reproduciendo (Cuadrado/Pause visual en el botón grande) */
.vmc-cover-as-play .vmc-cover-play.is-playing .vmc-icon { 
    width: 18px; 
    height: 18px; 
    border: 0; 
    background: #fff; 
    border-radius: 2px; 
    margin-left: 0; 
    /* Si prefieres dos barras en el grande también, avísame, 
       por ahora es un cuadrado de "Stop" */
}

.vmc-cover-as-play .vmc-label { 
    display: none; 
} 

/* --------------------------------------------------------------------------
   2. LIMPIEZA DEL THEME (OCULTAR ELEMENTOS VIEJOS)
   -------------------------------------------------------------------------- */
.custompost-single .custompost_thumb .hover_type,
.custompost-single .custompost_thumb .hoverimage,
.custompost-single .custompost_thumb .imgoverlay { 
    display: none !important; 
}

/* --------------------------------------------------------------------------
   3. LISTA DE CANCIONES (HOVER Y ESTILOS DE TEXTO)
   -------------------------------------------------------------------------- */

/* Forzar cursor de mano para indicar que es clicable */
.album-playlist li, 
.album-playlist .track-title, 
.fap-single-track {
    cursor: pointer !important;
}

/* Alineación del título y el icono */
.track-title {
    display: inline-block;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.fap-single-track {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; 
    text-decoration: none;
}

/* === HOVER EFFECT === */
/* Al pasar el mouse por la fila o el título: Subrayado + Texto Blanco */
.album-playlist li:hover .track-title,
.album-playlist li:hover a.fap-single-track,
.track-title:hover {
    text-decoration: underline !important;
    color: #ffffff !important; /* Forzamos blanco, NO rojo */
}

/* --------------------------------------------------------------------------
   4. ICONO PLAY / PAUSE EN LA LISTA (CAMBIO DINÁMICO)
   -------------------------------------------------------------------------- */

/* Estado NORMAL (Play) */
.fap-single-track .ivaplay {
    display: inline-block;
    transition: all 0.1s;
}

/* Estado REPRODUCIENDO (Transformación a Pause || ) */
/* Se activa cuando JS agrega la clase .is-playing */
.fap-single-track.is-playing .ivaplay {
    background: none !important; 
    width: 12px;      
    height: 14px;     
    content: "";      
    
    /* Dibujar las dos barras verticales */
    border-left: 4px solid #c21313;  /* Rojo Vintage */
    border-right: 4px solid #c21313; 
    border-top: 0;
    border-bottom: 0;
    
    background-color: transparent; 
    box-sizing: border-box;
    border-radius: 0; 
    margin-right: 2px; 
    transform: scale(0.9); 
}

/* Ocultar iconos de fuente (FontAwesome) si el theme los usa */
.fap-single-track.is-playing .ivaplay::before {
    display: none !important;
    content: "" !important;
}

/* --------------------------------------------------------------------------
   5. MODAL POPUP (PAYWALL)
   -------------------------------------------------------------------------- */
#vmtp-paywall-modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.85); 
    z-index: 999999;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.vmtp-modal-content {
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    text-align: center;
    max-width: 400px; 
    width: 90%; 
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    color: #333; /* Texto negro dentro del modal blanco */
}

.vmtp-modal-close {
    position: absolute; 
    top: 10px; 
    right: 15px; 
    background: transparent; 
    border: none;
    font-size: 24px; 
    cursor: pointer; 
    color: #333;
}

.vmtp-btn-pay {
    display: inline-block; 
    margin-top: 15px; 
    padding: 10px 20px;
    background: #c21313; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.2s;
}

.vmtp-btn-pay:hover { 
    background: #a00f0f; 
    color: #fff; 
}