/*
 * Date-controlled playlist layout.
 *
 * This recreates the established /shows/ rhythm inside one automated
 * playlist: a white Lato heading, the player immediately below it, then
 * breathing room before the next broadcast.
 */

.dzsap-datectrl .slider-main {
  display: block !important;
}

.audiogallery.dzsap-datectrl {
  background-color: transparent !important;
}

.dzsap-datectrl .slider-clipper {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.dzsap-datectrl .dzsap-datectrl-item {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 36px !important;
  margin-bottom: 24px !important;
  padding-bottom: 14px !important;
  padding-left: 0 !important;
  background-color: var(--dzsap-datectrl-player-bg);
}

.dzsap-datectrl .dzsap-datectrl-heading {
  position: absolute;
  top: -36px;
  left: 0;
  right: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 1px;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dzsap-datectrl .dzsap-datectrl-item .the-thumb-con,
.dzsap-datectrl .dzsap-datectrl-item .the-thumb {
  background-color: #000 !important;
  border-radius: 0 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .meta-artist .the-artist,
.dzsap-datectrl .dzsap-datectrl-item .meta-artist .the-artist * {
  color: #000 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15;
}

.dzsap-datectrl .dzsap-datectrl-item .meta-artist .the-name,
.dzsap-datectrl .dzsap-datectrl-item .meta-artist .the-name > a,
.dzsap-datectrl .dzsap-datectrl-item .meta-artist .the-name object > a {
  color: #000 !important;
  font-weight: 800 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html--bottom-left,
.dzsap-datectrl .dzsap-datectrl-item .extra-html--left:first-child {
  margin-left: 14px;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html--bottom-left {
  align-items: center;
  display: inline-flex !important;
  gap: 10px;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html:not(.feed-dzsap--extra-html--bottom-left):not(.feed-dzsap--extra-html-in-controls-right) {
  box-sizing: border-box;
  transform: translateX(14px);
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html--bottom-left + .feed-dzsap--extra-html:not(.feed-dzsap--extra-html-in-controls-right) {
  transform: none;
}

.dzsap-datectrl .dzsap-datectrl-item:not(:has(.feed-dzsap--extra-html--bottom-left)) .dzsap-extra-html--section-bottom {
  transform: translateX(14px);
}

.dzsap-datectrl .dzsap-datectrl-item:has(.feed-dzsap--extra-html--bottom-left) .dzsap-extra-html--section-bottom {
  transform: none;
}

.dzsap-datectrl .dzsap-datectrl-item .dzsap-extra-html--section-bottom .dzsap-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 17px;
}

.dzsap-datectrl .dzsap-datectrl-item .dzsap-extra-html--section-bottom .dzsap-counter i,
.dzsap-datectrl .dzsap-datectrl-item .dzsap-extra-html--section-bottom .dzsap-counter .the-number {
  display: inline-block;
  font-size: 17px;
  line-height: 17px;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html:not(.feed-dzsap--extra-html--bottom-left):not(.feed-dzsap--extra-html-in-controls-right) .dzsap-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 17px;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html:not(.feed-dzsap--extra-html--bottom-left):not(.feed-dzsap--extra-html-in-controls-right) .dzsap-counter i,
.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html:not(.feed-dzsap--extra-html--bottom-left):not(.feed-dzsap--extra-html-in-controls-right) .dzsap-counter .the-number {
  display: inline-block;
  font-size: 17px;
  line-height: 17px;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds a {
  color: #111 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds {
  align-items: center;
  display: inline-flex !important;
  min-height: 34px;
  margin-right: 8px;
  padding: 6px 12px !important;
  border-radius: 999px;
  font-size: 13px !important;
  letter-spacing: 0.01em;
}

.dzsap-datectrl .dzsap-datectrl-item .feed-dzsap--extra-html--bottom-left .btn-zoomsounds {
  margin-right: 0;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds:before,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds > .the-bg {
  background-color: rgba(17, 17, 17, 0.07) !important;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds:hover:before,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds:hover > .the-bg {
  background-color: rgba(17, 17, 17, 0.13) !important;
  border-color: rgba(17, 17, 17, 0.32);
  transform: scale(1);
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-icon,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-label,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .btn-label {
  line-height: 18px !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-label,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .btn-label {
  font-size: 13px !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like {
  position: relative;
  width: 34px;
  min-height: 34px;
  justify-content: center;
  padding: 6px !important;
  overflow: visible;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like:before,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like > .the-bg {
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like:hover:before,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like:hover > .the-bg {
  background-color: rgba(17, 17, 17, 0.08) !important;
  border-color: transparent;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-icon {
  margin-right: 0 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-icon > svg {
  width: 17px;
  height: 17px;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-label,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .hide-on-active,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .show-on-active {
  display: none !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-icon > svg path,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-icon > svg polygon,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds .the-icon > svg polyline {
  fill: #111 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-icon > svg path,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-icon > svg polygon,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like .the-icon > svg polyline {
  fill: #6f7680 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active .the-label,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active .show-on-active {
  color: #d71920 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like:hover .the-icon > svg path,
.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active .the-icon > svg path {
  fill: #d71920 !important;
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active .the-icon {
  animation: dzsap-datectrl-heart-pop 560ms cubic-bezier(0.2, 1.6, 0.35, 1) both;
  filter: drop-shadow(0 0 7px rgba(215, 25, 32, 0.45));
}

.dzsap-datectrl .dzsap-datectrl-item .btn-zoomsounds.btn-like.active:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 96px;
  pointer-events: none;
  background:
    radial-gradient(circle, #d71920 0 2px, transparent 3px) 50% 2% / 9px 9px no-repeat,
    radial-gradient(circle, #ff2f6d 0 2px, transparent 3px) 82% 12% / 9px 9px no-repeat,
    radial-gradient(circle, #ffd34d 0 2px, transparent 3px) 96% 48% / 8px 8px no-repeat,
    radial-gradient(circle, #ff8a00 0 2px, transparent 3px) 78% 88% / 8px 8px no-repeat,
    radial-gradient(circle, #ffb3b6 0 2px, transparent 3px) 50% 98% / 9px 9px no-repeat,
    radial-gradient(circle, #37d7ff 0 2px, transparent 3px) 18% 88% / 8px 8px no-repeat,
    radial-gradient(circle, #8d5cff 0 2px, transparent 3px) 4% 48% / 8px 8px no-repeat,
    radial-gradient(circle, #ff5a5f 0 2px, transparent 3px) 18% 12% / 9px 9px no-repeat,
    radial-gradient(circle, rgba(215, 25, 32, 0.6) 0 1px, transparent 2px) 62% 24% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255, 211, 77, 0.75) 0 1px, transparent 2px) 74% 62% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(55, 215, 255, 0.7) 0 1px, transparent 2px) 30% 62% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255, 47, 109, 0.65) 0 1px, transparent 2px) 38% 24% / 5px 5px no-repeat;
  transform: translate(-50%, -50%) scale(0.12) rotate(0deg);
  animation: dzsap-datectrl-like-firework 760ms cubic-bezier(0.12, 0.78, 0.26, 1) both;
}

.dzsap-datectrl .dzsap-datectrl-item .counter-likes .fa-heart {
  color: #d71920;
}

@media (prefers-reduced-motion: no-preference) {
  .dzsap-datectrl .dzsap-datectrl-item.dzsap-loaded .meta-artist .the-artist,
  .dzsap-datectrl .dzsap-datectrl-item.dzsap-loaded .meta-artist .the-name {
    animation: dzsap-datectrl-meta-pop 420ms ease-out both;
  }

  .dzsap-datectrl .dzsap-datectrl-item.dzsap-loaded .meta-artist .the-name {
    animation-delay: 70ms;
  }
}

@keyframes dzsap-datectrl-meta-pop {
  from {
    opacity: 0.72;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dzsap-datectrl-like-firework {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12) rotate(0deg);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78) rotate(18deg);
  }

  58% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.18) rotate(36deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.68) rotate(62deg);
  }
}

@keyframes dzsap-datectrl-heart-pop {
  0% {
    transform: scale(0.86) rotate(-8deg);
  }

  28% {
    transform: scale(1.42) rotate(8deg);
  }

  58% {
    transform: scale(0.96) rotate(-3deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}