/* ============================================================
   Unified track Play/Pause button — MUZUKRAINE
   Round 40px (48px mobile), play↔pause swap, pulse while
   playing, active row highlight. Loaded globally after page CSS.
   ============================================================ */

/* ---- Base round button ---- */
.mzk-entity-track__play,
.mzk-track-row__play,
.mzk-sb-artist-play,
.mzk-pop-track__play,
.mzk-catalog-track__play,
.mzk-genres-track__play {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-primary, #5b21ed);
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
}

.mzk-entity-track__play svg,
.mzk-track-row__play svg,
.mzk-sb-artist-play svg,
.mzk-pop-track__play svg,
.mzk-catalog-track__play svg,
.mzk-genres-track__play svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
  transition: opacity .2s ease, transform .2s ease;
}

.mzk-entity-track__play .icon-play,
.mzk-track-row__play .icon-play,
.mzk-sb-artist-play .icon-play,
.mzk-pop-track__play .icon-play,
.mzk-catalog-track__play .icon-play,
.mzk-genres-track__play .icon-play {
  margin-left: 1px;
}

.mzk-entity-track__play .icon-pause,
.mzk-sb-artist-play .icon-pause,
.mzk-pop-track__play .icon-pause {
  display: none;
}

/* ---- Hover reveal (desktop) ---- */
.mzk-entity-track:hover .mzk-entity-track__play,
.mzk-track-row:hover .mzk-track-row__play,
.mzk-sb-artist-row:hover .mzk-sb-artist-play,
.mzk-pop-track:hover .mzk-pop-track__play,
.mzk-catalog-track:hover .mzk-catalog-track__play,
.mzk-genres-track:hover .mzk-genres-track__play,
.mzk-entity-track__play:hover,
.mzk-track-row__play:hover,
.mzk-sb-artist-play:hover,
.mzk-pop-track__play:hover,
.mzk-catalog-track__play:hover,
.mzk-genres-track__play:hover {
  background: #ffa200;
  color: #111;
  border-color: #ffa200;
  transform: scale(1.08);
}

/* ---- Current (selected, not playing) ---- */
.mzk-entity-track.is-current .mzk-entity-track__play,
.mzk-track-row.is-current .mzk-track-row__play,
.mzk-sb-artist-row.is-current .mzk-sb-artist-play,
.mzk-pop-track.is-current .mzk-pop-track__play,
.mzk-catalog-track.is-current .mzk-catalog-track__play,
.mzk-genres-track.is-current .mzk-genres-track__play {
  background: #ffa200;
  color: #111;
  border-color: #ffa200;
  box-shadow: none;
}

/* ---- Playing: solid brand + pause + pulse ---- */
.mzk-entity-track.is-playing .mzk-entity-track__play,
.mzk-track-row.is-playing .mzk-track-row__play,
.mzk-sb-artist-row.is-playing .mzk-sb-artist-play,
.mzk-pop-track.is-playing .mzk-pop-track__play,
.mzk-catalog-track.is-playing .mzk-catalog-track__play,
.mzk-genres-track.is-playing .mzk-genres-track__play {
  background: var(--color-primary, #5b21ed);
  color: var(--color-on-primary);
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb, 91, 33, 237), .32);
  animation: mzk-track-pulse 1.8s ease-out infinite;
}

.mzk-entity-track.is-playing .mzk-entity-track__play .icon-play,
.mzk-sb-artist-row.is-playing .mzk-sb-artist-play .icon-play,
.mzk-pop-track.is-playing .mzk-pop-track__play .icon-play {
  display: none;
}

.mzk-entity-track.is-playing .mzk-entity-track__play .icon-pause,
.mzk-sb-artist-row.is-playing .mzk-sb-artist-play .icon-pause,
.mzk-pop-track.is-playing .mzk-pop-track__play .icon-pause {
  display: block;
  animation: mzk-track-icon-in .2s ease;
}

/* Bars pause (catalog / track-row / genres keep pseudo-bars) */
.mzk-catalog-track.is-playing .mzk-catalog-track__play::before,
.mzk-catalog-track.is-playing .mzk-catalog-track__play::after,
.mzk-track-row.is-playing .mzk-track-row__play::before,
.mzk-track-row.is-playing .mzk-track-row__play::after,
.mzk-genres-track.is-playing .mzk-genres-track__play::before,
.mzk-genres-track.is-playing .mzk-genres-track__play::after {
  background: #fff;
  animation: mzk-track-icon-in .2s ease;
}

.mzk-catalog-track.is-playing .mzk-catalog-track__play svg,
.mzk-track-row.is-playing .mzk-track-row__play svg,
.mzk-genres-track.is-playing .mzk-genres-track__play svg {
  display: none;
}

/* ---- Active row highlight ---- */
.mzk-entity-track.is-current,
.mzk-entity-track.is-playing,
.mzk-track-row.is-current,
.mzk-track-row.is-playing,
.mzk-sb-artist-row.is-current,
.mzk-sb-artist-row.is-playing {
  background: var(--color-active-nav-bg, #edebfc);
  border-radius: 12px;
}

.mzk-catalog-track.is-current,
.mzk-catalog-track.is-playing {
  background: var(--color-active-nav-bg, #edebfc);
  border-radius: 12px;
}

/* ---- Active title color ---- */
.mzk-entity-track.is-current .mzk-entity-track__info strong,
.mzk-entity-track.is-playing .mzk-entity-track__info strong,
.mzk-track-row.is-current .mzk-track-row__title,
.mzk-track-row.is-playing .mzk-track-row__title,
.mzk-sb-artist-row.is-current .mzk-sb-artist-name,
.mzk-sb-artist-row.is-playing .mzk-sb-artist-name,
.mzk-genres-track.is-current .mzk-genres-track__title,
.mzk-genres-track.is-playing .mzk-genres-track__title {
  color: var(--color-primary, #5b21ed);
}

/* ---- Fullstory related/artist rows ---- */
.mzk-fullstory-page .mzk-fullstory-artist-track.is-current,
.mzk-fullstory-page .mzk-fullstory-artist-track.is-playing,
.mzk-fullstory-page .mzk-fullstory-related-track.is-current,
.mzk-fullstory-page .mzk-fullstory-related-track.is-playing {
  background: #10202d;
  border-color: rgba(255,162,0,.18);
  border-radius: 14px;
}

.mzk-fullstory-page .mzk-fullstory-artist-track.is-current .mzk-entity-track__info strong,
.mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__info strong,
.mzk-fullstory-page .mzk-fullstory-related-track.is-current .mzk-entity-track__info strong,
.mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__info strong {
  color: #ffa200;
}

.mzk-fullstory-page .mzk-fullstory-artist-track.is-current .mzk-entity-track__play,
.mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__play,
.mzk-fullstory-page .mzk-fullstory-related-track.is-current .mzk-entity-track__play,
.mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__play,
.mzk-fullstory-page .mzk-fullstory-artist-track .mzk-entity-track__play[aria-pressed="true"],
.mzk-fullstory-page .mzk-fullstory-related-track .mzk-entity-track__play[aria-pressed="true"] {
  color: #111;
  background: #ffa200;
  border-color: #ffa200;
  box-shadow: 0 0 0 4px rgba(255,162,0,.08);
  animation: none;
}

.mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__play .icon-pause,
.mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__play .icon-pause,
.mzk-fullstory-page .mzk-fullstory-artist-track .mzk-entity-track__play[aria-pressed="true"] .icon-pause,
.mzk-fullstory-page .mzk-fullstory-related-track .mzk-entity-track__play[aria-pressed="true"] .icon-pause {
  display: none;
}

.mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__play .mzk-entity-track__equalizer,
.mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__play .mzk-entity-track__equalizer,
.mzk-fullstory-page .mzk-fullstory-artist-track .mzk-entity-track__play[aria-pressed="true"] .mzk-entity-track__equalizer,
.mzk-fullstory-page .mzk-fullstory-related-track .mzk-entity-track__play[aria-pressed="true"] .mzk-entity-track__equalizer {
  display: flex;
}

@media (hover: hover) {
  .mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__play:hover .mzk-entity-track__equalizer,
  .mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__play:hover .mzk-entity-track__equalizer,
  .mzk-fullstory-page .mzk-fullstory-artist-track .mzk-entity-track__play[aria-pressed="true"]:hover .mzk-entity-track__equalizer,
  .mzk-fullstory-page .mzk-fullstory-related-track .mzk-entity-track__play[aria-pressed="true"]:hover .mzk-entity-track__equalizer {
    display: none;
  }

  .mzk-fullstory-page .mzk-fullstory-artist-track.is-playing .mzk-entity-track__play:hover .icon-pause,
  .mzk-fullstory-page .mzk-fullstory-related-track.is-playing .mzk-entity-track__play:hover .icon-pause,
  .mzk-fullstory-page .mzk-fullstory-artist-track .mzk-entity-track__play[aria-pressed="true"]:hover .icon-pause,
  .mzk-fullstory-page .mzk-fullstory-related-track .mzk-entity-track__play[aria-pressed="true"]:hover .icon-pause {
    display: block;
  }
}

/* ---- Animations ---- */
@keyframes mzk-track-pulse {
  0% { box-shadow: 0 6px 16px rgba(var(--color-primary-rgb, 91, 33, 237), .32), 0 0 0 0 rgba(var(--color-primary-rgb, 91, 33, 237), .35); }
  100% { box-shadow: 0 6px 16px rgba(var(--color-primary-rgb, 91, 33, 237), .32), 0 0 0 12px rgba(var(--color-primary-rgb, 91, 33, 237), 0); }
}

@keyframes mzk-track-icon-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mzk-entity-track.is-playing .mzk-entity-track__play,
  .mzk-track-row.is-playing .mzk-track-row__play,
  .mzk-sb-artist-row.is-playing .mzk-sb-artist-play,
  .mzk-pop-track.is-playing .mzk-pop-track__play,
  .mzk-catalog-track.is-playing .mzk-catalog-track__play,
  .mzk-genres-track.is-playing .mzk-genres-track__play {
    animation: none;
  }
}

/* Catalog cards: button as standalone solid brand control (radio style) */
.mzk-catalog-track .mzk-catalog-track__play {
  background: var(--color-primary, #5b21ed);
  color: var(--color-on-primary);
}

.mzk-catalog-track:hover .mzk-catalog-track__play,
.mzk-catalog-track .mzk-catalog-track__play:hover {
  background: var(--color-primary-hover, #4c1dca);
  transform: scale(1.08);
}

/* ---- Mobile: >=44px tap targets ---- */
@media (max-width: 767px) {
  .mzk-pop-track__play,
  .mzk-catalog-track__play,
  .mzk-sb-artist-play,
  .mzk-genres-track__play {
    width: 48px;
    height: 48px;
  }

  .mzk-entity-track__play,
  .mzk-track-row__play {
    width: 44px;
    height: 44px;
  }

  .mzk-entity-track__play svg,
  .mzk-track-row__play svg,
  .mzk-sb-artist-play svg,
  .mzk-pop-track__play svg,
  .mzk-catalog-track__play svg,
  .mzk-genres-track__play svg {
    width: 21px;
    height: 21px;
  }
}