.form-field { position: relative; min-width: 0; }
.form-field__input { min-width: 0; }
.form-field--flag .form-field__input { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-secondary); }
.form-field--flag .form-field__control { border: 0; }
.form-field__flag { flex: none; width: 27px; }
.form-field__label { display: block; font-size: 14px; color: var(--color-secondary); }
.form-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-field__control { display: block; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--color-secondary); border-radius: 0; padding: 13px 0 11px; background: transparent; font-size: 16px; line-height: 25px; }
textarea.form-field__control { resize: vertical; }
.form-field__control::placeholder { color: var(--color-secondary); opacity: 1; }
.form-field__control--box { border: 0; padding: 13px 17px 12px; }
/* The newsletter form owns the visible focus frame around this boxed control. */
.form-field__control--box:focus { outline: none; }
.form-field__control--question { padding: 0 0 11px; }
.form-field__error { display: block; font-size: 14px; }
.form-field__error[hidden] { display: none; }
.form-field__control[aria-invalid="true"] { border-bottom-color: #9d3525; }
.form-field--consent { display: flex; gap: 18px; align-items: start; font-size: 14px; line-height: 17px; color: var(--color-muted-dark); }
.form-field__checkbox { appearance: none; width: 18px; height: 18px; flex: none; margin: 1px 0 0; border: 1px solid var(--color-accent); background: transparent; box-shadow: inset 0 0 0 3px var(--color-dark); cursor: pointer; transition: background-color .2s; }
.form-field__checkbox:checked { background: var(--color-accent); }
.form-field__consent-text { min-width: 0; max-width: 251px; text-align: left; }
.form-field__consent-link { text-underline-offset: .2em; transition: color .2s; }
.form-field__consent-link:focus-visible { color: var(--color-accent); text-decoration: underline; }
@media (hover: hover) { .form-field__checkbox:hover:not(:checked):not(:disabled) { background-color: color-mix(in srgb, var(--color-accent) 40%, transparent); } .form-field__consent-link:hover { color: var(--color-accent); text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) { .form-field__checkbox, .form-field__consent-link { transition: none; } }
.form-field--dark .form-field__control { color: var(--color-muted-dark); border-color: var(--color-muted-dark); }
.form-field--dark .form-field__control::placeholder { color: var(--color-muted-dark); }
.form-field__control--line:focus, .form-field__control--question:focus { outline: none; border-bottom-color: var(--color-accent); box-shadow: 0 1px 0 var(--color-accent); }
.form-field--flag .form-field__control:focus { box-shadow: none; }
.form-field--flag .form-field__input:focus-within { border-bottom-color: var(--color-accent); box-shadow: 0 1px 0 var(--color-accent); }
@media (max-width: 639px) { .form-field__control { font-size: 14px; } .form-field__control--question, .form-field__control--box { font-size: 16px; } }

.form-field__control--comment { padding: 16.5px 20px; border: 1px solid var(--color-secondary); }
textarea.form-field__control--comment { field-sizing: content; resize: none; }
.form-field__control--comment:focus { outline: none; border-color: var(--color-accent); }
@media (max-width: 639px) { .form-field__control--comment { padding-block: 42.5px; font-size: 16px; } }