/*
 SoundManager 2: In-page MP3 player example
 ------------------------------------------
 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the link, which are used to highlight the
 current play state and so on.
*/

/* =====================================================
   PODSTAWOWA STRUKTURA PLAYERA
   ===================================================== */

/* Kontener paska postepu - GLOWNY ELEMENT */
#track {
    display: block;
    width: 100%;
    height: 20px; /* ZWIEKSZONA WYSOKOSC */
    margin: 15px 0 20px 0;
    padding: 0;
    position: relative;
    background-color: transparent; /* Mozna zmienic np. na #f0f0f0 dla lepszej widocznosci obszaru */
    clear: both;
    cursor: pointer; /* Kursor wskazujacy klikalnosc */
}

/* Tlo paska postepu (loadbar) */
#track .loadbar {
    background: #d1d5db; /* Kolor tla paska ladowania */
    width: 100%; /* Pasek ladowania zawsze na 100% szerokosci kontenera #track */
    height: 10px; /* ZWIEKSZONA WYSOKOSC */
    border-radius: 5px; /* Zaokraglenie dla estetyki */
    position: absolute;
    top: 5px;    /* Wysrodkowanie w pionie: (wysokosc #track - wysokosc .loadbar) / 2 = (20px - 10px) / 2 */
    left: 0;
    z-index: 1; /* Pod spodem aktywnego paska */
    display: block; /* Upewniamy sie, ze jest blokowy, aby poprawnie zajac szerokosc */
    border: none;
}

/* Aktywny pasek postepu (player) */
#track .player {
    background: #111; /* Kolor aktywnego paska postepu */
    height: 10px; /* ZWIEKSZONA WYSOKOSC - taka sama jak .loadbar */
    border-radius: 5px; /* Takie samo zaokraglenie jak .loadbar */
    position: absolute;
    left: 0;
    top: 5px;     /* Takie samo pozycjonowanie jak .loadbar */
    z-index: 2; /* Nad paskiem ladowania */
    width: 0%; /* Poczatkowa szerokosc, zmieniana przez JS */
    display: inline-block; /* Zmieniono na inline-block dla lepszego dopasowania do zawartosci jesli szerokosc jest mala */
    transition: width 0.1s linear; /* Zmieniono na linear dla bardziej plynnego ruchu */
    pointer-events: none; /* Pozwala klikac przez pasek postepu do .loadbar ponizej */
    /* Usunieto 'display: inline;' - 'inline-block' jest bardziej odpowiednie dla elementu, ktoremu ustawiamy szerokosc i wysokosc */
}

/* Kropka na koncu paska postepu */
#track .player::after {
    content: '';
    position: absolute;
    right: -6px; /* Pozycjonowanie kropki wzgledem konca paska .player */
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* Nieco wieksza kropka */
    height: 12px;/* Nieco wieksza kropka */
    background: #111; /* Kolor kropki */
    border-radius: 50%;
    opacity: 0; /* Domyslnie ukryta */
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none; /* Kropka nie powinna przechwytywac klikniec */
    z-index: 3; /* Nad wszystkim innym w pasku */
}

/* Kropka widoczna gdy pasek ma szerokosc > 0 (i jest aktywny pulsowaniem) */
#track .player.pulsing-dot-active::after { /* Zmieniony selektor na klase dodawana przez JS */
    opacity: 1;
}

/* Efekt hover na calym pasku #track pokazuje kropke jesli jest aktywna */
#track:hover .player.pulsing-dot-active::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1); /* Lekkie powiekszenie przy hover */
}


/* =====================================================
   LISTA UTWOROW (ul.flat)
   ===================================================== */

ul.flat {
    text-align: left;
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 20px 0;
}

ul.flat li {
    list-style: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}

/* =====================================================
   STYLE LINKOW AUDIO (NOWOCZESNE)
   ===================================================== */

ul.flat a.sm2_link,
ul.flat a.sm2_playing,
ul.flat a.sm2_paused,
ul.flat a.inline-playable {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 1.1em;
    color: #222;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(50,50,93,0.04);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    font-weight: 500;
    border: none;
}

/* Stany hover */
ul.flat a.sm2_link:hover,
ul.flat a.inline-playable:hover {
    background: #e0e2e7; /* Lekko zmieniony kolor hover dla lepszego kontrastu */
    color: #1a1a2e;
    text-decoration: none;
}

/* Stan odtwarzania */
ul.flat a.sm2_playing {
    background: #3e54a3;
    color: #fff;
    box-shadow: 0 4px 16px rgba(60,80,190,0.07);
}

ul.flat a.sm2_playing:hover {
    background: #35488e; /* Ciemniejszy odcien przy hover na aktywnym */
    color: #e2e8f0;
}

/* Stan pauzy */
ul.flat a.sm2_paused {
    background: #ece9ff;
    color: #333;
    border: 1px dashed #aaa; /* Jasniejsza ramka dla pauzy */
}

ul.flat a.sm2_paused:hover {
    background: #dadbe7;
}

/* =====================================================
   IKONY PLAY/PAUSE - CZARNE KOLORY
   ===================================================== */

a.sm2_link:before,
a.sm2_playing:before,
a.sm2_paused:before,
a.inline-playable:before {
    display: inline-block !important;
    width: 26px !important;
    text-align: center !important;
    margin-right: 16px !important;
    font-size: 1.3em !important;
    transition: color 0.2s !important;
    line-height: 1; /* Dla lepszego wyrownania ikon */
}

/* Domyslna ikona Play - CZARNY kolor */
a.sm2_link:before,
a.inline-playable:before,
a.sm2_paused:before {
    content: "\25B6" !important; /* > - trojkat play */
    color: #000 !important; /* CZARNY */
    font-weight: normal !important;
}

/* Ikona Pause gdy gra - CZARNY kolor */
a.sm2_playing:before {
    content: "\23F8" !important; /* ikona pauzy (dwa pionowe paski) */
    color: #000 !important; /* CZARNY */
    font-weight: bold !important; /* Mozna usunac jesli ikona jest wystarczajaco gruba */
}

/* =====================================================
   ANIMACJE
   ===================================================== */

/* Pulsujaca kropka podczas odtwarzania */
@keyframes pulse-dot {
    0%, 100% { 
        transform: translateY(-50%) scale(1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    50% { 
        transform: translateY(-50%) scale(1.15); /* Nieco wieksze pulsowanie */
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
}

/* Aktywacja animacji dla aktywnej kropki */
#track .player.pulsing-dot-active::after { /* Zmieniony selektor na klase dodawana przez JS */
    animation: pulse-dot 1.5s ease-in-out infinite;
    opacity: 1; /* Upewniamy sie, ze jest widoczna, gdy ma pulsowac */
}


/* =====================================================
   RESPONSYWNOSC
   ===================================================== */

@media (max-width: 768px) {
    #track {
        height: 18px; /* Nieco mniejszy na mobilnych */
        margin: 15px 0 20px 0;
    }
    #track .loadbar,
    #track .player {
        height: 8px; /* Nieco mniejszy na mobilnych */
        top: 5px;    /* (18-8)/2 */
        border-radius: 4px;
    }
    #track .player::after {
        width: 10px;
        height: 10px;
        right: -5px;
    }
    
    ul.flat a.sm2_link,
    ul.flat a.sm2_playing,
    ul.flat a.sm2_paused,
    ul.flat a.inline-playable {
        padding: 10px 14px;
        font-size: 1em;
    }
    
    a.sm2_link:before,
    a.sm2_playing:before,
    a.sm2_paused:before,
    a.inline-playable:before {
        width: 22px !important;
        margin-right: 12px !important;
        font-size: 1.1em !important;
    }
}

/* =====================================================
   KOMPATYBILNOSC Z ROZNYMI STRUKTURAMI HTML
   ===================================================== */

.player-controls #track,
.player-controls .track,
.audio-player-container #track,
.audio-player #track {
    margin: 15px 0 20px 0;
    width: 100%;
}

/* =====================================================
   FALLBACK DLA STARSZYCH PRZEGLADAREK
   ===================================================== */

/* IE/Edge fallback - bez ::after i animacji */
.no-css-after #track .player {
    border-right: 3px solid #111;
}

/* Firefox fallback */
@-moz-document url-prefix() {
    #track .player {
        transition: width 0.2s ease; /* Mozna zsynchronizowac z glowna wartoscia transition */
    }
}

/* =====================================================
   DEBUGOWANIE - WYMUS WYSWIETLENIE IKON
   ===================================================== */

/* Dodatkowe selektory dla pewnosci */
ul.flat li a:before,
.sm2_button:before,
.inline-playable:before {
    content: "\25B6" !important; /* > */
    color: #000 !important;
    display: inline-block !important;
    width: 20px !important;
    margin-right: 8px !important;
    font-size: 1.2em !important;
}

/* Gdy gra */
ul.flat li a.sm2_playing:before,
.sm2_button.sm2_playing:before {
    content: "\23F8" !important;
    color: #000 !important;
}