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

.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup.show{
    display:flex;
}

/* =========================================================
   POPUP WINDOW
========================================================= */

.popup-box{
    width:95%;
    max-width:650px;
    max-height:90vh;
    overflow:auto;

    background:#fff;
    border-radius:10px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);

    padding:25px;

    position:relative;

    animation:popupFade .2s ease;
}

/* =========================================================
   LARGE POPUP
========================================================= */

.popup-large{
    max-width:1000px;
}

/* =========================================================
   SMALL POPUP
========================================================= */

.popup-small{
    max-width:420px;
}

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

.popup-title{
    margin:0 0 20px;
    font-size:24px;
    font-weight:bold;
    color:#222;
}

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

.popup-body{
    margin-bottom:20px;
}

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

.popup-footer{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:25px;

    flex-wrap:wrap;
}

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

.popup-close{

    position:absolute;

    top:12px;

    right:15px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#eee;

    color:#333;

    font-size:20px;

    cursor:pointer;

    transition:.2s;
}

.popup-close:hover{

    background:#d9534f;

    color:#fff;
}

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

.popup-icon{

    font-size:60px;

    text-align:center;

    margin-bottom:20px;
}

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

.popup-message{

    text-align:center;

    line-height:1.6;

    color:#444;

    margin-bottom:20px;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.popup-box::-webkit-scrollbar{
    width:10px;
}

.popup-box::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.popup-box::-webkit-scrollbar-track{
    background:#f5f5f5;
}

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

@keyframes popupFade{

    from{

        opacity:0;

        transform:scale(.95);
    }

    to{

        opacity:1;

        transform:scale(1);
    }
}

.popup{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#222;
    border-radius:10px;
    padding:25px;
    z-index:9999;
    color:#fff;
    box-shadow:0 0 25px rgba(0,0,0,.4);
}

.popup-medium{
    width:650px;
    max-width:95%;
}

.popup-header{
    margin-bottom:20px;
}

.popup-header h2{
    margin:0;
    color:#ff6a00;
}

.popup-footer{
    display:flex;
    gap:12px;
    margin-top:20px;
}