/* ============================================
   Klaviyo Form Styles
   ============================================ */

/* Base container styles */
.klaviyo-form-container {
  width: 100%;
}

/* Base form styling for all Klaviyo forms */
.klaviyo-form-container .klaviyo-form,
.klaviyo-form-container .klaviyo-form * {
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
}

/* Base input styling for all Klaviyo forms */
.klaviyo-form-container input[type="email"],
.klaviyo-form-container input[type="text"],
.klaviyo-form-container select {
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: white !important;
  color: #0097b2 !important; /* Your teal color */
  font-size: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Base button styling for all Klaviyo forms */
.klaviyo-form-container button[type="submit"],
.klaviyo-form-container .klaviyo-submit-button {
  background: #ffffff !important;
  color: #0097b2 !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.klaviyo-form-container button[type="submit"]:hover,
.klaviyo-form-container .klaviyo-submit-button:hover {
  background: #0097b2 !important;
  color: #ffffff !important;
}

/* Base label styling for all Klaviyo forms */
.klaviyo-form-container label {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Base form container styling for all Klaviyo forms */
.klaviyo-form-container .klaviyo-form {
  max-width: 100% !important;
}

/* ============================================
   Consent Text Styles
   ============================================ */

.form-consent p {
  margin-bottom: 0 !important;
  font-weight: 400 !important;
}

.form-consent a {
  font-weight: 500 !important;
}

/* ============================================
   Mobile Responsive Layout
   ============================================ */

@media (max-width: 768px) {
  /* Form section layout */
  .form-section .form-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .form-copy {
    text-align: center !important;
    padding: 0 !important;
    order: 1 !important; /* Text first on mobile */
  }

  .form-wrapper {
    width: 100% !important;
    order: 2 !important; /* Form second on mobile */
  }

  /* Section padding for mobile */
  .form-section {
    padding: 3rem 1rem !important;
  }

  /* Klaviyo form container on mobile */
  .klaviyo-form-container {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  /* All Klaviyo forms on mobile */
  .klaviyo-form-Y9VYvn,
  .klaviyo-form-WWSDnS,
  .klaviyo-form-TeLRUF {
    width: 100% !important;
  }

  /* Stack form elements vertically on mobile */
  .klaviyo-form-Y9VYvn .klaviyo-form,
  .klaviyo-form-WWSDnS .klaviyo-form,
  .klaviyo-form-TeLRUF .klaviyo-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Make inputs full width on mobile */
  .klaviyo-form-Y9VYvn input[type="email"],
  .klaviyo-form-Y9VYvn input[type="text"],
  .klaviyo-form-Y9VYvn select,
  .klaviyo-form-WWSDnS input[type="email"],
  .klaviyo-form-WWSDnS input[type="text"],
  .klaviyo-form-WWSDnS select,
  .klaviyo-form-TeLRUF input[type="email"],
  .klaviyo-form-TeLRUF input[type="text"],
  .klaviyo-form-TeLRUF select {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Center submit buttons on mobile */
  .klaviyo-form-Y9VYvn button[type="submit"],
  .klaviyo-form-Y9VYvn .klaviyo-submit-button,
  .klaviyo-form-WWSDnS button[type="submit"],
  .klaviyo-form-WWSDnS .klaviyo-submit-button,
  .klaviyo-form-TeLRUF button[type="submit"],
  .klaviyo-form-TeLRUF .klaviyo-submit-button {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }

  /* Mobile consent text styling */
  .form-consent p {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    padding: 0 0.5rem !important;
  }
}

/* Additional mobile styles for form content grid */
@media(max-width:900px){
  .form-content{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}