/* ==========================================================================
   Congenia — WPForms skin
   Reproduces the original .contact__form exactly: underline-only inputs with
   floating labels on the dark "charcoal" close, no required asterisks, and the
   beige pill submit with the charcoal arrow box. Reuses the tokens declared
   (and inverted inside .contact) in assets/css/styles.css.

   Floating labels are driven here (not by WPForms): every field ships
   placeholder=" ", so :placeholder-shown flips the label between its resting
   position (on the line) and its raised position, exactly like the original
   input:not(:placeholder-shown) + label rule.
   ========================================================================== */

#contacto .wpforms-container { margin: 0; }
#contacto .wpforms-field-container { display: block; }

@media (min-width: 48rem) {
  #contacto .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap-fluid);
  }
  #contacto .wpforms-field.wpforms-field-textarea,
  #contacto .wpforms-submit-container { grid-column: 1 / -1; }
}

/* Field wrapper == original .field { position: relative; padding-top: space-md } */
#contacto .wpforms-field {
  position: relative;
  padding: var(--space-md) 0 0;
  background: transparent;
}

/* Underline inputs on a transparent background. */
#contacto .wpforms-field input[type="text"],
#contacto .wpforms-field input[type="email"],
#contacto .wpforms-field input[type="tel"],
#contacto .wpforms-field input[type="url"],
#contacto .wpforms-field textarea {
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--off-white) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none;
}
#contacto .wpforms-field textarea { resize: vertical; min-height: 3.5rem; }

#contacto .wpforms-field input:focus,
#contacto .wpforms-field textarea:focus {
  outline: none;
  border-bottom-color: var(--beige) !important;
  box-shadow: none !important;
}

/* Floating label == original .field label. */
#contacto .wpforms-field > .wpforms-field-label {
  position: absolute;
  left: 0;
  top: calc(var(--space-md) + 0.5rem);
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--dark-beige) !important;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
/* The original form carried no asterisks on required fields. */
#contacto .wpforms-required-label { display: none; }

/* Raised state: on focus, or once the field holds a value. */
#contacto .wpforms-field:focus-within > .wpforms-field-label,
#contacto .wpforms-field:has(input:not(:placeholder-shown)) > .wpforms-field-label,
#contacto .wpforms-field:has(textarea:not(:placeholder-shown)) > .wpforms-field-label {
  transform: translateY(-1.6rem) scale(0.72);
  color: var(--dark-beige) !important;
}

/* Errors: soft red that reads on charcoal, like .contact .field .error. */
#contacto .wpforms-error,
#contacto label.wpforms-error { color: #ff8c8c !important; font-size: var(--text-xsmall); }
#contacto .wpforms-field input.wpforms-error,
#contacto .wpforms-field textarea.wpforms-error { border-bottom-color: #ff8c8c !important; }

/* ------------------------------------------------------------------ Button
   Rebuilds the original .contact .btn: beige pill + charcoal arrow box.
   WPForms renders a single <button>, so the icon box is the ::after element. */
#contacto .wpforms-submit-container { padding-top: var(--space-lg); }

#contacto button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5625rem 0.5625rem 0.5625rem var(--space-sm) !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: var(--beige) !important;
  color: var(--charcoal) !important;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
#contacto button.wpforms-submit::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  background: var(--charcoal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6d3d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")
    center / 1.125rem no-repeat;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  #contacto button.wpforms-submit:hover::after { transform: translateX(2px); }
}


/* Submit button: taller, centred label, clear gap above from the fields. */
#contacto .wpforms-submit-container { padding-top: var(--space-xl) !important; }
#contacto button.wpforms-submit {
  min-height: 52px;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}