/*
* ----------[FORM STYLES]--------*
* Add form-specific styles here. Footer sign-up (Contact Form 7) below.
* Design: "SUBSCRIBE FOR UPDATES" label above, underline input, arrow as submit.
* Arrow icon: ../img/arrow.svg (from css/)
*/

/* Footer sign-up form: label on top, underline input + arrow submit */
#footer-sign-up-form .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.75rem;
}

/* Label / title above field (add "SUBSCRIBE FOR UPDATES" in CF7 form template as first element) */
#footer-sign-up-form .wpcf7-form > p:first-of-type,
#footer-sign-up-form .wpcf7-form > label {
  flex-basis: 100%;
  margin: 0 0 0.5rem;
  color: var(--white) !important;
  font-family: var(--font-inter-tight);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-ls);
  text-transform: uppercase;
}

#footer-sign-up-form .wpcf7-form-control-wrap {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 280px;
}

/* Minimal input: underline only */
#footer-sign-up-form input[type='email'] {
  width: 100%;
  padding: 6px 0 8px;
  border: none;
  border-bottom: 1px solid var(--white) !important;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-inter-tight);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-ls);
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}

#footer-sign-up-form input[type='email']::placeholder {
  color: var(--white);
}

#footer-sign-up-form input[type='email']:focus {
  outline: none;
  border-bottom-color: var(--tan);
}

/* Submit: arrow icon only (hide text, show arrow.svg) */
#footer-sign-up-form input[type='submit'] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent url('../img/arrow.svg') center / contain no-repeat;
  background-size: 18px 20px;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#footer-sign-up-form input[type='submit']:hover {
  opacity: 0.8;
}

/* Spinner position so it doesn’t break the arrow layout */
#footer-sign-up-form .wpcf7-spinner {
  margin: 0;
  position: absolute;
  right: -30px;
}

#footer-sign-up-form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  font-size: var(--font-label-size);
  font-family: var(--font-inter-tight);
  position: absolute;
  bottom: -60px;
  line-height: 1.2;
}
#footer-sign-up-form form.sent .wpcf7-response-output {
  bottom: -25px;
}

#footer-sign-up-form .wpcf7-not-valid-tip {
  font-size: 0.9em;
  margin-top: 0.25rem;
  position: absolute;
}