/**
 * MadFlixAudio – Style v1.3
 */
/* ========== NAGŁÓWEK KATEGORII ========== */
.madflix-category-header {
    color: #e91e63;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(194,24,91,0.3);
    margin-bottom: 12px;
    font-family: sans-serif;
}

/* ========== GRID ALBUMÓW ========== */
.madflix-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 0;
}
.madflix-album-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}
.madflix-album-card:hover { background: rgba(255,255,255,0.09); }
.madflix-album-star {
    position: absolute; top: 4px; right: 6px;
    font-size: 22px; color: #000;
    text-shadow: 0 0 4px #fff; z-index: 5;
    line-height: 1; user-select: none;
}
.madflix-album-star.active { color: #ffcc00; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.madflix-album-cover {
    aspect-ratio: 1/1; background: #1e1e1e;
    border-radius: 6px; overflow: hidden; position: relative;
}
.madflix-album-cover img { width: 100%; height: 100%; object-fit: cover; }
.madflix-album-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; background: linear-gradient(135deg,#2a2a2a,#333);
}
.madflix-album-play-overlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.madflix-album-card:hover .madflix-album-play-overlay { opacity: 1; }
.madflix-album-name {
    font-size: 12px; font-weight: 600; color: #fff;
    margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.madflix-album-meta { font-size: 10px; color: #999; margin-top: 2px; }

/* ========== PRODUKT VIEW ========== */
.madflix-product-view { margin: 0; }
.madflix-product-cover {
    width: 200px; height: 200px; border-radius: 8px;
    overflow: hidden; margin: 0 auto 12px; background: #1e1e1e;
}
.madflix-product-cover img { width: 100%; height: 100%; object-fit: cover; }
.madflix-product-title {
    color: #ffcc00; font-size: 18px; font-weight: bold;
    text-align: center; margin: 0 0 16px; text-transform: uppercase;
}

/* ========== LISTA UTWORÓW ========== */
.madflix-tracks { display: flex; flex-direction: column; }
.madflix-track {
    display: flex; align-items: center;
    padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: background 0.1s;
}
.madflix-track:hover { background: rgba(255,255,255,0.04); }
.madflix-play-icon { color: #00e5a0; font-size: 15px; margin-right: 10px; flex-shrink: 0; user-select: none; }
/* --- IKONA PLAY/PAUSE AKTYWNA (różowe tło) --- */
.madflix-album-play-overlay.playing,
.madflix-play-icon.playing {
    background: #c2185b !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}
.madflix-heart {
    font-size: 19px; margin-right: 10px; flex-shrink: 0; color: #000;
    text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
    user-select: none;
}
.madflix-heart.active { color: #ff3333; }
.madflix-track-title {
    font-size: 14px; color: #fff; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ========== STREAM ========== */
.madflix-audio-stream .madflix-track {
    border: 1px solid rgba(194,24,91,0.3); border-radius: 6px;
    padding: 12px; background: rgba(194,24,91,0.05);
}
.madflix-audio-stream .madflix-play-icon { color: #e91e63; font-size: 18px; }

/* ========== DEMO LIMIT ========== */
.madflix-demo-limit {
    padding: 8px 12px; background: rgba(194,24,91,0.9);
    color: #fff; text-align: center; font-size: 12px; font-weight: 600;
    border-radius: 4px; margin-top: 8px;
}
.madflix-demo-limit a { color: #fff; text-decoration: underline; }