/* ==========================================
   GLOBAL ACCESSIBILITY & SEO FOCUS STYLES
   ========================================== */
.fixed-icon-left a:focus-visible,
.fixed-widgets-right a:focus-visible,
#scrollToTop:focus-visible {
  outline: 3px solid #ffc107 !important;
  outline-offset: 3px !important;
}

/* Base Icon Setup */
.fixed-icon-left a.mobile-btn i,
.fixed-widgets-right a.whatsapp-btn i,
#scrollToTop i {
  display: inline-block;
  will-change: transform;
}

/* ==========================================
   1. AUTOMATIC ICON ANIMATIONS (DEFAULT)
   ========================================== */

/* Phone Icon: Automatically tilts 45 deg back & forth */
.fixed-icon-left a.mobile-btn i {
  animation: autoTiltPhone 2.5s ease-in-out infinite alternate;
}

/* WhatsApp Icon: Automatically rotates 360 deg continuously */
.fixed-widgets-right a.whatsapp-btn i {
  animation: autoRotateWhatsapp 4s linear infinite;
}

/* Scroll Arrow Icon: Automatically bounces up & down */
#scrollToTop i {
  animation: autoBounceArrow 1.8s ease-in-out infinite alternate;
}

/* ==========================================
   2. HOVER STATE (STOPS ANIMATIONS)
   ========================================== */

/* Freeze animations on hover */
.fixed-icon-left a.mobile-btn:hover i,
.fixed-widgets-right a.whatsapp-btn:hover i,
#scrollToTop:hover i,
.fixed-icon-left:hover .widget-badge,
.fixed-widgets-right:hover .widget-badge {
  animation-play-state: paused !important;
}

/* ==========================================
   LEFT SIDE WIDGET (Call Button)
   ========================================== */
.fixed-icon-left {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixed-icon-left a.mobile-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  animation: floatWidget 3s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.fixed-icon-left a.mobile-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(0, 123, 255, 0.5);
  z-index: -1;
  animation: radarPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.fixed-icon-left a.mobile-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 123, 255, 0.6);
}

.fixed-icon-left .widget-badge {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
  animation: badgeSlideLeft 4s ease-in-out infinite alternate;
}

/* ==========================================
   RIGHT SIDE WIDGETS (WhatsApp & Scroll To Top)
   ========================================== */
.fixed-widgets-right {
  position: fixed;
  bottom: 24px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 10000;
}

.whatsapp-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixed-widgets-right a.whatsapp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  animation: floatWidget 3s ease-in-out infinite 0.5s;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.fixed-widgets-right a.whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  z-index: -1;
  animation: radarPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 0.5s;
}

.fixed-widgets-right a.whatsapp-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 211, 102, 0.6);
}

.fixed-widgets-right .widget-badge {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
  animation: badgeSlideRight 4s ease-in-out infinite alternate 0.5s;
}

#scrollToTop {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#scrollToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#scrollToTop:hover {
  background: #007bff;
  border-color: #007bff;
  transform: translateY(-3px) scale(1.08);
}

/* ==========================================
   KEYFRAME ANIMATIONS
   ========================================== */

/* Left Badge: Slide in from Left, Show, Hide back Left */
@keyframes badgeSlideLeft {
  0%, 15% {
    opacity: 0;
    transform: translateX(-12px) scale(0.9);
  }
  35%, 80% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  95%, 100% {
    opacity: 0;
    transform: translateX(-12px) scale(0.9);
  }
}

/* Right Badge: Slide in from Right, Show, Hide back Right */
@keyframes badgeSlideRight {
  0%, 15% {
    opacity: 0;
    transform: translateX(12px) scale(0.9);
  }
  35%, 80% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  95%, 100% {
    opacity: 0;
    transform: translateX(12px) scale(0.9);
  }
}

/* Automatic Icon Keyframes */
@keyframes autoTiltPhone {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

@keyframes autoRotateWhatsapp {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

@keyframes autoBounceArrow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Floating & Radar Animations */
@keyframes radarPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes floatWidget {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ==========================================
   MOBILE OPTIMIZATION (Below 575px)
   ========================================== */
@media screen and (max-width: 574.98px) {
  .fixed-icon-left {
    bottom: 12px;
    left: 10px;
    gap: 4px;
  }

  .fixed-icon-left a.mobile-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .fixed-widgets-right {
    bottom: 12px;
    right: 10px;
    gap: 8px;
  }

  .whatsapp-wrapper {
    gap: 4px;
  }

  .fixed-widgets-right a.whatsapp-btn {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  #scrollToTop {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  /* Compact Badges for Mobile screens below 575px */
  .widget-badge {
    display: inline-block !important;
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
  }
}