/**
 * NumeraIQ WPForms Integration Styles
 * Automatically styles WPForms to match the theme design
 */

/* ============================================
   WPForms Container
   ============================================ */

.wpforms-container {
  font-family: var(--font-sans);
}

.wpforms-container * {
  box-sizing: border-box;
}

/* ============================================
   Form Fields - General
   ============================================ */

.wpforms-field,
div.wpforms-container-full .wpforms-form .wpforms-field {
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

.wpforms-field:last-of-type,
div.wpforms-container-full .wpforms-form .wpforms-field:last-of-type {
  margin-bottom: 1rem !important;
}

/* ============================================
   Labels
   ============================================ */

.wpforms-field-label,
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: hsl(var(--text-muted)) !important;
  margin-bottom: 0.5rem !important;
  display: block;
}

/* Required asterisk - hide it */
.wpforms-required-label,
div.wpforms-container-full .wpforms-form .wpforms-required-label {
  display: none !important;
}

/* Sublabels */
.wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--text-muted));
  margin-top: 0.25rem;
}

/* Field descriptions */
.wpforms-field-description {
  font-size: 0.875rem;
  color: hsl(var(--text-muted));
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ============================================
   Text Inputs, Email, URL, Phone, etc.
   ============================================ */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="url"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="password"],
.wpforms-form input[type="date"],
.wpforms-form input[type="time"],
.wpforms-form input[type="datetime-local"],
.wpforms-form textarea,
.wpforms-form select,
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select {
  width: 100% !important;
  padding: 0.75rem 0.875rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  color: hsl(var(--dark)) !important;
  background-color: white !important;
  background-image: none !important;
  border: 1px solid hsl(var(--dark) / 0.2) !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Remove any icons/images in inputs */
.wpforms-form input,
.wpforms-form textarea,
div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form textarea {
  background-image: none !important;
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}

.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
  color: hsl(var(--dark) / 0.4) !important;
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus,
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus {
  outline: none !important;
  border-color: hsl(var(--dark)) !important;
  box-shadow: none !important;
}

/* Textarea specific */
.wpforms-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* ============================================
   Select Dropdowns
   ============================================ */

.wpforms-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ============================================
   Checkboxes & Radio Buttons
   ============================================ */

.wpforms-field-checkbox ul,
.wpforms-field-radio ul,
.wpforms-field-gdpr-checkbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wpforms-field-checkbox li,
.wpforms-field-radio li,
.wpforms-field-gdpr-checkbox li {
  margin-bottom: 0.75rem;
}

.wpforms-field-checkbox input[type="checkbox"],
.wpforms-field-radio input[type="radio"],
.wpforms-field-gdpr-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.wpforms-field-checkbox label,
.wpforms-field-radio label,
.wpforms-field-gdpr-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--dark));
}

/* Custom checkbox/radio visual */
.wpforms-field-checkbox label::before,
.wpforms-field-gdpr-checkbox label::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid hsl(var(--dark));
  background: transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpforms-field-radio label::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid hsl(var(--dark));
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s ease;
}

/* Checked states */
.wpforms-field-checkbox input:checked + label::before,
.wpforms-field-gdpr-checkbox input:checked + label::before {
  background-color: #D4FF00;
  border-color: #D4FF00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.wpforms-field-radio input:checked + label::before {
  border-color: #D4FF00;
  background-color: #D4FF00;
  box-shadow: inset 0 0 0 4px white;
}

/* Focus states */
.wpforms-field-checkbox input:focus + label::before,
.wpforms-field-radio input:focus + label::before,
.wpforms-field-gdpr-checkbox input:focus + label::before {
  box-shadow: 0 0 0 3px hsl(var(--lime) / 0.3);
}

/* ============================================
   Submit Button
   ============================================ */

.wpforms-submit-container,
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  margin-top: 1rem !important;
  padding: 0 !important;
}

.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit,
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 2rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #0A0A0A !important;
  background-color: #D4FF00 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  width: 100% !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover,
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
  background-color: #E0FF33 !important;
  color: #0A0A0A !important;
}

.wpforms-form button[type="submit"]:active,
.wpforms-form .wpforms-submit:active {
  transform: scale(0.98);
}

.wpforms-form button[type="submit"]:focus,
.wpforms-form .wpforms-submit:focus,
div.wpforms-container-full .wpforms-form button[type="submit"]:focus,
div.wpforms-container-full .wpforms-form .wpforms-submit:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Loading spinner */
.wpforms-submit-spinner {
  display: none;
}

.wpforms-form.wpforms-ajax-submitting .wpforms-submit-spinner {
  display: inline-block;
  margin-left: 0.5rem;
}

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

.wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error,
.wpforms-form select.wpforms-error {
  border-color: #FF4242;
}

.wpforms-form input.wpforms-error:focus,
.wpforms-form textarea.wpforms-error:focus,
.wpforms-form select.wpforms-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 66, 66, 0.2);
}

label.wpforms-error {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #FF4242;
  margin-top: 0.25rem;
  display: block;
}

/* ============================================
   Success / Confirmation Message
   ============================================ */

.wpforms-confirmation-container-full {
  padding: 2rem;
  background-color: hsl(var(--cream-dark));
  border: 1px solid hsl(var(--dark) / 0.1);
  text-align: center;
}

.wpforms-confirmation-container-full p {
  font-size: 1rem;
  color: hsl(var(--dark));
  margin: 0;
}

/* ============================================
   Multi-page / Page Break
   ============================================ */

.wpforms-page-indicator {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.wpforms-page-indicator-page {
  flex: 1;
  height: 4px;
  background-color: hsl(var(--dark) / 0.1);
  border-radius: 0;
  overflow: hidden;
}

.wpforms-page-indicator-page-progress {
  height: 100%;
  background-color: #D4FF00;
  transition: width 0.3s ease;
}

.wpforms-page-indicator-page.active .wpforms-page-indicator-page-progress {
  width: 100%;
}

/* Page navigation buttons */
.wpforms-page-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wpforms-page-next {
  color: #0A0A0A;
  background-color: #D4FF00;
  border: none;
}

.wpforms-page-next:hover {
  background-color: #E0FF33;
}

.wpforms-page-prev {
  color: hsl(var(--dark));
  background-color: transparent;
  border: 1px solid hsl(var(--dark) / 0.2);
}

.wpforms-page-prev:hover {
  border-color: hsl(var(--dark));
}

/* ============================================
   File Upload
   ============================================ */

.wpforms-field-file-upload .wpforms-uploader {
  border: 2px dashed hsl(var(--dark) / 0.2);
  background-color: hsl(var(--cream));
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wpforms-field-file-upload .wpforms-uploader:hover,
.wpforms-field-file-upload .wpforms-uploader.drag-over {
  border-color: #D4FF00;
  background-color: hsl(var(--lime) / 0.05);
}

.wpforms-field-file-upload .wpforms-uploader-icon {
  color: hsl(var(--dark) / 0.3);
  margin-bottom: 1rem;
}

.wpforms-field-file-upload .wpforms-uploader-text {
  font-size: 0.875rem;
  color: hsl(var(--text-muted));
}

.wpforms-field-file-upload .wpforms-uploader-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0A0A0A;
  background-color: #D4FF00;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
}

/* ============================================
   Date/Time Picker
   ============================================ */

.wpforms-field-date-time .flatpickr-input {
  cursor: pointer;
}

/* Style flatpickr calendar if used */
.flatpickr-calendar {
  font-family: var(--font-sans);
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.flatpickr-day.selected {
  background-color: #D4FF00;
  border-color: #D4FF00;
  color: #0A0A0A;
}

.flatpickr-day:hover {
  background-color: hsl(var(--lime) / 0.2);
  border-color: hsl(var(--lime) / 0.2);
}

/* ============================================
   Rating Field (if using WPForms addon)
   ============================================ */

.wpforms-field-rating .wpforms-rating-item {
  color: hsl(var(--dark) / 0.2);
  cursor: pointer;
  transition: color 0.2s ease;
}

.wpforms-field-rating .wpforms-rating-item.selected,
.wpforms-field-rating .wpforms-rating-item:hover {
  color: #D4FF00;
}

/* ============================================
   Dark Section Variant
   Override for forms inside dark sections
   ============================================ */

.section-dark .wpforms-field-label {
  color: hsl(var(--text-light) / 0.6);
}

.section-dark .wpforms-form input[type="text"],
.section-dark .wpforms-form input[type="email"],
.section-dark .wpforms-form input[type="url"],
.section-dark .wpforms-form input[type="tel"],
.section-dark .wpforms-form input[type="number"],
.section-dark .wpforms-form input[type="password"],
.section-dark .wpforms-form textarea,
.section-dark .wpforms-form select {
  color: hsl(var(--text-light));
  background-color: hsl(var(--dark-elevated));
  border-color: hsl(var(--text-light) / 0.2);
}

.section-dark .wpforms-form input::placeholder,
.section-dark .wpforms-form textarea::placeholder {
  color: hsl(var(--text-light) / 0.4);
}

.section-dark .wpforms-form input:focus,
.section-dark .wpforms-form textarea:focus,
.section-dark .wpforms-form select:focus {
  border-color: #D4FF00;
}

.section-dark .wpforms-field-checkbox label,
.section-dark .wpforms-field-radio label,
.section-dark .wpforms-field-gdpr-checkbox label {
  color: hsl(var(--text-light));
}

.section-dark .wpforms-field-checkbox label::before,
.section-dark .wpforms-field-radio label::before,
.section-dark .wpforms-field-gdpr-checkbox label::before {
  border-color: hsl(var(--text-light));
}

.section-dark .wpforms-field-description {
  color: hsl(var(--text-light) / 0.6);
}

.section-dark .wpforms-confirmation-container-full {
  background-color: hsl(var(--dark-elevated));
  border-color: hsl(var(--text-light) / 0.1);
}

.section-dark .wpforms-confirmation-container-full p {
  color: hsl(var(--text-light));
}

/* ============================================
   Inline Form Layout (single row)
   Add class "wpforms-inline" to form
   ============================================ */

.wpforms-form.wpforms-inline .wpforms-field-container {
  display: flex;
  gap: 0;
  align-items: flex-end;
}

.wpforms-form.wpforms-inline .wpforms-field {
  margin-bottom: 0;
  flex: 1;
}

.wpforms-form.wpforms-inline .wpforms-field input {
  border-right: none;
}

.wpforms-form.wpforms-inline .wpforms-submit-container {
  margin-top: 0;
}

.wpforms-form.wpforms-inline .wpforms-submit {
  height: 100%;
}

@media (max-width: 640px) {
  .wpforms-form.wpforms-inline .wpforms-field-container {
    flex-direction: column;
    gap: 1rem;
  }

  .wpforms-form.wpforms-inline .wpforms-field input {
    border-right: 1px solid hsl(var(--dark) / 0.2);
  }
}

/* ============================================
   Modal Form Variant
   Forms inside modals
   ============================================ */

.trial-modal .wpforms-form input,
.contact-modal .wpforms-form input,
.trial-modal .wpforms-form textarea,
.contact-modal .wpforms-form textarea,
.trial-modal .wpforms-form select,
.contact-modal .wpforms-form select {
  background-color: white;
}

.trial-modal .wpforms-submit,
.contact-modal .wpforms-submit {
  width: 100%;
}

/* Custom form containers inside modals */
.trial-custom-form,
.contact-custom-form {
  margin-bottom: 0;
}

.trial-custom-form .wpforms-container,
.contact-custom-form .wpforms-container {
  margin: 0;
  padding: 0;
}

.trial-custom-form .wpforms-field,
.contact-custom-form .wpforms-field {
  margin-bottom: 1rem !important;
}

.trial-custom-form .wpforms-submit-container,
.contact-custom-form .wpforms-submit-container {
  margin-top: 1rem !important;
  padding-top: 0 !important;
}

/* Hide WPForms confirmation in modals - use theme success state */
.trial-modal .wpforms-confirmation-container-full,
.contact-modal .wpforms-confirmation-container-full {
  background: transparent;
  border: none;
  padding: 2rem 0;
  text-align: center;
}

.trial-modal .wpforms-confirmation-container-full::before,
.contact-modal .wpforms-confirmation-container-full::before {
  content: '';
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23D4FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ============================================
   Remove WPForms default styling conflicts
   ============================================ */

div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=range],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  padding: 0.75rem 0.875rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  background-image: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
  border-radius: 0 !important;
  background-color: #D4FF00 !important;
  color: #0A0A0A !important;
}

/* Hide any field icons that WPForms might add */
.wpforms-field-row::before,
.wpforms-field-row::after,
.wpforms-field::before,
.wpforms-field::after {
  display: none !important;
}

/* Remove any input icons */
div.wpforms-container-full .wpforms-form .wpforms-field input,
div.wpforms-container-full .wpforms-form .wpforms-field textarea {
  background-image: none !important;
  background-position: initial !important;
  padding-left: 0.875rem !important;
}