/* =====================================================
   SPI UI Framework
   Modal
   Version : 1.0.0
===================================================== */


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

.spi-modal-overlay{
    position:fixed;

    inset:0;

    z-index:9998;

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

    padding:20px;

    background:rgba(15, 23, 42, .55);

    backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;

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


.spi-modal-overlay.spi-modal-show{
    opacity:1;
    visibility:visible;
}


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

.spi-modal{
    width:100%;
    max-width:480px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, .22);

    overflow:hidden;

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

    transition:transform .2s ease;
}


.spi-modal-show .spi-modal{
    transform:translateY(0) scale(1);
}


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

.spi-modal-header{
    display:flex;
    align-items:flex-start;

    gap:14px;

    padding:22px 22px 16px;
}


.spi-modal-icon{
    flex:0 0 auto;

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

    width:44px;
    height:44px;

    border-radius:50%;

    font-size:20px;
    font-weight:700;
}


.spi-modal-icon-danger{
    background:#fee2e2;

    color:#dc2626;
}


.spi-modal-icon-warning{
    background:#fef3c7;

    color:#d97706;
}


.spi-modal-title{
    margin:0 0 5px;

    color:#0f172a;

    font-size:18px;
    font-weight:700;

    line-height:1.4;
}


.spi-modal-subtitle{
    margin:0;

    color:#64748b;

    font-size:13px;
    line-height:1.55;
}


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

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


.spi-modal-warning{
    padding:12px 14px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
    border-radius:10px;

    color:#475569;

    font-size:13px;
    line-height:1.55;
}


.spi-modal-target{
    margin-top:5px;

    color:#0f172a;

    font-weight:700;

    word-break:break-word;
}


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

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

    gap:10px;

    padding:16px 22px;

    background:#f8fafc;

    border-top:1px solid #e2e8f0;
}


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

.spi-modal-open{
    overflow:hidden;
}


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

@media(max-width:576px){

    .spi-modal-overlay{
        align-items:flex-end;

        padding:12px;
    }


    .spi-modal{
        max-width:none;

        border-radius:16px;
    }


    .spi-modal-footer{
        flex-direction:column-reverse;
    }


    .spi-modal-footer .spi-btn{
        width:100%;
    }

}