/* IDP MP3 Player UI */
.mp3p{
  --mp3p-bg:#0b1220;
  --mp3p-card:#0f1b33;
  --mp3p-text:#e5e7eb;
  --mp3p-muted:#9ca3af;
  --mp3p-accent:#3b82f6;
  --mp3p-accent2:#22c55e;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--mp3p-text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.20), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(34,197,94,.16), transparent 55%),
              var(--mp3p-bg);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  border-radius: 16px;
  padding: 14px;
  max-width: 820px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.mp3p__top{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;}
.mp3p__now{display:flex;gap:12px;align-items:center;min-width:220px;}
/* Cover art: small thumbnail next to title (no awkward letterboxing/cropping) */
.mp3p__coverwrap{
  position:relative;
  width:72px;
  height:40px;
  flex:0 0 72px;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)
}
.mp3p__coverwrap::before{content:"";position:absolute;inset:0;background-image:var(--mp3p-cover);background-size:cover;background-position:center;filter:blur(10px);transform:scale(1.2);opacity:.65}
.mp3p__coverimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mp3p__cover--placeholder, .mp3p__coverwrap--placeholder{width:72px;height:40px;flex:0 0 72px;aspect-ratio:16/9;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.mp3p__nowtext{display:flex;flex-direction:column;}
.mp3p__title{font-weight:700;font-size:16px;line-height:1.2;}
.mp3p__meta{color:var(--mp3p-muted);font-size:13px;margin-top:4px;}
.mp3p__colors{display:flex;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:12px;}
.mp3p__colors label{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mp3p-muted);}
.mp3p__colors input[type="color"]{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;}
.mp3p__controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.mp3p__btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--mp3p-text);padding:7px 9px;border-radius:12px;cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease;user-select:none;}
.mp3p__btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.mp3p__btn:active{transform:scale(.98);}
.mp3p__btn--primary{background:linear-gradient(135deg,var(--mp3p-accent),var(--mp3p-accent2));border-color:transparent;font-weight:700;min-width:56px;}
.mp3p__vol{display:flex;gap:10px;align-items:center;margin-left:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:12px;}
.mp3p__seek{display:flex;gap:10px;align-items:center;margin-top:12px;}
.mp3p__time{font-variant-numeric:tabular-nums;color:var(--mp3p-muted);font-size:12px;width:44px;text-align:center;}
.mp3p__range{width:100%;accent-color:var(--mp3p-accent);}
.mp3p__seek .mp3p__range{flex:1;}
.mp3p__list{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;padding-right:4px;}
.mp3p__track{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;}
.mp3p__track:hover{background:rgba(255,255,255,.06);}
.mp3p__track.is-active{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.45);}
.mp3p__track.is-playing{
  border-color: var(--mp3p-accent2);
  box-shadow: 0 0 0 1px var(--mp3p-accent2) inset;
  background: rgba(255,255,255,.06);
}
.mp3p__track.is-playing .t{color: var(--mp3p-accent2);}
.mp3p__track .left{display:flex;flex-direction:column;gap:2px;}
.mp3p__track .t{font-weight:600;}
.mp3p__track .a,.mp3p__track .d{font-size:12px;color:var(--mp3p-muted);font-variant-numeric:tabular-nums;}

/* Share menu + per-track copy link */
.mp3p__sharemenu{
  position:absolute;
  z-index:9999;
  min-width:200px;
  max-width: calc(100vw - 24px);
  background:rgba(15,27,51,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

/* Some themes override box-sizing on links/buttons, causing the last items
   (Email/Text) to render wider than the menu. Clamp it here. */
.mp3p__sharemenu,
.mp3p__sharemenu *{box-sizing:border-box;}
.mp3p__sharemenu button,
.mp3p__sharemenu a{
  width:100%;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  color:var(--mp3p-text);
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.mp3p__sharemenu button:hover,
.mp3p__sharemenu a:hover{background:rgba(255,255,255,.08);}
.mp3p__sharemenu .mp3p__sharegrid{display:flex;flex-direction:column;gap:8px;}

.mp3p__copybtn{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
}
.mp3p__copybtn .mp3p__ico{width:18px;height:18px;display:block;}
.mp3p__copybtn:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.14);}
.mp3p__copybtn:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:2px;}
.mp3p__copybtn.is-copied{border-color:rgba(46, 204, 113, .8);}
.mp3p__copybtn.is-failed{border-color:rgba(231, 76, 60, .85);}


/* Spacer below player */
.bfmp3p-wrap{margin-bottom:50px;}

/* Bigger transport buttons + remove colored fills (v1.3.1) */
.mp3p__controls{gap:10px;flex-wrap:wrap;}
.mp3p__btn{font-size:16px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:10px;

  background:transparent !important;
  border:2px solid currentColor;
  color:var(--mp3p-text);
  font-size:22px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.mp3p__btn:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.35);}
.mp3p__btn:active{transform:scale(.98);}
.mp3p__btn--primary{
  width:54px;
  height:54px;
  min-width:54px;
  min-height:54px;
  border-radius:12px;
  font-size:26px;
  font-weight:700;
  background:transparent !important;
  border:3px solid currentColor;
}

/* Hide Next/Previous when there is only one track */
.mp3p.mp3p--single [data-action="prev"],
.mp3p.mp3p--single [data-action="next"]{display:none !important;}

/* Mobile layout: keep Prev/Next on the same row as Volume */
@media (max-width: 520px){
  .mp3p__controls{gap:8px;}
  .mp3p__controls [data-action="rew"]{order:1;}
  .mp3p__controls [data-action="play"]{order:2;}
  .mp3p__controls [data-action="stop"]{order:3;}
  .mp3p__controls [data-action="ff"]{order:4;}
  .mp3p__controls [data-action="prev"]{order:10;}
  .mp3p__controls [data-action="next"]{order:11;}
  .mp3p__vol{order:12;margin-left:0;flex:1 1 220px;}
}

/* === Playlist readability (force white text) === */
.mp3p__track .t,
.mp3p__track .a{
  color:#fff !important;
}
.mp3p__copybtn{
  color:#fff !important;
}
.mp3p__copybtn:hover,
.mp3p__copybtn:focus{
  color:#fff !important;
}