/* Kolor Spot Custom Interactive Styles */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0c0e13;
}
::-webkit-scrollbar-thumb {
  background: #1e2230;
  border-radius: 5px;
  border: 2px solid #0c0e13;
}
::-webkit-scrollbar-thumb:hover {
  background: #00A3FF;
}

/* Mobile Drawer */
#mobile-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#mobile-drawer.open {
  transform: translateX(0);
  opacity: 1;
}
#mobile-drawer.closed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
#drawer-overlay {
  transition: opacity 0.3s ease;
}
#drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#drawer-overlay.closed {
  opacity: 0;
  pointer-events: none;
}

/* Active Nav Links */
.nav-link.active {
  color: #00A3FF !important;
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00A3FF, #FF007F);
  border-radius: 2px;
  box-shadow: 0 0 10px #00A3FF;
}

/* Interactive Budget Selector */
.budget-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}
.budget-card:hover {
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-2px);
}
.budget-card.active {
  border-color: #00A3FF !important;
  background: linear-gradient(135deg, rgba(0, 163, 255, 0.15) 0%, rgba(255, 0, 127, 0.1) 100%) !important;
  box-shadow: 0 0 25px rgba(0, 163, 255, 0.35);
  color: #ffffff !important;
}
.budget-card .check-icon {
  display: none;
}
.budget-card.active .check-icon {
  display: inline-flex;
}

/* Category Filter Tabs */
.filter-btn {
  transition: all 0.3s ease;
}
.filter-btn.active {
  background: linear-gradient(135deg, #00A3FF 0%, #7c3aed 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(0, 163, 255, 0.4);
}

/* Portfolio Card Zoom & Lightbox Trigger */
.lightbox-trigger {
  cursor: zoom-in;
}

/* Lightbox Modal */
#lightbox-modal {
  transition: opacity 0.3s ease;
}
#lightbox-modal.open {
  opacity: 1;
  pointer-events: auto;
}
#lightbox-modal.closed {
  opacity: 0;
  pointer-events: none;
}

/* Success Confirmation Modal */
#success-modal.closed {
  display: none;
}

/* Toast Notifications */
#toast-notification {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}
#toast-notification.hide {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

/* Floating WhatsApp Radar Animation */
@keyframes pulseRadar {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
.whatsapp-pulse {
  animation: pulseRadar 2s infinite;
}

/* Floating Scroll-to-Top Button */
#scroll-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scroll-to-top.hidden-btn {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}