.hanuun-track-list{
  width:100%;
  margin:28px 0 132px;
  padding:8px 22px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  box-shadow:0 14px 40px rgba(15,23,42,.06);
}
.hanuun-track{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:76px;
  padding:14px 4px;
  border-bottom:1px solid rgba(15,23,42,.08);
  transition:background .18s ease,transform .18s ease;
}
.hanuun-track:last-child{border-bottom:0}
.hanuun-track:hover{background:#f8fafc}
.hanuun-track-play{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  min-width:46px;
  padding:0 0 0 2px;
  border:0;
  border-radius:50%;
  background:#123b64;
  color:#fff;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(18,59,100,.20);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.hanuun-track-play:hover{
  transform:scale(1.04);
  background:#0b2a49;
  box-shadow:0 7px 18px rgba(18,59,100,.25);
}
.hanuun-track-play:focus-visible,.hanuun-track-download:focus-visible{
  outline:3px solid rgba(18,59,100,.20);
  outline-offset:3px;
}
.hanuun-track-info{min-width:0;flex:1}
.hanuun-track-title{
  color:#0f172a;
  font-size:16px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.hanuun-track-meta{margin-top:5px;color:#64748b;font-size:13px}
.hanuun-track-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(18,59,100,.14);
  border-radius:999px;
  background:#f8fafc;
  color:#123b64;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.hanuun-track-download:hover{
  background:#eef5fb;
  border-color:rgba(18,59,100,.24);
  transform:translateY(-1px);
}
.hanuun-player{
  position:fixed;
  z-index:99999;
  left:0;
  right:0;
  bottom:0;
  padding:0 16px 14px;
  background:linear-gradient(to top,rgba(246,248,251,.98),rgba(246,248,251,.82),rgba(246,248,251,0));
  pointer-events:none;
}
.hanuun-player-inner{
  max-width:940px;
  margin:auto;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:18px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.10);
  border-radius:20px;
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  backdrop-filter:blur(16px);
  pointer-events:auto;
}
.hanuun-player-label{min-width:0;width:220px;padding-left:4px}
.hanuun-player-kicker{
  display:block;
  margin-bottom:2px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#hanuun-player-title{
  display:block;
  overflow:hidden;
  color:#0f172a;
  font-size:14px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#hanuun-player-audio{width:100%;min-width:0;flex:1;height:42px}
.hanuun-media-error,.hanuun-media-empty{
  padding:18px 20px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  color:#475569;
}
@media (max-width:700px){
  .hanuun-track-list{margin-top:18px;padding:4px 14px;border-radius:20px}
  .hanuun-track{gap:12px;min-height:70px;padding:12px 0}
  .hanuun-track-play{width:42px;height:42px;min-width:42px}
  .hanuun-track-title{font-size:15px}
  .hanuun-track-meta{font-size:12px}
  .hanuun-track-download{min-height:34px;padding:0 10px;font-size:12px}
  .hanuun-player{padding:0 10px 10px}
  .hanuun-player-inner{display:block;padding:10px 12px;border-radius:17px}
  .hanuun-player-label{width:100%;margin-bottom:6px;padding-left:2px}
  #hanuun-player-audio{height:38px}
}
@media (max-width:440px){
  .hanuun-track-list{padding:3px 12px}
  .hanuun-track{align-items:flex-start}
  .hanuun-track-download{align-self:center;padding:0 9px;font-size:0}
  .hanuun-track-download::after{content:"↓";font-size:16px;line-height:1}
}


/* =========================================================
   HANUUN INLINE PLAYER V2
   Moves the shared audio controls into the selected track.
   ========================================================= */

.hanuun-track {
    flex-wrap: nowrap;
}


/*
 * When JavaScript moves #hanuun-player inside a track,
 * it becomes a normal flex item rather than a fixed footer.
 */
.hanuun-track > .hanuun-player {
    position: static;
    z-index: auto;

    left: auto;
    right: auto;
    bottom: auto;

    flex: 0 1 390px;
    width: auto;
    min-width: 285px;

    padding: 0;

    background: none;

    pointer-events: auto;
}


/* Hide duplicated "Now playing" text here.
 * The Surah/cashar title is already directly beside it.
 */
.hanuun-track > .hanuun-player .hanuun-player-label {
    display: none;
}


/* Compact inline control shell */

.hanuun-track > .hanuun-player .hanuun-player-inner {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 5px 8px;

    border: 1px solid rgba(242, 196, 92, .24);
    border-radius: 13px;

    background: rgba(2, 20, 39, .52);

    box-shadow: none;
    backdrop-filter: none;
}


/* Native audio control fills its inline area */

.hanuun-track > .hanuun-player #hanuun-player-audio {
    display: block;

    width: 100%;
    min-width: 0;
    height: 38px;
}


/* Selected row gets a subtle app-style highlight */

.hanuun-track.has-inline-player {
    background:
        linear-gradient(
            90deg,
            rgba(242, 196, 92, .045),
            rgba(242, 196, 92, .012)
        );
}

.hanuun-track.is-playing {
    background:
        linear-gradient(
            90deg,
            rgba(242, 196, 92, .075),
            rgba(242, 196, 92, .018)
        );
}


/* Playing button */

.hanuun-track.is-playing .hanuun-track-play {
    background: #ffd36b;
    transform: none;
}

.hanuun-track-play[aria-pressed="true"] {
    background: #ffd36b;
}


/*
 * Medium screens:
 * move controls to a second line beneath the title,
 * still inside the selected track.
 */
@media (max-width: 1050px) {

    .hanuun-track {
        flex-wrap: wrap;
    }

    .hanuun-track > .hanuun-player {
        order: 10;

        flex: 1 0 calc(100% - 58px);
        width: calc(100% - 58px);
        min-width: 0;

        margin-left: 58px;
        margin-top: -3px;
    }

    .hanuun-track > .hanuun-track-download {
        margin-left: auto;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .hanuun-track > .hanuun-player {
        flex-basis: 100%;
        width: 100%;

        margin-left: 54px;
        margin-right: 0;
        margin-top: 2px;
    }

    .hanuun-track > .hanuun-player .hanuun-player-inner {
        padding: 4px 6px;
        border-radius: 12px;
    }

    .hanuun-track > .hanuun-player #hanuun-player-audio {
        height: 36px;
    }
}


/* Very small phones */

@media (max-width: 440px) {

    .hanuun-track > .hanuun-player {
        width: calc(100% - 54px);
        flex-basis: calc(100% - 54px);
    }
}


/* ===== END HANUUN INLINE PLAYER V2 ===== */