/* ============================================================================
   WEBFLOW FORM INTEGRATION CSS - MINIMAL VERSION
   Version: v2.0.0
   Last Updated: 2024-11-23
   Purpose: Only styles for elements on the Webflow page (container & progress bar)
   All form content styles moved to WF_CSS_override.css
   ============================================================================ */

/* Webflow Form Integration CSS */
/* Import this into your Webflow site's Custom Code (CSS) */

/* ============================================================================
   MOON FORM - FORM CONTAINER & LAYOUT (In Webflow HTML, NOT in .w-embed wrapper)
   ============================================================================ */

.moon-form-inbound-form-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  min-height: 400px; /* Ensure container is always visible */
}

/* ============================================================================
   MOON FORM - PROGRESS BAR (In Webflow HTML, inside container)
   ============================================================================ */

.moon-form-progress-bar {
  height: 6px;
  background: #e0e0e0;
  position: relative;
}

.moon-form-progress-fill {
  height: 100%;
  background: #0079fb !important;
  transition: width 0.4s ease;
  width: 0%;
}

/* Override for error progress bar - orange warning color */
#errorProgressBar .moon-form-progress-fill {
  background: #ef9844 !important;
  width: 100% !important;
}

/* Form content area */
.moon-form-form-content {
  padding: 40px;
  min-height: 364px;
  position: relative;
  display: block !important; /* Force display even when empty */
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .moon-form-form-content {
    padding: 30px 20px;
  }
}