/* ==========================================================================
   E42 MultiContact - Vanilla CSS Implementation
   Pixel Perfect Design
   ========================================================================== */

/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Font Awesome 6 Free & Brands */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Root variables for consistent styling */
:root {
  --e42-whatsapp-color: #25D366;
  --e42-whatsapp-dark: #1DA851;
  --e42-whatsapp-gradient-start: #128C7E;
  --e42-whatsapp-gradient-end: #075E54;
  --e42-phone-gradient-start: #3b82f6;
  --e42-phone-gradient-end: #0ea5e9;
  --e42-font-family: 'Inter', sans-serif;
  --e42-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --e42-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --e42-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --e42-transition-all: all 0.3s ease-in-out;
  --e42-transition-colors: background-color 0.3s ease;
  --e42-transition-opacity: opacity 0.3s ease;
  --e42-transition-transform: transform 0.3s ease;
}

/* Global Font Override - Ensuring no conflicts with themes or other plugins */
.e42-mc-widget-container *,
.e42-mc-widget-buttons-container * {
  font-family: var(--e42-font-family) !important;
}

.e42-mc-widget-buttons-container,
.e42-mc-widget-container {
  font-family: var(--e42-font-family) !important;
}

/* Exception for Font Awesome icons - Ensuring no conflicts with themes or other plugins */
.e42-mc-widget-container *:not(.fas):not(.fab):not(.far):not(.fal):not(.fad),
.e42-mc-widget-buttons-container *:not(.fas):not(.fab):not(.far):not(.fal):not(.fad) {
  font-family: var(--e42-font-family) !important;
}

/* ==========================================================================
   Animations - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

/* Pulse Animation for WhatsApp Button */
@keyframes e42-mc-pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7) !important;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0) !important;
  }
}

/* Pulse Animation for Phone Button */
@keyframes e42-mc-pulse-blue {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7) !important;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0) !important;
  }
}

.e42-mc-animate-pulse-slow-green {
  animation: e42-mc-pulse-green 2.5s infinite !important;
}

.e42-mc-animate-pulse-slow-blue {
  animation: e42-mc-pulse-blue 2.5s infinite !important;
}

/* Widget Transition Animations */
.e42-mc-widget-container {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s !important;
}

.e42-mc-widget-hidden {
  transform: scale(0.95) translateY(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.e42-mc-widget-visible {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   Positioning and Layering
   ========================================================================== */

.e42-mc-widget-buttons-container {
  position: fixed !important;
  z-index: 99998 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important; /* Added consistent spacing between buttons */
}

.e42-mc-widget-container {
  position: fixed !important;
  z-index: 99999 !important;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Toggle Button Base Styles - Ensuring no conflicts with themes or other plugins */
.e42-mc-toggle-button {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  box-shadow: var(--e42-shadow-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important; /* Reduced from 36px for better visual balance */
  color: white !important;
  cursor: pointer !important;
  transition: var(--e42-transition-colors) !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
  position: relative !important;
  text-decoration: none !important;
}

/* Ensure Font Awesome icons in toggle buttons display correctly - Ensuring no conflicts with themes or other plugins */
.e42-mc-toggle-button .fab,
.e42-mc-toggle-button .fas,
.e42-mc-toggle-button .far,
.e42-mc-toggle-button .fal,
.e42-mc-toggle-button .fad {
  display: inline-block !important;
  width: auto !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-weight: 900 !important; /* Ensure proper font weight for Font Awesome icons */
}

/* Additional fix for toggle buttons to ensure icons are visible */
.e42-mc-toggle-button i[class*="fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fallback text styles for toggle buttons */
.e42-mc-toggle-button:not(:has(i)) {
  font-family: var(--e42-font-family) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* WhatsApp Button - Ensuring no conflicts with themes or other plugins */
.e42-mc-whatsapp-button {
  background-color: var(--e42-whatsapp-color) !important;
}

.e42-mc-whatsapp-button:hover {
  background-color: var(--e42-whatsapp-dark) !important;
}

/* Phone Button - Ensuring no conflicts with themes or other plugins */
.e42-mc-phone-button {
  background-color: #3b82f6 !important;
}

.e42-mc-phone-button:hover {
  background-color: #2563eb !important;
}

/* ==========================================================================
   Widget Container Styles - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

.e42-mc-widget-container {
  background-color: white !important;
  border-radius: 16px !important;
  box-shadow: var(--e42-shadow-2xl) !important;
  overflow: hidden !important;
  width: calc(100% - 40px) !important; /* Adjusted for better spacing */
  max-height: 100vh !important; /*emre*/
  display: flex !important;
  flex-direction: column !important;
  /* Ensure proper spacing between widgets */
  margin-bottom: 20px !important;
  /* Remove default positioning to avoid conflicts */
  left: 20px !important;
  right: 20px !important;
  /* transform: scale(0.90); */ /*emre*/
}

/* Desktop sizing */
@media (min-width: 640px) {
  .e42-mc-widget-container {
    width: 380px !important; /* Slightly adjusted for pixel perfection */
    max-width: 90vw !important; /* Ensure it doesn't overflow on smaller screens */
  }
}

/* ==========================================================================
   Widget Header Styles - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

.e42-mc-widget-header {
  padding: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  color: white !important;
}

.e42-mc-whatsapp-header {
  background: linear-gradient(to right, var(--e42-whatsapp-gradient-start), var(--e42-whatsapp-gradient-end)) !important;
}

.e42-mc-phone-header {
  background: linear-gradient(to right, var(--e42-phone-gradient-start), var(--e42-phone-gradient-end)) !important;
}

.e42-mc-header-content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
  color: white !important;
}

.e42-mc-header-content p {
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 0.9 !important;
  margin: 0 !important;
  color: white !important;
}

.e42-mc-close-button {
  font-size: 24px !important;
  background: none !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: var(--e42-transition-opacity) !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

.e42-mc-close-button:hover {
  opacity: 0.75 !important;
}

/* ==========================================================================
   Consultant List Styles - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

.e42-mc-consultant-list {
  padding: 6px !important;
  background-color: #f9fafb !important;
  flex-grow: 1 !important;
  overflow-y: auto !important;
  max-height: 100vh !important;
}

/* Scrollbar styling */
.e42-mc-consultant-list::-webkit-scrollbar {
  width: 6px !important;
}

.e42-mc-consultant-list::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 10px !important;
}

.e42-mc-consultant-list::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 10px !important;
}

.e42-mc-consultant-list::-webkit-scrollbar-thumb:hover {
  background: #aaa !important;
}

.e42-mc-consultant-item {
  display: flex !important;
  align-items: center !important;
  padding: 6px !important;
  background-color: white !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  transition: var(--e42-transition-all) !important;
  transform: scale(1) !important;
}

.e42-mc-consultant-item:hover {
  background-color: #f9fafb !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.e42-mc-consultant-avatar-container {
  position: relative !important;
}

.e42-mc-consultant-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.e42-mc-consultant-status {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid white !important;
}

.e42-mc-consultant-status.online {
  background-color: #10B981 !important;
}

.e42-mc-consultant-status.offline {
  background-color: #9CA3AF !important;
}

.e42-mc-consultant-info {
  margin-left: 16px !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
}

.e42-mc-consultant-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.e42-mc-consultant-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.e42-mc-consultant-icon {
  font-size: 20px !important; /* Reduced from 24px for better balance */
  margin-left: 12px !important; /* Increased from 8px for better spacing */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  padding: 2px !important; /* Added slight padding for better visual balance */
}

.e42-mc-whatsapp-icon {
  color: var(--e42-whatsapp-color) !important;
}

.e42-mc-phone-icon {
  color: #3b82f6 !important;
}

/* Ensure Font Awesome icons display correctly - Ensuring no conflicts with themes or other plugins */
.e42-mc-widget-container i[class*="fa-"],
.e42-mc-widget-buttons-container i[class*="fa-"],
.e42-mc-consultant-icon i[class*="fa-"],
.e42-mc-toggle-button i[class*="fa-"],
.e42-mc-close-button i[class*="fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.e42-mc-widget-container i[class*="fab"],
.e42-mc-widget-buttons-container i[class*="fab"],
.e42-mc-consultant-icon i[class*="fab"],
.e42-mc-toggle-button i[class*="fab"],
.e42-mc-close-button i[class*="fab"] {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}

/* Make sure icons are visible */
.e42-mc-widget-container i[class*="fa-"],
.e42-mc-widget-buttons-container i[class*="fa-"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Widget Footer Styles - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

.e42-mc-widget-footer {
  padding: 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
  border-top: 1px solid #f3f4f6 !important;
  background-color: #f9fafb !important;
}

.e42-mc-widget-footer p {
  margin: 0 !important;
}

.e42-mc-widget-footer strong {
  font-weight: 600 !important;
}

/* ==========================================================================
   Responsive Positioning
   ========================================================================== */

/* Mobile positioning (default) */
.e42-mc-widget-buttons-container {
  bottom: 20px !important; /* Increased from 16px for better visual balance */
  right: 20px !important; /* Increased from 16px for better visual balance */
}

/* Position variants for button container */
.e42-mc-widget-buttons-container.e42-mc-position-bottom-right {
  bottom: 20px !important;
  right: 20px !important;
}

.e42-mc-widget-buttons-container.e42-mc-position-bottom-left {
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
}

.e42-mc-widget-buttons-container.e42-mc-position-top-right {
  top: 20px !important;
  bottom: auto !important;
  right: 20px !important;
}

.e42-mc-widget-buttons-container.e42-mc-position-top-left {
  top: 20px !important;
  bottom: auto !important;
  left: 20px !important;
  right: auto !important;
}

/* Tablet positioning */
@media (min-width: 640px) {
  .e42-mc-widget-buttons-container {
    bottom: 30px !important; /* Increased from 24px for better visual balance */
    right: 30px !important; /* Increased from 24px for better visual balance */
  }
  
  .e42-mc-widget-buttons-container.e42-mc-position-bottom-right {
    bottom: 30px !important;
    right: 30px !important;
  }
  
  .e42-mc-widget-buttons-container.e42-mc-position-bottom-left {
    bottom: 30px !important;
    left: 30px !important;
    right: auto !important;
  }
  
  .e42-mc-widget-buttons-container.e42-mc-position-top-right {
    top: 30px !important;
    bottom: auto !important;
    right: 30px !important;
  }
  
  .e42-mc-widget-buttons-container.e42-mc-position-top-left {
    top: 30px !important;
    bottom: auto !important;
    left: 30px !important;
    right: auto !important;
  }
  
  .e42-mc-widget-container {
    left: auto !important;
  }
  
  /* More precise positioning for better alignment */
  .e42-mc-widget-container.e42-mc-position-bottom-right {
    right: 30px !important;
    bottom: 100px !important; /* Adjusted for better spacing */
    left: auto !important;
  }
  
  .e42-mc-widget-container.e42-mc-position-bottom-left {
    left: 30px !important;
    bottom: 100px !important; /* Adjusted for better spacing */
    right: auto !important;
  }
  
  .e42-mc-widget-container.e42-mc-position-top-right {
    right: 30px !important;
    top: 100px !important; /* Adjusted for better spacing */
    left: auto !important;
  }
  
  .e42-mc-widget-container.e42-mc-position-top-left {
    left: 30px !important;
    top: 100px !important; /* Adjusted for better spacing */
    right: auto !important;
  }
}

/* Transform origins for animations - pixel perfect positioning */
.e42-mc-widget-container.e42-mc-origin-bottom-right {
  transform-origin: bottom right !important;
}

.e42-mc-widget-container.e42-mc-origin-bottom-left {
  transform-origin: bottom left !important;
}

.e42-mc-widget-container.e42-mc-origin-top-right {
  transform-origin: top right !important;
}

.e42-mc-widget-container.e42-mc-origin-top-left {
  transform-origin: top left !important;
}

/* Vertical positioning adjustments - optimized spacing */
.e42-mc-widget-container.e42-mc-position-bottom {
  bottom: 100px !important;
}

.e42-mc-widget-container.e42-mc-position-top {
  top: 100px !important;
}

/* Specific positioning for each widget variant */
.e42-mc-widget-container.e42-mc-position-bottom-right {
  bottom: 100px !important;
  right: 30px !important;
  left: auto !important;
}

.e42-mc-widget-container.e42-mc-position-bottom-left {
  bottom: 100px !important;
  left: 30px !important;
  right: auto !important;
}

.e42-mc-widget-container.e42-mc-position-top-right {
  top: 100px !important;
  right: 30px !important;
  left: auto !important;
}

.e42-mc-widget-container.e42-mc-position-top-left {
  top: 100px !important;
  left: 30px !important;
  right: auto !important;
}

/* ==========================================================================
   Utility Classes - Ensuring no conflicts with themes or other plugins
   ========================================================================== */

.e42-mc-flex {
  display: flex !important;
}

.e42-mc-flex-col {
  flex-direction: column !important;
}

.e42-mc-items-center {
  align-items: center !important;
}

.e42-mc-justify-center {
  justify-content: center !important;
}

.e42-mc-space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 12px !important;
}

.e42-mc-text-white {
  color: white !important;
}

.e42-mc-text-3xl {
  font-size: 36px !important;
}

.e42-mc-rounded-full {
  border-radius: 50% !important;
}

.e42-mc-shadow-lg {
  box-shadow: var(--e42-shadow-lg) !important;
}

.e42-mc-transition-colors {
  transition: var(--e42-transition-colors) !important;
}

.e42-mc-transition-opacity {
  transition: var(--e42-transition-opacity) !important;
}

.e42-mc-transition-transform {
  transition: var(--e42-transition-transform) !important;
}

.e42-mc-transform {
  transform: scale(1) !important;
}

.e42-mc-hover-scale-102:hover {
  transform: scale(1.02) !important;
}

.e42-mc-shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.e42-mc-hover-shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}