#image-upload::file-selector-button {
  background-color: var(--primary-color);
  color:var(--text-color);
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.image-preview-container {
  border: 4px dotted var(--primary-color);
  border-radius: 5px;
  height: 250px;
  overflow: hidden;
  background-color: var(--light-color);
  transition: all 0.5s ease-in-out;
  gap: 16px;
}
.drop-message::before {
  content: "or drop image here...";
  font-size: 22px;
  color: var(--primary-color);
  font-family: fantasy
}
.image-preview-container.drag-over {
  border: 4px solid var(--primary-color);
}
.image-preview-container > img { max-width: 100%; max-height: 100%; display: none; }
.result-section { display: none; }
.color-swatch-box { width: 100px; height: 100px; overflow: hidden; cursor: pointer; }
.color-swatch-box>p { background-color: var(--primary-color); color: var(--light-color); padding: 2px 6px; border-radius: 4px; font-size: 12px; transform: rotate(-90deg); }
.primary-color { transform: scale(1.1, 1.1); border-radius: 6px; }