/* radio-player-wrap izoluje layout */
.radio-player-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.radio-player-wrap .player {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 22px 24px;
  background: rgba(22, 27, 34, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e6edf3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Górna linia gradientowa – jak na kartach podstron */
.radio-player-wrap .player::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #57a9fe, #d839d2);
  border-radius: 20px 20px 0 0;
  z-index: 3;
}

/* Glow tła */
.radio-player-wrap .player .glow {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  transition: background 1s;
  pointer-events: none;
}
.radio-player-wrap .player .glow.autodj {
  background: radial-gradient(ellipse at top left, rgba(87, 169, 254, 0.4), transparent 55%);
}
.radio-player-wrap .player .glow.live {
  background: radial-gradient(ellipse at top left, rgba(216, 57, 210, 0.4), transparent 55%);
}

.radio-player-wrap .player .block-left,
.radio-player-wrap .player .block-center,
.radio-player-wrap .player .block-right {
  position: relative;
  z-index: 1;
}

/* ── BLOCK LEFT (cover) ── */
.radio-player-wrap .player .block-left {
  width: 100px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-player-wrap .player .cover-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
.radio-player-wrap .player .cover-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(28px);
  transform: scale(1.12);
  animation: glowPulse 3s ease-in-out infinite;
}
.radio-player-wrap .player .cover-glow.autodj {
  background: rgba(87, 169, 254, 0.35);
}
.radio-player-wrap .player .cover-glow.live {
  background: rgba(216, 57, 210, 0.35);
}
.radio-player-wrap .player .cover-wrap img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.radio-player-wrap .player .cover-wrap img.autodj {
  border: 2px solid rgba(87, 169, 254, 0.25);
}
.radio-player-wrap .player .cover-wrap img.live {
  border: 2px solid rgba(216, 57, 210, 0.25);
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1.10); }
  50%       { opacity: 0.85; transform: scale(1.22); }
}

/* Badge na coverze */
.radio-player-wrap .player .badge {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  z-index: 2;
}
.radio-player-wrap .player .badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
/* Online (AutoDJ) — styl jak .onas-tag-blue */
.radio-player-wrap .player .badge.online {
  background: rgba(87, 169, 254, 0.12);
  border: 1px solid rgba(87, 169, 254, 0.25);
  color: #57a9fe;
}
.radio-player-wrap .player .badge.online .dot {
  background: #57a9fe;
}
/* Live — styl jak .onas-tag-red */
.radio-player-wrap .player .badge.live-badge {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}
.radio-player-wrap .player .badge.live-badge .dot {
  background: #f87171;
}

/* ── BLOCK CENTER ── */
.radio-player-wrap .player .block-center {
  width: 400px;
  height: 150px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: calc(20px + 1.1em + 10px + 1.7em);
}

.radio-player-wrap .player .presenter-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #e6edf3;
  line-height: 1.2;
  margin-bottom: 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-player-wrap .player .marquee-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 16px;
}
.radio-player-wrap .player .marquee-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeScroll 14s linear infinite;
  font-size: 1.1rem;
  font-weight: 400;
  color: #c9d1d9;
  line-height: 1.2;
}
.radio-player-wrap .player .marquee-static {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: #c9d1d9;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-wrap  { width: 100%; overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-flex; width: max-content; white-space: nowrap; animation: marqueeScroll 14s linear infinite; }

/* ── Pill (bitrate) – glassmorphism spójny z resztą ── */
.radio-player-wrap .player .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: #8b949e;
  white-space: nowrap;
  flex-shrink: 0;
}

/* LQ (128 kbps) — niebieski */
.radio-player-wrap .player .dynamic-pill {
  color: #57a9fe;
  background: rgba(87, 169, 254, 0.08);
  border: 1px solid rgba(87, 169, 254, 0.22);
}

/* HQ (320 kbps) — różowy */
.radio-player-wrap .player .dynamic-pill.hq {
  color: #e879f9;
  background: rgba(216, 57, 210, 0.08);
  border: 1px solid rgba(216, 57, 210, 0.22);
}

/* Live override — czerwony (tylko gdy nie HQ) */
.radio-player-wrap .player .dynamic-pill.live:not(.hq) {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

/* Live + HQ — różowy ma priorytet */
.radio-player-wrap .player .dynamic-pill.live.hq {
  color: #e879f9;
  background: rgba(216, 57, 210, 0.08);
  border: 1px solid rgba(216, 57, 210, 0.22);
}

/* Pozycja pill i listeners w block-center — ZMIANA: pill bliżej listeners */
.radio-player-wrap .player .block-center .pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0px + 0.8em + 8px);
}
.radio-player-wrap .player .listeners {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  font-size: 0.82rem;
  color: #8b949e;
  text-align: center;
}
.radio-player-wrap .player .listeners b {
  font-weight: 700;
  color: #57a9fe;
}

/* ── BLOCK RIGHT (controls) ── */
.radio-player-wrap .player .block-right {
  width: 100px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.radio-player-wrap .player .bars-canvas {
  width: 100%;
  height: 28px;
  flex-shrink: 0;
}

/* Przycisk play – glassmorphism jak .onas-btn-blue */
.radio-player-wrap .player .play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  flex-shrink: 0;
}
.radio-player-wrap .player .play-btn:hover {
  transform: scale(1.08) translateY(-1px);
}
.radio-player-wrap .player .play-btn:active {
  transform: scale(0.95);
}
/* AutoDJ – niebieski */
.radio-player-wrap .player .play-btn.cyan {
  background: linear-gradient(135deg, rgba(87, 169, 254, 0.28), rgba(87, 169, 254, 0.14));
  border: 1px solid rgba(87, 169, 254, 0.4);
  color: #57a9fe;
  box-shadow: 0 0 20px rgba(87, 169, 254, 0.2);
}
.radio-player-wrap .player .play-btn.cyan:hover {
  background: linear-gradient(135deg, rgba(87, 169, 254, 0.38), rgba(87, 169, 254, 0.20));
  box-shadow: 0 6px 24px rgba(87, 169, 254, 0.3);
}
/* Live – różowy */
.radio-player-wrap .player .play-btn.red {
  background: linear-gradient(135deg, rgba(216, 57, 210, 0.28), rgba(216, 57, 210, 0.14));
  border: 1px solid rgba(216, 57, 210, 0.4);
  color: #e879f9;
  box-shadow: 0 0 20px rgba(216, 57, 210, 0.2);
}
.radio-player-wrap .player .play-btn.red:hover {
  background: linear-gradient(135deg, rgba(216, 57, 210, 0.38), rgba(216, 57, 210, 0.22));
  box-shadow: 0 6px 24px rgba(216, 57, 210, 0.3);
}
.radio-player-wrap .player .play-btn svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}
.radio-player-wrap .player .play-btn .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ringPulse 2.5s infinite;
  opacity: 0.15;
}
.radio-player-wrap .player .play-btn.cyan .ring { background: #57a9fe; }
.radio-player-wrap .player .play-btn.red  .ring { background: #d839d2; }
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.15; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Volume */
.radio-player-wrap .player .volume {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
}
.radio-player-wrap .player .volume svg {
  width: 14px;
  height: 14px;
  color: #8b949e;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
}
.radio-player-wrap .player .volume svg:hover { color: #e6edf3; }
.radio-player-wrap .player .vol-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.radio-player-wrap .player .vol-fill {
  height: 100%;
  border-radius: 3px;
}
.radio-player-wrap .player .vol-fill.cyan { background: #57a9fe; }
.radio-player-wrap .player .vol-fill.red  { background: #d839d2; }
.radio-player-wrap .player .vol-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.radio-player-wrap .player .vol-thumb.cyan { background: #57a9fe; }
.radio-player-wrap .player .vol-thumb.red  { background: #d839d2; }

/* Quality buttons – spójne z designem */
.radio-player-wrap .player .quality-btn {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.03em;
}
.radio-player-wrap .player .quality-btn.active {
  background: rgba(87, 169, 254, 0.18) !important;
  border: 1px solid rgba(87, 169, 254, 0.35) !important;
  color: #57a9fe !important;
}
.radio-player-wrap .player .quality-btn:not(.active) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #8b949e !important;
}
.radio-player-wrap .player .quality-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e6edf3 !important;
}

/* ── ANIMACJE PRZEJŚĆ ── */
@keyframes coverFlash {
  0%   { opacity: 0.3; transform: scale(0.93); filter: blur(4px); }
  60%  { opacity: 1;   transform: scale(1.04); filter: blur(0); }
  100% { opacity: 1;   transform: scale(1);    filter: blur(0); }
}
@keyframes slideInFromTop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideOutToBottom {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(18px); }
}
.radio-player-wrap .player .block-center.slide-in  { animation: slideInFromTop  0.6s ease forwards; }
.radio-player-wrap .player .block-center.slide-out { animation: slideOutToBottom 0.4s ease forwards; }

/* ── MOBILE ── */
@media (max-width: 640px) {
  .radio-player-wrap .player {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .radio-player-wrap .player .block-left,
  .radio-player-wrap .player .block-center,
  .radio-player-wrap .player .block-right {
    width: 100%;
    max-width: 360px;
    height: auto;
  }
  .radio-player-wrap .player .block-left  { justify-content: center; }
  .radio-player-wrap .player .block-center {
    padding-bottom: 0;
    gap: 10px;
    align-items: center;
  }
  .radio-player-wrap .player .block-center .pill,
  .radio-player-wrap .player .listeners {
    position: static;
    transform: none;
  }
}