/* =========================================================
   MUSIC FM — GLOBAL TOAST SYSTEM
   ========================================================= */

.mf-toast-stack{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9999999;

    display:flex;
    flex-direction:column;
    gap:12px;

    width:min(390px,calc(100vw - 32px));

    pointer-events:none;
}

.mf-toast-item{
    position:relative;

    display:grid;
    grid-template-columns:50px 1fr 34px;
    align-items:center;
    gap:12px;

    min-height:78px;
    padding:13px;

    border-radius:24px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.96));

    border:1px solid rgba(220,230,245,.95);

    box-shadow:
        0 24px 70px rgba(15,23,42,.18),
        0 10px 24px rgba(20,124,255,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter:blur(22px) saturate(1.15);
    -webkit-backdrop-filter:blur(22px) saturate(1.15);

    direction:rtl;
    text-align:right;

    opacity:0;
    transform:translateY(18px) scale(.96);
    pointer-events:auto;

    overflow:hidden;

    transition:
        opacity .28s ease,
        transform .28s cubic-bezier(.16,1,.3,1);
}

.mf-toast-item.active{
    opacity:1;
    transform:translateY(0) scale(1);
}

.mf-toast-item.closing{
    opacity:0;
    transform:translateY(14px) scale(.96);
}

.mf-toast-item::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(circle at 100% 0%,rgba(20,124,255,.14),transparent 42%),
        linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.40) 48%,transparent 62% 100%);
}

.mf-toast-icon,
.mf-toast-content,
.mf-toast-close{
    position:relative;
    z-index:1;
}

.mf-toast-icon{
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    border-radius:18px;

    background:
        linear-gradient(135deg,rgba(20,124,255,.13),rgba(89,199,255,.18));

    color:#147cff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 12px 28px rgba(20,124,255,.12);
}

.mf-toast-icon i{
    font-size:19px;
}

.mf-toast-content{
    min-width:0;
}

.mf-toast-title{
    display:block;

    color:#0f172a;

    font-size:15px;
    font-weight:950;
    line-height:1.25;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mf-toast-message{
    margin:4px 0 0;

    color:#64748b;

    font-size:13px;
    font-weight:750;
    line-height:1.45;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.mf-toast-close{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    background:rgba(15,23,42,.06);
    color:#64748b;

    cursor:pointer;

    transition:.2s ease;
}

.mf-toast-close:hover{
    background:rgba(20,124,255,.12);
    color:#147cff;
    transform:rotate(90deg);
}

.mf-toast-progress{
    position:absolute;
    right:0;
    bottom:0;
    height:3px;
    width:100%;

    background:linear-gradient(90deg,#147cff,#59c7ff);

    transform-origin:right center;
    animation:mfToastProgress var(--mf-toast-time, 4200ms) linear forwards;
}

@keyframes mfToastProgress{
    from{transform:scaleX(1);}
    to{transform:scaleX(0);}
}

/* Types */

.mf-toast-item.success .mf-toast-icon{
    background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(52,211,153,.18));
    color:#059669;
}

.mf-toast-item.success .mf-toast-progress{
    background:linear-gradient(90deg,#059669,#34d399);
}

.mf-toast-item.error .mf-toast-icon{
    background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(248,113,113,.18));
    color:#dc2626;
}

.mf-toast-item.error .mf-toast-progress{
    background:linear-gradient(90deg,#dc2626,#fb7185);
}

.mf-toast-item.warning .mf-toast-icon{
    background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(251,191,36,.20));
    color:#d97706;
}

.mf-toast-item.warning .mf-toast-progress{
    background:linear-gradient(90deg,#d97706,#fbbf24);
}

.mf-toast-item.info .mf-toast-icon{
    background:linear-gradient(135deg,rgba(20,124,255,.13),rgba(89,199,255,.18));
    color:#147cff;
}

@media(max-width:700px){
    .mf-toast-stack{
        right:12px;
        left:12px;
        bottom:14px;
        width:auto;
    }

    .mf-toast-item{
        grid-template-columns:46px 1fr 32px;
        min-height:74px;
        border-radius:22px;
    }

    .mf-toast-icon{
        width:46px;
        height:46px;
        border-radius:17px;
    }
}