/*
 * CMP3.eu — player-patch.css
 * Poprawki CSS dla playera MP3, .mp3dow, sticky playerów
 * Dołącz na końcu style.css lub osobno
 */

/* ════════════════════════════════════════════════════
   MP3DOW — przebudowany layout (czytelny, responsywny)
   ════════════════════════════════════════════════════ */
.mp3dow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg3, #141720);
  border-top: 1px solid var(--border, #252830);
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
}

/* Przycisk Download */
.mp3dow a.icon-download-1.button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 5px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all var(--tr, .18s);
  white-space: nowrap;
}
.mp3dow a.button.lightred {
  background: rgba(212,0,26,.15);
  border: 1px solid rgba(212,0,26,.4);
  color: #ff3a55;
}
.mp3dow a.button.lightred:hover {
  background: rgba(212,0,26,.28);
  border-color: var(--red-color, #d4001a);
  color: #fff;
}

/* rateWrapper */
.mp3dow div.rateWrapper {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm, 5px);
  overflow: hidden;
  background: #42a600;
  margin: 0;
  flex-shrink: 0;
}
.mp3dow div.rateWrapper.null { background: var(--bg4, #1a1d24); border: 1px solid var(--border2, #2e3138); }
.mp3dow div.rateWrapper.up   { background: linear-gradient(135deg,#005580,#003a5a); }
.mp3dow div.rateWrapper.down { background: linear-gradient(135deg,#6e1a1a,#3d0000); }

.mp3dow .rateWrapper .vote {
  padding: 5px 7px;
  cursor: pointer;
  font-size: 15px;
  transition: background var(--tr, .18s);
}
.mp3dow .rateWrapper .vote:hover { background: rgba(0,0,0,.3); color: #fff; }
.mp3dow .rateWrapper .glos-r {
  font-weight: 700;
  font-size: 13px;
  min-width: 26px;
  text-align: center;
  padding: 0 2px;
}

/* Playlist button */
.mp3dow a.icon-list,
.mp3dow a.icon-list-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-sm, 5px);
  background: var(--bg4, #1a1d24);
  border: 1px solid var(--border, #252830);
  font-size: 11px;
  color: var(--text-muted, #666b7a);
  transition: all var(--tr, .18s);
  white-space: nowrap;
  flex-shrink: 0;
}
.mp3dow a.icon-list:hover,
.mp3dow a.icon-list-add:hover {
  border-color: var(--border2, #2e3138);
  color: var(--white, #eef0f5);
  background: var(--bg2, #13151c);
}

/* .consol — prev/close/next */
.mp3dow .consol {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;       /* przesuń w prawo */
  flex-shrink: 0;
}
.mp3dow .consol [class^=icon-] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted, #666b7a);
  cursor: pointer;
  transition: color var(--tr, .18s), background var(--tr, .18s);
  background: transparent;
  margin: 0;
  padding: 0;
}
.mp3dow .consol [class^=icon-]:hover {
  color: var(--white, #eef0f5);
  background: rgba(255,255,255,.07);
}
.mp3dow .consol .icon-cancel-squared {
  font-size: 16px;
  color: var(--text-muted, #666b7a);
}
.mp3dow .consol .icon-cancel-squared:hover {
  color: var(--red-color, #d4001a);
  background: rgba(212,0,26,.12);
}

/* ════════════════════════════════════════════════════
   JP-AUDIO — poprawki
   ════════════════════════════════════════════════════ */
.jp-audio {
  background: var(--bg3, #141720);
  border-radius: var(--radius, 8px);
  margin-top: 3px;
  border: 1px solid var(--border, #252830);
}

/* jp-controls (lewa kolumna) */
.jp-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  padding: 8px 0;
  gap: 6px;
}
.jp-controls .play { display: flex; align-items: center; }
.jp-play {
  width: 58px !important;
  height: 58px !important;
  font-size: 36px !important;
  border-radius: 50% !important;
}
.jp-audio .jp-time-holder {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #666b7a);
  text-align: center;
  margin-top: 2px;
}
.jp-current-time { color: var(--white, #eef0f5) !important; }

/* Seek bar + waveform */
.jp-seek-bar {
  height: 54px !important;
  border-radius: var(--radius-sm, 5px) !important;
  background: #1a1d24 !important;
}
.jp-seek-bar.no-wave { height: 36px !important; }

/* Głośność — zsi */
.zsi {
  background: rgba(0,0,0,.25);
  border-top: 1px solid var(--border, #252830);
}
.box-p {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}
.box-p .autoplay,
.box-p .trybmp3 {
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Volume bar — nowoczesny */
.jp-volume-bar {
  background: var(--bg4, #1a1d24) !important;
  border: 1px solid var(--border, #252830) !important;
  height: 6px !important;
  border-radius: 3px !important;
  width: 90px !important;
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 0 4px 2px !important;
}
.jp-volume-bar-value {
  background: var(--red-color, #d4001a) !important;
  height: 100% !important;
  border-radius: 3px !important;
}
.jp-volume-bar-value i {
  right: -6px !important;
  left: auto !important;
  margin: 0 !important;
  width: 12px !important; height: 12px !important;
  top: -3px !important;
  border-color: var(--red-color, #d4001a) !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(212,0,26,.3);
}

/* ════════════════════════════════════════════════════
   GENRE BAR (nad playerem — link/user/ocena itp.)
   ════════════════════════════════════════════════════ */
.genre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 10px;
  background: var(--bg3, #141720);
  border-top: 1px solid var(--border, #252830);
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.genre a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg4, #1a1d24);
  border: 1px solid var(--border, #252830);
  border-radius: var(--radius-sm, 5px);
  color: var(--text-muted, #666b7a);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  transition: all var(--tr, .18s);
  white-space: nowrap;
}
.genre a:hover {
  color: var(--white, #eef0f5);
  border-color: var(--border2, #2e3138);
  background: var(--bg2, #13151c);
}
.genre a.icon-keyboard { font-size: 14px; padding: 3px 6px; }
.genre a.icon-cog { font-size: 14px; padding: 3px 6px; }

/* ════════════════════════════════════════════════════
   MP3ODSLUCH — kontener playera (bezpośrednio w .sluchasz)
   ════════════════════════════════════════════════════ */
.mp3odsluch {
  display: block;
  width: 100%;
  padding: 4px 0 0;
  font-size: 14px;
  cursor: auto;
  color: #fff;
  min-height: auto;
  text-align: left;
}

/* ════════════════════════════════════════════════════
   SLUCHASZ — lista MP3
   ════════════════════════════════════════════════════ */
.sluchasz {
  transition: background var(--tr, .18s), border-left var(--tr, .18s);
  cursor: pointer;
  position: relative;
}
.sluchasz.active {
  background: rgba(212,0,26,.06);
}
.sluchasz .track-cover {
  position: relative;
  overflow: hidden;
}
.sluchasz .track-cover .icon-play-circled {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--tr, .18s);
}
.sluchasz:hover .track-cover .icon-play-circled,
.sluchasz.active .track-cover .icon-play-circled {
  opacity: 1;
}

/* ════════════════════════════════════════════════════
   MOBILE — .mp3dow
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .mp3dow {
    grid-template-columns: 1fr 1fr;
    column-gap: 4px;
  }
  .mp3dow .consol { margin-left: 0; }
  .mp3dow a.button.lightred { width: 100%; justify-content: center; }
  .mp3dow a.icon-list, .mp3dow a.icon-list-add { width: 100%; justify-content: center; }
}