
/* Podcast.ma Global Player (v2) - light premium */
:root{
  --pmu-paper:#f4f0e8;
  --pmu-card:#ffffff;
  --pmu-ink:#111111;
  --pmu-muted:rgba(0,0,0,.62);
  --pmu-border:rgba(0,0,0,.10);
  --pmu-shadow: 0 16px 50px rgba(0,0,0,.12);
  --pmu-accent:#ff6a2a; /* Thmanyah-like accent */
}

/* Inline trigger */
.pmu-track{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  background: var(--pmu-card);
  border:1px solid var(--pmu-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  margin: 16px 0 18px;
}
.pmu-track__cover{
  width:66px;height:66px;border-radius:16px;overflow:hidden;
  background: linear-gradient(180deg, rgba(255,106,42,.14), rgba(0,0,0,.02));
  border:1px solid rgba(0,0,0,.06);
  flex:0 0 auto;
}
.pmu-track__cover img{width:100%;height:100%;object-fit:cover}
.pmu-track__meta{min-width:0;flex:1}
.pmu-track__title{
  font-weight:900;
  color:var(--pmu-ink);
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pmu-track__sub{display:flex; gap:10px; flex-wrap:wrap; color:var(--pmu-muted); font-weight:700; font-size:13px}
.pmu-track__actions{display:flex; align-items:center; gap:10px}
.pmu-btn{
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.86);
  font-weight:850;
  cursor:pointer;
}
.pmu-btn:hover{background: rgba(0,0,0,.05)}
.pmu-btn--play{
  width:48px; padding:0;
  border-color: transparent;
  background: var(--pmu-accent);
  color:#fff;
  box-shadow: 0 10px 24px rgba(255,106,42,.18);
}
.pmu-btn--play:hover{filter:brightness(.98)}
.pmu-btn--icon{width:44px;padding:0;font-size:18px}

/* Global footer player */
.pmu-gp{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  background: rgba(244,240,232,.92);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--pmu-border);
  box-shadow: 0 -18px 60px rgba(0,0,0,.14);
}
.pmu-gp[hidden]{display:none !important}
.pmu-gp__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 18px;
}
.pmu-gp__left{
  display:flex; align-items:center; gap:12px;
  min-width: 240px;
}
.pmu-gp__cover{width:46px;height:46px;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.06)}
.pmu-gp__cover img{width:100%;height:100%;object-fit:cover}
.pmu-gp__text{min-width:0}
.pmu-gp__title{
  font-weight:900;color:var(--pmu-ink);font-size:14px;line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pmu-gp__meta{color:var(--pmu-muted);font-weight:700;font-size:12px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.pmu-gp__mid{flex:1;min-width:0}
.pmu-gp__controls{display:flex;align-items:center;gap:10px}
.pmu-gp__time{font-variant-numeric:tabular-nums;color:var(--pmu-muted);font-weight:800;font-size:12px;min-width:92px;text-align:center}
.pmu-range{width:100%; accent-color: var(--pmu-accent)}
.pmu-gp__right{display:flex;align-items:center;gap:10px}
.pmu-gp__close{width:42px;height:42px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.03);cursor:pointer;font-size:20px;line-height:1}
.pmu-gp__close:hover{background:rgba(0,0,0,.06)}

@media (max-width: 820px){
  .pmu-gp__left{min-width:0}
  .pmu-gp__meta{display:none}
}
@media (max-width: 640px){
  .pmu-gp__cover{display:none}
  .pmu-gp__time{display:none}
}
body.pmu-gp-on{padding-bottom: 92px;}


@media (max-width: 520px){
  .pmu-track{flex-direction:column; align-items:flex-start}
  .pmu-track__actions{width:100%; justify-content:flex-start}
  .pmu-track__meta{width:100%}
  .pmu-btn{height:46px}
}


/* ===== Player layout fixes (long titles + mobile) ===== */
.pmu-gp{max-width: 1180px; margin: 0 auto;}
.pmu-gp__bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
}
.pmu-gp__meta{
  min-width: 0;
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.pmu-gp__cover{
  width:44px; height:44px; border-radius: 12px; overflow:hidden; flex: 0 0 auto;
  background: rgba(0,0,0,.06);
}
.pmu-gp__titleWrap{min-width:0; flex: 1 1 auto;}
.pmu-gp__title{
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pmu-gp__subtitle{
  font-weight: 850;
  color: rgba(0,0,0,.58);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.pmu-gp__controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}
.pmu-gp__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}
.pmu-gp__progress{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}
.pmu-gp__time{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: rgba(0,0,0,.65);
  font-size: 12px;
  min-width: 78px;
  text-align:right;
}

/* Mobile: stack parts, big touch targets, keep title visible */
@media (max-width: 640px){
  .pmu-gp__bar{flex-direction:column; align-items:stretch; gap:10px;}
  .pmu-gp__meta{gap:10px;}
  .pmu-gp__cover{width:40px;height:40px;border-radius:12px}
  .pmu-gp__controls{justify-content:space-between}
  .pmu-gp__progress{min-width: 0; width:100%;}
  .pmu-gp__time{min-width: 0; text-align:left;}
  .pmu-btn, .pmu-gp button{min-height:44px}
}


/* Overrides for existing footer player structure */
.pmu-gp__inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
}
.pmu-gp__left{display:flex; align-items:center; gap:12px; min-width:0; flex: 1 1 360px;}
.pmu-gp__text{min-width:0; flex:1 1 auto;}
.pmu-gp__title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 100%;}
.pmu-gp__meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 100%;}

.pmu-gp__mid{flex: 1 1 420px; min-width: 280px;}
.pmu-gp__controls{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
.pmu-gp__right{display:flex; align-items:center; gap:10px; flex: 0 0 auto;}

@media (max-width: 700px){
  .pmu-gp__inner{flex-direction:column; align-items:stretch; gap:10px;}
  .pmu-gp__left{flex: 1 1 auto;}
  .pmu-gp__mid{min-width:0;}
  .pmu-gp__controls{justify-content:space-between;}
  .pmu-gp__right{justify-content:space-between; flex-wrap:wrap;}
  #pmu-gp-vol{max-width:none !important; flex:1 1 auto;}
}
