.se-registration {
    --se-form-primary: #174f78;
    --se-form-primary-dark: #103b5b;
    --se-form-text: #1f2933;
    --se-form-muted: #52616b;
    --se-form-border: #cfd8df;
    --se-form-surface: #f6f8fa;
    --se-form-error: #a61b1b;
    --se-form-focus: #ffbf47;
    max-width: 72rem;
    margin-inline: auto;
    color: var(--se-form-text);
}

.se-registration,
.se-registration * {
    box-sizing: border-box;
}

.se-registration__header {
    margin-block-end: 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-inline-start: 0.35rem solid var(--se-form-primary);
    background: var(--se-form-surface);
}

.se-registration__eyebrow {
    margin: 0 0 0.35rem;
    color: var(--se-form-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.se-registration__header h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.65rem);
    line-height: 1.15;
}

.se-registration__header p {
    max-width: 70ch;
    margin: 0.65rem 0 0;
    line-height: 1.6;
}

.se-registration form {
    display: grid;
    gap: 1.5rem;
}

.se-registration fieldset {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 1px solid var(--se-form-border);
    border-radius: 0.5rem;
    background: #fff;
}

.se-registration fieldset > legend {
    max-width: 100%;
    padding-inline: 0.5rem;
    color: var(--se-form-primary);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.3;
}

.se-registration fieldset fieldset {
    margin-block: 1rem;
    padding: 1rem;
    background: var(--se-form-surface);
}

.se-registration fieldset fieldset > legend {
    color: var(--se-form-text);
    font-size: 1rem;
}

.se-registration .form-group,
.se-registration .input,
.se-registration .form-element {
    margin-block-end: 1.15rem;
}

.se-registration label,
.se-registration .control-label {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 650;
    line-height: 1.4;
}

.se-registration input[type="text"],
.se-registration input[type="email"],
.se-registration input[type="tel"],
.se-registration input[type="date"],
.se-registration input[type="number"],
.se-registration select,
.se-registration textarea {
    display: block;
    width: 100%;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--se-form-border);
    border-radius: 0.3rem;
    background: #fff;
    color: var(--se-form-text);
    font: inherit;
    line-height: 1.45;
}

.se-registration textarea {
    min-height: 9rem;
    resize: vertical;
}

.se-registration input[type="checkbox"],
.se-registration input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-inline-end: 0.45rem;
    vertical-align: -0.15rem;
}

.se-registration input:focus-visible,
.se-registration select:focus-visible,
.se-registration textarea:focus-visible,
.se-registration button:focus-visible,
.se-registration a:focus-visible {
    outline: 3px solid var(--se-form-focus);
    outline-offset: 2px;
}

.se-registration .help-block,
.se-registration .form-text,
.se-registration small,
.se-registration [class*="description"] {
    color: var(--se-form-muted);
    font-size: 0.925rem;
    line-height: 1.5;
}

.se-registration .has-error,
.se-registration .error,
.se-registration .is-invalid,
.se-registration [aria-invalid="true"] {
    border-color: var(--se-form-error);
}

.se-registration .help-block,
.se-registration .error-message,
.se-registration [class*="error"] {
    color: var(--se-form-error);
}

/* --------------------------------------------------------------------------
   Validation state
   --------------------------------------------------------------------------
   EXT:form marks up failed validation with Bootstrap's conventions: the element
   container (a div, or a fieldset for radio groups) and the control itself both
   get `is-invalid`, and the message sits in `<span class="invalid-feedback">`.
   Bootstrap 5 is loaded site-wide and only ever colours the control's border,
   so the rules below add the visible red state the form needs.
   -------------------------------------------------------------------------- */

/* Labels deliberately keep their normal colour — the red border, the red wash and
   the message below the field carry the error state on their own. */

/* The control itself: heavier border plus a faint red wash. */
.se-registration input.is-invalid,
.se-registration select.is-invalid,
.se-registration textarea.is-invalid {
    border-color: var(--se-form-error);
    border-width: 2px;
    background-color: #fdf4f4;
}

.se-registration input.form-check-input.is-invalid {
    outline: 2px solid var(--se-form-error);
    outline-offset: 1px;
}

/* No border/indent on the failed element's container: it would shift the field out
   of the two-column grid alignment and read as heavier than intended. */

/* Bootstrap hides .invalid-feedback unless it matches its own sibling selector,
   which does not hold for every element type here — so show it explicitly.
   Scoped to a container that still carries .is-invalid on purpose: that is what
   lets seminar-registration-form.js hide the message again simply by dropping
   the class once the field is filled in, without touching the message node.
   0.625rem = 10px at the default root font size; kept in rem so it scales with
   the rest of the form. */
.se-registration .form-element.is-invalid .invalid-feedback {
    display: block;
    margin-block-start: 0.35rem;
    color: var(--se-form-error);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
}

/* The summary above the form, rendered by the Form.fluid.html override in
   EXT:site_configuration/Resources/Private/Extension/form/Templates/.
   Not nested under .se-registration so it still styles correctly if the
   override is ever reused by another form that loads this stylesheet. */
.se-form-errors {
    margin-block-end: 1.5rem;
    padding: clamp(0.9rem, 2vw, 1.25rem);
    border: 2px solid var(--se-form-error, #a61b1b);
    border-inline-start-width: 0.5rem;
    border-radius: 0.35rem;
    background: #fdf4f4;
    color: var(--se-form-error, #a61b1b);
}

.se-form-errors__headline {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
}

.se-form-errors__text {
    margin: 0;
    color: var(--se-form-error, #a61b1b);
    line-height: 1.55;
}

/* seminar-registration-form.js sets [hidden] once no field is flagged any more.
   Declared explicitly because a display value elsewhere would beat [hidden]. */
.se-form-errors[hidden] {
    display: none;
}

.se-registration button,
.se-registration input[type="submit"] {
    min-height: 2.9rem;
    padding: 0.7rem 1.15rem;
    border: 0;
    border-radius: 0.3rem;
    background: var(--se-form-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.se-registration button:hover,
.se-registration input[type="submit"]:hover {
    background: var(--se-form-primary-dark);
}

.se-registration button[type="button"],
.se-registration .btn-secondary {
    border: 1px solid var(--se-form-border);
    background: #fff;
    color: var(--se-form-text);
}

.se-registration a {
    color: var(--se-form-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

.se-registration a:hover {
    color: var(--se-form-primary-dark);
}

.se-registration table {
    width: 100%;
    border-collapse: collapse;
}

.se-registration th,
.se-registration td {
    padding: 0.65rem;
    border-block-end: 1px solid var(--se-form-border);
    text-align: start;
    vertical-align: top;
}

@media (min-width: 48rem) {
    .se-registration fieldset:not(#seminar-registration-participants):not(#seminar-registration-legal-confirmations) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    .se-registration fieldset > legend,
    .se-registration fieldset > p,
    .se-registration fieldset > div:has(> p:only-child),
    .se-registration fieldset > fieldset {
        grid-column: 1 / -1;
    }

    .se-registration fieldset fieldset {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .se-registration fieldset fieldset > legend {
        grid-column: 1 / -1;
    }
}

@media (max-width: 47.999rem) {
    .se-registration__header {
        padding: 1rem;
    }

    .se-registration fieldset {
        padding: 1rem;
    }

    .se-registration button,
    .se-registration input[type="submit"] {
        width: 100%;
    }

    .se-registration table,
    .se-registration tbody,
    .se-registration tr,
    .se-registration th,
    .se-registration td {
        display: block;
    }

    .se-registration th {
        padding-block-end: 0.2rem;
        border: 0;
    }

    .se-registration td {
        padding-block-start: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .se-registration *,
    .se-registration *::before,
    .se-registration *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}