/* Shared glass music player styling */
.player,
.offer {
  position: fixed !important;
  z-index: 6 !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(720px, calc(100% - 28px)) !important;
  min-height: 72px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 218, 150, .48) !important;
  border-radius: 20px !important;
  background: linear-gradient(105deg, rgba(80, 24, 16, .94), rgba(24, 14, 12, .94)) !important;
  color: #fff1d0 !important;
  box-shadow: 0 15px 50px rgba(18, 7, 6, .7), inset 0 1px rgba(255, 232, 188, .12) !important;
  backdrop-filter: blur(18px);
  font-family: 'DM Sans', Arial, sans-serif !important;
}

.player .controls,
.player .transport,
.offer .controls,
.offer .transport {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.player button,
.offer button {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff1cb !important;
  font: 500 17px/1 Arial, sans-serif !important;
  cursor: pointer;
}

.player button:hover,
.offer button:hover { color: #ffbf49 !important; }
.player #play,
.offer #play {
  flex-basis: 44px;
  width: 44px !important;
  height: 44px !important;
  background: #ffbd4a !important;
  color: #4a160e !important;
  box-shadow: 0 3px 18px rgba(228, 117, 37, .45);
}

.player .song,
.player .song-info,
.player .info,
.offer .song,
.offer .song-info,
.offer .info { min-width: 0; }

.player .song-top,
.player .song-line,
.offer .song-top,
.offer .song-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff1d0;
  font-size: 12px;
}

.player #track,
.offer #track {
  min-width: 0;
  overflow: hidden;
  color: #fff1d0;
  font: 600 12px 'DM Sans', Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player #time,
.offer #time { color: #ffc866; font: 10px 'DM Mono', monospace; white-space: nowrap; }
.player .play-state,
.offer .play-state { display: flex; align-items: center; gap: 5px; color: #ffe2a8; font: 9px 'DM Mono', monospace; white-space: nowrap; }
.player .play-state i,
.offer .play-state i,
.player .play-state-dot,
.offer .play-state-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #ffbd4a; }
.player .progress-wrap,
.offer .progress-wrap,
.player .progress,
.offer .progress,
.player #progress { height: 16px; display: flex; align-items: center; cursor: pointer; }
.player .progress,
.offer .progress,
.player #progress { width: 100%; height: 3px; overflow: hidden; border-radius: 8px; background: rgba(255, 201, 112, .28); }
.player .bar,
.player #bar,
.offer .bar,
.offer #bar { display: block; height: 100%; width: 0%; border: 0; border-radius: inherit; background: #ffcb5b; box-shadow: 0 0 8px #ffd475; }
.player .side-controls,
.offer .side-controls,
.player .fm,
.offer .fm { color: #ffdc9e; font: 10px 'DM Mono', monospace; white-space: nowrap; }

@media (max-width: 600px) {
  .player,
  .offer {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 18px) !important;
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }
  .player .side-controls,
  .offer .side-controls,
  .player .fm,
  .offer .fm { display: none !important; }
  .player #track,
  .offer #track { font-size: 11px; }
  .player button,
  .offer button { flex-basis: 28px; width: 28px !important; height: 30px !important; }
  .player #play,
  .offer #play { flex-basis: 42px; width: 42px !important; height: 42px !important; }
}