/* Shared illustrated-form pieces (account/address forms, auth.css): the
   card border, fields, and labels are hand-drawn illustration assets, not
   vector shapes — by design. This holds the card border, field/label/error
   states and the submit button; auth.css adds the box-style field art. */

.form__form-error {
  margin-top: 2rem;
  padding: 1em 1.25em;
  border: var(--border-thin);
  border-radius: var(--radius-m);
  font-size: var(--text-body);
  text-align: center;
}

.form__form-error {
  border-color: #d33;
  color: #d33;
}

.form__card {
  margin-top: 2rem;
  padding: 0 1.25rem;
  border-style: solid;
  border-width: 1.625rem;
  /* 9-slice: slicing at the corner curve's depth keeps every corner
     fixed/undistorted regardless of box size, stretching only the
     straight edges between them. Slice and border-image-width keep the
     same ratio so the pen stroke's on-screen thickness stays constant. */
  border-image-source: url('../img/contact-card-border.png');
  border-image-slice: 28;
  border-image-width: 1.625rem;
  border-image-repeat: stretch;
}

.form__field {
  position: relative; /* anchors the error text, which is out of flow */
  /* the first field's own gap under the card's top edge — half the
     normal inter-field gap below. :first-child doesn't reach
     it: a hidden honeypot div is the form's actual first child, so
     instead the normal 1.5rem gap is added back only when a field
     directly follows another field. */
  margin-top: 0.75rem;
}

.form__field + .form__field {
  margin-top: 1.5rem;
}

.form__label {
  display: block;
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-medium);
}

/* Triggered by illustrated-form.js on a missed required field. Animates
   to var(--color-ink) rather than `inherit` — `inherit` isn't reliably
   interpolatable by the animation engine. Exempt from the site-wide
   prefers-reduced-motion collapse (base.css): brief, triggered by the
   visitor's own action, and carries functional information. */
.form__label--flash {
  animation: form-flash 1.2s ease-out;
  animation-duration: 1.2s !important;
}

@keyframes form-flash {
  from { color: #d33; }
  to { color: var(--color-ink); }
}

.form__field input[type='text'],
.form__field input[type='email'],
.form__field input[type='tel'] {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding-bottom: 0.5rem;
  border: none;
  font-size: var(--text-body);
  font-family: inherit;
}

/* The invalid-state visual on the input itself is the page's own CSS
   (auth.css colors the box outline); only the error text's show/hide is
   shared here. Out of flow: appearing in flow would push everything below it down,
   and the gap under a field is wide enough to hold this line. */
.form__field-error {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.125rem;
  font-size: var(--text-caption);
  color: #d33;
}

.form__field--invalid .form__field-error {
  display: block;
}

.form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto 0;
  min-width: 6rem;
  min-height: 44px; /* WCAG tap-target minimum */
  padding-inline: 1.5em;
  background: #95ff7a;
  border: var(--border-thick);
  border-radius: var(--radius-l);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.form__submit:focus-visible {
  background: #fff200; /* same yellow as the cart's promo field */
}

@media (hover: hover) {
  .form__submit:hover {
    background: #fff200;
  }
}

/* 44px tap target (WCAG 2.5.5) comes from the label's own clickable
   area (checkbox + text together), not from inflating the checkbox itself */
.form__field--checkbox label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-medium);
  white-space: nowrap; /* flex items default to shrinking text at word breaks otherwise */
  cursor: pointer;
}

.form__field--checkbox input {
  accent-color: var(--color-ink); /* native checked-state fill, browser default is gray/blue */
}