/* Custom CSS Styles for V2 Target Redesign */

/* Custom Glassmorphism Card Style */
.glass-card {
  background: rgba(17, 22, 34, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card:hover {
  box-shadow: 0 12px 40px 0 rgba(168, 36, 219, 0.15);
}

/* Workflow tab active styles */
.workflow-tab.active {
  border-color: #BAEA02;
  background: rgba(186, 234, 2, 0.08);
}

.workflow-tab:not(.active) {
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.7;
}

.workflow-tab:not(.active):hover {
  opacity: 1;
  border-color: rgba(168, 36, 219, 0.4);
}

/* Tool Filter Button active styles */
.tool-filter.active {
  background-color: #BAEA02;
  color: #080B11;
  border-color: #BAEA02;
}

.tool-filter:not(.active) {
  background-color: rgba(17, 22, 34, 0.8);
  color: #94A3B8;
  border-color: rgba(255, 255, 255, 0.08);
}

.tool-filter:not(.active):hover {
  color: #FFFFFF;
  border-color: rgba(186, 234, 2, 0.5);
}

/* Custom Range Input Track & Thumb */
input[type=range]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(186, 234, 2, 0.5);
  cursor: pointer;
  transition: transform 0.1s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Glowing text utility */
.glow-neon {
  text-shadow: 0 0 20px rgba(186, 234, 2, 0.4);
}

.glow-purple {
  text-shadow: 0 0 20px rgba(168, 36, 219, 0.5);
}

/* =====================================================================
   Mobile-Friendly & Touch Optimization Rules
   ===================================================================== */

/* Disable blue tap highlight box on mobile devices */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Touch slider optimization for mobile screens */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #BAEA02;
  box-shadow: 0 0 12px rgba(186, 234, 2, 0.7);
  cursor: pointer;
  border: 2px solid #080B11;
  transition: transform 0.15s ease;
}

input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #BAEA02;
  box-shadow: 0 0 12px rgba(186, 234, 2, 0.7);
  cursor: pointer;
  border: 2px solid #080B11;
}

/* Mobile Safe-Area Inset for modern smartphones (iPhone Home Bar & Notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom));
  }
  .fixed.bottom-5 {
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
}

/* Extra small mobile screen (xs < 400px) font & spacing adjustments */
@media (max-width: 400px) {
  h1 {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.25 !important;
  }
  h2 {
    font-size: 1.5rem !important; /* 24px */
  }
  .glass-card {
    padding: 1.25rem !important;
  }
}