.nps-survey-box{

    max-width:750px;

    margin:40px auto;

    background:#ffffff;

    border-radius:12px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    direction:rtl;

}

.nps-header h2{

    margin:0;

    text-align:center;

    font-size:28px;

    color:#1d2327;

}

.nps-progress{

    width:100%;

    height:10px;

    background:#e8e8e8;

    border-radius:50px;

    overflow:hidden;

    margin:25px 0 10px;

}

#nps-progress-bar{

    width:0;

    height:100%;

    background:#2271b1;

    transition:.4s;

}

.nps-counter{

    text-align:center;

    color:#666;

    margin-bottom:30px;

    font-size:15px;

}

.nps-question{

    display:none;

    animation:npsFade .35s;

}

.nps-question h3{

    font-size:22px;

    margin-bottom:25px;

    color:#222;

    line-height:1.8;

}

.nps-question label{

    display:block;

    padding:14px 16px;

    margin-bottom:12px;

    border:1px solid #ddd;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

}

.nps-question label:hover{

    background:#f6f9fc;

    border-color:#2271b1;

}

.nps-question textarea{

    width:100%;

    border:1px solid #ddd;

    border-radius:8px;

    padding:12px;

    resize:vertical;

    font-family:inherit;

    font-size:15px;

}

.nps-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

}

.nps-buttons button{

    min-width:120px;

}

/* ---------- Modal ---------- */

#nps-modal{

    position:fixed;

    top:0;

    right:0;

    left:0;

    bottom:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.nps-modal-box{

    width:450px;

    max-width:92%;

    background:#fff;

    border-radius:15px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 50px rgba(0,0,0,.25);

    animation:npsPopup .25s ease;

}

.nps-modal-icon{

    font-size:70px;

    margin-bottom:20px;

}

.nps-modal-box h2{

    margin:0 0 15px;

    color:#222;

}

.nps-modal-box p{

    color:#666;

    line-height:2;

    margin-bottom:25px;

}

.nps-modal-buttons{

    text-align:center;

}

.nps-modal-buttons .button{

    min-width:150px;

}

@keyframes npsPopup{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes npsFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:768px){

    .nps-survey-box{

        padding:20px;

        margin:15px;

    }

    .nps-buttons{

        flex-direction:column;

        gap:10px;

    }

    .nps-buttons button{

        width:100%;

    }

}