/* ==========================================================
   SDME MODAL SYSTEM
========================================================== */


#modalContainer{

    position:relative;

    z-index:9999;

}



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


.sdme-modal-overlay{


    position:fixed;


    inset:0;


    background:

    rgba(15,23,42,0.35);


    backdrop-filter:

    blur(6px);



    display:flex;


    align-items:center;


    justify-content:center;


}



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


.sdme-modal{


    width:360px;


    background:#ffffff;


    border-radius:16px;


    padding:24px;



    text-align:center;



    box-shadow:

    0 20px 45px rgba(15,23,42,0.18);



    animation:

    modalEnter .2s ease;



    font-family:

    Inter,

    system-ui,

    -apple-system,

    sans-serif;


}



/* ==========================================================
   ICON
========================================================== */


.sdme-modal-icon{


    width:42px;


    height:42px;



    margin:

    0 auto 16px;



    border-radius:50%;



    display:flex;


    align-items:center;


    justify-content:center;



    background:#fef2f2;



    color:#dc2626;



    font-size:18px;


}



/* ==========================================================
   TITLE
========================================================== */


.sdme-modal h2{


    margin:

    0 0 10px;



    font-size:18px;



    font-weight:600;



    letter-spacing:-0.02em;



    color:#0f172a;


}



/* ==========================================================
   MESSAGE
========================================================== */


.sdme-modal p{


    margin:0;



    font-size:14px;



    line-height:1.5;



    color:#64748b;


}



/* ==========================================================
   ACTION BUTTONS
========================================================== */


.sdme-modal-actions{


    display:flex;



    justify-content:center;



    align-items:center;



    gap:12px;



    margin-top:24px;


}



.sdme-modal-actions button{


    height:38px;



    padding:

    0 18px;



    border-radius:8px;



    border:none;



    cursor:pointer;



    font-size:14px;



    font-weight:500;



    transition:.2s ease;



    font-family:inherit;


}



/* ==========================================================
   SECONDARY ACTION
   Example:
   Stay Logged In
========================================================== */


.sdme-modal-secondary{


    background:#2563eb;



    color:white;


}



.sdme-modal-secondary:hover{


    background:#1d4ed8;


}



/* ==========================================================
   DANGER ACTION
   Example:
   Logout
========================================================== */


.sdme-modal-danger{


    background:#dc2626;



    color:white;


}



.sdme-modal-danger:hover{


    background:#b91c1c;


}



/* ==========================================================
   ANIMATION
========================================================== */


@keyframes modalEnter{


    from{


        opacity:0;



        transform:

        translateY(10px)

        scale(.97);


    }



    to{


        opacity:1;



        transform:

        translateY(0)

        scale(1);


    }


}