/* PLAYER - ÜMUMİ DƏYİŞİKLİKLƏR (Tailwind Flexbox ilə uyğunlaşdırma)
----------------------------------------------- */

/* 1. Proqres Çubuğunu (Progress Bar) yuxarıda tam enə yığışdırmaq */
.wplayer {
    /* Əsas konteynerdir, buna görə progress barı içində absolut yerləşdirə bilərik */
    position: fixed; 
    left: 0; 
    bottom: 0; 
    z-index: 997; 
    /* Köhnə background-color: #3A4959; - Tailwind class-ı (bg-gray-900) istifadə edir */
}

/* 2. Əsas audioplayer flex konteynerini təmizləmək */
/* Tailwind sinifləri (flex items-center gap-3) bu elementə tətbiq olunub, köhnə CSS-i sıfırlayırıq */
.audioplayer {
    max-width: 1080px;
    width: 100%; /* calc(100% - 40px) yerinə sadəcə 100% qalsın */
    margin: 0 auto;
    height: 70px;
    /* Əsas Flex konteynerinin daxilindəki elementləri mərkəzləşdirir */
    display: flex; 
    align-items: center;
    justify-content: space-between; /* Elementləri 3 hissəyə ayırmaq üçün */
}

/* 3. Proqres Çubuğu: Yuxarıda tam enə uzatmaq */
.audioplayer-bar {
    /* Köhnə: position: relative; width: 600px; margin-left: 20px; */
    position: absolute; 
    left: 0; 
    top: 0; /* Artıq -6px deyil, yəni .wplayer-in yuxarı sərhəddində */
    height: 4px; /* Daha nazik */
    width: 100%; /* Tam eni tutur */
    margin: 0;
    z-index: 998;

    border-radius: 0;
}
/* Progress bar daxilindəki oynanmış/yüklənmiş hissələri sıfırlayır */
.audioplayer-bar-loaded,
.audioplayer-bar-played {
    height: 100%;
    border-radius: 0;
}
/* Progress barın sonunda görünən dairəvi 'thumb' */
.audioplayer-bar-played:before {
    content: ''; 
    background-color: #57A8FF; 
    width: 12px; /* Kiçik ölçü */
    height: 12px; 
    border-radius: 50%;
    position: absolute; 
    right: -6px; /* Yarısı kənarda qalsın */
    top: 50%; 
    margin-top: -6px; /* Yuxarıya doğru mərkəzləşdirmə */
    z-index: 3;
}

/* 4. Vaxt göstəricilərini təmizləmək */
/* Vaxt elementləri HTML-də .text-xs .text-gray-400 Tailwind siniflərini istifadə edir. */
.ap-time,
.audioplayer-time {
    /* Köhnə margin-left: 20px; Flexbox-da gap ilə əvəz olunmalıdır, ləğv edirik. */
    margin-left: 0; 
    font-size: 14px; /* Daha oxunaqlı */
    color: #A3B4C6;
}
.audioplayer-time-current:after {
    /* Vaxt elementləri arasına ayırıcı (/) */
    content: '/'; 
    display: inline; 
    margin: 0 4px; 
}


/* 5. Səs Səviyyəsi Nəzarətini (Volume Control) üfüqi (horizontal) etmək */
.audioplayer-volume {
    /* Köhnə margin-left: 20px; Flexbox-a görə ləğv edilir */
    margin-left: 0;
    position: relative;
    z-index: 100;
    display: flex; /* İkonu və çubuğu yan-yana qoyur */
    align-items: center;
    gap: 8px; /* İkon və çubuq arasındakı məsafə */
}


/* 6. Play/Pause düyməsini təmizləmək */
.audioplayer-playpause a {
    /* Köhnə: width: 40px; height: 40px; margin: 0 20px; */
    width: 40px; 
    height: 40px; 
    line-height: 40px;
    margin: 0; /* Flexbox aralıqları idarə etsin */
    border-radius: 20%; 
    background-color: #2C3C4D; 
    color: #57A8FF;
    font-size: 20px; /* Remixicon ölçüsü */
}

/* Qalan elementlərin (prev, next, dl, desc) Tailwind sinifləri ilə uyğunlaşması */
/* --- MAHNI MƏLUMATLARI VƏ ŞƏKİL KONTEYNERİNİN DÜZƏLİŞİ --- */

/* Mobil Ekranlar (Hidden tətbiq olunur, çünki default olaraq display: none !important verdik) */
.ap-desc {
    /* Köhnə stilləri ləğv etmək üçün default olaraq gizlədirik (Tailwind's hidden kimi) */
    display: none !important; 
}

/* Orta (Medium) Ekranlar və Yuxarı (768px) */
@media (min-width: 768px) {
    .ap-desc {
        /* Flexbox-u məcbur edirik. Bu, style="" ilə eyni prioriteti verir */
        display: flex !important; 
        
        /* Yan-yana görünüş üçün lazım olan Flex stilləri */
        align-items: center !important;
        flex-direction: row !important;
        
        /* Digər tənzimləmələr */
        width: auto !important; 
        min-width: 250px;
        gap: 12px;
    }
}

/* ŞƏKİL BLOKU */
.ap-img {
    flex-shrink: 0 !important; 
    width: 56px !important; 
    height: 56px !important; 
    margin-right: 0 !important; 
}

/* MƏLUMAT BLOKU (Title və Artist) */
.ap-info {
    /* Ad və İfaçının üst-üstə düşməsini təmin edirik */
    display: flex !important;
    flex-direction: column !important; 
    justify-content: center !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}

/* İFADI ADI */
.ap-artist {
    /* Köhnə margin-top: 5px; stilini ləğv edirik */
    margin-top: 2px !important; 
}