/*Lista de beats scrolleable y reproductor*/
.player-layout{
    flex-wrap:wrap;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
    align-items:flex-start;
    
}
/*==================================================
=                 PlayerContainer
==================================================*/
.container-brand{
    width: 25%;
    margin: auto;
    margin-top: -40px;
    margin-bottom: var(--space-xs);
}

.container-brand-2{
    width: 35%;
    margin:auto;
    margin-top: -40px;
    margin-bottom: -20px;
}

.running-container{
    justify-content: center;
    margin-top: 20px;
    display:flex;
}   

/*==================================================
=                 VOLUMEN..
==================================================*/
#volume-slider{
    appearance:none;
    -webkit-appearance:none;
    flex:1;
    height:5px;
    border-radius:var(--radius-md);
    cursor:pointer;
    background:var(--color-surface);
}

#volume-slider::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;
    width:9px;
    height:9px;
    border-radius:var(--radius-circle);
    background:rgba(215, 190, 190, 0.955);
    border: 0px solid var(--color-primary);
    box-shadow:0 0 10px var(--color-primary-hover);
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal) var(--ease-smooth);

    border-color: rgba(205, 188, 188, 0.928);
    
}

/*==================================================
=                 PLAYER
==================================================*/
/*Le da estilo al reproductor*/
.playlist{
    flex: 2.5;
    margin: auto;
    padding: var(--space-sm) var(--space-xl);
    line-height: var(--leading-heading);
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-slow) var(--ease-smooth),
        border-color var(--motion-normal) var(--ease-smooth);
    animation:heroFade 1.8s var(--ease-smooth);
}

.playlist:hover{
    box-shadow:  0px 10px 20px var(--color-shadow-red); 
}

.playlist p{
    font-size: var(--text-large);
    text-align:center;
    margin-bottom: -15px;
}

#visualizer{
    width:100%;
    height:110px;
    box-shadow:  var(--shadow-soft); 
    display:block;
    margin-top:var(--space-lg);
    margin-bottom: var(--space-md);
    border-radius:var(--radius-md);
    background:var(--color-background-visualizer);
    animation:heroFade 2.8s var(--ease-smooth);
}

/*Efectos y estilos de la barra de progreso del player*/
#running{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    height:4px;
    margin:0 0 var(--space-xl);
    background:var(--color-surface);
    cursor:pointer;
    animation:
        heroFade
        2.8s
        var(--ease-smooth);
}


#running::-webkit-slider-runnable-track{
    height:30px;
    border-radius:var(--radius-lg);
    background:transparent;
}

#running::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;
    margin-top: 10px;
    width:10px;
    height:10px;
    background:rgb(56,0,0);
    border-radius:var(--radius-lg);
    outline:1px solid;
    outline-color:rgba(226,202,202,.874);
    box-shadow:
        0 0 10px
        var(--color-primary);
    transition:
        transform
        var(--motion-fast)
        var(--ease-smooth);
}

#running::-moz-range-track{
    height:4px;
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}

#running::-webkit-slider-thumb:hover{
    transform: scale(1.15);
    background:var(--color-primary-soft);
}
#volume-slider::-webkit-slider-thumb:hover{
    transform:scale(1.15);
}

.keyboard-flash{
    animation: keyPress var(--motion-normal) var(--ease-smooth);
}

#extra-info{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transform:translateY(-8px);

    transition:

        max-height .45s ease,

        opacity .35s ease,

        transform .35s ease;

}

#extra-info.open{

    max-height:120px;

    opacity:1;

    transform:translateY(0);

}

.more-info-button button{

    background:none;

    border:none;
    font:inherit;
    color:var(--color-text-dark);
    margin-top: -20px;
    cursor:pointer;
    font-size: var(--text-body);
    

    transition:.3s;

}

.more-info-button button:hover{

    color:var(--color-primary-soft);

}

.moreinfo {
    margin-top: -30px;
    letter-spacing:var(--tracking-wide);
    animation:heroFade 2.8s var(--ease-smooth);
}

.moreinfo ul{
    list-style: none;
    text-align:center;
    padding: var(--space-xl); 
}

#Price{
    margin-top: var(--space-xs);
    color: var(--color-primary-light);
    margin-bottom: -8px;
}
#Duration{
    margin-bottom: -15px;
    margin-top: -20px;
}
#Chord, #BPM, #TypeBeat{
    color: var(--color-text-dark)
}
.active-beat .playing-indicator{
    opacity: 60%;
}

/*==================================================
=                 Buttons Player
==================================================*/
#mute-button:hover{
    transform:scale(0.90);
}

#mute-button{
    appearance:none;
    -webkit-appearance:none;
    flex:1;
    cursor:pointer;
    background:transparent;
    border: 0;
    outline: 0;
    transition:
        all var(--motion-fast) var(--ease-smooth);
}

.control button{
    width:45px;
    height:45px;
    aspect-ratio: 1/1;
    margin: var(--space-sm);
    background:var(--glass-bg-strong);
    border-radius: var(--radius-circle);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    outline: 0;
    font-size: var(--text-h3);
    box-shadow: 0px 0px 18px var(--color-text-secondary);
    cursor: pointer;
    transition:
        all var(--motion-normal) var(--ease-smooth),
        background var(--motion-normal),
        color var(--motion-normal),
        border-color var(--motion-normal),
        box-shadow var(--motion-normal),
        transform var(--motion-normal);
    
}

.active-control.active-control{
    transform: scale(0.8);
    box-shadow: 0px 0px 18px var(--color-primary-hover);
    color: var(--color-primary-light);
    border-color: var(--color-primary);
    background-color: var(--color-active-button); 
    
}



#controlicon{
    scale:1.5;
}

#repeat-button, #shuffle-button{
        margin-top: 20px;
        margin-right: -5px;
        margin-left: -5px;
        transform: scale(0.75);
}



.mute-flash{
    animation: keyPressMute var(--motion-normal) var(--ease-smooth); 
}

.sect a{
    transition: all var(--motion-normal) var(--ease-smooth);
    font-size: calc(var(--text-h3) +  2px);
    text-shadow: 2px 2px 6px var(--color-primary-hover);
    display: inline-block;
}

.sect a:hover{
    color: var(--color-text);
    font-weight: var(--weight-bold);
}

/*==================================================
=                 Playlist Container
==================================================*/
#beatlistcontainer {
    margin:auto;
    width: 95%;
}

#beatlistcontainer li{
    align-items: center;
    border-radius: var(--radius-sm);
    background-color: var(--glass-bg-strong);
    width: 100%;
    transition: all 0.2s linear;
    padding-bottom: var(--space-xs);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    display: flex;
    margin-top: 5px;
}

/*==================================================
=                 RESET
==================================================*/
.beatlist p, #beatlistcontainer li {
    opacity: 0.6;
}

/*==================================================
=                BEATLIST
==================================================*/
.beatlist{
    padding: var(--space-sm) var(--space-xl);
    line-height: 1.6;
    flex: 4.7;
    height: 100%;
    margin-bottom: var(--space-md);
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-slow) var(--ease-smooth),
        border-color var(--motion-normal) var(--ease-smooth);
    animation:heroFade 1.8s ease;
}

.beatlist:hover{
    box-shadow:  0px 10px 20px var(--color-shadow-red);
}

.beatlistcontrol {
    background: var(--color-surface-dark);
    border-radius: var(--radius-lg);
    height: 400px;
    line-height: var(--leading-body);
    overflow-y: auto;
    margin: var(--space-md) 0 var(--space-md);
    padding: var(--space-xs);
}

/* Estiliza el listado para el efecto neon 
de luz roja al pasar el mouse*/
.active-beat {
    border-color: var(--color-primary);
    background-color: var(--color-active-button);
    opacity: 100%;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 0 10px var(--color-shadow-red);
    transform: scale(1.018);
}

.playing-indicator{
    width:18px;
    height:18px;
    align-items:center;
    display:flex;
    justify-content:space-between;
    margin-right:var(--space-sm);
    opacity:0;
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal) var(--ease-smooth);

}
.playing-indicator span{
    width: 6px;
    height:95%;
    background:var(--color-primary-light);

    border-radius:var(--radius-sm);
    transform-origin:bottom;
    transform:scaleY(.15);
}



.playlist-item{
    display:grid;
    grid-template-columns:
        200px
        minmax(0, 1fr)
        55px
        70px
        80px;
    align-items:center;
    gap:var(--space-lg);
    width:100%;
    min-width:0;
}

.playlist-title{
    min-width:0;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.playlist-bpm, .playlist-keychord{
    margin-left: 0;
    text-align:center;
    color:var(--color-text-secondary);
    font-size:var(--text-large);
}

.playlist-price{
    margin-left: 0;
    text-align:right;
    white-space:nowrap;
    color:var(--color-primary-light);
    font-weight:var(--weight-bold);
    font-size: var(--text-h3);
}

/*==================================================
=                 SCROLLBAR
==================================================*/
.beatlistcontrol::-webkit-scrollbar, 
.beatlistcontrol::-webkit-scrollbar-button{
    border-radius: var(--radius-lg);
    width: 10px;
    
}
.beatlistcontrol::-webkit-scrollbar-thumb{
    background-color:var(--color-card);
    border-radius: var(--radius-lg);
   
}

/*==================================================
=                 SKELETON LOADING..
==================================================*/
.playlist-skeleton{
    height: 2px;
    margin:var(--space-sm) 0;
    border-radius:var(--radius-xl);

    background: linear-gradient(
        90deg,
        #212121 25%,
        #790707 50%,
        #1c1c1c 75%
    );

    background-size:400% 200%;
    animation: skeleton-loading 2.5s infinite linear;
}

#beatlistcontainer li:hover{
    border-radius: var(--radius-sm);
    cursor: pointer;  
    box-shadow: 0px 0px 5px var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.016);
    opacity: 100%;
    filter: blur(0.65px);
}

.active-beat
.playing-indicator span{

    animation:equalizer var(--motion-upperslow) ease-in-out infinite;

}

.active-beat
.playing-indicator span:nth-child(2){

    animation-delay:var(--motion-fast);

}

.active-beat
.playing-indicator span:nth-child(3){

    animation-delay:var(--motion-normal);

}
.beatlistcontrol::-webkit-scrollbar-thumb:hover{
    border-color:var(--color-card);
    background:var(--color-primary-soft);
    opacity: 100%;
}

/*==================================================
=                SEARCH
==================================================*/
.search-container input:focus{
    border-color: var(--color-shadow-red);
    box-shadow:
        0 0 10px var(--color-shadow-red);
    background:rgba(92, 51, 51, 0.36);
}

.search-container{
    margin:var(--space-md) 0;
}

.search-container input{
    width: 100%;
    height: 45px;
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text);
    outline:none;
    backdrop-filter:blur(var(--footer-blur));
    -webkit-backdrop-filter:blur(var(--footer-blur));
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal) var(--ease-smooth);
    box-sizing:border-box;
}

.search-container input::placeholder{
    color:var(--glass-highlight);
}

.filters-container{
    display:grid;
    width:100%;
    grid-template-columns:
        120px
        1fr
        140px;
    gap:var(--space-md);
}

.filters-container select{
    height:42px;
    padding:0 var(--space-md);
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--glass-bg-strong);
    color:var(--color-text);
    backdrop-filter:blur(var(--footer-blur));
    -webkit-backdrop-filter: blur(var(--footer-blur));
    cursor:pointer;
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal) var(--ease-smooth);
    appearance:none;
}

.filters-container select:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 18px var(--color-primary);
}

.filters-container option{
    background:var(--color-background);
    color:var(--color-text);
}

.filters-container select:hover{
    border-color:var(--color-primary);
    box-shadow:0 0 12px var(--color-primary-soft);
}

/*==================================================
=               Volumen Container
==================================================*/
.volume-container{
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    width: 150px;
    margin-top:var(--space-sm) ;
    animation:heroFade 2.8s var(--ease-smooth);
}

.volume-container i{
    color:var(--color-text-secondary);
    font-size:var(--text-large);
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal) var(--ease-smooth);
}