/**
 * Configurator Widget Essential Styles
 * 
 * This file contains ONLY CSS rules that are essential for the configurator
 * to function correctly. These are behavioral rules, not styling rules.
 * 
 * DO NOT add visual styling here - only functional CSS that controls
 * visibility, display states, and other behavior-critical properties.
 */

/* ===================================
   Module Input Field Visibility
   =================================== */

/* Leave space if scrollbar not visible to avoid flickering*/
html {
  scrollbar-gutter: stable;
}

/* Hide module group if all inputs are disabled*/
.configurator-module-group-hidden {
  display: none !important;
}

/* ===================================
   Submit Button Loading State (Task 41)
   =================================== */

/* Keep submit button visible when disabled (override global disabled button rule) */
.configurator-form-submit {
  display: inline-flex !important;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.configurator-form-submit:disabled {
  display: inline-flex !important;
  cursor: not-allowed;
}

/* Hide spinner by default */
.configurator-submit-spinner {
  display: none;
  animation: spin 0.9s linear infinite;
}

/* Show spinner when loading */
.configurator-form-submit.is-loading .configurator-submit-spinner {
  display: inline-block;
}

/* Spinner rotation animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}