/* --- 1. DEFINICIJA TEMA (VARIJABLE) --- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/Oswald-Light.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Oswald-Regular.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Oswald-Bold.woff2') format('woff2');
}

/* DARK THEME (Default) */
.theme-dark {
  --player-bg: #000000;
  --player-border: none;
  --player-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
  --text-artist: #ffffff;
  --text-song: #888888;
  --accent-color: #00ff99; /* Zelena za Dark */
  --play-btn-bg: #222222;
  --play-icon-color: %23ffffff; /* Bela (%23 zamena za # u SVG) */
  --mute-filter: invert(0);
  --slider-bg: #222;
  --slider-border: #444;
}

/* LIGHT THEME */
.theme-light {
  --player-bg: #ffffff;
  --player-border: 1px solid #ddd;
  --player-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --text-artist: #000000;
  --text-song: #444444;
  --accent-color: #222222; /* Tamno siva/Crna za Light */
  --play-btn-bg: #eeeeee;
  --play-icon-color: %23000000; /* Crna ikona */
  --mute-filter: invert(1);
  --slider-bg: #eee;
  --slider-border: #ccc;
}
/* TECHNO THEME (Neon Night) */
.theme-techno {
  --player-bg: #050505;
  --player-border: 1px solid #00f2ff;
  --player-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
  --text-artist: #00f2ff; /* Sajber plava */
  --text-song: #ff00ff;   /* Neon roze */
  --accent-color: #00f2ff;
  --play-btn-bg: #000;
  --play-icon-color: %2300f2ff;
  --mute-filter: sepia(1) saturate(100) hue-rotate(150deg);
  --slider-bg: #111;
  --slider-border: #00f2ff;
}

/* METAL THEME (Industrial Blood) */
.theme-metal {
  --player-bg: linear-gradient(145deg, #1a1a1a, #000000);
  --player-border: 2px solid #333;
  --player-shadow: 0 10px 30px rgba(255, 0, 0, 0.2);
  --text-artist: #e0e0e0;
  --text-song: #aa0000;   /* Krv crvena */
  --accent-color: #ff0000;
  --play-btn-bg: #111;
  --play-icon-color: %23ff0000;
  --mute-filter: grayscale(1) brightness(0.7);
  --slider-bg: #000;
  --slider-border: #aa0000;
}

/* RETRO GOLD (Luxury Radio) */
.theme-retro {
  --player-bg: #2c1e12;   /* Tamno drvo/braon */
  --player-border: 2px solid #d4af37;
  --player-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
  --text-artist: #d4af37; /* Zlatna */
  --text-song: #f2e2ba;
  --accent-color: #d4af37;
  --play-btn-bg: #3d2b1d;
  --play-icon-color: %23d4af37;
  --mute-filter: sepia(1) saturate(5) hue-rotate(10deg);
  --slider-bg: #1a120b;
  --slider-border: #d4af37;
}
/* --- CUSTOM THEME (Premium Pill Edition) --- */

.theme-custom {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    z-index: 1;
}

/* Zatamnjenje pozadine radi čitljivosti */
.theme-custom::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: inherit;
    z-index: -1;
}

/* Tekst i Ekvilajzer */
.theme-custom .p-artist { color: var(--text-artist) !important; }
.theme-custom .p-song { color: var(--text-song) !important; }
.theme-custom .equalizer .bar { background: var(--accent-color) !important; }

/* Desni kontejner (Play & Mute) */
.theme-custom .pill-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

/* --- NAGLAŠENO PLAY DUGME (Krug + Glow) --- */
/* --- NAGLAŠENO PLAY DUGME (Prazan krug sa sjajem) --- */
.theme-custom .p-play-btn {
    background-color: transparent !important; /* Krug je unutra prazan */
    background-image: none !important;
    border: 2px solid var(--accent-color) !important; /* Ivica u boji akcenta */
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 15px var(--accent-color) !important; /* Sjaj oko ivice */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    padding: 0 !important;
}

.theme-custom .p-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 25px var(--accent-color) !important;
}

/* --- LOGIKA IKONICA I BOJE (Mask) --- */

.theme-custom .p-play-btn::after {
    content: "";
    display: block;
    background-color: var(--accent-color) !important; /* IKONICA DOBILA BOJU */
    width: 22px;
    height: 22px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* 1. Stanje PAUZE (Prikazuje se trougao) */
.theme-custom .p-play-btn::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important;
    margin-left: 0; /* Centriranje trougla */
}

/* 2. Stanje SVIRANJA (Prikazuju se dve crte) */
.theme-custom.is-playing .p-play-btn::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important;
    margin-left: 0 !important;
}

/* --- VOLUME SLIDER (Fino podešavanje) --- */
.theme-custom #radio-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    background: rgba(255, 255, 255, 0.2) !important;
    height: 4px !important;
    border-radius: 2px;
    outline: none;
}

/* Kružić slidera */
.theme-custom #radio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-color) !important;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-color);
    border: none !important;
}

.theme-custom #radio-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-color) !important;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-color);
    border: none !important;
}


/* --- 2. RESET I OSNOVNI OKVIR --- */
#radio-pill-root * {
  all: unset;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
#radio-pill-root .has-custom-font,
#radio-pill-root .has-custom-font * {
  font-family: "Oswald", sans-serif !important;
}

.pill-frame {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 95% !important;
  max-width: 620px !important;
  height: 70px !important;
  background: var(--player-bg) !important;
  border: var(--player-border) !important;
  border-radius: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 15px !important;
  z-index: 999999999 !important;
  box-shadow: var(--player-shadow) !important;
  transition: all 0.3s ease !important; 
}

/* --- 3. CENTAR: TEXT I REDOSLED --- */
.pill-center {
  display: flex !important;
  flex-direction: column !important; /* Artist gore, Pesma dole */
  justify-content: center !important;
  align-items: flex-start !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
  margin: 0 20px !important; /* Optimizovan prostor */
}

.p-artist {
  display: block !important;
  color: var(--text-artist) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.p-song-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
}

.p-song-container {
  display: block !important;
  flex: 1 !important;      
  min-width: 0 !important;   
  /* max-width: 250px !important; */
  max-width: 330px !important;
  width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}

.p-song {
  display: inline-block !important;
  color: var(--text-song) !important;
  white-space: nowrap !important;
  padding-right: 50px !important;
  will-change: transform !important;
}

/* --- 4. EQUALIZER (Pozicioniranje) --- */
.equalizer {
  flex-shrink: 0 !important;
  display: none !important; /* Sakriven dok ne krene play */
  align-items: flex-end !important;
  height: 14px !important;
  gap: 3px !important;
  /* Pomeranje: u desno od teksta i malo na dole */
  margin-left: 12px !important;
  margin-top: 4px !important; 
}

.is-playing .equalizer {
  display: flex !important;
}

.equalizer .bar {
  display: block !important;
  width: 3px !important;
  background: var(--accent-color) !important;
  border-radius: 1px !important;
  box-shadow: 0 0 5px var(--accent-color);
}

/* --- 5. KONTROLE (Buttons & Slider) --- */
.p-play-btn {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background-color: var(--play-btn-bg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px !important;
  /* Dinamička ikona (Play) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='var(--play-icon-color)' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important;
}
.pill-left {
  display: flex !important;
  flex-direction: row !important; 
  align-items: center !important;
  gap: 10px !important;         
  flex-shrink: 0 !important;     
  min-width: fit-content !important;
}
.pill-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important; /* Ne dozvoljava kontrole da se skupe */
    margin-left: auto !important;
}

.p-mute-btn {
  width: 32px !important;
  height: 32px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  background-size: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: var(--mute-filter) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888888' d='M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.85 14,18.71V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16.02C15.5,15.29 16.5,13.77 16.5,12M3,9V15H7L12,20V4L7,9H3Z'/%3E%3C/svg%3E") !important;
  margin: 0 5px !important;
}

#radio-volume {
  -webkit-appearance: none !important;
  width: 60px !important;
  height: 6px !important;
  background: var(--slider-bg) !important;
  border: 1px solid var(--slider-border) !important;
  border-radius: 10px !important;
}

#radio-volume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  background: var(--accent-color) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* --- 6. LOGO & ART FIX --- */
.pill-station-logo img {
  width: 35px !important;
  height: 35px !important;
  object-fit: contain !important;
  display: block !important;
}

.pill-art img {
  width: 45px !important;
  height: 45px !important;
  border-radius: 5px !important;
  display: block !important;
  object-fit: cover !important;
}

/* --- 7. CLOSE DUGME --- */
.p-close-btn {
  position: absolute !important;
  top: -15px !important;
  right: 30px !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--player-bg) !important;
  color: var(--text-artist) !important;
  border: 1px solid var(--slider-border) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  z-index: 100 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* --- 8. ANIMACIJE --- */
.animate-marquee {
  animation: marquee-play 10s linear infinite !important;
}

@keyframes marquee-play {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Theme  */

/* Fix za SVG boju u varijablama (pretraživači nekad ne čitaju var unutar url) */
.theme-dark .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-light .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }

.is-playing .p-play-btn {
  box-shadow: 0 0 15px var(--accent-color) !important;
  /* Pause ikona */
}
.theme-dark.is-playing .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300ff99' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important; }
.theme-light.is-playing .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important; }


/* Specifične ikone po temama */
.theme-techno .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f2ff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-metal .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-retro .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }

/* Pause ikone kada svira */
.theme-techno.is-playing .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f2ff' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important; }
.theme-metal.is-playing .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important; }
.theme-retro.is-playing .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3E%3C/svg%3E") !important; }

/* Specifične boje Play ikonica */
.theme-dark .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-light .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-techno .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f2ff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-metal .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
.theme-retro .p-play-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E") !important; }
/* Fix za Play dugme na Custom temi (Belo po defaultu) */


/* Sakrivanje slike i skupljanje prostora */
#artist-image:not([src]), 
#artist-image[src=""], 
#artist-image[data-no-thumb="true"] {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Osiguraj da kontejner oko slike takođe nestane ako je slika prazna */
.pill-art:has(#artist-image[data-no-thumb="true"]),
.pill-art:has(#artist-image:not([src])) {
  display: none !important;
}

/* --- MOBILNA VERZIJA (Full Width Bar) --- */
@media (max-width: 767px) {
  .pill-frame {
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 65px !important;
    border-radius: 0 !important;
    border-top: 1px solid #222 !important;
    padding: 0 10px !important;
  }

  /* Sakrivamo Volume i Mute na mobilnom */
  .p-vol-container,
  .p-mute-btn {
    display: none !important;
  }

  /* Povećavamo prostor za tekst jer smo izbacili kontrole */
  .pill-center {
    margin: 0 10px !important;
  }

  .p-close-btn {
    margin-right: 12px !important;
    top: -20px !important;
    right: 15px !important;
  }
  .pill-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Smanjen opšti razmak između elemenata */
  }

  /* Logo stanice takođe van na mobilnom radi prostora */
  .pill-station-logo {
    display: none !important;
  }
}