/* Advanced Technologies — Form inputs.
   Two layers:
   1) Native controls inside common form contexts (WooCommerce, comments, and
      the main form plugins) are auto-styled to match the design system, so
      checkout / account / contact forms inherit the brand with zero markup
      changes. Mirrors components/forms/Input.jsx + Select.jsx + Checkbox.jsx.
   2) Explicit .at-* classes for hand-built forms / the at_*() PHP helpers.

   Scoped to form contexts so the block Site Editor UI isn't affected. */

/* ─────────── Scoped native control reset/skin ─────────── */
.at-form,
.woocommerce form,
form.woocommerce-form,
.woocommerce-account form,
.wpcf7-form,            /* Contact Form 7 */
.gform_wrapper,         /* Gravity Forms */
.wpforms-form,          /* WPForms */
.forminator-custom-form, /* Forminator */
.comment-form {

  /* Labels */
  & label {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-strong);
  }

  /* Text-like inputs + textarea + select */
  & input[type="text"],
  & input[type="email"],
  & input[type="tel"],
  & input[type="url"],
  & input[type="password"],
  & input[type="search"],
  & input[type="number"],
  & input[type="date"],
  & textarea,
  & select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--surface-card);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.4;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: none;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    box-sizing: border-box;
  }

  & textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
  }

  /* Custom chevron on selects (matches Select.jsx) */
  & select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) calc(50% + 1px),
      calc(100% - 12px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  /* Focus — steel ring + focus border */
  & input:focus,
  & textarea:focus,
  & select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
  }

  /* Placeholder */
  & ::placeholder { color: var(--text-subtle); opacity: 1; }

  /* Invalid (WooCommerce adds .woocommerce-invalid; plugins vary) */
  & .woocommerce-invalid input,
  & input[aria-invalid="true"],
  & textarea[aria-invalid="true"],
  & input.error {
    border-color: var(--danger-600);
  }

  /* Checkboxes & radios — navy selected state via accent-color */
  & input[type="checkbox"],
  & input[type="radio"] {
    accent-color: var(--navy-700);
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
}

/* ─────────── Explicit classes (hand-built forms / PHP helpers) ─────────── */
.at-field { display: flex; flex-direction: column; gap: 6px; }

.at-label {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: var(--text-strong);
}

.at-input, .at-select, .at-textarea {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--surface-card); color: var(--text-strong);
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.4;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  outline: none; box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.at-textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.at-input--sm, .at-select--sm { height: 38px; }
.at-input--lg, .at-select--lg { height: 52px; }

.at-input:focus, .at-select:focus, .at-textarea:focus {
  border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.at-field.is-error .at-input,
.at-field.is-error .at-select,
.at-field.is-error .at-textarea { border-color: var(--danger-600); }

.at-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

.at-hint  { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.at-error { font-family: var(--font-body); font-size: var(--text-xs); color: var(--danger-600); }

/* Checkbox / radio rows */
.at-check {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-md);
  color: var(--text-body); cursor: pointer;
}
.at-check input[type="checkbox"],
.at-check input[type="radio"] {
  accent-color: var(--navy-700); width: 20px; height: 20px; flex: none; cursor: pointer;
}
.at-check.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* ───────────────────── Forminator integration ─────────────────────
   The native-control rules above already skin Forminator inputs (the
   .forminator-custom-form selector is in the scoped list). These finish the
   job: brand the submit button, labels, required asterisk, descriptions, and
   errors, and tighten default spacing. Forminator's own forminator-row /
   forminator-col-* grid already handles multi-column layouts — no extra class
   needed (unlike the WPForms .at-half helper below). */
.forminator-ui.forminator-custom-form { margin: 0; }
.forminator-custom-form .forminator-field { margin: 0 0 18px; }
.forminator-custom-form .forminator-label {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: var(--text-strong); margin-bottom: 6px; display: inline-block;
}
.forminator-custom-form .forminator-label-required,
.forminator-custom-form .forminator-required { color: var(--danger-600); }
.forminator-custom-form .forminator-description {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px;
}
/* Submit button → primary, full width (matches mockup CTA) */
.forminator-custom-form .forminator-button-submit,
.forminator-custom-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px; padding: 0 22px;
  background: var(--color-accent) !important; color: #fff !important; border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
}
.forminator-custom-form .forminator-button-submit:hover,
.forminator-custom-form button[type="submit"]:hover {
  background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important;
}
/* Validation + confirmation messages */
.forminator-custom-form .forminator-error-message,
.forminator-custom-form .forminator-field-error-message {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--danger-600); margin-top: 4px;
}
.forminator-custom-form .forminator-error input,
.forminator-custom-form .forminator-error textarea,
.forminator-custom-form .forminator-error select,
.forminator-custom-form input.forminator-has-error,
.forminator-custom-form textarea.forminator-has-error { border-color: var(--danger-600) !important; }
.forminator-response-message,
.forminator-success-message {
  background: var(--success-50, #e8f6ee) !important;
  border: 1px solid var(--success-600) !important;
  color: var(--success-700, var(--success-600)) !important;
  border-radius: var(--radius-md); padding: 14px 16px; font-family: var(--font-body);
}

/* ───────────────────── WPForms integration ─────────────────────
   The native-control rules above already skin WPForms inputs (the .wpforms-form
   selector is in the scoped list). These rules finish the job: brand the submit
   button, labels, errors, and tighten default spacing. */
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-form .wpforms-field { padding: 0 0 18px; }
.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: var(--text-strong); margin-bottom: 6px;
}
.wpforms-container .wpforms-form .wpforms-field-description {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted);
}
.wpforms-container .wpforms-form .wpforms-required-label { color: var(--danger-600); }

/* Submit button → primary, full width (matches mockup CTA) */
.wpforms-container .wpforms-form .wpforms-submit-container { margin-top: 4px; }
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px; padding: 0 22px;
  background: var(--color-accent) !important; color: #fff !important;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-snug);
  border: 1px solid var(--color-accent) !important; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
}
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
  background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important;
}

/* Validation + confirmation messages */
.wpforms-container .wpforms-form .wpforms-error {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--danger-600);
}
.wpforms-container .wpforms-form input.wpforms-error,
.wpforms-container .wpforms-form textarea.wpforms-error,
.wpforms-container .wpforms-form select.wpforms-error { border-color: var(--danger-600); }
.wpforms-confirmation-container-full {
  background: var(--success-50, #e8f6ee) !important;
  border: 1px solid var(--success-600) !important;
  border-radius: var(--radius-md); color: var(--text-strong) !important;
  font-family: var(--font-body);
}
/* Two-column rows when a field has the "at-half" CSS class in the WPForms builder */
@media (min-width: 560px) {
  .wpforms-container .wpforms-form .wpforms-field.at-half { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
  .wpforms-container .wpforms-form .wpforms-field.at-half + .wpforms-field.at-half { margin-left: 16px; }
}