/* === Painel principal === */
.mywavplayer-container{
    position:relative;                /* - necessário p/ centralizar o botão */
    width:346px;
    min-height:166px;
    padding:10px 10px 18px;
    border-radius:10px;
    background:url("panel-bg.png") center/cover no-repeat;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0px;                         /* espaçamento geral */
    font-family:"Helvetica Neue",Arial,sans-serif;
}

/* === Ticker === */
.mywavplayer-filename-container{
    width:90%;
    height:28px;
	margin-top:10px;
	background:url("ticker-bg.png") center/cover no-repeat;
    border-radius:9px;
    overflow:hidden;
    padding:0 10px;
}
.mywavplayer-filename{
    line-height:28px;
    white-space:nowrap;
    font-size:14px;
    animation:mywavplayer-marquee 12s linear infinite;
    color:#21303e;
}

/* === Botão play/pause CENTRALIZADO === */
.mywavplayer-button{
    position:absolute;               /* ➜ flutuando */
    top:50%;                         /* centro vertical do painel */
    left:50%;                        /* centro horizontal */
    transform:translate(-50%,-50%);  /* ajuste fino para o centro exato */
    width:64px;
    height:64px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
}

/* === Barra de progresso – logo abaixo do botão */
.mywavplayer-progress-container{
    width:280px;
    height:6px;
    margin-top:88px;                 /* ↓ distância do topo → botão + espaço */
    position:relative;
    background:url("progress-bg.png") repeat-x;
    border-radius:3px;
    cursor:pointer;
}
.mywavplayer-progress-bar{
    position:absolute;
    top:0;left:0;
    height:100%;
    width:0%;
    background:url("progress-fill.png") repeat-x;
    border-radius:3px;
    transition:width .1s linear;
}

/* === Tempos – alinhados à direita, logo após a barra */
.mywavplayer-time-container{
    width:280px;
    display:flex;
    justify-content:flex-end;
    gap:4px;
    font-size:13px;
    font-weight:600;
    color:#21303e;
}

/* === Animação do ticker === */
@keyframes mywavplayer-marquee{
    0%  {transform:translateX(100%);}
    100%{transform:translateX(-100%);}
}