/* 1. Variables & Soft Muted Colors */
.ebci4 {
  /* ألوان زر واتساب (كحلي مائل للرمادي + نص أبيض واضح) */
  --ebci4-wa-bg: #1e293b;
  --ebci4-wa-hover: #334155;
  --ebci4-wa-color: #ffffff;

  /* ألوان زر اتصال (كحلي هادئ + نص أبيض واضح) */
  --ebci4-call-bg: #0f172a;
  --ebci4-call-hover: #1e293b;
  --ebci4-call-color: #ffffff;

  --ebci4-border: rgba(255, 255, 255, 0.08);
  --ebci4-shadow: rgba(15, 23, 42, 0.25);
  --ebci4-pulse-color: rgba(11, 154, 165, 0.25);
}

/* 2. Reset داخل الـ namespace */
.ebci4,
.ebci4 *,
.ebci4 *::before,
.ebci4 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.ebci4 {
  position: fixed;
  z-index: 999999;
  left: 1rem;
  bottom: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "El Messiri", sans-serif;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.ebci4--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 4. الأزرار - مقاس موحد وثابت لجميع الشاشات */
.ebci4__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 9.25rem; /* عرض موحد يضمن تساويهم تماماً */
  height: 3.125rem; /* ارتفاع أنيق ومناسب */
  border-radius: 50px;
  border: 1px solid var(--ebci4-border);
  text-decoration: none;
  box-shadow: 0 0.375rem 1rem var(--ebci4-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* تصميم زر واتساب */
.ebci4__btn--whatsapp {
  background: var(--ebci4-wa-bg);
  color: var(--ebci4-wa-color);
}

.ebci4__btn--whatsapp:hover,
.ebci4__btn--whatsapp:focus-visible {
  background: var(--ebci4-wa-hover);
  transform: translateY(-2px);
}

.ebci4__btn--whatsapp .ebci4__icon {
  color: var(--ebci4-wa-color);
}

/* تصميم زر اتصال */
.ebci4__btn--call {
  background: var(--ebci4-call-bg);
  color: var(--ebci4-call-color);
}

.ebci4__btn--call:hover,
.ebci4__btn--call:focus-visible {
  background: var(--ebci4-call-hover);
  transform: translateY(-2px);
}

.ebci4__btn--call .ebci4__icon {
  color: var(--ebci4-call-color);
}

/* 5. الأيقونات والنصوص (ظاهرة دائماً وبخط واضح) */
.ebci4__icon {
  font-size: 1.2rem;
  z-index: 2;
}

.ebci4__label {
  display: inline-block !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}

/* 6. تأثير النبض الهادئ */
.ebci4__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--ebci4-pulse-color);
  animation: ebci4-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes ebci4-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.12, 1.25);
    opacity: 0;
  }
}

.ebci4__ring {
  display: none;
}

/* 7. Responsive Breakpoints */
@media (min-width: 769px) {
  .ebci4 {
    left: 1.5rem;
    bottom: 1.5rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1281px) {
  .ebci4__btn {
    width: 9.75rem;
    height: 3.25rem;
  }
  
  .ebci4__label {
    font-size: 1rem;
  }
}