.step-section {
margin-bottom: 40px;
padding: 30px;
background: rgb(255 255 255 / 14%);
border-radius: 12px;
border-left: 4px solid #e7f221;
}

.step-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
display: flex;
align-items: center;
}

.step-number {
background: #e7f221;
color: #1a1a1a;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 15px;
}

.color-explanation {
color: #fff;
margin-bottom: 25px;
font-size: 16px;
line-height: 1.6;
}

.color-swatches {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}

.color-category {
margin-bottom: 25px;
}

.category-title {
color: #e7f221;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}

.color-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #fff;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}

.color-swatch:hover {
transform: scale(1.1);
}

.color-swatch.metallic {
background: linear-gradient(45deg, var(--color1), var(--color2));
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.color-selection {
margin-bottom: 25px;
}

.color-selection label {
color: #fff;
font-weight: bold;
display: block;
margin-bottom: 8px;
}

.color-selection select {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 2px solid #333;
background: #2a2a2a;
color: #fff;
font-size: 16px;
}

.color-selection select:focus {
border-color:#e7f221;
outline: none;
}

.holographic-preview {
display: flex;
gap: 10px;
margin: 15px 0;
align-items: center;
flex-wrap: wrap;
}

/* Updated holographic effects using local images */
.holo-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.5);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Use local holographic images */
.holo-swatch.red {
  background-image: url('../images/holoStripes/holoStripes-red.jpeg');
}

.holo-swatch.royal-blue {
  background-image: url('../images/holoStripes/holoStripes-royalBlue.jpeg');
}

.holo-swatch.gold {
  background-image: url('../images/holoStripes/holoStripes-gold.jpeg');
}

.holo-swatch.green {
  background-image: url('../images/holoStripes/holoStripes-green.jpeg');
}

.holo-swatch.silver {
  background-image: url('../images/holoStripes/holoStripes-silver.jpeg');
}

.holo-swatch.turquoise-blue {
  background-image: url('../images/holoStripes/holoStripes-turquoise.jpeg');
}

.holo-swatch.pink {
  background-image: url('../images/holoStripes/holoStripes-pink.jpeg');
}

.holo-swatch.iridescent {
  background-image: url('../images/holoStripes/holoStripes-iridescent.jpeg');
}

/* Remove the old CSS-based effects */
.holo-swatch::before,
.holo-swatch::after {
  display: none;
}

/* Keep only a subtle glow animation */
.holo-swatch {
  animation: holo-glow 3s infinite alternate;
}

@keyframes holo-glow {
  0% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.5);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .holo-swatch {
    width: 35px;
    height: 35px;
  }
}

/* Optional: Add a subtle hover effect */
.holo-swatch:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
.quantity-section {
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 10px;
}

.quantity-input {
width: 100px;
padding: 10px;
border-radius: 5px;
border: 2px solid#e7f221;
background: #2a2a2a;
color: #fff;
font-size: 18px;
text-align: center;
}

.metallic-limit-warning {
color: #ff6b6b;
font-size: 14px;
margin-top: 5px;
display: none;
}

.addon-section {
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}

.checkbox-wrapper {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.checkbox-wrapper input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}

.preview-section {
background: rgb(255 255 255 / 14%);
padding: 25px;
border-radius: 12px;
margin-bottom: 40px;
text-align: center;
}

.pom-preview {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 20px;
background: conic-gradient(
var(--color1, #ff6b6b) 0deg 90deg,
var(--color2, #3c69ff) 90deg 180deg,
var(--color3, #45b7d1) 180deg 270deg,
var(--color4, #A3FF3C) 270deg 360deg
);
border: 5px solid #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.color-selection-group {
margin-bottom: 35px;
}

.color-group-label {
color:#e7f221;
font-size: 18px;
font-weight: bold;
display: block;
margin-bottom: 15px;
}

.color-chips-container {
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 12px;
}

.color-chips-section {
margin-bottom: 20px;
}

.color-chips-section:last-child {
margin-bottom: 0;
}

.chips-category-label {
color: #fff;
font-size: 14px;
font-weight: bold;
display: block;
margin-bottom: 12px;
opacity: 0.8;
}

.color-chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.color-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
width: 100px; /* Consistent width */
height: 100px; /* Consistent height */
}

.color-chip .chip-color {
width: 40px; /* Adjusted size for inner color circle */
height: 40px;
border-radius: 50%; /* Ensure perfect circle */
margin-bottom: 8px;
border: 2px solid rgba(255, 255, 255, 0.65);
transition: transform 0.2s ease;
}

.color-chip:hover {
transform: scale(1.05);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.color-chip.selected {
border-color: #ffffff; /* White border for selected chip */
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* White shadow for selected chip */
}

.color-chip.selected .chip-color {
border-color: #ffffff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.color-chip.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}

.chip-label {
color: #fff;
font-size: 12px;
font-weight: 500;
text-align: center;
line-height: 1.2;
}

/* Updated chip label selection  */
.color-chip.selected .chip-label {
color: #f0f0f0;
font-weight: bold;
}

@media (max-width: 768px) {
.step-section {
padding: 20px;
margin-bottom: 20px;
}

.color-swatches {
justify-content: center;
}

.step-title {
font-size: 20px;
}

.color-chip {
min-width: 70px;
padding: 10px;
}

.chip-color {
width: 30px;
height: 30px;
}

.chip-label {
font-size: 11px;
}
div.placeholders-container{
  display: flex !important;
  flex-direction: column !important;
}
.holo-text{
  margin-left: 0 !important;
  margin-top: 10px !important;
}
}

/* Add gradient effect for metallic color chips */
.color-chip.metallic .chip-color {
    background: linear-gradient(45deg, var(--color1), var(--color2));
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Define metallic colors with gradients */
:root {
    --metallic-blue-color1: #0000FF;
    --metallic-blue-color2: #00F0FF;
    --metallic-green-color1: #008000;
    --metallic-green-color2: #00FF00;
    --metallic-red-color1: #F42226;
    --metallic-red-color2: #FF7373;
    --metallic-gold-color1: #988209;
    --metallic-gold-color2: #ffed4e;
    --metallic-silver-color1: #716f6f;
    --metallic-silver-color2: #e8e8e8;
    --metallic-purple-color1: #6939A3;
    --metallic-purple-color2: #DDA0DD;
    --metallic-pink-color1: #FF69B4;
    --metallic-pink-color2: #FDA5C1;
    --iridescent-color1: #e9abf7ff;
    --iridescent-color2: #FFFFFF;
    
}

/* Apply metallic gradients to new colors */
.color-chip[data-color="metallic-blue"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-blue-color1), var(--metallic-blue-color2));
}
.color-chip[data-color="metallic-green"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-green-color1), var(--metallic-green-color2));
}
.color-chip[data-color="metallic-red"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-red-color1), var(--metallic-red-color2));
}
.color-chip[data-color="metallic-gold"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-gold-color1), var(--metallic-gold-color2));
}
.color-chip[data-color="metallic-silver"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-silver-color1), var(--metallic-silver-color2));
}
.color-chip[data-color="metallic-purple"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-purple-color1), var(--metallic-purple-color2));
}
.color-chip[data-color="metallic-pink"] .chip-color {
    background: linear-gradient(45deg, var(--metallic-pink-color1), var(--metallic-pink-color2));
}
.color-chip[data-color="iridescent"] .chip-color {
    background: linear-gradient(45deg, var(--iridescent-color1), var(--iridescent-color2));
}

.form-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}

.loader-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.error {
    border: 2px solid #ff6b6b;
   
}

.error-tooltip {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.color-tooltip {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    background: #fff;
    color: #333;
    border: 2px solid #ff6b6b;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 100;
    display: flex;
    align-items: center;
}
.color-tooltip .icon {
    color: #ff6b6b;
    font-size: 18px;
    margin-right: 8px;
}
.color-chips-container { position: relative; }

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}