/* ===== RELY R8 Configurador - Custom Overrides v2 ===== */

/* --- Vehicle image container: clean dark gradient, no photo background --- */
.jsx-f1d36bc9fbd07abf.rounded-2xl.overflow-hidden.mb-4.flex.items-center.justify-center.relative {
  background: radial-gradient(ellipse at center bottom, #1a1a2e 0%, #0d0d14 60%, #080810 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* --- Color circles: white borders, bigger, better shadow --- */
.jsx-f1d36bc9fbd07abf.w-12.h-12.rounded-full.border-2 {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-color: rgba(255,255,255,0.6) !important;
  border-width: 3px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Selected color circle: accent glow with outer white ring */
.jsx-f1d36bc9fbd07abf.w-12.h-12.rounded-full.border-2.border-accent-primary {
  border-color: #FF4D0F !important;
  border-width: 3px !important;
  box-shadow: 0 0 18px rgba(255,77,15,0.4), 0 0 0 3px rgba(255,255,255,0.2) !important;
  transform: scale(1.05);
}

/* Color circle hover effect */
.jsx-f1d36bc9fbd07abf.w-12.h-12.rounded-full.border-2:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.25) !important;
}

/* --- Vehicle image: drop shadow for depth --- */
.jsx-f1d36bc9fbd07abf.w-full.h-full.object-contain.object-center {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) !important;
}

/* Fallback vehicle image (when no color selected) */
.jsx-f1d36bc9fbd07abf.w-full.h-full.object-contain.rounded-xl.opacity-70 {
  opacity: 0.85 !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) !important;
}

/* --- Color name text: larger and cleaner --- */
.jsx-f1d36bc9fbd07abf.text-center.mb-5 .text-xl.font-bold.text-white {
  font-size: 1.35rem !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 8px rgba(255,77,15,0.12);
}

/* --- Color circles container: more gap between circles --- */
.jsx-f1d36bc9fbd07abf.flex.justify-center.items-end.gap-3 {
  gap: 1rem !important;
}