/* Section: form_contact — contact form with sender-category chips (EXALCO-Contact.dc.html "Contact form").
   Controls, checkbox, error and success blocks come from base.css. */

.ex-form-contact__title.ex-title { margin: 0 0 10px; }
.ex-form-contact__text.ex-text { max-width: 640px; margin: 0 0 24px; }

/* Sender category: radio group drawn as the designed chips */
.ex-form-contact__sender {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ex-form-contact__sender .ex-field__legend {
  /* Rendered box: 11px 16px, line-height normal (73 x 34px at 1680); the arrow tip is cut out of that box. */
  padding: 11px 16px;
  background: var(--ex-ink);
  color: var(--ex-white);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .1em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.ex-form-contact__sender .ex-field__option { position: relative; display: inline-flex; cursor: pointer; }
/* The radio is hidden here, not with .screen-reader-text: that class un-clips itself on :focus (it is meant for
   skip links), which drew the native radio over the chip for keyboard users. */
.ex-form-contact__sender .ex-field__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  white-space: nowrap;
}
/* Rendered chip of this form: 12px 18px (42px high), border rgba(35,31,32,.35) — 2px taller than the base chip. */
.ex-form-contact__sender .ex-chip { padding-block: 12px; border-color: rgba(35, 31, 32, .35); background: var(--ex-white); }
.ex-form-contact__sender .ex-field__radio:checked + .ex-chip {
  border-color: var(--ex-red);
  background: var(--ex-red);
  color: var(--ex-white);
  transform: none;
}
.ex-form-contact__sender .ex-field__radio:focus-visible + .ex-chip { outline: 2px solid var(--ex-focus); outline-offset: 2px; }
.ex-form-contact__sender .ex-field__hint,
.ex-form-contact__sender .ex-field__error { flex-basis: 100%; margin: 0; }

.ex-form-contact__consent { margin-top: 16px; }
.ex-form-contact .ex-field__error { margin: 0; }
/* A message that clears when its field is left must not move the submit button under the pointer: mousedown on the
   button blurs the field, the slot collapsed, the button jumped up 25px and a click on its lower half was lost.
   The emptied slot of a text control / the consent box keeps its line for .3s (zero-duration, delayed transition),
   then collapses. Hidden, it is a zero-height box that cancels the field's 8px gap. */
.ex-form-contact .ex-field:not(.ex-field--file):not(.ex-field--radio) > .ex-field__error { min-height: 16.8px; } /* one 12px × 1.4 line */
.ex-form-contact .ex-field:not(.ex-field--file):not(.ex-field--radio) > .ex-field__error[hidden] {
  display: block !important; /* over the global [hidden] rule: the box has to stay in flow to hold its line */
  visibility: hidden;
  min-height: 0;
  margin-top: -8px;
  transition: min-height 0s linear .3s, margin-top 0s linear .3s;
}
.ex-form-contact__form[hidden] { display: none; }

/* Touch layouts: the consent row is a 44px target (one 20px line + 12px above and below; the outer gaps shrink by the same amount). */
@media (max-width: 899px) {
  .ex-form-contact__consent { margin-top: 4px; }
  .ex-form-contact__consent .ex-checkbox { padding-block: 12px; }
  .ex-form-contact .ex-form-actions { margin-top: 8px; }
}

@media (max-width: 599px) {
  .ex-form-contact .ex-form-actions .ex-btn { width: 100%; }
}