/* أيقونة الاتصال الهاتفي */

:root {
  --phone: #34c759; /* لون أخضر مخصص للاتصال الهاتفي */
  --phone-hover: #28a745;
  --phone-size: 64px;
  --phone-gap: 18px;
}

/* Floating button - تم نقله لجهة اليسار */
.phone-btn {
  position: fixed;
  left: calc(var(--phone-gap) + env(safe-area-inset-left)); /* تحديد الموقع على اليسار */
  bottom: calc(var(--phone-gap) + env(safe-area-inset-bottom));
  width: var(--phone-size);
  height: var(--phone-size);
  border-radius: 50%;
  background: var(--phone);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  z-index: 2147483646; /* تحت الواتساب بدرجة واحدة لتفادي أي تداخل إن وجد */
  text-decoration: none;
  overflow: visible;   /* يسمح بظهور حلقة النبض الخارجية */
  transform-origin: center;
  transition: transform .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* الصورة داخل الزر */
.phone-btn img {
  width: 55%; /* حجم متناسق لأيقونة الهاتف */
  height: 55%;
  object-fit: contain;
  pointer-events: none;    /* لمنع اعتراض النقرات */
  position: relative;
  z-index: 2;              /* فوق حلقة النبض */
}

/* حلقة النبض التفاعلية خلف الأيقونة */
.phone-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%) scale(1);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
  animation: phone-pulse 1.6s ease-out infinite;
  will-change: transform, box-shadow;
}

@keyframes phone-pulse {
  0% {
    transform: translate(-50%,-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
  }
  70% {
    transform: translate(-50%,-50%) scale(1.35);
    box-shadow: 0 0 0 20px rgba(52, 199, 89, 0);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

/* تأثير عند تمرير الفأرة أو الضغط */
.phone-btn:hover { 
  transform: scale(1.06); 
  background: var(--phone-hover); 
}

/* للشاشات الصغيرة لتصغير الحجم بشكل متناسق */
@media (max-width:420px) {
  :root { 
    --phone-size: 52px; 
    --phone-gap: 12px; 
  }
}

/* احترام إعدادات الحركة المفضلة للمستخدم */
@media (prefers-reduced-motion: reduce) {
  .phone-btn::after { 
    animation: none; 
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); 
  }
  .phone-btn { 
    transition: none; 
  }
}