/**
 * smartfactory-my.com
 * Homepage Specific Stylesheet (Hero Grid, Sliders & ROI Banner)
 */

/* Subtle Background Ambient Grid */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
}

/* Hero Ambient Glow */
.hero-glow {
  background: radial-gradient(circle, rgba(107, 78, 255, 0.14) 0%, rgba(107, 78, 255, 0) 70%);
}

/* ========================================================================= */
/* DOWNTIME ROI CALCULATOR BANNER STYLING                                    */
/* ========================================================================= */
.roi-banner-container {
  background-color: rgba(107, 78, 255, 0.05);
  border: 1px solid rgba(107, 78, 255, 0.2);
  border-radius: 1.5rem;
}

.roi-ambient-glow {
  background: radial-gradient(circle, rgba(107, 78, 255, 0.18) 0%, rgba(107, 78, 255, 0) 70%);
}

/* Custom Interactive Range Sliders */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 9999px;
  outline: none;
  transition: background 0.2s ease;
}

input[type=range]:focus {
  outline: none;
}

/* WebKit Slider Thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6B4EFF;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(107, 78, 255, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #583CE6;
}

/* Firefox Slider Thumb */
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6B4EFF;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(107, 78, 255, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: #583CE6;
}

/* Vendor Matrix Cards */
.vendor-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vendor-card:hover {
  transform: translateY(-2px);
}