/* Force Montserrat sur tous les éléments du widget WhatsApp */
* {
  font-family: 'Montserrat', sans-serif !important;
}

/* Exception pour les icônes Font Awesome */
.fa, .fas, .far, .fal, .fab, i[class^="fa-"], i[class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Bouton WhatsApp */
.whatsapp-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 80px;
height: 80px;
background-color: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 1000;
animation: bounce 2s infinite;
}

.whatsapp-button:hover {
transform: scale(1.1);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
}

.whatsapp-button i {
color: white;
font-size: 43px;
}

/* Simulation WhatsApp */
.whatsapp-simulation {
display: none;
position: fixed;
bottom: 100px;
left: 20px;
width: 330px;
height: 350px;
background-color: #f0f4ff;
border-radius: 20px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
overflow: hidden;
animation: fadeIn 0.5s ease;
z-index: 999;
}

.whatsapp-header {
background-color: #088159;
color: white;
padding: 15px;
display: flex;
align-items: center;
font-family: 'Montserrat', sans-serif;
position: relative;

}

.whatsapp-header .header-left {
display: flex;
align-items: center;
}

.whatsapp-header img {
width: 45px;
height: 45px;
border-radius: 50%;
margin-right: 10px;
}

.whatsapp-header .business-name {
font-weight: 700;
font-size: 18px;
}

.whatsapp-header .status {
font-weight: 400;
font-size: 12px;
color: #cfd8dc;
}

.whatsapp-header .whatsapp-close {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
font-size: 28px;
transition: transform 0.3s ease;
}

.whatsapp-header .whatsapp-close:hover {
transform: scale(1.2);
animation: shake 0.5s;
}

.whatsapp-body {
padding: 15px;
height: calc(100% - 170px);
background-color: #e5ddd5;
overflow-y: auto;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
animation: fadeInUp 1s ease-out;
background-image: url("background_whatsapp.PNG");
}

.whatsapp-message {
background-color: #ffffff;
color: #333;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
width: fit-content;
max-width: 80%;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
animation: popIn 0.6s ease;
}

.whatsapp-message.received {
background-color: #dcf8c6;
align-self: flex-start;
}

.whatsapp-message.sent {
background-color: #f1f1f1;
align-self: flex-end;
margin-left: auto;
}

.whatsapp-footer {
padding: 10px;
background-color: #ffffff;
display: flex;
align-items: center;
border-top: 1px solid #ddd;
font-family: 'Montserrat', sans-serif;
animation: fadeIn 1s ease-out;
}

.whatsapp-input {
flex-grow: 1;
font-size: 10px;
padding: 10px;
border-radius: 15px;
border: none;
background-color: #e8f1f8;
outline: none;
color: gray;
transition: background-color 0.3s ease;
font-family: 'Montserrat', sans-serif;
}

.whatsapp-input:disabled {
color: gray;
background-color: #d0e6f0;
}

.whatsapp-send-button {
background-color: #25d366;
color: #fff;
border: none;
border-radius: 10px;
width: 300px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
animation: pulse 2s infinite;
text-decoration: none;
}

.whatsapp-send-button i {
color: white;
font-size: 24px;
}

.whatsapp-send-button:hover {
background-color: #128c53;
color: #fff;
}

/* Animations */
@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes fadeInUp {
from {
  opacity: 0;
  transform: translateY(40px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes slideIn {
from {
  transform: translateX(-100%);
}
to {
  transform: translateX(0);
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
}
40% {
  transform: translateY(-20px);
}
60% {
  transform: translateY(-10px);
}
}

@keyframes shake {
0%, 100% {
  transform: rotate(0deg);
}
25% {
  transform: rotate(5deg);
}
75% {
  transform: rotate(-5deg);
}
}

@keyframes pulse {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.1);
}
100% {
  transform: scale(1);
}
}

@keyframes popIn {
from {
  transform: scale(0.5);
  opacity: 0;
}
to {
  transform: scale(1);
  opacity: 1;
}
}