/* Scroll to Top Car Button - WhatsApp Style */
.scroll-to-top-car {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 99999 !important;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  transform: scale(1);
  width: 80px;
  height: 80px;
  background: transparent;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  will-change: bottom, left;
}

.scroll-to-top-car.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.scroll-to-top-car:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.scroll-to-top-car img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease, filter 0.6s ease;
  filter: brightness(1);
}

.scroll-to-top-car:hover img {
  transform: translateY(-2px);
  filter: brightness(1.2);
  position: relative;
}

/* Headlight glow effect - focused upward beam from headlights */
.scroll-to-top-car::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50%;
  height: 60px;
  background: linear-gradient(to top, 
    rgba(255, 255, 200, 0.6) 0%,
    rgba(255, 255, 150, 0.4) 20%,
    rgba(255, 255, 100, 0.2) 50%,
    transparent 100%
  );
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s ease, height 0.8s ease;
  clip-path: ellipse(50% 100% at 50% 0%);
}

.scroll-to-top-car:hover::before {
  opacity: 1;
  animation: headlightPulse 2s ease-in-out infinite;
}

/* Additional focused beam effect */
.scroll-to-top-car::after {
  content: '';
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 35%;
  height: 80px;
  background: linear-gradient(to top, 
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 200, 0.3) 30%,
    transparent 80%
  );
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease, height 1s ease;
  clip-path: ellipse(40% 100% at 50% 0%);
}

.scroll-to-top-car:hover::after {
  opacity: 1;
  animation: headlightPulse 2s ease-in-out infinite 0.2s;
}

@keyframes headlightPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, 0) scaleY(1);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, 0) scaleY(1.05);
  }
}

@media (max-width: 768px) {
  .scroll-to-top-car {
    bottom: 15px !important;
    left: 15px !important;
    width: 65px;
    height: 65px;
    padding: 0;
  }
}