/* ============================================
   Songwriter24 – Audio Player Styles (scoped)
   Wirken nur innerhalb .sw24-player
   ============================================ */

/* ---- CI-Farben ---- */
:root{
  --sw24-accent:#3b86b0;   /* SW24 Blau */
  --sw24-accent-d:#336c8d; /* Hover/Darker */
  --sw24-rail:#e8edf2;
  --sw24-loaded:#d9e3ea;
  --sw24-text:#243447;
}

/* ---- Card-Look Container ---- */
.sw24-player .wp-audio-shortcode.mejs-container,
.sw24-player .mejs-container,
.sw24-player .mejs__container{
  background:#f2f2f2 !important;
  border-radius:12px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
  padding:8px 12px !important;
  overflow:hidden;
}

/* Controls-Leiste neutral */
.sw24-player .mejs-container .mejs-controls,
.sw24-player .mejs__container .mejs__controls,
.sw24-player .mejs-inner{ background:transparent !important; }

.sw24-player .mejs-controls,
.sw24-player .mejs__controls{
  padding:8px 10px !important;
  align-items:center;
  gap:8px;
}

/* ---- Zeiten / Text ---- */
.sw24-player .mejs-currenttime,
.sw24-player .mejs-duration,
.sw24-player .mejs__currenttime,
.sw24-player .mejs__duration{
  color:var(--sw24-text) !important;
  font-weight:600;
  font-size:13px;
}

/* ---- Timeline / Progress ---- */
.sw24-player .mejs-time-rail,
.sw24-player .mejs__time-rail{ padding:6px 10px !important; height:8px !important; }

.sw24-player .mejs-time-total,
.sw24-player .mejs__time-total{
  background:var(--sw24-rail) !important;
  height:4px !important;
  border-radius:999px !important;
}

.sw24-player .mejs-time-loaded,
.sw24-player .mejs__time-loaded{
  background:var(--sw24-loaded) !important;
  height:4px !important;
  border-radius:999px !important;
}

.sw24-player .mejs-time-current,
.sw24-player .mejs__time-current{
  background:var(--sw24-accent) !important;
  height:4px !important;
  border-radius:999px !important;
  position:relative;
}

/* Handle (Fallback über ::after, falls Theme keinen Handle rendert) */
.sw24-player .mejs-time-current::after,
.sw24-player .mejs__time-current::after{
  content:"";
  position:absolute; right:-7px; top:50%;
  width:14px; height:14px;
  transform:translateY(-50%);
  background:var(--sw24-accent);
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sw24-player .mejs-time-current:hover::after,
.sw24-player .mejs__time-current:hover::after{
  transform:translateY(-50%) scale(1.15);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}

/* ---- Buttons Basis (kein Kreis, keine Filterreste) ---- */
.sw24-player .mejs-button>button,
.sw24-player .mejs__button>button{
  width:36px !important;
  height:36px !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  background:none !important; background-image:none !important;
  box-shadow:none !important; filter:none !important;
  position:relative; outline:none !important; opacity:1 !important;
}

/* Play ► Icon */
.sw24-player .mejs-play button::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; transform:translate(-50%,-50%);
  background-color:var(--sw24-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
}
/* Pause ‖ Icon */
.sw24-player .mejs-pause button::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; transform:translate(-50%,-50%);
  background-color:var(--sw24-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 19h4V5H6zm8-14v14h4V5h-4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 19h4V5H6zm8-14v14h4V5h-4z'/></svg>") no-repeat center / contain;
}
/* Hover-Farbe für Interaktion */
.sw24-player .mejs-play button:hover::before,
.sw24-player .mejs-pause button:hover::before{ background-color:var(--sw24-accent-d) !important; }

/* Lautstärke-Icon (Lautsprecher) */
.sw24-player .mejs-volume-button button::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; transform:translate(-50%,-50%);
  background-color:var(--sw24-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10v4h4l5 5V5L7 10H3zM14 7.23v9.54c1.96-.5 3.5-2.25 3.5-4.77s-1.54-4.27-3.5-4.77z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10v4h4l5 5V5L7 10H3zM14 7.23v9.54c1.96-.5 3.5-2.25 3.5-4.77s-1.54-4.27-3.5-4.77z'/></svg>") no-repeat center / contain;
}
.sw24-player .mejs-volume-button button:hover::before{ background-color:var(--sw24-accent-d) !important; }

/* ---- Lautstärke-Slider ---- */
.sw24-player .mejs-horizontal-volume-slider,
.sw24-player .mejs__horizontal-volume-slider{ width:90px !important; }

.sw24-player .mejs-horizontal-volume-total,
.sw24-player .mejs__horizontal-volume-total{
  background:var(--sw24-rail) !important;
  height:4px !important; border-radius:999px !important;
}
.sw24-player .mejs-horizontal-volume-current,
.sw24-player .mejs__horizontal-volume-current{
  background:var(--sw24-accent) !important;
  height:4px !important; border-radius:999px !important;
}

/* Kleinere Abstände zwischen Controls */
.sw24-player .mejs-controls .mejs-button,
.sw24-player .mejs__controls .mejs__button{ margin-right:4px; }

/* ---- Mobile Tweaks ---- */
@media (max-width:600px){
  .sw24-player .mejs-horizontal-volume-slider,
  .sw24-player .mejs__horizontal-volume-slider{ display:none !important; }
  .sw24-player .mejs-controls,
  .sw24-player .mejs__controls{ padding:8px 8px !important; gap:6px; }
}