/**
 * LeadGen App Form Plugin - Main Styles
 *
 * Main stylesheet for the LeadGen App Form plugin providing responsive
 * form styling, loading animations, and error states.
 *
 * @package LeadGenAppForm
 * @since 1.0.0
 * @author Silver Assist
 * @copyright Copyright (c) 2025, Silver Assist
 * @license GPL v2 or later
 * @version 1.0.6
 */

/* ==========================================================================
  Main Form Container Styles
   ========================================================================== */

.leadgen-form-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.leadgen-form-wrapper {
  width: 100%;
  position: relative;
}

/* ==========================================================================
  Loading Placeholder with Pulse Animation
   ========================================================================== */

/* Placeholder with pulse animation */
.leadgen-form-placeholder {
  width: 100%;
  min-height: 400px;
  background-color: #f3f4f6;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: min-height 0.3s ease;
}

/* Pulse animation effect */
.leadgen-pulse-animation {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: leadgen-pulse 1.5s infinite;
}

/* Keyframes for pulse animation */
@keyframes leadgen-pulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ==========================================================================
  Form Content Styles
   ========================================================================== */

/* Real form container */
.leadgen-form-content {
  width: 100%;
}

/* ==========================================================================
  Responsive Design
   ========================================================================== */

/* Mobile devices - Default placeholder height */
@media (max-width: 768px) {
  .leadgen-form-placeholder {
    min-height: 300px;
  }
}

/* Desktop devices - Default placeholder height */
@media (min-width: 769px) {
  .leadgen-form-placeholder {
    min-height: 600px;
  }
}

/* 
 * Custom Heights:
 * When desktop-height or mobile-height attributes are specified in the shortcode,
 * JavaScript will override these default heights with inline styles.
 * The transition property provides smooth height changes during responsive switches.
 */

/* ==========================================================================
  Error States
   ========================================================================== */

/* Error message styling */
.leadgen-form-error {
  padding: 12px 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  font-size: 14px;
  margin: 16px 0;
}

/* ==========================================================================
  Form Loading States
   ========================================================================== */

/* Hide placeholder when form is loaded */
.leadgen-form-container.loaded .leadgen-form-placeholder {
  display: none;
}

/* Show form content when loaded */
.leadgen-form-container.loaded .leadgen-form-content {
  display: block !important;
}