/* Dawah compact right player V19 */

/*
 * Desktop starts as a small mini-player at the bottom-right.
 * It grows only when the user expands it.
 */

body .m18-player {
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  width: 360px !important;
  max-width: calc(100vw - 36px) !important;
  transition: width 220ms ease !important;
}

body .m18-player.is-expanded {
  width: 560px !important;
}

body .m18-player-panel {
  width: 100% !important;
  margin: 0 0 8px !important;
  border-radius: 18px !important;
  box-shadow:
    0 24px 65px rgba(4, 36, 27, 0.23),
    0 5px 18px rgba(4, 36, 27, 0.1) !important;
}

/* Mini dock */

body .m18-player-dock {
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) 37px 37px !important;
  grid-template-rows: 48px !important;
  gap: 7px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(10, 69, 52, 0.14) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.99),
      rgba(246,249,244,0.99)
    ) !important;
  box-shadow:
    0 16px 45px rgba(4, 38, 28, 0.19),
    0 3px 10px rgba(4, 38, 28, 0.07) !important;
}

body .m18-main-play {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 43px !important;
  height: 43px !important;
  background:
    linear-gradient(145deg, #0b5944, #063b2e) !important;
  box-shadow: 0 8px 18px rgba(5, 69, 51, 0.2) !important;
}

body .m18-now-playing {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body [data-player-expand] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body [data-player-close] {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body .m18-player:not(.is-expanded) .m18-progress-area,
body .m18-player:not(.is-expanded) .m18-volume,
body .m18-player:not(.is-expanded) .m18-speed,
body .m18-player:not(.is-expanded) [data-player-pip] {
  display: none !important;
}

body .m18-now-playing > span {
  color: #5f786c !important;
  font-size: 7px !important;
  letter-spacing: 0.11em !important;
}

body .m18-now-playing strong {
  margin-top: 1px !important;
  color: #103d31 !important;
  font-size: 12px !important;
}

body .m18-now-playing small {
  margin-top: 2px !important;
  color: #708078 !important;
  font-size: 9px !important;
}

/* Expanded dock */

body .m18-player.is-expanded .m18-player-dock {
  grid-template-columns:
    43px minmax(0, 1fr) 37px 37px 37px !important;
  grid-template-rows: 48px 32px 37px !important;
  min-height: 137px !important;
  padding: 8px 10px 9px !important;
}

body .m18-player.is-expanded .m18-main-play {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body .m18-player.is-expanded .m18-now-playing {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body .m18-player.is-expanded [data-player-expand] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body .m18-player.is-expanded [data-player-pip] {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body .m18-player.is-expanded [data-player-close] {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

body .m18-player.is-expanded .m18-progress-area {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
}

body .m18-player.is-expanded .m18-volume {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  display: grid !important;
  width: min(180px, 100%) !important;
}

body .m18-player.is-expanded .m18-speed {
  grid-column: 3 / 5 !important;
  grid-row: 3 !important;
  display: flex !important;
  justify-self: end !important;
}

/*
 * YouTube has its own accurate timeline inside the iframe.
 * Play, pause, volume and speed remain available in our dock.
 */

body .m18-player.is-youtube .m18-progress-area {
  display: none !important;
}

body .m18-player.is-youtube.is-expanded .m18-player-dock {
  grid-template-rows: 48px 37px !important;
  min-height: 103px !important;
}

body .m18-player.is-youtube.is-expanded .m18-volume {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;
}

body .m18-player.is-youtube.is-expanded .m18-speed {
  grid-column: 3 / 5 !important;
  grid-row: 2 !important;
}

/* Expanded media panel */

body .m18-player.is-expanded .m18-player-panel {
  max-height: min(65vh, 500px) !important;
}

body .m18-player-video,
body .m18-player-video video,
body .m18-player-video [data-youtube-frame] {
  border-radius: 18px !important;
}

body .m18-player-video {
  overflow: hidden !important;
}

body .m18-player-video > a {
  border-radius: 0 0 18px 18px !important;
  background: #073d30 !important;
}

body .m18-player-audio {
  min-height: 168px !important;
  padding: 23px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(
      circle at 88% 13%,
      rgba(216, 240, 158, 0.32),
      transparent 145px
    ),
    linear-gradient(135deg, #073d30, #146248) !important;
}

body .m18-player-art {
  width: 68px !important;
  height: 68px !important;
}

body .m18-player-audio > div strong {
  font-size: 19px !important;
}

/* Controls */

body .m18-dock-button {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #dce5de !important;
  background: #f3f7f1 !important;
  color: #315e4e !important;
}

body .m18-dock-button:hover {
  border-color: #b9ccbf !important;
  background: #eaf1e7 !important;
}

body .m18-progress-area input,
body .m18-volume input {
  height: 17px !important;
  accent-color: #0a5843 !important;
  cursor: pointer !important;
}

body .m18-speed select {
  min-width: 68px !important;
  min-height: 33px !important;
  border-radius: 9px !important;
}

/* Player message stays attached to the right player */

body .m18-player-message {
  width: 100% !important;
  margin: 6px 0 0 !important;
}

/* Slightly smaller, better-balanced media cards */

@media (min-width: 1300px) {
  body .m18-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body .m18-card {
    grid-template-rows: 108px minmax(104px, auto) auto !important;
  }

  body .m18-cover {
    min-height: 108px !important;
  }
}

/* Mobile: compact bottom player above navigation */

@media (max-width: 720px) {
  body .m18-player,
  body .m18-player.is-expanded {
    right: 8px !important;
    bottom: calc(
      72px + env(safe-area-inset-bottom, 0px)
    ) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  body .m18-player-dock {
    grid-template-columns:
      41px minmax(0, 1fr) 36px 36px !important;
    grid-template-rows: 45px !important;
    min-height: 61px !important;
    border-radius: 15px !important;
  }

  body .m18-player.is-expanded .m18-player-dock {
    grid-template-columns:
      41px minmax(0, 1fr) 36px 36px !important;
    grid-template-rows: 45px 30px !important;
    min-height: 98px !important;
  }

  body .m18-player.is-expanded [data-player-expand] {
    grid-column: 3 !important;
  }

  body .m18-player.is-expanded [data-player-close] {
    grid-column: 4 !important;
  }

  body .m18-player.is-expanded [data-player-pip] {
    display: none !important;
  }

  body .m18-player.is-expanded .m18-progress-area {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body .m18-player.is-expanded .m18-volume,
  body .m18-player.is-expanded .m18-speed {
    display: none !important;
  }

  body .m18-player.is-youtube.is-expanded .m18-player-dock {
    grid-template-rows: 45px !important;
    min-height: 61px !important;
  }

  body .m18-player-panel {
    margin-bottom: 6px !important;
    border-radius: 16px !important;
  }

  body .m18-player.is-expanded .m18-player-panel {
    max-height: 54vh !important;
  }

  body .m18-player-video,
  body .m18-player-video video,
  body .m18-player-video [data-youtube-frame],
  body .m18-player-audio {
    border-radius: 16px !important;
  }

  body .m18-player-audio {
    min-height: 135px !important;
    padding: 17px !important;
  }

  body .m18-player-art {
    width: 55px !important;
    height: 55px !important;
  }

  body .m18-player-audio > div strong {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .m18-player {
    transition: none !important;
  }
}