@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   FLOATING CONTACT COMPONENT — THEME 6 (Neo Brutal)
   File: ebctad6.css | HTML prefix: ebctad4
   Layout Structure: Vertical Stacked Dock
   ============================================================ */

.ebctad4-wrapper {
  /* =========================================================
     CSS TOKENS
     ========================================================= */
  --ebctad4-font-family: 'Inter', sans-serif;
  --ebctad4-position: fixed;
  --ebctad4-bottom: 24px;
  --ebctad4-left: 24px;
  --ebctad4-z-index: 9999;
  --ebctad4-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  --ebctad4-dock-direction: column;
  --ebctad4-dock-align: stretch;
  --ebctad4-dock-bg: #ffffff;
  --ebctad4-dock-border: 3px solid #000000;
  --ebctad4-dock-shadow: 5px 5px 0px #000000;
  --ebctad4-dock-radius: 0px;
  --ebctad4-dock-blur: 0px;
  --ebctad4-divider-bg: #000000;

  --ebctad4-btn-height: 44px;
  --ebctad4-btn-radius: 10px;

  --ebctad4-phone-bg: #ffe600;
  --ebctad4-phone-color: #000000;
  --ebctad4-phone-pulse: rgba(255, 230, 0, 0.5);

  --ebctad4-wa-bg: #00ff66;
  --ebctad4-wa-color: #000000;
  --ebctad4-wa-pulse: rgba(0, 255, 102, 0.5);

  --ebctad4-trig-bg: #000000;
  --ebctad4-trig-color: #ffe600;

  --ebctad4-panel-bg: #ffffff;
  --ebctad4-panel-border: 4px solid #000000;
  --ebctad4-panel-radius: 20px;
  --ebctad4-panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --ebctad4-panel-width: 320px;
  --ebctad4-panel-text: #000000;
  --ebctad4-panel-sub: #444444;
  --ebctad4-panel-blur: 16px;

  --ebctad4-overlay-bg: rgba(0, 0, 0, 0.4);
  --ebctad4-header-border: 2px solid #000000;
  --ebctad4-online-bg: #00ff66;
  --ebctad4-online-shadow: 0 0 6px #00ff66;
  --ebctad4-item-bg: #fffbe6;
  --ebctad4-item-hover-bg: #ffe600;

  /* Mobile specific design tokens preserving theme visual identity and layout structure */
  --ebctad4-mobile-dock-radius: 0px;
  --ebctad4-mobile-btn-radius: 0px;

  /* =========================================================
     BASE RULES (100% STRICT CSS VARIABLES)
     ========================================================= */
  position: var(--ebctad4-position);
  bottom: var(--ebctad4-bottom);
  left: var(--ebctad4-left);
  z-index: var(--ebctad4-z-index);
  font-family: var(--ebctad4-font-family);
  direction: rtl;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--ebctad4-transition);
}

.ebctad4-wrapper.ebctad4-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Floating Dock Bar (Horizontal or Vertical per Theme) */
.ebctad4-dock {
  display: flex;
  flex-direction: var(--ebctad4-dock-direction);
  align-items: var(--ebctad4-dock-align);
  gap: 8px;
  background: var(--ebctad4-dock-bg);
  border: var(--ebctad4-dock-border);
  border-radius: var(--ebctad4-dock-radius);
  padding: 6px 8px;
  box-shadow: var(--ebctad4-dock-shadow);
  backdrop-filter: blur(var(--ebctad4-dock-blur));
  -webkit-backdrop-filter: blur(var(--ebctad4-dock-blur));
}

.ebctad4-dock-divider {
  width: 100%; height: 1px;
  background: var(--ebctad4-divider-bg);
}

/* Floating Action Button Base */
.ebctad4-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--ebctad4-btn-height);
  padding: 0 14px;
  border-radius: var(--ebctad4-btn-radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--ebctad4-transition);

  span.ebctad4-btn-text {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
  }
}

.ebctad4-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.ebctad4-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  width: 22px;
  height: 22px;
}

/* Phone Button Specifics */
.ebctad4-btn-phone {
  background: var(--ebctad4-phone-bg);
  color: var(--ebctad4-phone-color);
}

/* WhatsApp Button Specifics */
.ebctad4-btn-whatsapp {
  background: var(--ebctad4-wa-bg);
  color: var(--ebctad4-wa-color);
}

/* Trigger Button Specifics */
.ebctad4-btn-trigger {
  background: var(--ebctad4-trig-bg);
  color: var(--ebctad4-trig-color);
}

.ebctad4-btn-trigger .ebctad4-icon-close { display: none; }

.ebctad4-wrapper.ebctad4-open .ebctad4-btn-trigger .ebctad4-icon-open { display: none; }
.ebctad4-wrapper.ebctad4-open .ebctad4-btn-trigger .ebctad4-icon-close { display: block; }

/* Pulse Wave */
.ebctad4-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--ebctad4-btn-radius);
  pointer-events: none;
  animation: ebctad4-pulse-anim 2.5s infinite;
}

.ebctad4-btn-phone .ebctad4-pulse { box-shadow: 0 0 0 0 var(--ebctad4-phone-pulse); }
.ebctad4-btn-whatsapp .ebctad4-pulse { box-shadow: 0 0 0 0 var(--ebctad4-wa-pulse); }

@keyframes ebctad4-pulse-anim {
  0% { transform: scale(0.98); opacity: 0.8; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Overlay */
.ebctad4-overlay {
  position: fixed;
  inset: 0;
  background: var(--ebctad4-overlay-bg);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: var(--ebctad4-transition);
  z-index: -1;
}

.ebctad4-wrapper.ebctad4-open .ebctad4-overlay {
  opacity: 1;
  visibility: visible;
}

/* Quick Contact Popup Panel */
.ebctad4-panel {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 0;
  width: var(--ebctad4-panel-width);
  background: var(--ebctad4-panel-bg);
  border: var(--ebctad4-panel-border);
  border-radius: var(--ebctad4-panel-radius);
  box-shadow: var(--ebctad4-panel-shadow);
  backdrop-filter: blur(var(--ebctad4-panel-blur));
  -webkit-backdrop-filter: blur(var(--ebctad4-panel-blur));
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.95);
  transition: var(--ebctad4-transition);
  transform-origin: bottom left;
}

.ebctad4-wrapper.ebctad4-open .ebctad4-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ebctad4-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--ebctad4-header-border);
}

.ebctad4-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ebctad4-panel-sub);
  font-weight: 600;
}

.ebctad4-dot-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ebctad4-online-bg);
  box-shadow: var(--ebctad4-online-shadow);
}

.ebctad4-panel-title {
  margin: 0.25rem 0 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ebctad4-panel-text);
}

.ebctad4-panel-close {
  background: transparent;
  border: none;
  color: var(--ebctad4-panel-sub);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

.ebctad4-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ebctad4-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--ebctad4-item-bg);
  text-decoration: none;
  transition: var(--ebctad4-transition);
}

.ebctad4-panel-item:hover {
  background: var(--ebctad4-item-hover-bg);
  transform: translateX(-3px);
}

.ebctad4-panel-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.ebctad4-panel-icon.whatsapp { background: var(--ebctad4-wa-bg); color: var(--ebctad4-wa-color); }
.ebctad4-panel-icon.phone { background: var(--ebctad4-phone-bg); color: var(--ebctad4-phone-color); }

.ebctad4-panel-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ebctad4-panel-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ebctad4-panel-text);
}

.ebctad4-panel-val {
  font-size: 0.78rem;
  color: var(--ebctad4-panel-sub);
}

/* =========================================================
   THEME-SPECIFIC MOBILE RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 639px) {
  .ebctad4-wrapper {
    bottom: 14px;
    left: 14px;
  }
  .ebctad4-dock {
    flex-direction: var(--ebctad4-dock-direction);
    align-items: var(--ebctad4-dock-align);
    gap: 5px;
    padding: 5px;
    border-radius: var(--ebctad4-mobile-dock-radius);
    max-width: calc(100vw - 28px);
  }
  .ebctad4-dock-divider {
    width: 100%; height: 1px;
  }
  .ebctad4-btn {
    height: 36px;
    padding: 0 8px;
    border-radius: var(--ebctad4-mobile-btn-radius);
    gap: 4px;
    flex: none;
    justify-content: center;
  }
  .ebctad4-btn span.ebctad4-btn-text {
    font-size: 0.72rem;
    letter-spacing: -0.2px;
  }
  .ebctad4-icon-box {
    font-size: 1rem;
    width: 18px;
    height: 18px;
  }
  .ebctad4-panel {
    width: calc(100vw - 28px);
    max-width: 310px;
    left: 0;
    bottom: calc(100% + 10px);
  }
}

@media (max-width: 480px) {
  .ebctad4-dock {
    padding: 4px;
    gap: 4px;
  }
  .ebctad4-btn {
    padding: 0 6px;
    height: 34px;
  }
  .ebctad4-btn span.ebctad4-btn-text {
    font-size: 0.68rem;
  }
}