/* =============================================
   DELETE MODAL
============================================= */

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    z-index:9999;

    opacity:0;

    transition:.25s;

}

.modal.show{

    display:flex;

    opacity:1;

}

.modal-content{

    width:380px;

    max-width:90%;

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    text-align:center;

    box-shadow:

        0 18px 45px rgba(0,0,0,.30);

    transform:translateY(-15px);

    animation:modalShow .25s ease forwards;

}

.modal-content h3{

    margin-bottom:12px;

    font-size:22px;

}

.modal-content p{

    color:#64748b;

    line-height:1.6;

}

.modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:28px;

}

.cancel-btn{

    padding:11px 22px;

    border:none;

    border-radius:10px;

    background:#e2e8f0;

    color:#1e293b;

    cursor:pointer;

    transition:.25s;

}

.cancel-btn:hover{

    background:#cbd5e1;

}

.delete-btn{

    padding:11px 22px;

    border:none;

    border-radius:10px;

    background:#dc2626;

    color:#ffffff;

    cursor:pointer;

    transition:.25s;

}

.delete-btn:hover{

    background:#b91c1c;

}

@keyframes modalShow{

    from{

        opacity:0;

        transform:translateY(-20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}
/* =============================================
   DARK MODE
============================================= */

body.dark .modal-content{

    background:#1e293b;

    color:#f8fafc;

    border:1px solid #334155;

}

body.dark .modal-content p{

    color:#cbd5e1;

}

body.dark .cancel-btn{

    background:#334155;

    color:#f8fafc;

}

body.dark .cancel-btn:hover{

    background:#475569;

}