/*
============================================================
Motmaître — DIALOG SYSTEM
============================================================
*/

:root {
    --mc-dialog-hot: #ef5c36;
    --mc-dialog-danger: #c9463b;
    --mc-dialog-warning: #d86f24;
    --mc-dialog-ink: #171717;
    --mc-dialog-muted: #696969;
    --mc-dialog-border: rgba(0, 0, 0, 0.09);
}


body.mc-dialog-lock {
    overflow: hidden;
}


/*
============================================================
ROOT
============================================================
*/

.mc-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
}


.mc-dialog-root[hidden] {
    display: none !important;
}


.mc-dialog-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 10, 10, 0.38);

    opacity: 0;

    backdrop-filter:
        blur(0);

    -webkit-backdrop-filter:
        blur(0);

    transition:
        opacity 180ms ease,
        backdrop-filter 180ms ease,
        -webkit-backdrop-filter 180ms ease;
}


.mc-dialog-root.is-open
.mc-dialog-backdrop {
    opacity: 1;

    backdrop-filter:
        blur(5px);

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


/*
============================================================
POSITION
============================================================
*/

.mc-dialog-positioner {
    position: absolute;
    inset: 0;

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

    padding:
        24px;

    pointer-events: none;
}


/*
============================================================
PANEL
============================================================
*/

.mc-dialog-panel {
    position: relative;

    width:
        min(
            100%,
            460px
        );

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.985
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius:
        24px;

    box-shadow:
        0 28px 90px
        rgba(
            0,
            0,
            0,
            0.24
        );

    opacity: 0;

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

    transition:
        opacity 180ms ease,
        transform 180ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    pointer-events: auto;
}


.mc-dialog-root.is-open
.mc-dialog-panel {
    opacity: 1;

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


/*
============================================================
CONTENT
============================================================
*/

.mc-dialog-content {
    padding:
        30px 30px 8px;
}


.mc-dialog-symbol {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    margin-bottom:
        18px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            0.055
        );

    color:
        var(
            --mc-dialog-ink
        );

    font-size:
        16px;

    font-weight:
        800;
}


.mc-dialog-root[data-tone="warning"]
.mc-dialog-symbol {
    color:
        var(
            --mc-dialog-warning
        );

    background:
        rgba(
            216,
            111,
            36,
            0.11
        );
}


.mc-dialog-root[data-tone="danger"]
.mc-dialog-symbol {
    color:
        var(
            --mc-dialog-danger
        );

    background:
        rgba(
            201,
            70,
            59,
            0.11
        );
}


.mc-dialog-title {
    margin:
        0;

    padding-right:
        35px;

    color:
        var(
            --mc-dialog-ink
        );

    font-family:
        inherit;

    font-size:
        22px;

    line-height:
        1.16;

    letter-spacing:
        -0.025em;
}


.mc-dialog-message {
    margin-top:
        12px;

    color:
        var(
            --mc-dialog-muted
        );

    font-size:
        15px;

    line-height:
        1.55;

    white-space:
        pre-line;
}


/*
============================================================
CLOSE
============================================================
*/

.mc-dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.05
        );

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );

    font:
        inherit;

    font-size:
        23px;

    line-height:
        1;

    cursor: pointer;

    transition:
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}


.mc-dialog-close:hover {
    background:
        rgba(
            0,
            0,
            0,
            0.09
        );

    color:
        #111;

    transform:
        scale(1.04);
}


/*
============================================================
ACTIONS
============================================================
*/

.mc-dialog-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;

    padding:
        22px 30px 30px;
}


.mc-dialog-button {
    min-height:
        48px;

    padding:
        12px 17px;

    border-radius:
        14px;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    cursor: pointer;

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}


.mc-dialog-button:active {
    transform:
        scale(0.985);
}


.mc-dialog-cancel {
    border:
        1px solid
        var(
            --mc-dialog-border
        );

    background:
        #f6f6f6;

    color:
        #303030;
}


.mc-dialog-cancel:hover {
    background:
        #eeeeee;
}


.mc-dialog-confirm {
    border:
        1px solid
        transparent;

    background:
        var(
            --mc-dialog-ink
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.13
        );
}


.mc-dialog-root[data-tone="warning"]
.mc-dialog-confirm {
    background:
        var(
            --mc-dialog-warning
        );
}


.mc-dialog-root[data-tone="danger"]
.mc-dialog-confirm {
    background:
        var(
            --mc-dialog-danger
        );
}


.mc-dialog-confirm:hover {
    box-shadow:
        0 10px 26px
        rgba(
            0,
            0,
            0,
            0.19
        );

    transform:
        translateY(-1px);
}


.mc-dialog-button:focus-visible,
.mc-dialog-close:focus-visible {
    outline:
        3px solid
        rgba(
            239,
            92,
            54,
            0.23
        );

    outline-offset:
        2px;
}


/*
============================================================
MOBILE GRABBER
============================================================
*/

.mc-dialog-grabber {
    display: none;
}


/*
============================================================
TOASTS
============================================================
*/

.mc-toast-region {
    position: fixed;
    top: 20px;
    right: 20px;

    z-index: 11000;

    display: flex;
    flex-direction: column;

    width:
        min(
            390px,
            calc(
                100vw
                - 40px
            )
        );

    gap:
        10px;

    pointer-events: none;
}


.mc-toast {
    display: flex;
    align-items: flex-start;

    gap:
        12px;

    padding:
        14px 14px 14px 16px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 18px 55px
        rgba(
            0,
            0,
            0,
            0.16
        );

    opacity: 0;

    transform:
        translateY(-8px);

    transition:
        opacity 170ms ease,
        transform 170ms ease;

    pointer-events: auto;
}


.mc-toast.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.mc-toast[data-tone="error"] {
    border-left:
        4px solid
        var(
            --mc-dialog-danger
        );
}


.mc-toast[data-tone="success"] {
    border-left:
        4px solid
        var(
            --mc-dialog-hot
        );
}


.mc-toast-text {
    flex: 1;

    color:
        #272727;

    font-size:
        14px;

    line-height:
        1.45;
}


.mc-toast-close {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        #858585;

    font-size:
        20px;

    cursor: pointer;
}


/*
============================================================
MOBILE — BOTTOM SHEET
============================================================
*/

@media (
    max-width: 640px
) {

    .mc-dialog-positioner {
        align-items:
            flex-end;

        padding:
            0;
    }


    .mc-dialog-panel {
        width:
            100%;

        max-width:
            none;

        border-radius:
            24px
            24px
            0
            0;

        border-bottom:
            0;

        transform:
            translateY(
                100%
            )
            scale(1);

        padding-bottom:
            env(
                safe-area-inset-bottom
            );
    }


    .mc-dialog-root.is-open
    .mc-dialog-panel {
        transform:
            translateY(0)
            scale(1);
    }


    .mc-dialog-grabber {
        display:
            block;

        width:
            42px;

        height:
            5px;

        margin:
            10px
            auto
            0;

        border-radius:
            999px;

        background:
            rgba(
                0,
                0,
                0,
                0.15
            );
    }


    .mc-dialog-content {
        padding:
            25px
            22px
            4px;
    }


    .mc-dialog-title {
        padding-right:
            32px;

        font-size:
            21px;
    }


    .mc-dialog-message {
        font-size:
            15px;
    }


    .mc-dialog-symbol {
        width:
            36px;

        height:
            36px;

        margin-bottom:
            15px;
    }


    .mc-dialog-close {
        top:
            17px;

        right:
            16px;
    }


    .mc-dialog-actions {
        display:
            flex;

        flex-direction:
            column;

        gap:
            9px;

        padding:
            20px
            22px
            20px;
    }


    .mc-dialog-confirm {
        order:
            -1;
    }


    .mc-dialog-button {
        width:
            100%;

        min-height:
            52px;

        border-radius:
            15px;

        font-size:
            15px;
    }


    .mc-toast-region {
        top:
            auto;

        right:
            12px;

        bottom:
            calc(
                12px
                + env(
                    safe-area-inset-bottom
                )
            );

        left:
            12px;

        width:
            auto;
    }


    .mc-toast {
        border-radius:
            16px;

        transform:
            translateY(
                10px
            );
    }


    .mc-toast.is-visible {
        transform:
            translateY(0);
    }
}


/*
============================================================
REDUCED MOTION
============================================================
*/

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

    .mc-dialog-backdrop,
    .mc-dialog-panel,
    .mc-dialog-button,
    .mc-dialog-close,
    .mc-toast {
        transition:
            none !important;
    }
}