/* css/components.css */
/* ---------- Inputs, Labels & Interactive Elements ---------- */
.input-group,
.input-item {
  margin: 20px 0;
}

.input-group label,
.input-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2d3748;
}

input[type="url"],
input[type="text"],
input[type="range"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  background: #fff8f0;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

input:focus {
  outline: none;
  border-color: #d3c0b0; /* Calming accent */
  box-shadow: 0 0 8px rgba(108, 172, 228, 0.4);
}

/* ---------- Color Picker Enhancements ---------- */
input[type="color"] {
  -webkit-appearance: none;
  border: 2px solid #d3c0b0;
  width: 45px;
  height: 45px;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 auto;
  background: #fff8f0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* ---------- Range Input Styling ---------- */
input[type="range"] {
  appearance: none;
  background: linear-gradient(to right, #fce4ec, #fff8f0);
  height: 6px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: #ff0077; /* Signature pink accent */
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff8f0;
  transition: transform 0.2s ease;
  cursor: pointer;
}

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