/*
|--------------------------------------------------------------------------
| MKGO - Public Modals
|--------------------------------------------------------------------------
|
| File:
| /assets/css/components/modals.css
|
*/


/*
|--------------------------------------------------------------------------
| Modal Layer
|--------------------------------------------------------------------------
*/

.site-modal {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Open State
|--------------------------------------------------------------------------
*/

.site-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Backdrop
|--------------------------------------------------------------------------
*/

.site-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(15, 23, 42, 0.62);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/*
|--------------------------------------------------------------------------
| Dialog
|--------------------------------------------------------------------------
*/

.site-modal-dialog {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 500px;

    overflow: hidden;

    border:
        1px solid
        rgba(226, 232, 240, 0.95);

    border-radius: 16px;

    background: #ffffff;
    color: #0f172a;

    box-shadow:
        0 28px 80px
        rgba(15, 23, 42, 0.24);

    opacity: 0;

    transform:
        translateY(10px)
        scale(0.985);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.site-modal.is-open
.site-modal-dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/*
|--------------------------------------------------------------------------
| Dialog Focus
|--------------------------------------------------------------------------
*/

.site-modal-dialog:focus {
    outline: none;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding:
        24px
        24px
        18px;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.site-modal-title {
    margin: 0;

    color: #0f172a;

    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}


/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/

.site-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    margin:
        -6px
        -6px
        0
        0;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;
    color: #64748b;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}


.site-modal-close:hover {
    background: #f1f5f9;

    color: #0f172a;
}


.site-modal-close:focus-visible {
    outline:
        2px solid
        #0f172a;

    outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| Close Icon
|--------------------------------------------------------------------------
*/

.site-modal-close-icon {
    display: block;

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
*/

.site-modal-body {
    padding:
        0
        24px
        24px;
}


/*
|--------------------------------------------------------------------------
| Message
|--------------------------------------------------------------------------
*/

.site-modal-message {
    margin: 0;

    color: #64748b;

    font-size: 0.9rem;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    padding:
        18px
        24px;

    border-top:
        1px solid
        #e2e8f0;

    background: #f8fafc;
}


/*
|--------------------------------------------------------------------------
| Modal Buttons
|--------------------------------------------------------------------------
*/

.site-modal-footer
.site-primary-button,

.site-modal-footer
.site-secondary-button {
    min-width: 100px;
}


/*
|--------------------------------------------------------------------------
| Destructive Confirmation
|--------------------------------------------------------------------------
|
| modals.js adds .is-destructive when requested.
|
*/

.site-modal.is-destructive
.site-modal-confirm {
    border-color: #b91c1c;

    background: #b91c1c;
    color: #ffffff;
}


.site-modal.is-destructive
.site-modal-confirm:hover {
    border-color: #991b1b;

    background: #991b1b;
}


/*
|--------------------------------------------------------------------------
| Body Lock
|--------------------------------------------------------------------------
*/

body.modal-open {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-modal {
        align-items: flex-end;

        padding:
            16px;
    }


    .site-modal-dialog {
        max-width: none;

        border-radius:
            16px
            16px
            12px
            12px;

        transform:
            translateY(24px);
    }


    .site-modal.is-open
    .site-modal-dialog {
        transform:
            translateY(0);
    }


    .site-modal-header {
        padding:
            21px
            20px
            16px;
    }


    .site-modal-body {
        padding:
            0
            20px
            22px;
    }


    .site-modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;

        padding:
            16px
            20px
            20px;
    }


    .site-modal-footer
    .site-primary-button,

    .site-modal-footer
    .site-secondary-button {
        width: 100%;
        min-width: 0;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Screens
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .site-modal {
        padding: 10px;
    }


    .site-modal-header {
        padding:
            18px
            16px
            14px;
    }


    .site-modal-body {
        padding:
            0
            16px
            19px;
    }


    .site-modal-footer {
        padding:
            14px
            16px
            16px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .site-modal,
    .site-modal-dialog,
    .site-modal-close {
        transition: none;
    }

}