/* ==========================================
   "Add to list" picker popover / modal
   Shared by the anime card bookmark buttons
   and the anime page's "Add to List" button.
========================================== */

@keyframes modalUp{
    from{opacity:0;transform:translateY(20px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

.card-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.card-list-btn{
    background:transparent;
    border:none;
    color:#8f94b0;
    cursor:pointer;
    font-size:15px;
    padding:4px;
    transition:.25s;
    line-height:1;
}
.card-list-btn:hover{
    color:#8F5BFF;
    transform:scale(1.2);
}

.list-picker-popover{
    position:fixed;
    z-index:4000;
    background:#141a2e;
    border:1px solid rgba(143,91,255,.4);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 40px rgba(123,46,255,.2);
    padding:14px;
    font-family:'Montserrat',sans-serif;
    animation:modalUp .25s ease;
    box-sizing:border-box;
}
.list-picker-overlay{
    position:fixed;
    inset:0;
    z-index:4000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(4,6,12,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:fadeIn .25s ease;
}
.list-picker-overlay .list-picker-popover{
    position:static;
    width:min(580px,100%);
    max-height:86vh;
    display:flex;
    flex-direction:column;
}
.list-picker-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}
.list-picker-title{
    color:white;
    font-weight:800;
    font-size:17px;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.list-picker-close{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#d8d8d8;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.list-picker-close:hover{
    background:#ff3b6b;
    border-color:#ff3b6b;
    color:white;
    transform:rotate(90deg);
}
.list-picker-close .modal-x{
    position:relative;
    width:12px;
    height:12px;
    display:block;
}
.list-picker-close .modal-x::before,
.list-picker-close .modal-x::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transform:translate(-50%,-50%) rotate(45deg);
}
.list-picker-close .modal-x::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}
.list-picker-sub{
    color:#8f94b0;
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:8px;
}
.list-picker-counter{
    color:#c9a8ff;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}
.list-picker-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.list-picker-toolbar .list-picker-counter{
    margin-bottom:0;
}
.list-picker-manage{
    color:#ff8c42;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1px;
    text-decoration:none;
    text-transform:uppercase;
    transition:.2s;
}
.list-picker-manage:hover{
    color:#ffab66;
}
.list-picker-rows{
    max-height:380px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
    flex:1 1 auto;
    padding-right:2px;
}
.list-picker-row{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:#d8d8d8;
    cursor:pointer;
    font-family:'Montserrat',sans-serif;
    font-size:14.5px;
    font-weight:600;
    text-align:left;
    transition:.2s;
}
.list-picker-row:hover{
    background:rgba(143,91,255,.12);
    border-color:rgba(143,91,255,.4);
}
.list-picker-name{
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.list-picker-count{
    color:#8f94b0;
    font-size:12.5px;
    white-space:nowrap;
}
.list-picker-plus{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    flex-shrink:0;
    background:#ff8c42;
    color:white;
    transition:.2s;
}
.list-picker-row:hover .list-picker-plus{
    box-shadow:0 0 14px rgba(255,140,66,.6);
}
.list-picker-row.checked .list-picker-plus{
    background:linear-gradient(135deg,#00c16a,#00e08a);
}
.list-picker-empty{
    color:#8f94b0;
    font-size:13px;
    text-align:center;
    padding:18px 8px;
}
.list-picker-new{
    display:flex;
    gap:8px;
}
.list-picker-new input{
    flex:1;
    min-width:0;
    padding:13px 15px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:white;
    font-size:13.5px;
    font-family:'Montserrat',sans-serif;
    outline:none;
    transition:.25s;
    box-sizing:border-box;
}
.list-picker-new input:focus{
    border-color:#8F5BFF;
    box-shadow:0 0 12px rgba(143,91,255,.35);
}
.list-picker-add{
    width:48px;
    flex-shrink:0;
    border-radius:12px;
    border:none;
    background:linear-gradient(135deg,#7B2EFF,#3F8CFF);
    color:white;
    cursor:pointer;
    font-size:16px;
    transition:.25s;
}
.list-picker-add:hover{
    box-shadow:0 0 16px rgba(123,46,255,.7);
}
.list-picker-toast{
    position:fixed;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    z-index:5000;
    background:#241543;
    border:1px solid rgba(143,91,255,.5);
    color:white;
    padding:11px 22px;
    border-radius:40px;
    font-size:13.5px;
    font-weight:700;
    font-family:'Montserrat',sans-serif;
    box-shadow:0 12px 34px rgba(0,0,0,.55);
    animation:modalUp .25s ease;
    transition:opacity .3s;
}
.list-picker-toast.out{
    opacity:0;
}

@media (max-width:600px){
    .list-picker-popover{
        left:12px !important;
        right:12px;
        width:auto !important;
    }
    .card-actions{
        gap:10px;
    }
}