/* Estilos para ícones customizados de WhatsApp e E-mail */

/* Ícone de WhatsApp customizado */
.pat-icon-btn.pat-icon-whatsapp,
.btn.btn-success[title*="WhatsApp"],
.btn[title*="WhatsApp"] {
    position: relative;
    overflow: hidden;
}

.pat-icon-btn.pat-icon-whatsapp::before,
.btn.btn-success[title*="WhatsApp"]::before,
.btn[title*="WhatsApp"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-image: url('../uploads/icons/whatsapp-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Esconde o ícone Bootstrap APENAS se a imagem customizada carregar */
.pat-icon-btn.pat-icon-whatsapp::before:not([style*="background-image: none"]) ~ i.bi-whatsapp,
.pat-icon-btn.pat-icon-whatsapp.has-custom-icon i.bi-whatsapp,
.btn.btn-success[title*="WhatsApp"].has-custom-icon i.bi-whatsapp {
    opacity: 0;
}

/* Ícone de E-mail customizado */
.pat-icon-btn.pat-icon-email,
.btn[title*="mail"],
.btn[title*="Email"] {
    position: relative;
    overflow: hidden;
}

.pat-icon-btn.pat-icon-email::before,
.btn[title*="mail"]::before,
.btn[title*="Email"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-image: url('../uploads/icons/email-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Ajustes para os botões maiores */
.btn.btn-success[title*="WhatsApp"],
.btn[title*="WhatsApp"],
.btn[title*="mail"],
.btn[title*="Email"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn.btn-success[title*="WhatsApp"]::before,
.btn[title*="WhatsApp"]::before {
    width: 18px;
    height: 18px;
}

.btn[title*="mail"]::before,
.btn[title*="Email"]::before {
    width: 18px;
    height: 18px;
}

/* Garantir que os botões verdes tenham fundo apropriado */
.pat-icon-btn.pat-icon-whatsapp,
.btn.btn-success[title*="WhatsApp"] {
    background-color: #25d366 !important;
    border-color: #25d366 !important;
}

.pat-icon-btn.pat-icon-email {
    background-color: #d93025 !important;
    border-color: #d93025 !important;
}