/* Calculator Sliders - Indie Maker themed slider styles */

/* Main slider styling - Modern indie maker aesthetic */
.slider, .bedroom-slider, .bathroom-slider, .condition-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 100%;
  background: linear-gradient(to right, 
    #667eea 0%,    /* Indie purple */
    #764ba2 25%,   /* Indie blue */
    #10b981 50%,   /* Indie green */
    #fbbf24 75%,   /* Indie yellow */
    #ec4899 100%   /* Indie pink */
  );
  outline: none;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  margin: 1rem 0;
}

/* Slider hover effects - More modern indie feel */
.slider:hover, .bedroom-slider:hover, .bathroom-slider:hover, .condition-slider:hover {
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* WebKit slider thumbs - Indie maker themed */
.slider::-webkit-slider-thumb, .bedroom-slider::-webkit-slider-thumb, 
.bathroom-slider::-webkit-slider-thumb, .condition-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #10b981 100%);
  cursor: pointer;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 2px rgba(102, 126, 234, 0.2);
  transition: all 0.2s ease;
}

/* WebKit slider thumb hover effects - Indie maker colors */
.slider::-webkit-slider-thumb:hover, .bedroom-slider::-webkit-slider-thumb:hover,
.bathroom-slider::-webkit-slider-thumb:hover, .condition-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6), 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* Firefox slider thumbs - Indie maker themed */
.slider::-moz-range-thumb, .bedroom-slider::-moz-range-thumb,
.bathroom-slider::-moz-range-thumb, .condition-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #10b981 100%);
  cursor: pointer;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 2px rgba(102, 126, 234, 0.2);
  transition: all 0.2s ease;
}

/* Firefox slider thumb hover effects - Indie maker colors */
.slider::-moz-range-thumb:hover, .bedroom-slider::-moz-range-thumb:hover,
.bathroom-slider::-moz-range-thumb:hover, .condition-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6), 0 0 0 3px rgba(102, 126, 234, 0.3);
}