/* ============================================================
   D'BARROSO MUSIC PLAYER — style.css
   ============================================================ */

/* ── Variáveis de cor ──────────────────────────────────────── */
.dbarroso-player {
    --db-bg:         #1a1a2e;
    --db-surface:    #16213e;
    --db-accent:     #e94560;
    --db-accent-2:   #0f3460;
    --db-text:       #ffffff;
    --db-muted:      #aaaaaa;
    --db-border:     #2a2a4a;
    --db-radius:     12px;
}

/* ── Container principal ───────────────────────────────────── */
.dbarroso-player {
    background:    var(--db-bg);
    color:         var(--db-text);
    border-radius: 20px;
    padding:       28px 24px;
    max-width:     620px;
    margin:        0 auto;
    font-family:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow:    0 12px 40px rgba(0, 0, 0, 0.5);
    user-select:   none;
}

.dbarroso-vazio {
    text-align: center;
    color: #888;
    padding: 20px;
    font-style: italic;
}

/* ── Info (capa + texto) ───────────────────────────────────── */
.dbarroso-info {
    display:       flex;
    align-items:   center;
    gap:           18px;
    margin-bottom: 22px;
}

.db-capa-wrap {
    position:      relative;
    flex-shrink:   0;
}

.dbarroso-info img#db-capa {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--db-accent);
    display:       block;
    transition:    transform 0.3s ease;
}

/* Animação de rotação quando tocando */
.dbarroso-info img#db-capa.tocando {
    animation: db-girar 8s linear infinite;
}
@keyframes db-girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.db-texto {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

#db-titulo {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--db-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

#db-artista {
    font-size: 0.9rem;
    color:     var(--db-accent);
}

.db-album-text {
    font-size:  0.8rem;
    color:      var(--db-muted);
    font-style: italic;
}

/* ── Barra de progresso ────────────────────────────────────── */
.db-progress-wrap {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  18px;
    font-size:      0.78rem;
    color:          var(--db-muted);
    font-variant-numeric: tabular-nums;
}

.db-progress-bar {
    flex:          1;
    height:        6px;
    background:    var(--db-border);
    border-radius: 10px;
    cursor:        pointer;
    position:      relative;
    overflow:      visible;
}

.db-progress-fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--db-accent-2), var(--db-accent));
    border-radius: 10px;
    width:         0%;
    transition:    width 0.2s linear;
    pointer-events: none;
}

.db-progress-thumb {
    position:      absolute;
    top:           50%;
    left:          0%;
    transform:     translate(-50%, -50%);
    width:         14px;
    height:        14px;
    background:    var(--db-accent);
    border-radius: 50%;
    box-shadow:    0 0 0 3px rgba(233, 69, 96, 0.3);
    opacity:       0;
    transition:    left 0.2s linear, opacity 0.2s;
    pointer-events: none;
}

.db-progress-bar:hover .db-progress-thumb {
    opacity: 1;
}

/* ── Controles de reprodução ───────────────────────────────── */
.db-controles {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-bottom:   22px;
    flex-wrap:       wrap;
}

.db-controles button {
    background:    var(--db-surface);
    color:         var(--db-text);
    border:        none;
    border-radius: 50px;
    padding:       9px 16px;
    font-size:     1.1rem;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s, box-shadow 0.2s;
    outline:       none;
    white-space:   nowrap;
}

.db-controles button:hover {
    background:  var(--db-accent);
    transform:   scale(1.06);
    box-shadow:  0 4px 12px rgba(233, 69, 96, 0.4);
}

.db-controles button:active {
    transform: scale(0.96);
}

.db-controles button.ativo {
    background: var(--db-accent);
}

#db-play-pause {
    font-size:  1.5rem;
    padding:    13px 24px;
    background: var(--db-accent);
    box-shadow: 0 4px 16px rgba(233, 69, 96, 0.4);
}

#db-play-pause:hover {
    background: #c73652;
}

/* Volume */
.db-volume-wrap {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.9rem;
    color:       var(--db-muted);
}

#db-volume {
    width:         80px;
    accent-color:  var(--db-accent);
    cursor:        pointer;
    height:        4px;
}

/* ── Botões de download ────────────────────────────────────── */
.db-downloads {
    display:       flex;
    gap:           12px;
    margin-bottom: 26px;
    flex-wrap:     wrap;
}

.db-btn-download {
    flex:           1;
    min-width:      140px;
    text-align:     center;
    padding:        13px 16px;
    border-radius:  var(--db-radius);
    font-size:      0.9rem;
    font-weight:    700;
    cursor:         pointer;
    text-decoration: none;
    transition:     opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    border:         none;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
}

.db-btn-download:hover:not(:disabled) {
    opacity:    0.88;
    transform:  translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.db-btn-download:active:not(:disabled) {
    transform: translateY(0);
}

.db-btn-individual {
    background: var(--db-accent-2);
    color:      #ffffff;
}

.db-btn-zip {
    background: var(--db-accent);
    color:      #ffffff;
}

.db-btn-download:disabled {
    opacity: 0.55;
    cursor:  wait;
}

/* ── Playlist ──────────────────────────────────────────────── */
.db-playlist h3 {
    font-size:      0.95rem;
    margin:         0 0 12px 0;
    color:          var(--db-accent);
    border-bottom:  1px solid var(--db-border);
    padding-bottom: 10px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.db-total {
    font-size:   0.8rem;
    color:       var(--db-muted);
    font-weight: 400;
}

#db-lista {
    list-style:  none;
    padding:     0;
    margin:      0;
    max-height:  300px;
    overflow-y:  auto;
    scrollbar-width: thin;
    scrollbar-color: var(--db-accent) var(--db-surface);
}

#db-lista::-webkit-scrollbar       { width: 5px; }
#db-lista::-webkit-scrollbar-track { background: var(--db-surface); border-radius: 4px; }
#db-lista::-webkit-scrollbar-thumb { background: var(--db-accent); border-radius: 4px; }

.db-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       9px 12px;
    border-radius: 8px;
    cursor:        pointer;
    transition:    background 0.2s;
    border:        1px solid transparent;
}

.db-item:hover {
    background: var(--db-surface);
    border-color: var(--db-border);
}

.db-item.ativa {
    background:   linear-gradient(90deg, var(--db-accent) 0%, #c73652 100%);
    border-color: transparent;
}

.db-item.ativa .db-num,
.db-item.ativa .db-item-artista {
    color: rgba(255, 255, 255, 0.75);
}

.db-num {
    color:     var(--db-muted);
    font-size: 0.8rem;
    min-width: 22px;
    text-align: right;
}

.db-item-capa {
    width:         34px;
    height:        34px;
    border-radius: 6px;
    object-fit:    cover;
    flex-shrink:   0;
}

.db-item-info {
    flex:          1;
    display:       flex;
    flex-direction: column;
    gap:           2px;
    min-width:     0;
}

.db-nome {
    font-size:     0.9rem;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.db-item-artista {
    font-size: 0.75rem;
    color:     var(--db-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.db-item-download {
    font-size:      1rem;
    text-decoration: none;
    opacity:        0.4;
    transition:     opacity 0.2s, transform 0.1s;
    flex-shrink:    0;
    padding:        4px;
    border-radius:  4px;
}

.db-item-download:hover {
    opacity:    1;
    transform:  scale(1.15);
    background: rgba(255,255,255,0.1);
}

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 500px) {
    .dbarroso-player {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .dbarroso-info img#db-capa {
        width:  70px;
        height: 70px;
    }

    #db-titulo {
        font-size: 1rem;
    }

    .db-controles {
        gap: 7px;
    }

    .db-controles button {
        padding:   8px 13px;
        font-size: 1rem;
    }

    #db-play-pause {
        font-size: 1.3rem;
        padding:   11px 20px;
    }

    .db-downloads {
        flex-direction: column;
    }

    #db-volume { width: 60px; }
}