.btn-gradient {
  background: linear-gradient(135deg, #ee3ec9, #ff6f3c);
  color: white;
  border: none;
  transition: background 0.3s ease, transform 0.2s;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #ff6f3c, #ee3ec9);
  transform: translateY(-2px);
}

.text-gradient {
  background: linear-gradient(135deg, #ee3ec9, #ff6f3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.addon-block {
  cursor: pointer;
  user-select: none;
}

.addon-content {
  padding: 1.25rem;
  border: 2px solid #333;
  border-radius: 1rem;
  background-color: #1e1e1e;
  transition: all 0.3s ease;
}

.addon-block input:checked + .addon-content {
  background: linear-gradient(135deg, #ee3ec9, #ff6f3c);
  color: #fff;
  border-color: transparent;
}

.addon-block input:checked + .addon-content p,
.addon-block input:checked + .addon-content h6 {
  color: #fff !important;
}

.addon-content:hover {
  border-color: #555;
}

.type-block {
  cursor: pointer;
  user-select: none;
}

.type-content {
  padding: 1.25rem;
  border: 2px solid #333;
  border-radius: 1rem;
  background-color: #1e1e1e;
  transition: all 0.3s ease;
}

.type-block input:checked + .type-content {
  background: linear-gradient(135deg, #ee3ec9, #ff6f3c);
  color: #fff;
  border-color: transparent;
}

.type-block input:checked + .type-content p,
.type-block input:checked + .type-content h6 {
  color: #fff !important;
}

.type-content:hover {
  border-color: #555;
}

#estimateBox {
  background: #333333;
  border: 1px solid #777777;
}

#quote-background input.form-control,
#quote-background select.form-select,
#quote-background textarea.form-control {
  background-color: #2a2a2a;
  /* soft dark gray */
  color: #f1f1f1;
  /* light text */
  border: 1px solid #444;
  /* subtle border */
  border-radius: 8px;
}

#quote-background input.form-control:focus,
#quote-background select.form-select:focus,
#quote-background textarea.form-control:focus {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #ee3ec9;
  /* optional gradient color hint */
  box-shadow: 0 0 0 0.2rem rgba(238, 62, 201, 0.25);
}

#spinner {
  vertical-align: middle;
}