/* === Wspólny odtwarzacz audio IFK === */
/* Plik wspólny dołączany przez podstrony IFK_*.php */

.ifk-single-player-box {
  background-color: #808080;
  border-radius: 8px;
  padding: 5px 10px 0;
  margin: 10px auto;
  max-width: 600px;
  text-align: center;
}

.ifk-player-status {
  display: none;
}

.time-display-inline {
  font-size: 13px;
  color: #ffff00;
  font-family: Arial, sans-serif;
  font-weight: bold;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Przyciski trybów */
.player-modes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 6px;
  transform: translateY(-5px);
}

.mode-btn {
  padding: 4px 14px;
  border: 2px solid #888;
  background-color: #333;
  color: #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: Arial, sans-serif;
  transition: all 0.2s;
}

.mode-btn:hover {
  background-color: #555;
  border-color: #aaa;
}

.mode-btn.active {
  background-color: #005560;
  color: #ffff00;
  border-color: #ffff00;
  font-weight: bold;
}

/* Lista utworów */
.tracks-list-single {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  padding: 15px;
  background-color: black;
  border: 3px solid gray;
  border-radius: 10px;
}

.tracks-list-single a.IFK {
  display: block;
  padding: 8px 12px;
  background-image: url('../brown062.jpg');
  color: yellow !important;
  text-decoration: none;
  border-radius: 5px;
  font-size: 17px;
  transition: background-color 0.2s;
}

/* Hover tylko na urządzeniach z prawdziwą myszą — na dotyku :hover jest
   "lepki" (zostaje po tapnięciu) i udawał drugie podświetlenie obok grającego. */
@media (hover: hover) {
  .tracks-list-single a.IFK:hover {
    background-image: url('../brown062.jpg');
    filter: brightness(1.2);
    color: red !important;
  }
}

.tracks-list-single a.IFK.active {
  background-image: url('../brown062.jpg');
  color: red !important;
  font-weight: bold;
}

/* Odtwarzacz audio - większy suwak */
.ifk-single-player-box audio {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background-color: #e0e0e0;
  border: 2px solid #888;
  filter: contrast(1.2);
}

/* Własny odtwarzacz */
.custom-player {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -15px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* Suwak głośności przy odtwarzaczu */
.volume-control-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -27px;
  box-sizing: border-box;
  max-width: 100%;
  /* visible (jak na mobile) - inaczej powiekszony glosniczek scale(1.62) byl przycinany.
     transform NIE rozpycha dokumentu (jest poza flow), wiec bez ryzyka skoku. 2026-07-24. */
  overflow: visible;
}

.volume-icon {
  font-size: 32px;
  color: maroon !important;
  width: 52px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 0;
  /* Powiekszony glosniczek jak na mobile (scale 1.62 zamiast 0.81) - decyzja usera 2026-07-24.
     Globalnie dla wszystkich ~43 stron (definicja w jednym miejscu). */
  transform: translate(0, 5px) scale(1.62);
  /* Ikona jest DEKORACYJNA (brak handlera). Powiekszona (scale 1.62) + overflow:visible
     nachodzi na przycisk play (ten sam lewy brzeg, volume-control ma margin-top:-27px)
     i jako pozniejszy element w DOM przechwytywala klikniecia -> przycisk start nie dzialal.
     pointer-events:none przepuszcza klik do przycisku pod spodem. 2026-07-24. */
  pointer-events: none;
}

.volume-slider-inline {
  flex: 1;
  min-width: 0;
  height: 6px;
  margin-left: 0;
  transform: translateY(5px);
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #000, #fff);
  outline: none;
  border-radius: 3px;
  cursor: pointer;
}

.volume-slider-inline::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #FFC020;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider-inline::-webkit-slider-thumb:hover {
  background: red;
}

.volume-slider-inline::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #FFC020;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider-inline::-moz-range-thumb:hover {
  background: red;
}

.volume-value-inline {
  font-size: 13px;
  color: #ffff00;
  font-family: Arial, sans-serif;
  min-width: 30px;
  text-align: right;
  font-weight: bold;
  transform: translateY(5px);
}

.play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #ffff00;
  background-color: #005560;
  color: #ffff00;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: -30px;
  position: relative;
  top: -10px;
}

.play-btn:hover {
  background-color: #007780;
  transform: scale(1.1);
}

.play-btn.playing {
  background-color: #008890;
}

.time-display {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.time-separator {
  color: #888;
  margin: 0 3px;
}

.progress-container {
  flex: 1;
  height: 6px;
  background-color: #1a1a1a;
  border-radius: 3px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  position: relative;
  top: -10px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #00aaff 0%, #00aaff var(--progress, 0%), #333 var(--progress, 0%), #333 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffff00;
  cursor: pointer;
  border: 2px solid #005560;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
  transition: transform 0.2s;
}

.progress-bar::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.progress-bar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffff00;
  cursor: pointer;
  border: 2px solid #005560;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
  transition: transform 0.2s;
}

.progress-bar::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Mobile - jedna kolumna */
@media (max-width: 600px) {
  /* Zamknij ew. przepełnienie poziome wewnątrz playera (translateX modes, scaleX suwaka,
     overflow:visible głośności) — inaczej wystający element rozpycha dokument = skok ~2-3% przy wejściu.
     UWAGA: overflow-x:hidden NIE domyka transformowanych dzieci na Androidzie (quirk: Y staje się auto).
     overflow-x:clip przycina X niezawodnie, a Y zostaje visible (nie utnie przycisków wyciąganych do góry).
     hidden = fallback dla starszych przeglądarek bez wsparcia clip. */
  .ifk-single-player-box {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .tracks-list-single {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .player-modes {
    margin-top: 0;
    transform: translateX(30px);
  }

  .play-btn {
    margin-left: 0;
    top: -20px;
    transform: translate(-5px, 0) scale(0.704);
  }

  .play-btn:hover,
  .play-btn:active,
  .play-btn:focus {
    transform: translate(-5px, 0) scale(0.704);
    background-color: #005560;
  }

  .progress-container {
    margin-left: -10px;
    margin-right: 0;
    top: 0;
  }

  .volume-icon {
    margin-left: -10px;
    width: 52px;
    /* 2x wersji desktopowej (0.81 -> 1.62) - powiekszona ikona glosnika na mobile */
    transform: translate(0, 5px) scale(1.62);
  }

  .volume-slider-inline {
    margin-left: 5px;
    margin-right: 5px;
    transform: translateY(5px) scaleX(1.2);
  }

  .volume-control-inline {
    margin-top: -22px;
    overflow: visible;
  }

  .volume-value-inline {
    display: block;
  }
}