/* Custom Styles for 琪達科技 Precision Coating Website */

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

/* Custom styling for thickness range slider */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38bdf8;
  border: 3px solid #082f49;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.9);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38bdf8;
  border: 3px solid #082f49;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Color swatch preview button states */
.color-btn {
  transition: all 0.2s ease;
}

.color-btn:hover {
  border-color: #38bdf8;
  background-color: rgba(30, 41, 59, 0.9);
}

.color-btn.active {
  border-color: #38bdf8;
  background-color: rgba(14, 165, 233, 0.15);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

/* Keycap 3D realistic lighting simulation */
.keycap-bevel-shadow {
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 12px 24px -4px rgba(0, 0, 0, 0.6),
    0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* Details summary transition */
details summary::-webkit-details-marker {
  display: none;
}

/* Metallic Bright Silver (亮銀) Text Gradient */
.text-bright-silver {
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 20%, #E2E8F0 40%, #FFFFFF 60%, #CBD5E1 80%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255, 255, 255, 0.28));
}