/* =========================================================
   Music FM — Realistic Compact Floating Player 2026
   קטן, נקי, ריאליסטי, בלי כפתורים ענקיים
========================================================= */

.mf-player-shell{
    position:fixed !important;
    left:16px !important;
    bottom:16px !important;
    z-index:2147483000 !important;
    direction:rtl !important;
    font-family:"Heebo",Arial,sans-serif !important;
    color:#0f172a !important;
}

.mf-player-shell svg{
    width:100% !important;
    height:100% !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.35 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.mf-player-shell svg path[fill],
.mf-player-shell svg path{
    fill:currentColor !important;
    stroke:none !important;
}

/* MINI */
.mf-player-mini{
    width:344px !important;
    max-width:calc(100vw - 24px) !important;
    min-height:74px !important;
    display:grid !important;
    grid-template-columns:26px 58px minmax(0,1fr) 38px 46px !important;
    align-items:center !important;
    gap:11px !important;
    padding:10px 12px !important;

    border:1px solid rgba(226,232,240,.95) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 16px 44px rgba(15,23,42,.14) !important;
    backdrop-filter:blur(20px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(155%) !important;
    cursor:pointer !important;
}

.mf-player-shell.open .mf-player-mini{
    display:none !important;
}

.mf-mini-expand,
.mf-mini-queue,
.mf-mini-play,
.mf-player-close,
.mf-player-menu,
.mf-player-like,
.mf-player-more,
.mf-player-control,
.mf-player-play,
.mf-player-panel-head button{
    border:0 !important;
    font-family:inherit !important;
    cursor:pointer !important;
    padding:0 !important;
}

.mf-mini-expand{
    width:24px !important;
    height:24px !important;
    background:transparent !important;
    color:#8b95a6 !important;
}

.mf-mini-cover{
    width:58px !important;
    height:58px !important;
    object-fit:cover !important;
    border-radius:8px !important;
    background:#071832 !important;
    box-shadow:0 10px 23px rgba(15,23,42,.14) !important;
}

.mf-mini-info{
    min-width:0 !important;
    text-align:right !important;
}

.mf-mini-info strong{
    display:block !important;
    color:#101828 !important;
    font-size:16px !important;
    font-weight:950 !important;
    line-height:1.18 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-mini-info small{
    display:block !important;
    margin-top:4px !important;
    color:#475467 !important;
    font-size:12px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-mini-progress{
    position:relative !important;
    height:4px !important;
    margin-top:9px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:#dbe1ea !important;
}

.mf-mini-progress span{
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:0 !important;
    border-radius:inherit !important;
    background:#147cff !important;
}

.mf-mini-queue{
    width:38px !important;
    height:38px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #e4eaf2 !important;
    border-radius:50% !important;
    background:#f8fafc !important;
    color:#1d2939 !important;
}

.mf-mini-queue svg{
    width:20px !important;
    height:20px !important;
}

.mf-mini-play{
    width:46px !important;
    height:46px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#147cff !important;
    color:#fff !important;
    box-shadow:0 12px 25px rgba(20,124,255,.27) !important;
}

.mf-mini-play svg{
    width:20px !important;
    height:20px !important;
    transform:translateX(-1px) !important;
}

/* OPEN */
.mf-player-card{
    display:none !important;
    width:360px !important;
    max-width:calc(100vw - 22px) !important;
    overflow:hidden !important;

    border:1px solid rgba(226,232,240,.96) !important;
    border-radius:17px !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 22px 62px rgba(15,23,42,.18) !important;
    backdrop-filter:blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
}

.mf-player-shell.open .mf-player-card{
    display:block !important;
    animation:mfPlayerOpen .24s cubic-bezier(.16,1,.3,1) both !important;
}

.mf-player-head{
    height:50px !important;
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) 36px !important;
    align-items:center !important;
    padding:9px 14px 0 !important;
}

.mf-player-head strong{
    color:#101828 !important;
    text-align:center !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:950 !important;
}

.mf-player-close,
.mf-player-menu{
    width:32px !important;
    height:32px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#101828 !important;
}

.mf-player-close svg,
.mf-player-menu svg{
    width:22px !important;
    height:22px !important;
    stroke-width:2.6 !important;
}

.mf-player-cover-wrap{
    display:grid !important;
    place-items:center !important;
    padding:12px 24px 16px !important;
}

.mf-player-cover{
    width:214px !important;
    max-width:68vw !important;
    aspect-ratio:1/1 !important;
    object-fit:cover !important;
    border-radius:8px !important;
    background:#071832 !important;
    box-shadow:0 18px 38px rgba(15,23,42,.18) !important;
}

.mf-player-title-row{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 42px !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 18px 10px !important;
}

.mf-player-like,
.mf-player-more{
    width:36px !important;
    height:36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:transparent !important;
}

.mf-player-like{
    color:#147cff !important;
}

.mf-player-like svg{
    width:24px !important;
    height:24px !important;
    fill:#147cff !important;
    stroke:none !important;
}

.mf-player-more{
    color:#101828 !important;
}

.mf-player-more svg{
    width:25px !important;
    height:25px !important;
}

.mf-player-info{
    min-width:0 !important;
    text-align:center !important;
}

.mf-player-title{
    color:#111827 !important;
    font-size:22px !important;
    line-height:1.12 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-player-meta{
    margin-top:6px !important;
    color:#475467 !important;
    font-size:13.5px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-player-progress-wrap{
    padding:4px 20px 14px !important;
}

.mf-player-seek{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:5px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:#dbe1ea !important;
    overflow:visible !important;
}

.mf-player-seek-fill{
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:0 !important;
    border-radius:inherit !important;
    background:#147cff !important;
}

.mf-player-seek-dot{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    width:11px !important;
    height:11px !important;
    border-radius:50% !important;
    background:#147cff !important;
    transform:translate(-50%,-50%) !important;
}

.mf-player-times{
    display:flex !important;
    justify-content:space-between !important;
    margin-top:8px !important;
    color:#101828 !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    direction:ltr !important;
}

.mf-player-controls{
    display:grid !important;
    grid-template-columns:34px 38px 58px 38px 34px !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    padding:0 18px 20px !important;
}

.mf-player-control{
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#101828 !important;
}

.mf-player-control svg{
    width:22px !important;
    height:22px !important;
}

.mf-player-control.is-active{
    color:#147cff !important;
}

.mf-player-play{
    width:58px !important;
    height:58px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#147cff !important;
    color:#fff !important;
    box-shadow:0 15px 30px rgba(20,124,255,.29) !important;
}

.mf-player-play svg{
    width:25px !important;
    height:25px !important;
}

.mf-player-list-panel{
    border-top:1px solid #e4ebf5 !important;
    padding:10px 18px 16px !important;
    background:#fff !important;
    max-height:185px !important;
    overflow:auto !important;
}

.mf-player-panel-head{
    min-height:32px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 34px !important;
    align-items:center !important;
    gap:8px !important;
    margin-bottom:8px !important;
}

.mf-player-panel-head strong{
    color:#101828 !important;
    font-size:15px !important;
    font-weight:950 !important;
    text-align:right !important;
}

.mf-player-panel-head button{
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    background:transparent !important;
    color:#101828 !important;
}

.mf-player-panel-head svg{
    width:20px !important;
    height:20px !important;
}

.mf-player-list{
    display:grid !important;
    gap:7px !important;
}

.mf-player-list button{
    width:100% !important;
    min-height:48px !important;
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) 28px !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    font-family:inherit !important;
    text-align:right !important;
    color:#101828 !important;
    cursor:pointer !important;
}

.mf-player-list img{
    width:40px !important;
    height:40px !important;
    object-fit:cover !important;
    border-radius:6px !important;
    background:#071832 !important;
}

.mf-player-list strong{
    display:block !important;
    color:#101828 !important;
    font-size:13.5px !important;
    line-height:1.2 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-player-list small{
    display:block !important;
    margin-top:3px !important;
    color:#475467 !important;
    font-size:11.5px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-player-list .mf-player-list-action{
    width:26px !important;
    height:26px !important;
    display:grid !important;
    place-items:center !important;
    color:#101828 !important;
    font-size:22px !important;
    line-height:1 !important;
}

.mf-player-list button.is-active strong,
.mf-player-list button.is-active .mf-player-list-action{
    color:#147cff !important;
}

/* MOBILE */
@media(max-width:720px){
    .mf-player-shell{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;
        width:auto !important;
    }

    .mf-player-mini{
        width:100% !important;
        min-height:70px !important;
        grid-template-columns:22px 52px minmax(0,1fr) 36px 44px !important;
        gap:9px !important;
        padding:9px 10px !important;
    }

    .mf-mini-cover{
        width:52px !important;
        height:52px !important;
    }

    .mf-mini-info strong{
        font-size:15px !important;
    }

    .mf-mini-info small{
        font-size:11.5px !important;
    }

    .mf-mini-queue{
        width:36px !important;
        height:36px !important;
    }

    .mf-mini-play{
        width:44px !important;
        height:44px !important;
    }

    .mf-player-card{
        width:100% !important;
        max-width:none !important;
    }

    .mf-player-cover{
        width:188px !important;
    }

    .mf-player-title{
        font-size:20px !important;
    }

    .mf-player-controls{
        grid-template-columns:32px 36px 54px 36px 32px !important;
        gap:12px !important;
    }

    .mf-player-play{
        width:54px !important;
        height:54px !important;
    }
}

@media(max-width:430px){
    .mf-player-mini{
        grid-template-columns:20px 48px minmax(0,1fr) 34px 42px !important;
        gap:8px !important;
    }

    .mf-mini-cover{
        width:48px !important;
        height:48px !important;
    }

    .mf-player-cover{
        width:172px !important;
    }

    .mf-player-title-row{
        padding-inline:14px !important;
    }

    .mf-player-controls{
        gap:9px !important;
    }
}

@keyframes mfPlayerOpen{
    from{
        opacity:0;
        transform:translateY(12px) scale(.985);
        filter:blur(6px);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@media(prefers-reduced-motion: reduce){
    .mf-player-shell *,
    .mf-player-shell *::before,
    .mf-player-shell *::after{
        animation:none !important;
        transition:none !important;
        transform:none !important;
    }
}

/* =========================================================
   Music FM V2 — Mobile Bottom Sheet Player 2026
========================================================= */
@media(max-width:720px){
    body{padding-bottom:142px;}

    .mf-player-shell{
        right:12px !important;
        left:12px !important;
        bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
        width:auto !important;
        max-width:none !important;
        z-index:2147482450 !important;
    }

    .mf-player-mini{
        width:100% !important;
        min-height:58px !important;
        grid-template-columns:42px minmax(0,1fr) 38px 38px !important;
        gap:9px !important;
        padding:8px 9px !important;
        border-radius:18px !important;
        background:rgba(255,255,255,.96) !important;
        box-shadow:0 12px 34px rgba(15,23,42,.14) !important;
    }

    .mf-mini-expand{display:none !important;}
    .mf-mini-cover{width:42px !important;height:42px !important;border-radius:12px !important;}
    .mf-mini-info strong{font-size:13.5px !important;}
    .mf-mini-info small{font-size:11px !important;margin-top:2px !important;}
    .mf-mini-progress{height:3px !important;margin-top:6px !important;}
    .mf-mini-queue{width:38px !important;height:38px !important;border-radius:14px !important;}
    .mf-mini-play{width:38px !important;height:38px !important;}

    .mf-player-shell.open{inset:0 !important; width:100% !important; max-width:none !important; pointer-events:none !important;}
    .mf-player-shell.open::before{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(3,8,17,.42);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        pointer-events:auto;
        animation:mfPlayerDim .22s ease both;
    }

    .mf-player-shell.open .mf-player-card{
        position:fixed !important;
        right:0 !important;
        left:0 !important;
        bottom:0 !important;
        width:100% !important;
        max-width:none !important;
        max-height:min(86vh,760px) !important;
        overflow-y:auto !important;
        pointer-events:auto !important;
        border-radius:30px 30px 0 0 !important;
        border:1px solid rgba(226,232,240,.90) !important;
        border-bottom:0 !important;
        padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important;
        background:rgba(255,255,255,.985) !important;
        box-shadow:0 -24px 70px rgba(15,23,42,.24) !important;
        animation:mfPlayerSheetIn .34s cubic-bezier(.16,1,.3,1) both !important;
    }

    .mf-player-head{
        position:sticky !important;
        top:0 !important;
        height:58px !important;
        padding:20px 16px 0 !important;
        background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.84)) !important;
        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
        z-index:2;
    }
    .mf-player-head::before{
        content:"";
        position:absolute;
        top:8px;
        left:50%;
        width:42px;
        height:5px;
        border-radius:99px;
        background:#d0d7e2;
        transform:translateX(-50%);
    }

    .mf-player-cover-wrap{margin:10px auto 14px !important;}
    .mf-player-cover{width:min(56vw,230px) !important; max-width:230px !important; border-radius:24px !important; box-shadow:0 22px 58px rgba(15,23,42,.18) !important;}
    .mf-player-title-row{padding-inline:18px !important;}
    .mf-player-title{font-size:22px !important;}
    .mf-player-progress-wrap{padding:12px 20px 0 !important;}
    .mf-player-controls{grid-template-columns:40px 46px 66px 46px 40px !important;gap:10px !important;padding:16px 18px 12px !important;}
    .mf-player-play{width:66px !important;height:66px !important;}
    .mf-player-list-panel{margin:0 16px 0 !important;border-radius:22px !important;max-height:260px !important;overflow:auto !important;}
}

@keyframes mfPlayerSheetIn{
    from{transform:translateY(100%);opacity:.86;}
    to{transform:translateY(0);opacity:1;}
}
@keyframes mfPlayerDim{from{opacity:0;}to{opacity:1;}}