/* ============================================================
   Dua audio playback — play button used on /duas/ hub cards and
   /duas/<slug>/ detail pages. Own file per BUILD_SPEC (does not
   touch library.css / dua-detail.css / assets/styles.css).
   ============================================================ */

.dua-play{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--gold);background:var(--bg-elevated);
  border:1px solid var(--line-strong);border-radius:100px;
  padding:8px 16px;cursor:pointer;transition:.16s;
  line-height:1;
}
.dua-play:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--bg-elevated));}
.dua-play .icon{display:inline-flex;width:14px;height:14px;flex-shrink:0}
.dua-play .icon svg{width:100%;height:100%;display:block}
.dua-play .icon .pause-shape{display:none}
.dua-play[data-state="playing"] .icon .play-shape{display:none}
.dua-play[data-state="playing"] .icon .pause-shape{display:block}
.dua-play[data-state="loading"]{opacity:.65;cursor:wait}
.dua-play[data-state="playing"]{color:var(--emerald);background:color-mix(in srgb,var(--gold) 16%,var(--bg-elevated));border-color:var(--gold);}

/* detail page — sits right under the .ayah-arabic card */
.dua-play-detail{margin:-4px 0 18px;}

/* hub card — inline, small, doesn't compete with the card link */
.dua-card{position:relative;}
.dua-play-card{
  position:absolute;top:20px;right:20px;
  padding:6px 12px;font-size:12px;gap:6px;
  z-index:2;
}
.dua-play-card .icon{width:12px;height:12px}