/* ==========================================================================
  Exterior/Interior Toggle Styles - Controls the appearance and transitions of the
  exterior and interior toggle interface
  ========================================================================== */
/* Button styling for the toggle options */
.exterior-interior-btn-1, .exterior-interior-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 */
.exin-btn-active {
  color: #000000 !important; /* Black text for active selection - high contrast for visibility */
  font-weight: bold !important; /* Make active button more visible */
}

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

/* Hover effect for inactive buttons - Changes to black on hover */
.exin-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 */
#exterior-interior-exterior-col, #exterior-interior-interior-col {
  /* Quick and smooth opacity transition for fade effect */
  transition: opacity 0.25s ease;
  width: 100%;
}

/* Style for column group containers to prevent spacing issues */
.fl-col-group-nested {
  transition: display 0.1s ease;
}

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

/* Visible section styling */
.exin-section-visible {
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 100px !important; /* Ensures minimum height while content loads */
}