/*======================================================================
MF-18

UTILITY FOUNDATION
Version : 3.0

======================================================================*/

.ms-modal-overlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:var(--ms-space-lg);
background:rgba(0,0,0,.72);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--ms-transition-base),
visibility var(--ms-transition-base);
z-index:var(--ms-z-modal);
}

.ms-modal-overlay.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.ms-modal{
position:relative;
display:flex;
flex-direction:column;
width:min(100%,640px);
max-height:min(90vh,900px);
overflow:hidden;
background:var(--ms-surface);
border:1px solid var(--ms-border);
border-radius:var(--ms-radius-xl);
box-shadow:var(--ms-shadow-xl);
transform:translateY(20px) scale(.98);
transition:transform var(--ms-transition-base);
}

.ms-modal-overlay.is-open .ms-modal{
transform:translateY(0) scale(1);
}

.ms-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ms-space-md);
padding:var(--ms-space-lg);
border-bottom:1px solid var(--ms-border);
flex-shrink:0;
}

.ms-modal-title{
margin:0;
}

.ms-modal-close{
flex:0 0 auto;
}

.ms-modal-body{
padding:var(--ms-space-lg);
overflow:auto;
flex:1 1 auto;
}

.ms-modal-footer{
display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--ms-space-sm);
padding:var(--ms-space-lg);
border-top:1px solid var(--ms-border);
flex-shrink:0;
}

.ms-modal-scroll{
overflow:auto;
}

.ms-modal-center{
text-align:center;
}

.ms-modal-start{
text-align:left;
}

.ms-modal-end{
text-align:right;
}

.ms-modal-sm{
width:min(100%,420px);
}

.ms-modal-md{
width:min(100%,640px);
}

.ms-modal-lg{
width:min(100%,860px);
}

.ms-modal-xl{
width:min(100%,1080px);
}

.ms-modal-full{
width:100%;
height:100%;
max-height:none;
border-radius:0;
}

@media (max-width:767px){

.ms-modal-overlay{
padding:var(--ms-space-md);
}

.ms-modal-header,
.ms-modal-body,
.ms-modal-footer{
padding:var(--ms-space-md);
}

.ms-modal-footer{
flex-direction:column;
align-items:stretch;
}

.ms-modal-footer > *{
width:100%;
}

}