/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com
Description: پوسته فرزند برای Hello Elementor
Author: kianoosh
Template: hello-elementor
Version: 1.0.0
*/
/* ===================================================================
   استایل دکمه WhatsApp
   =================================================================== */

/* استایل دکمه واتساپ */
.whatsapp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* متن را در وسط قرار می‌دهد */
  width: 220px;
  height: 48px;
  background-color: transparent;
  border: 2px solid #25D366; /* رنگ حاشیه دکمه */
  border-radius: 10px; /* گردی گوشه‌ها */
  padding: 0 16px;
  font-size: 1rem;
  font-weight: 500;
  color: #25D366; /* رنگ متن */
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s ease; /* زمان انیمیشن بیشتر شد */
}

/* استایل متن دکمه */
.whatsapp-btn .btn-text {
  z-index: 2;
  transition: color 0.5s ease; /* تغییر رنگ متن در هاور */
}

/* پس‌زمینه آیکون */
.whatsapp-btn .icon-bg {
  position: absolute;
  right: 8px;
  width: 36px;
  height: 36px;
  background-color: #25D366; /* رنگ پس‌زمینه آیکون */
  border-radius: 10%; /* گوشه‌های آیکون گرد */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease; /* انیمیشن برای تغییر اندازه */
  z-index: 1;
}

/* استایل آیکون در دکمه */
.whatsapp-btn .icon-bg i {
  color: white; /* رنگ آیکون */
  font-size: 1.1rem;
  transition: transform 0.3s ease; /* انیمیشن برای تغییر سایز آیکون */
}

/* حالت هاور */
.whatsapp-btn:hover {
  background: linear-gradient(135deg, #25D366, #128C7E); /* تغییر پس‌زمینه در هاور */
  color: white; /* تغییر رنگ متن */
  border-color: #25D366; /* حاشیه در هاور همان رنگ اولیه باقی می‌ماند */
}

/* تغییر رنگ متن در حالت هاور */
.whatsapp-btn:hover .btn-text {
  color: white;
}

/* تغییر آیکون در حالت هاور */
.whatsapp-btn:hover .icon-bg {
  width: 36px; /* عرض آیکون ثابت باقی می‌ماند */
  height: 36px; /* ارتفاع آیکون ثابت باقی می‌ماند */
  right: 8px; /* موقعیت آیکون ثابت باقی می‌ماند */
  background: transparent; /* پس‌زمینه شفاف */
  border-radius: 50%; /* گوشه‌های آیکون کاملاً گرد */
}