/*======================================
EIVOX MODAL CSS
Version: 1.0
======================================*/


/*======================================
MODAL OVERLAY
======================================*/

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:var(--z-modal);

}

.modal.active{

    opacity:1;

    visibility:visible;

}


/*======================================
MODAL CONTAINER
======================================*/

.modal-dialog{

    width:100%;

    max-width:650px;

    max-height:90vh;

    overflow:auto;

    background:var(--card);

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

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

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

    animation:modalShow .3s ease;

}


/*======================================
HEADER
======================================*/

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px;

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

}

.modal-title{

    font-size:1.4rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}

.modal-close{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    cursor:pointer;

    transition:var(--transition);

}

.modal-close:hover{

    background:var(--danger);

    color:#fff;

}


/*======================================
BODY
======================================*/

.modal-body{

    padding:24px;

    color:var(--text);

}


/*======================================
FOOTER
======================================*/

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    padding:24px;

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

}


/*======================================
SIZES
======================================*/

.modal-sm .modal-dialog{

    max-width:400px;

}

.modal-lg .modal-dialog{

    max-width:900px;

}

.modal-xl .modal-dialog{

    max-width:1200px;

}

.modal-full .modal-dialog{

    width:100%;

    max-width:none;

    height:100vh;

    max-height:none;

    border-radius:0;

}


/*======================================
IMAGE PREVIEW
======================================*/

.modal-image{

    text-align:center;

}

.modal-image img{

    max-width:100%;

    height:auto;

    border-radius:var(--radius);

}


/*======================================
PRODUCT QUICK VIEW
======================================*/

.modal-product{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.modal-product img{

    width:100%;

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

}


/*======================================
SCROLLBAR
======================================*/

.modal-dialog::-webkit-scrollbar{

    width:8px;

}

.modal-dialog::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:999px;

}


/*======================================
ANIMATION
======================================*/

@keyframes modalShow{

    from{

        opacity:0;

        transform:translateY(25px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:767px){

    .modal{

        padding:12px;

        align-items:flex-end;

    }

    .modal-dialog{

        max-width:100%;

        width:100%;

        border-radius:20px 20px 0 0;

    }

    .modal-header{

        padding:18px;

    }

    .modal-body{

        padding:18px;

    }

    .modal-footer{

        padding:18px;

        flex-direction:column;

    }

    .modal-footer .btn{

        width:100%;

    }

    .modal-product{

        grid-template-columns:1fr;

    }

}