/* ============================================================
   brcnctadeul — Floating Contact Buttons (زراير الاتصال العائمة)
   Target Market: Kingdom of Bahrain (+973, BHD Only)
   Target Website: engzleads.com
   Namespace: brcnctadeul
   Architecture: 100% Semantic CSS Tokens Architecture
   Strict Color Palette: #5bc0de, #ffffff, #000000, #25D366 (WhatsApp)
   Font Family: "El Messiri", system-ui, -apple-system, sans-serif
   Zero Magic Numbers
   ============================================================ */

:root {
  /* Colors */
  --brcnctadeul-clr-cyan: #5bc0de;
  --brcnctadeul-clr-cyan-rgb: 91, 192, 222;
  --brcnctadeul-clr-white: #ffffff;
  --brcnctadeul-clr-black: #000000;
  --brcnctadeul-clr-wa: #25D366;
  --brcnctadeul-clr-wa-hover: #1EBE5B;
  --brcnctadeul-clr-wa-pulse: rgba(37, 211, 102, 0.45);

  /* Typography */
  --brcnctadeul-font-main: "El Messiri", system-ui, -apple-system, sans-serif;
  --brcnctadeul-btn-font-size: 0.88rem;
  --brcnctadeul-btn-font-weight: 700;

  /* Dimensions & Spacing */
  --brcnctadeul-pos-bottom: 28px;
  --brcnctadeul-pos-left: 28px;
  --brcnctadeul-z-index: 920;
  --brcnctadeul-gap: 0.75rem;

  /* Button Metrics */
  --brcnctadeul-btn-pad-y: 0.65rem;
  --brcnctadeul-btn-pad-x: 1.25rem;
  --brcnctadeul-btn-radius: 999px;
  --brcnctadeul-btn-border-width: 1px;
  --brcnctadeul-ico-size: 1rem;

  /* Shadows */
  --brcnctadeul-wa-shadow: 0 6px 22px rgba(37, 211, 102, 0.4);
  --brcnctadeul-wa-shadow-hover: 0 8px 28px rgba(37, 211, 102, 0.6);
  --brcnctadeul-call-shadow: 0 6px 22px rgba(91, 192, 222, 0.35);
  --brcnctadeul-call-shadow-hover: 0 8px 28px rgba(91, 192, 222, 0.55);

  /* Transitions */
  --brcnctadeul-trans-fast: 0.22s ease;
  --brcnctadeul-trans-smooth: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Floating Container (Desktop Only, Positioned Bottom-Left)
   ============================================================ */
.brcnctadeul-wrapper {
  position: fixed;
  bottom: var(--brcnctadeul-pos-bottom);
  left: var(--brcnctadeul-pos-left);
  z-index: var(--brcnctadeul-z-index);
  display: flex;
  flex-direction: column;
  gap: var(--brcnctadeul-gap);
  direction: rtl;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--brcnctadeul-trans-smooth),
              transform var(--brcnctadeul-trans-smooth);
}

.brcnctadeul-wrapper.brcnctadeul-ready {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Common Floating Button Styling
   ============================================================ */
.brcnctadeul-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--brcnctadeul-btn-pad-y) var(--brcnctadeul-btn-pad-x);
  border-radius: var(--brcnctadeul-btn-radius);
  border-width: var(--brcnctadeul-btn-border-width);
  border-style: solid;
  font-family: var(--brcnctadeul-font-main);
  font-size: var(--brcnctadeul-btn-font-size);
  font-weight: var(--brcnctadeul-btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--brcnctadeul-trans-smooth),
              background var(--brcnctadeul-trans-fast),
              border-color var(--brcnctadeul-trans-fast),
              box-shadow var(--brcnctadeul-trans-fast),
              color var(--brcnctadeul-trans-fast);
}

.brcnctadeul-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.brcnctadeul-btn i {
  font-size: var(--brcnctadeul-ico-size);
  transition: transform var(--brcnctadeul-trans-fast);
}

.brcnctadeul-btn:hover i {
  transform: scale(1.18);
}

/* ============================================================
   1. WhatsApp Floating Button (Green Cyber Glow + Pulse Ring)
   ============================================================ */
.brcnctadeul-btn-wa {
  position: relative;
  background: var(--brcnctadeul-clr-wa);
  border-color: var(--brcnctadeul-clr-wa);
  color: var(--brcnctadeul-clr-white);
  box-shadow: var(--brcnctadeul-wa-shadow);
}

.brcnctadeul-btn-wa:hover {
  background: var(--brcnctadeul-clr-wa-hover);
  border-color: var(--brcnctadeul-clr-wa-hover);
  box-shadow: var(--brcnctadeul-wa-shadow-hover);
  color: var(--brcnctadeul-clr-white);
}

/* Pulsing Ambient Radar Ring */
.brcnctadeul-btn-wa::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--brcnctadeul-btn-radius);
  border: 2px solid var(--brcnctadeul-clr-wa);
  opacity: 0.8;
  pointer-events: none;
  animation: brcnctadeul-wa-pulse 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes brcnctadeul-wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.14, 1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.14, 1.25);
    opacity: 0;
  }
}

/* ============================================================
   2. Direct Call Floating Button (Cyan Accent)
   ============================================================ */
.brcnctadeul-btn-phone {
  background: var(--brcnctadeul-clr-cyan);
  border-color: var(--brcnctadeul-clr-cyan);
  color: var(--brcnctadeul-clr-black);
  box-shadow: var(--brcnctadeul-call-shadow);
}

.brcnctadeul-btn-phone:hover {
  background: var(--brcnctadeul-clr-white);
  border-color: var(--brcnctadeul-clr-white);
  color: var(--brcnctadeul-clr-black);
  box-shadow: var(--brcnctadeul-call-shadow-hover);
}

/* ============================================================
   Responsive Rules
   Mobile (<= 768px): Hide completely, as brcnctafeul-sticky handles mobile!
   ============================================================ */
@media (max-width: 768px) {
  .brcnctadeul-wrapper {
    display: none !important;
  }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .brcnctadeul-btn-wa::before {
    animation: none;
    display: none;
  }

  .brcnctadeul-wrapper,
  .brcnctadeul-btn {
    transition: none;
  }
}