/* ==========================================================================
   Vehicle Color Swatches — all-vehicles/index.html
   Small clickable color-dot picker shown below each model card's image.
   Clicking a swatch swaps the image shown above it via data-img.

   NOTE: no separate per-color photos exist yet, so every swatch currently
   points at that model's single existing photo (functionally wired, but
   visually identical until real photos are added). To wire up real photos
   later, just edit each button's data-img in all-vehicles/index.html —
   see COLOR-SWATCHES-README.md for exact instructions.
   ========================================================================== */

.pxl-color-swatches {
  position: relative;
  margin: 12px auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  width: fit-content;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.pxl-color-swatches .color-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d8dde3;
  background-color: var(--swatch-color, #ccc);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pxl-color-swatches .color-swatch:hover {
  transform: scale(1.12);
}

.pxl-color-swatches .color-swatch.is-active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swatch-color, #71ca00);
}

/* White swatch needs a visible border even when not active/hovered,
   since it would otherwise disappear against the panel background */
.pxl-color-swatches .color-swatch[data-color="white"] {
  box-shadow: 0 0 0 1px #b8c0cc;
}
.pxl-color-swatches .color-swatch[data-color="white"].is-active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b8c0cc;
}

@media (max-width: 480px) {
  .pxl-color-swatches {
    gap: 6px;
    padding: 5px 8px;
    bottom: 10px;
  }
  .pxl-color-swatches .color-swatch {
    width: 15px;
    height: 15px;
  }
}