/* ==========================================================
   DPT PILKADES
   FILE : style.css
   GLOBAL LAYOUT + MODAL
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

body{
    background:#f4f7fb;
}

/* ==========================================================
   CONTAINER
========================================================== */

#dpt-checker{
    max-width:760px;
    margin:30px auto;
    padding:0 15px;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

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

.dpt-card{

    position:relative;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 12px 40px rgba(15,23,42,.08),
        0 2px 8px rgba(15,23,42,.04);
}

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

@keyframes dptAlert{

    from{
        opacity:0;
        transform:translateY(-8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.dpt-modal{

    display:none;

    position:fixed;

    inset:0;

    z-index:99999;

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

    backdrop-filter:blur(8px);

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

    padding:20px;
}

.dpt-modal.active{
    display:flex;
}

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

.dpt-modal-box{

    width:100%;
    max-width:500px;

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(15,23,42,.20),
        0 8px 20px rgba(15,23,42,.08);

    animation:dptModalShow .28s ease;
}

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

@keyframes dptModalShow{

    from{
        opacity:0;

        transform:
            translateY(20px)
            scale(.98);
    }

    to{
        opacity:1;

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

}

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

@media (max-width:768px){

    #dpt-checker{
        margin:15px auto;
        padding:0 10px;
    }

    .dpt-card{
        border-radius:18px;
    }

    .dpt-modal{
        padding:12px;
    }

    .dpt-modal-box{
        width:100%;
        max-width:100%;
        border-radius:18px;
    }

}