/*
|--------------------------------------------------------------------------
| QN WhatsApp Chat
|--------------------------------------------------------------------------
*/

.qn-wa-greeting {

    position: absolute;

    right: 0;

    bottom: 75px;

    background: #fff;

    color: #333;

    padding: 18px;

    border-radius: 16px;

    width: 250px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .20);

    font-size: 14px;

    text-align: center;

}



.qn-wa-greeting strong {

    display: block;

    font-size: 16px;

    margin-top: 8px;

}



.qn-wa-greeting p {

    margin: 8px 0;

}



.qn-wa-greeting small {

    color: #777;

}



.qn-wa-status {

    color: #25D366;

    font-weight: 700;

    font-size: 13px;

}

.qn-whatsapp-widget {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 9999;

    font-family: Arial, sans-serif;

}



/*
|--------------------------------------------------------------------------
| Ana Buton
|--------------------------------------------------------------------------
*/


.qn-whatsapp-button {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #25D366;

    color: #fff;

    border: 0;

    padding: 14px 22px;

    border-radius: 50px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 700;

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

    transition: .3s;

}



.qn-whatsapp-button:hover {

    transform: translateY(-3px);

}



/*
|--------------------------------------------------------------------------
| İkon
|--------------------------------------------------------------------------
*/


.qn-wa-icon {

    width: 35px;

    height: 35px;

    background: #fff;

    color: #25D366;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}




/*
|--------------------------------------------------------------------------
| Açılır Kutu
|--------------------------------------------------------------------------
*/


.qn-whatsapp-box {

    position: absolute;

    right: 0;

    bottom: 75px;

    width: 320px;

    background: #fff;

    border-radius: 16px;

    overflow: hidden;

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

    display: none;

}



/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/


.qn-wa-header {

    background: #25D366;

    color: #fff;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.qn-wa-header button {

    background: none;

    border: 0;

    color: #fff;

    font-size: 24px;

    cursor: pointer;

}



/*
|--------------------------------------------------------------------------
| İçerik
|--------------------------------------------------------------------------
*/


.qn-wa-content {

    padding: 20px;

    color: #333;

}



.qn-wa-content p {

    line-height: 1.6;

    margin-bottom: 20px;

}



/*
|--------------------------------------------------------------------------
| Başlat Butonu
|--------------------------------------------------------------------------
*/


.qn-wa-start {

    display: block;

    text-align: center;

    background: #25D366;

    color: #fff;

    padding: 13px;

    border-radius: 10px;

    font-weight: 700;

    text-decoration: none;

}



.qn-wa-start:hover {

    background: #128C7E;

}



/*
|--------------------------------------------------------------------------
| Mobil
|--------------------------------------------------------------------------
*/


@media(max-width:768px) {


    .qn-whatsapp-widget {

        right: 15px;

        bottom: 15px;

    }



    .qn-whatsapp-button {


        width: 60px;

        height: 60px;

        padding: 0;

        border-radius: 50%;

        justify-content: center;


    }



    .qn-wa-text {

        display: none;

    }



    .qn-wa-icon {

        width: auto;

        height: auto;

        background: none;

        color: #fff;

        font-size: 30px;

    }



    .qn-whatsapp-box {

        width: calc(100vw - 30px);

        right: -5px;

        bottom: 75px;

    }


}