/* Botón de WhatsApp — calcado de .btn/.btn-wa del diseño original
   (fondo #25D366, texto/ícono #04310F, pill, sombra verde, hover con
   translateY + brightness). Todo lo configurable via Style tab pisa estos
   defaults por especificidad de {{WRAPPER}}, así que estos valores son solo
   el estado inicial del widget. */
.indexdesign-wa-btn {
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background-color: #25D366;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: 0 8px 20px -8px rgba(37, 211, 102, .55);
    color: #04310F;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    gap: 9px;
    padding: 12px 24px;
    transition: transform .2s, filter .2s, box-shadow .2s;
}

.indexdesign-wa-btn:hover {
    box-shadow: 0 14px 28px -10px rgba(37, 211, 102, .65);
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.indexdesign-wa-btn__icon {
    flex: none;
    height: 17px;
    width: 17px;
}

.indexdesign-wa-btn__text {
    white-space: nowrap;
}

/* Control "Posición: Integrado" — widget-whatsapp-button.js le agrega esta
   clase al contenedor real del botón de submit del Form (sea cual sea el
   proyecto/estructura) recién cuando efectivamente mueve este botón ahí
   adentro — nunca se aplica "a ciegas" a cualquier form de la página. */
.idx-wa-inline-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

/* Se mueve el wrapper del widget entero (no solo el <button>, ver JS) — sin
   esto, el ancho 100% que Elementor le da por default a todo widget lo
   estiraría a lo ancho de la fila, empujando el botón de submit lejos. */
.idx-wa-inline-row > .elementor-widget-indexdesign_whatsapp_button {
    width: auto;
}