/**
 * ElmsPark Forms - Compiled Styles
 * Version 3.1.24
 * 
 * This CSS file includes fallback values for PageMotor variables
 * to ensure forms are styled even if SCSS compilation fails
 */

/* CSS Variables for PageMotor Theme Integration */
:root {
  /* Spacing units - PageMotor defaults */
  --ep-x1: 5px;
  --ep-x2: 10px;
  --ep-x3: 15px;
  --ep-x4: 20px;
  --ep-x5: 25px;
  --ep-x6: 30px;
  
  /* Colors - PageMotor theme defaults */
  --ep-color-primary: #007cba;
  --ep-color-success: #509b26;
  --ep-color-error: #d50b0b;
  --ep-color-text: #333333;
  --ep-color-text-light: #666666;
  --ep-color-border: #dddddd;
  --ep-color-bg: #ffffff;
  --ep-color-bg-light: #f5f5f5;
  
  /* Typography */
  --ep-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ep-font-size-base: 16px;
  --ep-font-size-small: 14px;
  --ep-font-size-large: 18px;
  --ep-line-height: 1.5;
  
  /* Form specific */
  --ep-input-padding: 10px 15px;
  --ep-input-border: 1px solid #dddddd;
  --ep-input-radius: 4px;
  --ep-button-padding: 12px 24px;
}

/* Form Wrapper and Container Styles */
.ep-form-wrapper {
  margin: var(--ep-x4) 0;
  font-family: var(--ep-font-base);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height);
  color: var(--ep-color-text);
}

.ep-form-wrapper h3 {
  margin: 0 0 var(--ep-x4) 0;
  color: var(--ep-color-text);
  font-size: var(--ep-font-size-large);
  font-weight: 600;
  line-height: 1.3;
}

/* Message Container Styles */
.ep-form-messages {
  margin-bottom: var(--ep-x4);
  animation: slideDown 0.3s ease-out;
}

.ep-form-messages:empty {
  display: none;
}

.ep-form-success,
.ep-form-error {
  padding: var(--ep-x3) var(--ep-x4);
  border-radius: var(--ep-input-radius);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height);
}

.ep-form-success {
  background-color: rgba(80, 155, 38, 0.1);
  border: 1px solid var(--ep-color-success);
  color: var(--ep-color-success);
}

.ep-form-error {
  background-color: rgba(213, 11, 11, 0.1);
  border: 1px solid var(--ep-color-error);
  color: var(--ep-color-error);
}

/* Main Form Styles */
.ep-form {
  display: block;
}

/* Form Fields */
.ep-form-field {
  margin-bottom: var(--ep-x4);
}

.ep-form-field:last-child {
  margin-bottom: 0;
}

/* Labels */
.ep-form-field label,
.ep-field-label {
  display: block;
  margin-bottom: var(--ep-x2);
  color: var(--ep-color-text);
  font-size: var(--ep-font-size-base);
  font-weight: 500;
}

.ep-form-field label.required::after,
.ep-field-label.required::after {
  content: " *";
  color: var(--ep-color-error);
}

/* Input Fields */
.ep-form-field input[type="text"],
.ep-form-field input[type="email"],
.ep-form-field input[type="tel"],
.ep-form-field input[type="number"],
.ep-form-field input[type="date"],
.ep-form-field input[type="time"],
.ep-form-field input[type="url"],
.ep-form-field input[type="password"],
.ep-form-field select,
.ep-form-field textarea,
.ep-field-input,
.ep-field-select {
  width: 100%;
  padding: var(--ep-input-padding);
  border: var(--ep-input-border);
  border-radius: var(--ep-input-radius);
  background-color: var(--ep-color-bg);
  color: var(--ep-color-text);
  font-family: var(--ep-font-base);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Textarea specific */
.ep-form-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select specific */
.ep-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ep-x3) center;
  background-size: 12px;
  padding-right: var(--ep-x6);
}

/* Focus states */
.ep-form-field input:focus,
.ep-form-field select:focus,
.ep-form-field textarea:focus {
  outline: none;
  border-color: var(--ep-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

/* Disabled states */
.ep-form-field input:disabled,
.ep-form-field select:disabled,
.ep-form-field textarea:disabled {
  background-color: var(--ep-color-bg-light);
  color: var(--ep-color-text-light);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Radio and Checkbox Groups */
.ep-field-radio-group,
.ep-field-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--ep-x2);
}

.ep-field-choice {
  display: flex;
  align-items: center;
  font-size: var(--ep-font-size-base);
}

.ep-field-choice input[type="radio"],
.ep-field-choice input[type="checkbox"] {
  width: auto;
  margin: 0 var(--ep-x2) 0 0;
  flex-shrink: 0;
}

/* Buttons */
.ep-button,
.ep-form-field button,
.ep-form button[type="submit"] {
  display: inline-block;
  padding: var(--ep-button-padding);
  background-color: var(--ep-color-primary);
  color: white;
  border: none;
  border-radius: var(--ep-input-radius);
  font-family: var(--ep-font-base);
  font-size: var(--ep-font-size-base);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ep-button:hover,
.ep-form-field button:hover,
.ep-form button[type="submit"]:hover {
  background-color: #005a87;
  transform: translateY(-1px);
}

.ep-button:active,
.ep-form-field button:active,
.ep-form button[type="submit"]:active {
  transform: translateY(0);
}

.ep-button:disabled,
.ep-form-field button:disabled,
.ep-form button[type="submit"]:disabled {
  background-color: var(--ep-color-text-light);
  cursor: not-allowed;
  transform: none;
}

/* Loading state for buttons */
.ep-button-loading {
  position: relative;
  color: transparent;
}

.ep-button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Field Errors */
.ep-field-has-error input,
.ep-field-has-error select,
.ep-field-has-error textarea {
  border-color: var(--ep-color-error);
}

.ep-field-error {
  display: block;
  margin-top: var(--ep-x1);
  color: var(--ep-color-error);
  font-size: var(--ep-font-size-small);
}

/* Hidden Fields */
.ep-form-field.ep-field-hidden {
  display: none;
}

/* Header Fields */
.ep-field-header h4 {
  margin: var(--ep-x4) 0 var(--ep-x3) 0;
  padding-bottom: var(--ep-x2);
  border-bottom: 2px solid var(--ep-color-border);
  color: var(--ep-color-text);
  font-size: var(--ep-font-size-large);
  font-weight: 600;
}

/* Honeypot Field (Spam Protection) */
.ep-form-url {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* CAPTCHA Field */
.ep-captcha-wrapper {
  display: flex;
  align-items: center;
  gap: var(--ep-x3);
  flex-wrap: wrap;
}

.ep-captcha-question {
  font-weight: 500;
}

.ep-captcha-input {
  max-width: 100px;
}

/* Conditional Fields */
.ep-form-field[data-condition] {
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.ep-form-field.ep-field-hidden-conditional {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
}

/* GDPR Consent */
.ep-field-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ep-x2);
}

.ep-field-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.ep-field-consent label {
  margin-bottom: 0;
  font-size: var(--ep-font-size-small);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --ep-font-size-base: 16px;
    --ep-input-padding: 12px 16px;
    --ep-button-padding: 14px 24px;
  }
  
  .ep-form-wrapper {
    margin: var(--ep-x3) 0;
  }
  
  .ep-captcha-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ep-captcha-input {
    width: 100%;
    max-width: none;
  }
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Print Styles */
@media print {
  .ep-form-wrapper {
    page-break-inside: avoid;
  }
  
  .ep-button,
  .ep-form button {
    display: none;
  }
}

/* PageMotor Theme Integration */
/* These will override the defaults when PageMotor variables are available */
.pm-theme .ep-form-wrapper {
  /* PageMotor will inject actual values here during compilation */
}