/* ==========================================================================
  Design Toggle Styles - Controls the appearance and transitions of the 
  design selection interface for body/interior color toggle
  ========================================================================== */
/* Button styling for the toggle options */
.design-btn-1, .design-btn-2 {
  /* Provides smooth color transition when buttons change between active/inactive states */
  transition: color 0.3s ease;
}

/* Active button state - Black text for the currently selected option */
.design-btn-active {
  color: #000000 !important; /* Black text for active selection - high contrast for visibility */
}

/* Inactive button state - Gray text for the non-selected option */
.design-btn-inactive {
  color: #a1a1a1 !important; /* Light gray text for inactive selection - visually de-emphasized */
}

/* Hover effect for inactive buttons - Changes to black on hover */
.design-btn-inactive:hover {
  color: #000000 !important; /* Black text on hover to indicate interactivity - provides visual feedback */
}

/* ==========================================================================
  Section transition styling - Controls the fade animation between sections
  ========================================================================== /
/ Base styles for both content sections */
#body-color, #interior-color {
  /* Quick and smooth opacity transition for fade effect */
  transition: opacity 0.25s ease;
  width: 100%;
}


/* Hidden section styling */
.section-hidden {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}

/* Visible section styling */
.section-visible {
  opacity: 1;
  position: relative;
  z-index: 1;
}