/* ==========================================
   MODAL SYSTEM
========================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(23,18,43,.45);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:9998;

}
.modal-overlay.active{

    opacity:1;

    visibility:visible;

}
.modal{

    position:fixed;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%)
        scale(.92);

    width:min(92%,600px);

    background:var(--surface);

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:9999;

    overflow:hidden;

}
.modal.active{

    opacity:1;

    visibility:visible;

    transform:
        translate(-50%,-50%)
        scale(1);

}
.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-bottom:1px solid var(--border);

}
.modal-title{

    font-size:24px;

    font-weight:700;

    color:var(--text);

}
.modal-close{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#F7F4FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.modal-close:hover{

    background:var(--primary);

    color:white;

}
.modal-body{

    padding:30px;

}
.modal-footer{

    padding:24px 30px;

    border-top:1px solid var(--border);

    display:flex;

    justify-content:flex-end;

    gap:16px;

}
.modal-sm{

    width:420px;

}

.modal-lg{

    width:min(92%,900px);

}

.modal-xl{

    width:min(95%,1200px);

}
.modal-scroll{

    max-height:75vh;

    overflow-y:auto;

}
.modal-success{

    text-align:center;

}

.modal-success-icon{

    width:90px;

    height:90px;

    margin:auto auto 24px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EAFBF0;

    color:var(--success);

    font-size:40px;

}
.image-modal{

    background:transparent;

    border:none;

    box-shadow:none;

}

.image-modal img{

    width:100%;

    border-radius:var(--radius-lg);

}
.modal-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:220px;

}