/**
 * WhatsApp Chat VDOPERU
 * Frontend styles
 */

/* Contenedor principal */
#vdoperu-whatsapp-chat {
    position: relative;
    z-index: 99999;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   BOTÓN FLOTANTE
   ========================================================= */

#vdoperu-whatsapp-chat-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;

    width: 60px;
    height: 60px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background-color: #25D366;
    color: #ffffff;

    font-size: 28px;
    line-height: 60px;
    text-align: center;

    cursor: pointer;

    z-index: 99999;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Efecto al pasar el mouse */
#vdoperu-whatsapp-chat-btn:hover {
    transform: scale(1.06);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.22);
}


/* Efecto al presionar */
#vdoperu-whatsapp-chat-btn:active {
    transform: scale(0.96);
}


/* Accesibilidad: foco del teclado */
#vdoperu-whatsapp-chat-btn:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 3px;
}


/* =========================================================
   VENTANA DEL CHAT
   ========================================================= */

#vdoperu-chat-box {
    position: fixed;

    right: 20px;
    bottom: 90px;

    width: min(360px, calc(100vw - 40px));

    box-sizing: border-box;

    padding: 18px;

    background-color: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 15px;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.16);

    z-index: 99998;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #222222;
}


/* =========================================================
   PASOS
   ========================================================= */

#vdoperu-chat-box .vdoperu-chat-step {
    margin: 0 0 14px;
}


/* Etiquetas */
#vdoperu-chat-box label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    line-height: 1.4;

    color: #222222;
}


/* Select */
#vdoperu-chat-box select,
#vdoperu-chat-box input[type="text"] {
    display: block;

    width: 100%;

    min-height: 42px;

    box-sizing: border-box;

    padding: 9px 10px;

    margin: 0;

    background-color: #ffffff;

    color: #222222;

    border: 1px solid #cccccc;

    border-radius: 8px;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.4;
}


/* Focus de campos */
#vdoperu-chat-box select:focus,
#vdoperu-chat-box input[type="text"]:focus {
    outline: none;

    border-color: #25D366;

    box-shadow:
        0 0 0 2px rgba(37, 211, 102, 0.15);
}


/* =========================================================
   BOTÓN ENVIAR
   ========================================================= */

#vdoperu-send-whatsapp {
    display: block;

    width: 100%;

    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 14px;

    margin-top: 8px;

    border: 0;

    border-radius: 8px;

    background-color: #25D366;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* Hover botón enviar */
#vdoperu-send-whatsapp:hover {
    background-color: #1ebe5d;
}


/* Active */
#vdoperu-send-whatsapp:active {
    transform: scale(0.98);
}


/* Focus */
#vdoperu-send-whatsapp:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 2px;
}


/* =========================================================
   ESTADO ABIERTO
   ========================================================= */

#vdoperu-whatsapp-chat:not(.is-open) #vdoperu-chat-box {
    display: none;
}


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

@media (max-width: 480px) {

    #vdoperu-whatsapp-chat-btn {
        right: 15px;
        bottom: 15px;

        width: 56px;
        height: 56px;

        line-height: 56px;

        font-size: 26px;
    }


    #vdoperu-chat-box {
        right: 15px;
        bottom: 82px;

        width: calc(100vw - 30px);

        max-width: 360px;

        padding: 15px;

        border-radius: 13px;
    }

}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #vdoperu-whatsapp-chat-btn,
    #vdoperu-send-whatsapp {
        transition: none;
    }

}