/* ==========================================================================
   FarsKids — پاپ‌آپ «افزودن به پلی‌لیست»
   دسکتاپ: کارت وسط صفحه با انیمیشن فنری  |  موبایل: شیت از پایین
   ========================================================================== */
.fk-atp{
    --atp-a:#7c3aed;--atp-b:#c026d3;
    --atp-line:rgba(255,255,255,.09);--atp-mute:#a8a1b3;--atp-text:#f5f3f7;
    --atp-ease:cubic-bezier(.22,1,.36,1);--atp-spring:cubic-bezier(.34,1.45,.5,1);
    position:fixed;inset:0;z-index:100000;
    display:flex;align-items:center;justify-content:center;padding:20px;
    font-family:inherit;color:var(--atp-text);direction:rtl;
    visibility:hidden;pointer-events:none;
    transition:visibility 0s linear .38s;
}
.fk-atp *{box-sizing:border-box}
.fk-atp.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
html.fk-atp-lock{overflow:hidden}

/* ---------- backdrop ---------- */
.fk-atp-backdrop{
    position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 0%,rgba(124,58,237,.24),transparent 60%),rgba(9,7,13,.68);
    opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
    transition:opacity .35s var(--atp-ease),backdrop-filter .4s var(--atp-ease),-webkit-backdrop-filter .4s var(--atp-ease);
}
.fk-atp.is-open .fk-atp-backdrop{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- card ---------- */
.fk-atp-card{
    position:relative;width:100%;max-width:430px;
    max-height:min(680px,calc(100dvh - 40px));
    display:flex;flex-direction:column;overflow:hidden;outline:none;
    background:linear-gradient(180deg,#26222d 0%,#1a171f 100%);
    border:1px solid var(--atp-line);border-radius:28px;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
    opacity:0;transform:translateY(30px) scale(.9);
    transition:opacity .22s ease,transform .5s var(--atp-spring);
}
.fk-atp.is-open .fk-atp-card{opacity:1;transform:none}
.fk-atp-card::before{
    content:"";position:absolute;top:-70px;right:-50px;width:260px;height:180px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(168,85,247,.32),transparent 72%);
}
.fk-atp-grab{display:none}

.fk-atp-close{
    all:unset;box-sizing:border-box;position:absolute;top:14px;left:14px;z-index:3;
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    color:#d6d3d1;background:rgba(255,255,255,.07);border:1px solid var(--atp-line);
    transition:background .2s ease,transform .2s ease,color .2s ease;
}
.fk-atp-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fk-atp-close:hover{background:rgba(255,255,255,.14);color:#fff;transform:rotate(90deg)}
.fk-atp-close:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}

/* ---------- head ---------- */
.fk-atp-head{position:relative;padding:22px 22px 0 60px}
.fk-atp-title{margin:0 0 14px;font-size:17px;font-weight:800;line-height:1.6;color:#fff;font-family:inherit}
.fk-atp-song{
    display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;
    background:rgba(255,255,255,.05);border:1px solid var(--atp-line);
}
.fk-atp-song[hidden]{display:none!important}
.fk-atp-song-cover{flex:0 0 auto;width:46px;height:46px;border-radius:11px;object-fit:cover;background:#292524;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.fk-atp-song-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.fk-atp-song-meta small{font-size:10.5px;color:#c9a0ff;font-weight:700}
.fk-atp-song-title{font-size:13.5px;font-weight:700;color:#fff;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-atp-song-artist{font-style:normal;font-size:11.5px;color:var(--atp-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-atp-song-artist:empty{display:none}

.fk-atp-hint{margin:12px 22px 6px;font-size:12px;line-height:1.95;color:var(--atp-mute)}
.fk-atp-hint b{color:#e9d5ff;font-weight:700}

/* ---------- list ---------- */
.fk-atp-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.fk-playlist-list{display:flex;flex-direction:column;gap:6px}

.fk-playlist-option{
    all:unset;box-sizing:border-box;position:relative;
    display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:16px;cursor:pointer;
    background:rgba(255,255,255,.04);border:1px solid transparent;
    transition:background .2s ease,border-color .25s ease,transform .15s ease;
    -webkit-tap-highlight-color:transparent;
}
.fk-atp.is-open .fk-playlist-option{animation:fkAtpRow .45s var(--atp-ease) both;animation-delay:calc(var(--i,0) * 45ms + 140ms)}
@keyframes fkAtpRow{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fk-playlist-option:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.1)}
.fk-playlist-option:active{transform:scale(.985)}
.fk-playlist-option:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}
.fk-playlist-option.is-in{background:rgba(34,197,94,.09);border-color:rgba(74,222,128,.3)}
.fk-playlist-option.is-new{border-color:rgba(192,132,252,.5);background:rgba(168,85,247,.12)}

.fk-pl-cover{flex:0 0 auto;width:48px;height:48px;border-radius:12px;object-fit:cover;background:#292524}
.fk-pl-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:right}
.fk-pl-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-pl-count{font-size:11.5px;color:var(--atp-mute)}

/* the action pill: افزودن → (loading) → اضافه شد / حذف */
.fk-pl-pill{
    position:relative;flex:0 0 auto;display:inline-grid;place-items:center;min-width:92px;height:34px;padding:0 12px;border-radius:999px;
    font-size:12px;font-weight:800;white-space:nowrap;
    color:#fff;background:linear-gradient(135deg,var(--atp-a),var(--atp-b));
    box-shadow:0 8px 18px -8px rgba(192,38,211,.85);
    transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.fk-pl-lbl{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .18s ease,transform .25s var(--atp-ease)}
.fk-pl-lbl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fk-pl-lbl-in,.fk-pl-lbl-out{opacity:0;transform:translateY(6px)}
.fk-playlist-option:hover .fk-pl-pill{transform:scale(1.04)}

.fk-playlist-option.is-in .fk-pl-pill{color:#86efac;background:rgba(34,197,94,.16);box-shadow:inset 0 0 0 1px rgba(74,222,128,.4)}
.fk-playlist-option.is-in .fk-pl-lbl-add{opacity:0;transform:translateY(-6px)}
.fk-playlist-option.is-in .fk-pl-lbl-in{opacity:1;transform:none}
.fk-playlist-option.is-in:hover .fk-pl-pill{color:#fecdd3;background:rgba(244,63,94,.16);box-shadow:inset 0 0 0 1px rgba(251,113,133,.45)}
.fk-playlist-option.is-in:hover .fk-pl-lbl-in{opacity:0;transform:translateY(-6px)}
.fk-playlist-option.is-in:hover .fk-pl-lbl-out{opacity:1;transform:none}
@media(hover:none){
    .fk-playlist-option.is-in:hover .fk-pl-pill{color:#86efac;background:rgba(34,197,94,.16);box-shadow:inset 0 0 0 1px rgba(74,222,128,.4)}
    .fk-playlist-option.is-in:hover .fk-pl-lbl-in{opacity:1;transform:none}
    .fk-playlist-option.is-in:hover .fk-pl-lbl-out{opacity:0}
}

.fk-playlist-option.is-busy{pointer-events:none}
.fk-playlist-option.is-busy .fk-pl-lbl{opacity:0!important}
.fk-playlist-option.is-pop .fk-pl-pill{animation:fkAtpPop .5s var(--atp-spring)}
@keyframes fkAtpPop{0%{transform:scale(.82)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

.fk-atp-spin{position:absolute;grid-area:1/1;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0;animation:fkAtpSpin .7s linear infinite}
.fk-playlist-option.is-busy .fk-atp-spin,.fk-atp-new.is-busy .fk-atp-spin{opacity:1}
@keyframes fkAtpSpin{to{transform:rotate(360deg)}}

/* loading skeleton */
.fk-atp-skel{height:66px;border-radius:16px;background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 70%);background-size:220% 100%;animation:fkAtpShimmer 1.2s linear infinite}
@keyframes fkAtpShimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* empty / error */
.fk-atp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;text-align:center;font-size:12px;line-height:1.9;color:var(--atp-mute)}
.fk-atp-empty strong{color:#fff;font-size:14px}
.fk-atp-empty-ico{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin-bottom:4px;color:#d8b7ff;background:linear-gradient(145deg,rgba(124,58,237,.3),rgba(192,38,211,.14));border:1px solid rgba(201,160,255,.18)}
.fk-atp-empty-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fk-atp-retry{all:unset;box-sizing:border-box;margin-top:6px;padding:8px 18px;border-radius:12px;cursor:pointer;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--atp-a),var(--atp-b))}
.fk-atp-retry:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}

/* ---------- status line ---------- */
.fk-atp-status{margin:0;padding:0 22px;min-height:0;height:0;overflow:hidden;font-size:12px;font-weight:700;color:#86efac;text-align:center;opacity:0;transition:opacity .25s ease,height .25s ease,padding .25s ease}
.fk-atp-status.is-in{height:30px;padding-top:6px;opacity:1}
.fk-atp-status.is-error{color:#fda4af}

/* ---------- footer ---------- */
.fk-atp-foot{display:flex;flex-direction:column;gap:10px;padding:10px 14px 16px;border-top:1px solid var(--atp-line);background:rgba(0,0,0,.14)}
.fk-atp-newtoggle{
    all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:14px;cursor:pointer;
    font-size:13px;font-weight:700;color:#e9d5ff;border:1.5px dashed rgba(201,160,255,.4);background:rgba(124,58,237,.08);
    transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.fk-atp-newtoggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .3s var(--atp-spring)}
.fk-atp-newtoggle:hover{background:rgba(124,58,237,.18);border-color:rgba(201,160,255,.7);color:#fff}
.fk-atp-newtoggle.is-open svg{transform:rotate(45deg)}
.fk-atp-newtoggle:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}

.fk-atp-new{display:flex;flex-direction:column;gap:6px;animation:fkAtpRow .35s var(--atp-ease) both}
.fk-atp-new[hidden]{display:none!important}
.fk-atp-new-row{display:flex;gap:8px}
.fk-atp-new input{
    all:unset;-webkit-user-select:text;user-select:text;box-sizing:border-box;flex:1 1 auto;min-width:0;height:44px;padding:0 14px;border-radius:13px;
    font-size:13px;font-family:inherit;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.fk-atp-new input::placeholder{color:#78716c}
.fk-atp-new input:focus{border-color:rgba(201,160,255,.75);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.fk-atp-new-row button{
    all:unset;box-sizing:border-box;position:relative;flex:0 0 auto;height:44px;padding:0 16px;border-radius:13px;cursor:pointer;display:grid;place-items:center;
    font-size:12.5px;font-weight:800;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--atp-a),var(--atp-b));
    box-shadow:0 10px 22px -10px rgba(192,38,211,.85);
}
.fk-atp-new-row button:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}
.fk-atp-new.is-busy{pointer-events:none}
.fk-atp-new.is-busy .fk-atp-new-txt{opacity:0}
.fk-atp-new small{font-size:11px;color:var(--atp-mute);padding:0 4px}

.fk-atp-done{
    all:unset;box-sizing:border-box;display:grid;place-items:center;height:46px;border-radius:14px;cursor:pointer;
    font-size:14px;font-weight:800;font-family:inherit;color:#fff;background:rgba(255,255,255,.09);border:1px solid var(--atp-line);
    transition:background .2s ease,transform .15s ease;
}
.fk-atp-done:hover{background:rgba(255,255,255,.15)}
.fk-atp-done:active{transform:scale(.98)}
.fk-atp-done:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}

/* ---------- mobile: bottom sheet ---------- */
@media(max-width:640px){
    .fk-atp{align-items:flex-end;padding:0}
    .fk-atp-card{
        max-width:none;max-height:min(86dvh,720px);border-radius:28px 28px 0 0;border-bottom:0;
        padding-bottom:env(safe-area-inset-bottom);
        opacity:1;transform:translateY(105%);
        transition:transform .5s var(--atp-ease);
    }
    .fk-atp.is-open .fk-atp-card{transform:none}
    .fk-atp-grab{display:block;position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:rgba(255,255,255,.22);z-index:3}
    .fk-atp-head{padding-top:26px}
    .fk-atp-close{top:18px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
    .fk-atp-card,.fk-atp-backdrop,.fk-pl-pill,.fk-pl-lbl{transition:opacity .01s linear!important;transform:none!important}
    .fk-atp.is-open .fk-playlist-option,.fk-playlist-option.is-pop .fk-pl-pill,.fk-atp-new,.fk-atp-skel,.fk-atp-spin{animation:none!important}
}