/* =========================
   TRACK CARD
========================= */

.track-card{
background:#2EA3B0;
padding:18px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:transform .2s ease, box-shadow .2s ease;
max-width:300px;
}

.track-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}


.jmf-track-card {
    background: #3DBED1;
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jmf-track-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.track-card img{
width:100%;
border-radius:10px;
margin-bottom:12px;
}

.track-card h3{
margin:10px 0;
font-size:20px !important;
color:#fff;
}

.track-card h3 a{
color:#fff;
text-decoration:none;
}

.track-card h3 a:hover{
text-decoration:underline;
}


/* title - audio */

.jmf-track-title a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
}

.jmf-track-title a:hover {
    text-decoration: underline;
}

.jmf-track-card audio {
    width: 100%;
    margin-top: 15px;
}


/* =========================
   AUDIO PLAYER
========================= */

.track-card audio{
width:100%;
margin-top:10px;
background:#C6EBF1;
border-radius:10px;
height:36px;
}

.track-card audio::-webkit-media-controls-panel{
background-color:#C6EBF1;
border-radius:10px;
}


/* =========================
   TRACK ACTION BUTTONS
========================= */

.track-more{
display:flex;
gap:10px;
margin-top:10px;
}

.track-more a{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
background:#F7941D;
color:#fff;
border-radius:6px;
text-decoration:none;
}

.track-more i{
font-size:14px;
color:#fff;
}

.track-more a:hover{
opacity:.85;
}

.jmf-add-mylist.in-list{
background:#71BF45;
}


/* =========================
   MY LIST REMOVE BUTTON
========================= */

.jmf-remove-mylist{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
background:#F7941D;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
  margin-top:10px;
}

.jmf-remove-mylist i{
font-size:14px;
}



/* =========================
   EMPTY STATE
========================= */

.jmf-empty-state{
text-align:center;
padding:60px 20px;
color:#666;
}

.jmf-empty-state h3{
font-size:20px;
margin-bottom:10px;
}


/* =========================
   TRACK PAGE
========================= */

.jmf-track{
max-width:800px;
margin:auto;
}

.jmf-track-image img{
max-width:100%;
border-radius:6px;
}

.jmf-track-player{
margin-top:20px;
}

.jmf-track-description{
margin-top:20px;
line-height:1.7;
}


/*.track-card{
max-width:320px;
margin:0 auto;
}*/


/* =========================
   PLAYLIST DROPDOWN - korjaukset - 20260315
========================= */

.jmf-playlist-add-wrap {
    position: relative;
    display: inline-block;
}

.jmf-playlist-dropdown {
    display: none;
    position: absolute;
    bottom: 42px;
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 9999;
    overflow: hidden;
}

.jmf-playlist-dropdown.open {
    display: block;
}

.jmf-playlist-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.jmf-playlist-dropdown-item:last-child {
    border-bottom: none;
}

.jmf-playlist-dropdown-item:hover {
    background: #C6EBF1;
    color: #333;
    text-decoration: none;
}

.jmf-playlist-dropdown-item.added {
    background: #71BF45;
    color: #fff;
}

.jmf-playlist-dropdown-item.added::after {
    content: " ✓";
    font-weight: 700;
    margin-left: 8px;
}

.jmf-playlist-dropdown-empty {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: #999;
    white-space: nowrap;
}
/* m. */
div.jmf-tracks div.track-grid div.track-card div.track-more div.jmf-playlist-add-wrap div.jmf-playlist-dropdown.open a.jmf-playlist-dropdown-item
{
width:100% !important;
}

.jmf-playlist-dropdown-item:hover {
  background: #71BF45 !important;
  color: #fff;
}