/*
 * OHVO shared demo player system - staging May 2026.
 *
 * Live migration note:
 * Copy this file to the OHVO child theme at
 * wp-content/themes/ohvo-child/css/ohvo-demo-player-system.css
 * and copy the matching enqueue block near the bottom of functions.php.
 *
 * Purpose:
 * Keep Divi/MediaElement audio players consistent across /demos/,
 * service pages, and other OHVO demo sections. This intentionally handles
 * the player controls only; page/card layout remains in the page-specific CSS.
 */

:root {
  --ohvo-player-green: #8ead2d;
  --ohvo-player-track: #dfe2dc;
  --ohvo-player-loaded: #c9cec4;
}

#main-content .ohvo-demo-audio .mejs-container,
#main-content .voicemail-list .et_pb_audio_module .mejs-container,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-container {
  width: 100% !important;
  max-width: 206px !important;
  height: 34px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow: visible !important;
}

#main-content .ohvo-demo-audio .mejs-controls,
#main-content .voicemail-list .et_pb_audio_module .mejs-controls,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-controls {
  position: static !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 11px !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#main-content .ohvo-demo-audio .mejs-button.mejs-playpause-button,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-playpause-button,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-playpause-button {
  display: block !important;
  grid-column: 1 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-content .ohvo-demo-audio .mejs-button button,
#main-content .voicemail-list .et_pb_audio_module .mejs-button button,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button button {
  position: relative !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ohvo-player-green) !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#main-content .ohvo-demo-audio .mejs-button.mejs-playpause-button button::before,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-playpause-button button::before,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-playpause-button button::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 8px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 8px solid #fff !important;
  margin: 0 !important;
  background: transparent !important;
}

#main-content .ohvo-demo-audio .mejs-button.mejs-pause button::before,
#main-content .ohvo-demo-audio .mejs-button.mejs-pause button::after,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-pause button::before,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-pause button::after,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-pause button::before,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-pause button::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  width: 4px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: #fff !important;
  margin: 0 !important;
}

#main-content .ohvo-demo-audio .mejs-button.mejs-pause button::before,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-pause button::before,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-pause button::before {
  left: 9px !important;
}

#main-content .ohvo-demo-audio .mejs-button.mejs-pause button::after,
#main-content .voicemail-list .et_pb_audio_module .mejs-button.mejs-pause button::after,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-button.mejs-pause button::after {
  left: 15px !important;
}

#main-content .ohvo-demo-audio .mejs-time-rail,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 34px !important;
}

#main-content .ohvo-demo-audio .mejs-time-rail .mejs-time-total,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail .mejs-time-total,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail .mejs-time-total {
  width: 100% !important;
  margin: 15px 0 0 !important;
  background: var(--ohvo-player-track) !important;
  height: 3px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#main-content .ohvo-demo-audio .mejs-time-rail .mejs-time-loaded,
#main-content .ohvo-demo-audio .mejs-time-rail .mejs-time-current,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail .mejs-time-loaded,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail .mejs-time-current,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail .mejs-time-loaded,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail .mejs-time-current {
  height: 4px !important;
  border-radius: 999px !important;
}

#main-content .ohvo-demo-audio .mejs-time-rail .mejs-time-current,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail .mejs-time-current,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail .mejs-time-current {
  background: var(--ohvo-player-green) !important;
}

#main-content .ohvo-demo-audio .mejs-time-rail .mejs-time-loaded,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-rail .mejs-time-loaded,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-rail .mejs-time-loaded {
  background: var(--ohvo-player-loaded) !important;
}

#main-content .ohvo-demo-audio .mejs-time-handle,
#main-content .ohvo-demo-audio .mejs-time-handle-content,
#main-content .ohvo-demo-audio .mejs-time-float,
#main-content .ohvo-demo-audio .mejs-time,
#main-content .ohvo-demo-audio .mejs-volume-button,
#main-content .ohvo-demo-audio .mejs-horizontal-volume-slider,
#main-content .ohvo-demo-audio .mejs-horizontal-volume-total,
#main-content .ohvo-demo-audio .mejs-horizontal-volume-current,
#main-content .ohvo-demo-audio .mejs-horizontal-volume-handle,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-handle,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-handle-content,
#main-content .voicemail-list .et_pb_audio_module .mejs-time-float,
#main-content .voicemail-list .et_pb_audio_module .mejs-time,
#main-content .voicemail-list .et_pb_audio_module .mejs-volume-button,
#main-content .voicemail-list .et_pb_audio_module .mejs-horizontal-volume-slider,
#main-content .voicemail-list .et_pb_audio_module .mejs-horizontal-volume-total,
#main-content .voicemail-list .et_pb_audio_module .mejs-horizontal-volume-current,
#main-content .voicemail-list .et_pb_audio_module .mejs-horizontal-volume-handle,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-handle,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-handle-content,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time-float,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-time,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-volume-button,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-horizontal-volume-slider,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-horizontal-volume-total,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-horizontal-volume-current,
#main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-horizontal-volume-handle {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  #main-content .ohvo-demo-audio .mejs-container,
  #main-content .voicemail-list .et_pb_audio_module .mejs-container,
  #main-content .ohvo-home-demo-section .et_pb_audio_module .mejs-container {
    max-width: 214px !important;
  }
}

/*
 * /demos card breathing room - staging May 2026.
 * Keeps the shared player from sitting on the bottom edge of older Divi
 * carousel cards.
 */
#main-content .ohvo-home-demo-section .voicemail-list .et_pb_audio_module {
  box-sizing: border-box !important;
  padding-bottom: 24px !important;
}

#main-content .ohvo-home-demo-section .voicemail-list .et_audio_container {
  padding-bottom: 8px !important;
}

/*
 * Demo carousel mobile dot tidy - staging May 2026.
 * Older Divi demo carousels can output many Slick dots; keep them calm and
 * single-line so the shared green demo-player style still feels modern.
 */
#main-content .voicemail-list .slick-dots,
#main-content .ohvo-home-demo-section .slick-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 22px !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#main-content .voicemail-list .slick-dots li,
#main-content .ohvo-home-demo-section .slick-dots li {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
}

#main-content .voicemail-list .slick-dots li button,
#main-content .ohvo-home-demo-section .slick-dots li button {
  appearance: none !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #c2c6bc !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#main-content .voicemail-list .slick-dots li button::before,
#main-content .ohvo-home-demo-section .slick-dots li button::before {
  display: none !important;
}

#main-content .voicemail-list .slick-dots li.slick-active button,
#main-content .ohvo-home-demo-section .slick-dots li.slick-active button {
  background: #8ead2d !important;
  box-shadow: 0 0 0 4px #f4f7ea !important;
}

@media (max-width: 640px) {
  #main-content .voicemail-list .slick-dots,
  #main-content .ohvo-home-demo-section .slick-dots {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 176px !important;
    max-height: 20px !important;
    height: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  #main-content .voicemail-list .slick-dots li,
  #main-content .ohvo-home-demo-section .slick-dots li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* End OHVO shared demo player system - staging May 2026. */