/* ==========================================================================
   CONFIGURATOR WIDGET NEUTRAL STYLES - Brand-Neutral Design
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  --primary-color: rgb(40, 120, 200);
  --primary-color-hover: rgb(30, 100, 180);
  --danger-color: rgb(220, 53, 69);
  --danger-color-hover: rgb(200, 35, 51);
}

/* ==========================================================================
   2. NEUTRAL-SPECIFIC OVERRIDES
   ========================================================================== */

/* Upload hover effect with neutral brand color */
.configurator-upload:hover {
  background-color: rgba(40, 120, 200, 0.05);
}

.configurator-upload-dragover {
  background-color: rgba(40, 120, 200, 0.1);
}

/* Carousel thumbnail focus with neutral brand color */
.configurator-carousel-thumbnail:focus-visible
  .configurator-carousel-thumbnail-inner {
  box-shadow: 0 0 0 2px rgba(40, 120, 200, 0.8);
}

/* Carousel thumbnail hover with neutral brand color */
.configurator-carousel-thumbnail:hover .configurator-carousel-thumbnail-inner {
  border-color: rgba(40, 120, 200, 0.5);
}

.configurator-carousel-thumbnail-active .configurator-carousel-thumbnail-inner {
  box-shadow: 0 0 0 1px rgba(40, 120, 200, 0.25);
}