/* --- Interactive Color Selector Dots Setup --- */

.color-selector-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #0b0b0f;
  outline: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.color-selector-dot:hover {
  transform: scale(1.15);
  outline-color: var(--neon-blue);
}

.color-selector-dot.active {
  transform: scale(1.15);
  outline-color: var(--primary-red) !important;
  box-shadow: 0 0 10px rgba(225, 25, 34, 0.4);
}

/* Custom styling override for Bootstrap radio toggle group boxes */

.btn-check:checked + .btn-outline-secondary {
  background-color: transparent !important;
  color: var(--neon-blue) !important;
  border-color: var(--neon-blue) !important;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.2);
}

.btn-outline-secondary {
  border-color: rgba(255,255,255,0.1) !important;
  color: #a0a0b5 !important;
}