/* MadRasana Songs Page — hero player + editorial tracklist (warm theme) */
:root{
    --mr-bg:#F7F2EA;--mr-bg2:#FFFFFF;--mr-bg3:#FBF8F2;--mr-bg4:#F0EAE0;
    --mr-text:#1A1512;--mr-muted:#8C7F71;--mr-dim:#A89B8E;
    --mr-orange:#B0712A;--mr-org-lt:#C98A3C;--mr-teal:#2E5E52;
    --mr-border:rgba(26,21,18,.10);--mr-b-vis:rgba(26,21,18,.18);
    --mr-b-org:rgba(176,113,42,.30);
    --mr-font:'DM Sans',system-ui,sans-serif;
    --mr-serif:'Cormorant Garamond',Georgia,serif;
}

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

/* ══════════════════════════════════════════
   HERO PLAYER
══════════════════════════════════════════ */

/* flex-direction:column forces the bar below the video even if an ancestor
   (Elementor section) is display:flex with a different direction */
.mrs-hero{
    display:flex;
    flex-direction:column;
    margin-bottom:2rem;
}

/* aspect-ratio is the CSS hint; JS sets an explicit px height after layout */
.mrs-hero-video{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    flex-shrink:0;
    background:#1A1410;
    overflow:hidden;
}

/* iframe fills the container */
#mrs-yt-player,
#mrs-yt-player iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    border:none !important;
}

/* Blocks YouTube hover UI from appearing inside the 16:9 frame */
.mrs-yt-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    cursor:pointer;
}

/* Idle overlay — thumbnail + title, hides when playing */
.mrs-hero-idle{
    position:absolute;
    inset:0;
    z-index:2;
    transition:opacity .35s;
    cursor:pointer;
    overflow:hidden;
}
.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;
}

/* Song name + label overlay at bottom of thumbnail */
.mrs-hero-idle-info{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:3.5rem 1.5rem 1.25rem;
    background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 55%,transparent 100%);
    z-index:1;
    pointer-events:none;
}
.mrs-hero-idle-label{
    display:block;
    font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.62);
    margin-bottom:.45rem;
}
.mrs-hero-idle-title{
    font-family:var(--mr-serif);
    font-size:2rem;font-weight:400;line-height:1.2;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
}
@media(max-width:640px){
    .mrs-hero-idle-title{font-size:1.25rem;}
    .mrs-hero-idle-info{padding:2.5rem 1rem 1rem;}
}

/* Bar below video */
.mrs-hero-bar{
    background:var(--mr-bg2);
    border:0.5px solid var(--mr-border);
    border-top:none;
    padding:.75rem 1.25rem;
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:56px;
}
.mrs-hero-info{flex:1;min-width:0;}
.mrs-hero-title{
    font-family:var(--mr-serif);
    font-size:1.15rem;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;}

/* Prev / Next / Shuffle buttons */
.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-orange);}
.mrs-shuffle-on{color:var(--mr-orange) !important;}

/* Play/Pause circle */
.mrs-ctrl-play{
    background:var(--mr-orange) !important;
    border:none !important;padding:0 !important;
    color:#fff;
    width:40px !important;height:40px !important;
    min-width:40px;max-width:40px;
    border-radius:50% !important;
    cursor:pointer;
    display:flex !important;align-items:center;justify-content:center;
    transition:background .15s;flex:0 0 40px;box-sizing:border-box;
}
.mrs-ctrl-play:hover{background:var(--mr-org-lt) !important;}
.mrs-hero-queue{font-size:.68rem;color:var(--mr-dim);white-space:nowrap;padding-left:.25rem;}

/* ══════════════════════════════════════════
   FILTERS
══════════════════════════════════════════ */
.mrs-filters{
    background:var(--mr-bg3);
    border:0.5px solid var(--mr-border);
    border-radius:3px;
    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:0.5px 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:var(--mr-dim);padding-left:2px;
}
.mrs-select{
    background:var(--mr-bg2);border:0.5px 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(26,21,18,.35);}
.mrs-select:focus{border-color:var(--mr-orange);}
.mrs-select option{background:#fff;}
.mrs-btn-ghost{
    background:transparent;border:0.5px 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(26,21,18,.4);}

/* 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:0.5px solid var(--mr-b-org);padding:.2rem .6rem;border-radius:2px;
    background:rgba(176,113,42,.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:20px 32px 1fr 72px;
    gap:.75rem;
    padding:.3rem 1rem;
    font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--mr-dim);border-bottom:0.5px solid var(--mr-border);
    margin-bottom:0;
}
.mrs-tracklist-head span{white-space:nowrap;}
.mrs-list{
    display:flex;flex-direction:column;
    border-bottom:0.5px 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:20px 32px 1fr 72px;
    gap:.75rem;
    align-items:center;
    padding:.625rem 1rem;
    border-top:0.5px solid var(--mr-border);
    cursor:pointer;
    transition:background .1s;
}
.mrs-item:hover         {background:rgba(26,21,18,.03);}
.mrs-item.mrs-active    {background:rgba(176,113,42,.08);}
.mrs-item.mrs-selected  {background:rgba(176,113,42,.05);}
.mrs-item.mrs-selected.mrs-active{background:rgba(176,113,42,.12);}

/* Selection circle */
.mrs-item-sel{
    width:16px;height:16px;flex-shrink:0;
    border:1.5px solid rgba(140,127,113,0.35);
    border-radius:50%;
    cursor:pointer;
    transition:border-color .15s,background .15s;
    position:relative;
    display:block;
}
.mrs-item:hover .mrs-item-sel{border-color:var(--mr-muted);}
.mrs-item.mrs-selected .mrs-item-sel{
    background:var(--mr-orange);
    border-color:var(--mr-orange);
}
.mrs-item.mrs-selected .mrs-item-sel::after{
    content:'';position:absolute;
    left:4px;top:1.5px;
    width:4px;height:7px;
    border:1.5px solid #fff;
    border-top:none;border-left:none;
    transform:rotate(45deg);
}

/* 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-family:var(--mr-serif);
    font-size:1.15rem;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:.875rem;margin-top:.05rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--mr-dim);
}
.mrs-bl-part{color:var(--mr-orange);}
.mrs-item.mrs-active .mrs-bl-part{color:var(--mr-org-lt);}

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

/* When playing from a manual selection, hide unselected rows */
.mrs-list.mrs-sel-playing .mrs-item:not(.mrs-selected){display:none;}

/* 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:0.5px solid var(--mr-b-vis);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-bg4);border-color:var(--mr-b-org);}
.mrs-rem{color:var(--mr-dim);font-weight:300;font-size:.68rem;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:640px){
    .mrs-tracklist-head{grid-template-columns:20px 24px 1fr 72px;}
    .mrs-item{grid-template-columns:20px 24px 1fr 72px;}
    .mrs-filters{flex-direction:column;align-items:stretch;}
    .mrs-selects{flex-direction:column;}
    .mrs-select{min-width:0;}
}