/* ===============================
MODALE
=============================== */

#np-modal-prodotto {

    position: fixed;
    inset: 0;

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

    visibility: hidden;
    opacity: 0;

    z-index: 9999;

    transition: opacity .35s ease, visibility .35s ease;

}

/* stato aperto */

#np-modal-prodotto.active {

    visibility: visible;
    opacity: 1;

}

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

.np-modal-overlay {

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);

}

/* ===============================
BOX POPUP
=============================== */

.np-modal-box {

    position: relative;

    width: 1000px;
    max-width: 90%;

    background: #ffffff;

    border-radius: 24px;

    padding: 60px;

    z-index: 2;

    transform: scale(.92);
    opacity: 0;

    transition: transform .35s ease, opacity .35s ease;

}

/* animazione apertura */

#np-modal-prodotto.active .np-modal-box {

    transform: scale(1);
    opacity: 1;

}

/* ===============================
CONTENUTO
=============================== */

.np-modal-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}

/* ===============================
IMMAGINE
=============================== */

.np-modal-image {

    background: #f2f2f2;

    border-radius: 40px;

    padding: 60px;

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

}

.np-modal-image img {
    max-width: 100%;
}

/* ===============================
TESTO
=============================== */

.np-modal-text{
	text-align:center;
}

.np-modal-text h2 {

    font-size: 36px;

    color: #1f3a6f;

    margin-bottom: 25px;

}

.np-modal-text h4 {

    margin-top: 25px;

    font-size: 22px;

}

.np-modal-text p {

    font-size: 18px;

    line-height: 1.7;

}

/* ===============================
CHIUSURA
=============================== */

.np-modal-close {

    position: absolute;

    top: 20px;
    right: 25px;

    border: none;

    background: none;

    font-size: 32px;

    cursor: pointer;

}

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

@media (max-width: 768px){

    .np-modal-content{
        grid-template-columns: 1fr;
    }

    .np-modal-box{
        padding: 35px;
    }

}