/* ==========================================================
   CALCINO GLOBAL DIALOG
   ========================================================== */

.calcino-dialog-overlay{

    position:fixed;
    inset:0;

    z-index:100000;

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

    padding:18px;

    background:
        rgba(5,10,15,.56);

    backdrop-filter:
        blur(8px);

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .20s ease,
        visibility .20s ease;
}


.calcino-dialog-overlay.show{

    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


.calcino-dialog{

    width:min(
        100%,
        430px
    );

    padding:
        22px 22px
        18px;

    border:
        1px solid
        rgba(210,165,68,.30);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(22,30,37,.99),
            rgba(15,22,28,.99)
        );

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.38);

    transform:
        translateY(8px)
        scale(.98);

    transition:
        transform .20s ease;

    text-align:center;
}


.calcino-dialog-overlay.show
.calcino-dialog{

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


.calcino-dialog-icon{

    width:54px;
    height:54px;

    margin:
        0 auto
        13px;

    display:grid;
    place-items:center;

    border-radius:
        17px;

    background:
        rgba(216,169,68,.10);

    border:
        1px solid
        rgba(216,169,68,.26);

    color:
        #e5b754;

    font-size:
        25px;

    font-weight:
        900;
}


.calcino-dialog-title{

    color:
        #f3f6f8;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1.8;
}


.calcino-dialog-message{

    max-width:
        350px;

    margin:
        7px auto
        0;

    color:
        #adb9c3;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        2;
}


.calcino-dialog-actions{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

    margin-top:
        19px;
}


.calcino-dialog-button{

    min-height:
        46px;

    padding:
        9px 13px;

    border-radius:
        12px;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform .14s ease,
        filter .14s ease,
        border-color .14s ease;
}


.calcino-dialog-button:active{

    transform:
        translateY(1px);
}


.calcino-dialog-primary{

    border:
        1px solid
        #cb952f;

    background:
        linear-gradient(
            135deg,
            #c38a21,
            #94610c
        );

    color:
        #fff;
}


.calcino-dialog-primary:hover{

    filter:
        brightness(1.08);
}


.calcino-dialog-secondary{

    border:
        1px solid
        #344551;

    background:
        #16212a;

    color:
        #b9c5cd;
}


.calcino-dialog-secondary:hover{

    border-color:
        #536672;
}


/* ==========================================================
   INVALID FIELD
   ========================================================== */

.calcino-field-error{

    border-color:
        #d5a13c !important;

    box-shadow:
        0 0 0 4px
        rgba(213,161,60,.10) !important;
}


.calcino-field-error-pulse{

    animation:
        calcinoFieldPulse
        .55s ease;
}


@keyframes calcinoFieldPulse{

    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.012);
    }

    100%{
        transform:scale(1);
    }
}


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html:not([data-theme="dark"])
.calcino-dialog{

    background:
        rgba(255,255,255,.98);

    border-color:
        rgba(183,134,40,.25);

    box-shadow:
        0 24px 65px
        rgba(20,35,45,.20);
}


html:not([data-theme="dark"])
.calcino-dialog-title{

    color:
        #182734;
}


html:not([data-theme="dark"])
.calcino-dialog-message{

    color:
        #667684;
}


html:not([data-theme="dark"])
.calcino-dialog-secondary{

    background:
        #f4f6f8;

    color:
        #40515e;

    border-color:
        #d8e0e5;
}


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

@media(max-width:520px){

    .calcino-dialog-overlay{

        padding:14px;
    }


    .calcino-dialog{

        padding:
            19px 16px
            15px;

        border-radius:
            19px;
    }


    .calcino-dialog-icon{

        width:48px;
        height:48px;

        border-radius:
            15px;

        font-size:
            22px;
    }


    .calcino-dialog-title{

        font-size:
            15px;
    }


    .calcino-dialog-message{

        font-size:
            10px;
    }


    .calcino-dialog-actions{

        grid-template-columns:
            1fr 1fr;

        gap:
            7px;
    }


    .calcino-dialog-button{

        min-height:
            44px;

        font-size:
            10px;
    }
}


@media(max-width:360px){

    .calcino-dialog-actions{

        grid-template-columns:
            1fr;
    }
}