/* wpforms.css
   WPForms-specific UI: labels, inputs, Stripe wrapper, and button defaults.
   Depends on variables.css
*/

.wpforms-form label,
.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field-sublabel,
.wpforms-form .wpforms-field-description,
.wpforms-form .wpforms-field-name,
.wpforms-form .wpforms-field-divider h3 {
  color: var(--wf-label-color);
  font-family: var(--ui-font-family);
}

.wpforms-form .wpforms-field-label {
  display: block;
  margin: 0 0 0.625rem 0;
  font-weight: 700;
  font-size: var(--wf-label-size);
  line-height: 1.25;
}

.wpforms-form .wpforms-field-sublabel,
.wpforms-form .wpforms-field-description,
.wpforms-form .wpforms-field-name {
  font-weight: 400;
  font-size: 0.95rem;
}

/* Consolidated input selector for WPForms container */
.wpforms-container :is(
  input[type="date"], input[type="datetime"], input[type="datetime-local"],
  input[type="email"], input[type="month"], input[type="number"],
  input[type="password"], input[type="range"], input[type="search"],
  input[type="tel"], input[type="text"], input[type="time"],
  input[type="url"], input[type="week"], select, textarea
) {
  box-sizing: border-box;
  width: 100%;
  display: block;
  background-color: var(--wf-input-bg);
  color: var(--wf-input-text);
  font-size: var(--wf-font-size);
  line-height: 1.15;
  padding: var(--wf-padding-y) var(--wf-padding-x);
  border: 1px solid var(--wf-input-border);
  border-radius: var(--wf-radius);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

/* Textareas and touch targets */
.wpforms-container textarea { min-height: 110px; resize: vertical; padding-top: calc(var(--wf-padding-y) + 0.1rem); }
.wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select) { min-height: 72px; }

/* Focus & invalid states */
.wpforms-container :is(input, textarea, select):focus,
.wpforms-container :is(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--wf-focus);
  box-shadow: 0 0 0 6px rgba(59,130,246,0.06);
  transform: translateY(-0.2px);
}
.wpforms-container :is(input:invalid, textarea:invalid, .invalid) {
  border-color: var(--wf-invalid);
  box-shadow: 0 0 0 6px rgba(217,83,79,0.06);
}

/* Disabled / readonly */
.wpforms-container :is(input[disabled], textarea[disabled], input[readonly], textarea[readonly]) {
  background: #111111;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.9;
}

/* Dark-form modifier */
.wpforms-form--dark {
  --wf-label-color: #ffffff;
  --wf-input-bg: rgba(255,255,255,0.03);
  --wf-input-border: rgba(255,255,255,0.10);
  --wf-input-text: #ffffff;
}

/* WPForms buttons use global button variables */
.wpforms-form :is(input[type="submit"], button[type="submit"], .wpforms-page-button) {
  display: inline-block;
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  font-size: var(--btn-font-size);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background-color var(--btn-transition), border-color var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition);
}
.wpforms-form :is(input[type="submit"]:hover, button[type="submit"]:hover) {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  transform: translateY(-1px);
}

/* Stripe wrapper visual */
.wpforms-form .wpforms-credit-card-wrapper,
.wpforms-form .wpforms-field-credit-card .wpforms-stripe-field {
  box-sizing: border-box;
  width: 100%;
  background: #000000;
  border: 1px solid var(--wf-input-border);
  border-radius: var(--wf-radius);
  padding: 1rem;
  display: block;
  color: var(--wf-input-text);
  min-height: 72px;
}
.wpforms-form .wpforms-credit-card-wrapper .StripeElement,
.wpforms-form .wpforms-stripe-field .StripeElement {
  display:block; width:100%; height:48px; background:transparent; border:0;
}
.wpforms-form .wpforms-credit-card-wrapper:focus-within,
.wpforms-form .wpforms-credit-card-wrapper.wpforms-has-focus {
  border-color: var(--wf-focus);
  box-shadow: 0 0 0 6px rgba(59,130,246,0.06);
}
.wpforms-form .wpforms-credit-card-wrapper.wpforms-error,
.wpforms-form .wpforms-credit-card-wrapper.invalid {
  border-color: var(--wf-invalid);
  box-shadow: 0 0 0 6px rgba(217,83,79,0.06);
}