/* MadRasana Songs Page — hero player + Spotify tracklist */
:root{
    --mr-bg:#0C0A09;--mr-bg2:#141110;--mr-bg3:#1C1815;--mr-bg4:#252220;
    --mr-text:#EFE9DE;--mr-muted:#7A6E62;--mr-dim:#3E3830;
    --mr-orange:#D97B1A;--mr-org-lt:#EDA040;--mr-red:#E32020;
    --mr-border:rgba(239,233,222,.08);--mr-b-vis:rgba(239,233,222,.30);
    --mr-b-org:rgba(217,123,26,.25);
    --mr-font:'DM Sans',sans-serif;
}

.mrs-page{
    font-family:var(--mr-font);
    color:var(--mr-text);
    max-width:960px;
    margin:0 auto;
    padding:0 1rem 3rem;
}

/* ══════════════════════════════════════════
   HERO PLAYER
══════════════════════════════════════════ */
.mrs-hero{
    margin-bottom:2rem;
}

/* Video area — 16:9 */
.mrs-hero-video{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
}

/* YouTube iframe fills the video area */
#mrs-yt-player,
#mrs-yt-player iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
}

/* Idle overlay — sits above YT iframe, hidden when playing */
.mrs-hero-idle{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    transition:opacity .3s;
}
.mrs-hero.mrs-playing .mrs-hero-idle{
    opacity:0;
    pointer-events:none;
}
.mrs-hero-bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    filter:brightness(.38);
}
.mrs-hero-idle-scrim{
    position:absolute;inset:0;
    background:linear-gradient(to top, rgba(12,10,9,.85) 0%, rgba(12,10,9,.2) 60%, transparent 100%);
}
.mrs-hero-idle-btns{
    position:relative;
    display:flex;gap:1rem;align-items:center;
}
.mrs-hero-play-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    background:var(--mr-red);border:none;color:#fff;
    font-family:var(--mr-font);font-size:.85rem;font-weight:500;
    letter-spacing:.06em;padding:.7rem 1.75rem;cursor:pointer;
    transition:background .15s;
}
.mrs-hero-play-btn:hover{background:#ff3333;}
.mrs-hero-shuffle-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    background:transparent;border:1px solid rgba(239,233,222,.5);color:var(--mr-text);
    font-family:var(--mr-font);font-size:.85rem;font-weight:400;
    padding:.65rem 1.5rem;cursor:pointer;
    transition:background .15s,border-color .15s;
}
.mrs-hero-shuffle-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(239,233,222,.8);}
.mrs-hero-idle-count{
    position:relative;
    font-size:.75rem;color:rgba(239,233,222,.5);
    letter-spacing:.04em;
}

/* Info + controls bar below video */
.mrs-hero-bar{
    background:var(--mr-bg3);
    border:1px solid rgba(239,233,222,.1);
    border-top:none;
    padding:.875rem 1.25rem;
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:56px;
}
.mrs-hero-info{flex:1;min-width:0;}
.mrs-hero-title{
    font-size:.95rem;font-weight:400;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--mr-text);
}
.mrs-hero-meta{
    font-size:.75rem;color:var(--mr-orange);margin-top:.1rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrs-hero-controls{
    display:flex;align-items:center;gap:.5rem;flex-shrink:0;
}
.mrs-ctrl-btn{
    background:transparent;border:none;color:var(--mr-muted);
    cursor:pointer;padding:.35rem;transition:color .15s;
    display:flex;align-items:center;justify-content:center;
}
.mrs-ctrl-btn:hover{color:var(--mr-text);}
.mrs-ctrl-play{
    background:var(--mr-red);border:none;color:#fff;
    width:38px;height:38px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;flex-shrink:0;
}
.mrs-ctrl-play:hover{background:#ff3333;}
.mrs-hero-queue{
    font-size:.68rem;color:var(--mr-dim);white-space:nowrap;padding-left:.25rem;
}

/* ══════════════════════════════════════════
   FILTERS
══════════════════════════════════════════ */
.mrs-filters{
    background:var(--mr-bg3);
    border:1px solid var(--mr-b-vis);
    border-radius:4px;
    padding:.875rem 1rem;
    margin-bottom:.875rem;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:.625rem;
}
.mrs-search-wrap{
    flex:1;min-width:200px;
    display:flex;align-items:center;gap:.5rem;
    background:var(--mr-bg2);
    border:1px solid var(--mr-b-vis);
    border-radius:3px;
    padding:0 .875rem;
}
.mrs-search-wrap svg{color:var(--mr-muted);flex-shrink:0;}
#mrs-search{
    flex:1;background:transparent;border:none;outline:none;
    color:var(--mr-text);font-family:var(--mr-font);font-size:.85rem;font-weight:300;
    padding:.58rem 0;
}
#mrs-search::placeholder{color:var(--mr-muted);}
.mrs-selects{display:flex;flex-wrap:wrap;gap:.5rem;}
.mrs-sel-wrap{display:flex;flex-direction:column;gap:.22rem;}
.mrs-sel-wrap label{
    font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:#A89880;padding-left:2px;
}
.mrs-select{
    background:var(--mr-bg2);border:1px solid var(--mr-b-vis);border-radius:3px;
    color:var(--mr-text);font-family:var(--mr-font);font-size:.78rem;
    padding:.46rem .875rem;outline:none;cursor:pointer;min-width:130px;
    -webkit-appearance:auto;appearance:auto;
}
.mrs-select:hover{border-color:rgba(239,233,222,.55);}
.mrs-select:focus{border-color:var(--mr-orange);}
.mrs-select option{background:#1C1815;}
.mrs-btn-ghost{
    background:transparent;border:1px solid var(--mr-b-vis);border-radius:3px;
    color:var(--mr-muted);font-family:var(--mr-font);font-size:.7rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;padding:.5rem 1rem;cursor:pointer;
    transition:color .15s,border-color .15s;
}
.mrs-btn-ghost:hover{color:var(--mr-text);border-color:rgba(239,233,222,.6);}

/* Chips */
.mrs-chips{display:flex;flex-wrap:wrap;gap:.4rem;min-height:0;margin-bottom:.35rem;}
.mrs-chip{
    display:inline-flex;align-items:center;gap:.35rem;
    font-size:.7rem;color:var(--mr-orange);
    border:1px solid var(--mr-b-org);padding:.2rem .6rem;border-radius:2px;
    background:rgba(217,123,26,.07);
}
.mrs-chip button{background:none;border:none;color:var(--mr-muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0;}
.mrs-chip button:hover{color:var(--mr-text);}

/* Results bar */
.mrs-bar{
    display:flex;align-items:center;gap:.5rem;
    margin-bottom:.5rem;font-size:.75rem;
    color:var(--mr-muted);
}
.mrs-count-dur::before{content:" · ";}

/* ══════════════════════════════════════════
   TRACKLIST
══════════════════════════════════════════ */
.mrs-tracklist-head{
    display:grid;
    grid-template-columns:32px 1fr 90px 56px;
    gap:.75rem;
    padding:.3rem 1rem;
    font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--mr-dim);border-bottom:1px solid var(--mr-border);
    margin-bottom:0;
}
.mrs-list{
    display:flex;flex-direction:column;
    border-bottom:1px solid var(--mr-border);
    margin-bottom:1.5rem;
}
.mrs-list.mrs-loading{opacity:.5;pointer-events:none;}

/* Track row */
.mrs-item{
    display:grid;
    grid-template-columns:32px 1fr 90px 56px;
    gap:.75rem;
    align-items:center;
    padding:.625rem 1rem;
    border-top:1px solid var(--mr-border);
    cursor:pointer;
    transition:background .1s;
    position:relative;
}
.mrs-item:hover{background:rgba(239,233,222,.04);}
.mrs-item.mrs-active{
    background:rgba(217,123,26,.07);
}

/* Play icon + active bars */
.mrs-item-icon{
    display:flex;align-items:center;justify-content:center;
    color:var(--mr-dim);
    width:24px;
}
.mrs-item-play{display:none;color:var(--mr-orange);}
.mrs-item-bars{display:none;align-items:flex-end;gap:2px;height:14px;}
.mrs-item-bars span{
    display:inline-block;width:3px;background:var(--mr-orange);border-radius:1px;
    animation:mrs-bar-bounce .8s ease-in-out infinite alternate;
}
.mrs-item-bars span:nth-child(2){animation-delay:.15s;}
.mrs-item-bars span:nth-child(3){animation-delay:.3s;}
@keyframes mrs-bar-bounce{from{height:4px}to{height:12px}}
.mrs-item:hover .mrs-item-play{display:block;}
.mrs-item:hover .mrs-item-bars{display:none !important;}
.mrs-item.mrs-active .mrs-item-bars{display:inline-flex;}
.mrs-item.mrs-active .mrs-item-play{display:none;}
.mrs-item.mrs-active:hover .mrs-item-play{display:block;}
.mrs-item.mrs-active:hover .mrs-item-bars{display:none !important;}

/* Track info */
.mrs-track-info{min-width:0;}
.mrs-track-title{
    font-size:.875rem;font-weight:400;color:var(--mr-text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrs-item.mrs-active .mrs-track-title{color:var(--mr-orange);}
.mrs-track-sub{
    font-size:.72rem;margin-top:.15rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrs-track-raga{color:var(--mr-orange);}
.mrs-item.mrs-active .mrs-track-raga{color:var(--mr-org-lt);}
.mrs-track-sep{color:var(--mr-dim);}
.mrs-track-comp{color:var(--mr-muted);}

/* Type badge */
.mrs-track-type{display:flex;align-items:center;}
.mrs-badge{
    display:inline-block;font-size:.58rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    padding:.15rem .5rem;border:1px solid;border-radius:2px;white-space:nowrap;
}
.mrs-b-kriti{color:#3C90CC;border-color:rgba(60,144,204,.3);background:rgba(60,144,204,.07);}
.mrs-b-varnam{color:#D97B1A;border-color:rgba(217,123,26,.3);background:rgba(217,123,26,.07);}
.mrs-b-raga-alapana{color:#1D9E75;border-color:rgba(29,158,117,.3);background:rgba(29,158,117,.07);}
.mrs-b-tani{color:#9B5DE5;border-color:rgba(155,93,229,.3);background:rgba(155,93,229,.07);}
.mrs-b-swaram{color:#EE5C9A;border-color:rgba(238,92,154,.3);background:rgba(238,92,154,.07);}
.mrs-b-mangalam{color:#E32020;border-color:rgba(227,32,32,.3);background:rgba(227,32,32,.07);}
.mrs-badge:not([class*="mrs-b-"]){color:var(--mr-muted);border-color:var(--mr-border);}

/* Duration */
.mrs-track-dur{
    font-size:.75rem;color:var(--mr-muted);
    text-align:right;font-variant-numeric:tabular-nums;
}

/* Empty / load more */
.mrs-empty{text-align:center;padding:3rem 2rem;color:var(--mr-muted);}
.mrs-empty p{font-size:.9rem;margin-bottom:1rem;}
.mrs-more-wrap{text-align:center;margin:1rem 0;}
.mrs-more{
    font-family:var(--mr-font);font-size:.75rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--mr-text);background:var(--mr-bg2);
    border:1px solid rgba(239,233,222,.2);border-radius:3px;
    padding:.75rem 2.5rem;cursor:pointer;
    transition:background .15s,border-color .15s;
    display:inline-flex;align-items:center;gap:.75rem;
}
.mrs-more:hover{background:var(--mr-bg3);border-color:var(--mr-b-org);}
.mrs-rem{color:var(--mr-dim);font-weight:300;font-size:.68rem;}
.mrs-more.mrs-loading{opacity:.6;pointer-events:none;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:640px){
    .mrs-tracklist-head{grid-template-columns:24px 1fr 56px;}
    .mrs-tracklist-head span:nth-child(3){display:none;}
    .mrs-item{grid-template-columns:24px 1fr 56px;}
    .mrs-track-type{display:none;}
    .mrs-filters{flex-direction:column;align-items:stretch;}
    .mrs-selects{flex-direction:column;}
    .mrs-select{min-width:0;}
    .mrs-hero-idle-btns{flex-direction:column;gap:.625rem;}
}