/* Section: form_complaint — complaint form (EXALCO-Complaint.dc.html "Complaint form").
   Controls, checkbox, error and success blocks come from base.css; the white-on-white textarea text
   and the invisible disabled submit of the mockup are not reproduced. */

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

.ex-form-complaint__consent { margin-top: 16px; }
.ex-form-complaint .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-complaint .ex-field:not(.ex-field--file):not(.ex-field--radio) > .ex-field__error { min-height: 16.8px; } /* one 12px × 1.4 line */
.ex-form-complaint .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-complaint__form[hidden] { display: none; }
.ex-form-complaint .ex-form-success__text { max-width: 560px; }

/* Reference number (spec 20.1.2): filled by JS from the server response */
.ex-form-complaint__reference {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 4px 0 16px;
  padding: 12px 16px;
  border: var(--ex-border-w) solid var(--ex-red);
  background: var(--ex-red-tint);
  color: var(--ex-ink);
}
.ex-form-complaint__reference[hidden] { display: none; }
.ex-form-complaint__reference-label { font-size: var(--ex-fs-kicker); font-weight: 700; line-height: 1.3; letter-spacing: .2em; }
.ex-form-complaint__reference-value { font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: .04em; color: var(--ex-red); overflow-wrap: anywhere; }

/* 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-complaint__consent { margin-top: 4px; }
  .ex-form-complaint__consent .ex-checkbox { padding-block: 12px; }
  .ex-form-complaint .ex-form-actions { margin-top: 8px; }
}

@media (max-width: 599px) {
  .ex-form-complaint .ex-form-actions .ex-btn { width: 100%; }
  .ex-form-complaint__reference:not([hidden]) { display: flex; }
}