/* Estilos para Contact Preferences - Hedonai */

/* Botones de preferencia de contacto */
.hcp-phone-button,
.hcp-whatsapp-button,
.hcp-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: linear-gradient(57deg, #FA7A4D 0%, #FF8B62 100%) !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    border: none !important;
    color: white !important;
    font-family: "Karla", Sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 40px !important;
    box-shadow: 0 2px 6px rgba(250, 122, 77, 0.25) !important;
    text-decoration: none !important;
    outline: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.hcp-phone-button:hover,
.hcp-whatsapp-button:hover,
.hcp-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(250, 122, 77, 0.4) !important;
    background: linear-gradient(57deg, #FA7A4D 0%, #FF8B62 100%) !important;
    color: white !important;
}

.hcp-phone-button.active,
.hcp-whatsapp-button.active,
.hcp-button.active {
    background: linear-gradient(57deg, #d45a35 0%, #d86947 100%) !important;
    color: white !important;
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(250, 122, 77, 0.4) !important,
                inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.hcp-phone-button svg,
.hcp-whatsapp-button svg,
.hcp-button svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    fill: currentColor;
}

.hcp-whatsapp-button.active {
    background: linear-gradient(57deg, #e66a40 0%, #e67b52 100%) !important;
    color: white !important;
}

/* Forzar estilos con máxima especificidad */
body .hcp-contact-preferences .hcp-phone-button,
body .hcp-contact-preferences .hcp-whatsapp-button,
body .hcp-contact-preferences .hcp-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: linear-gradient(57deg, #FA7A4D 0%, #FF8B62 100%) !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    border: none !important;
    color: white !important;
    font-family: "Karla", Sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 40px !important;
    box-shadow: 0 2px 6px rgba(250, 122, 77, 0.25) !important;
    text-decoration: none !important;
    outline: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
}