/*
 * WFP Forms Module
 * Extended form styling for Gravity Forms + native WP forms.
 */

/* =============================================================================
   FIELD GROUPS
   ============================================================================= */

.wfp-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-s);
}

.wfp-field-group label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--contrast-2);
}

/* =============================================================================
   INPUTS
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--contrast);
  background: var(--base-3);
  border: var(--border);
  border-radius: var(--radius-s);
  transition:
    border-color var(--transition-2),
    box-shadow var(--transition-2);
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsl(0 73% 36% / 0.15);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* =============================================================================
   GRAVITY FORMS BASE INTEGRATION
   ============================================================================= */

.gform_wrapper {
  font-family: inherit;
}

.gform_wrapper .gfield_label {
  font-size: var(--step--1) !important;
  font-weight: 600 !important;
  color: var(--contrast-2) !important;
  margin-bottom: var(--space-3xs) !important;
}

.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  border: var(--border) !important;
  border-radius: var(--radius-s) !important;
  background: var(--base-3) !important;
  font-size: var(--step-0) !important;
  padding: var(--space-2xs) var(--space-xs) !important;
  color: var(--contrast) !important;
  width: 100% !important;
  transition: border-color var(--transition-2), box-shadow var(--transition-2) !important;
}

.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px hsl(0 73% 36% / 0.15) !important;
  outline: none !important;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
  background: var(--accent) !important;
  color: var(--base-3) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: 0.6em 1.6em !important;
  font-size: var(--step-0) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--transition-2) !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
  background: var(--accent-hover) !important;
}

.gform_wrapper .validation_error {
  border-color: #c0392b !important;
  background: #fdf0ef !important;
  border-radius: var(--radius-s) !important;
  padding: var(--space-xs) var(--space-s) !important;
  font-size: var(--step--1) !important;
  color: #c0392b !important;
}

.gform_wrapper li.gfield.gfield_error input,
.gform_wrapper li.gfield.gfield_error textarea {
  border-color: #c0392b !important;
}

/* =============================================================================
   SEARCH FORM
   ============================================================================= */

.wfp-search-form {
  display: flex;
  gap: var(--space-2xs);
}

.wfp-search-form input[type="search"] {
  flex: 1;
  border-radius: var(--radius-full);
  padding-left: var(--space-s);
}

.wfp-search-form button {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  padding: var(--space-2xs) var(--space-s);
}