/* Color Picker Component Styles */
.color-picker .color-option {
  transition: all 0.2s ease;
  position: relative;
}

.color-picker .color-option:hover {
  transform: translateY(-1px);
  border-color: rgb(255, 111, 97) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.color-picker .color-option.selected {
  border-color: rgb(255, 111, 97) !important;
  box-shadow: 0 0 0 2px rgba(255, 111, 97, 0.3) !important;
  transform: translateY(-1px);
}

/* Chevron animation */
.color-picker [data-color-picker-target="chevron"] {
  transition: transform 0.2s ease;
}

/* Better contrast for checkmarks on light colors */
.color-picker .color-option svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Focus styles */
.color-picker .color-option:focus {
  outline: none;
  ring: 2px;
  ring-color: rgb(255, 111, 97);
  ring-offset: 1px;
}