/*
 * Contact form (ContactDialog.razor, #69). Owner: package B4. Registered on the theme after documents.css.
 * The classes are ours (CssClass, HeaderCssClass, FooterCssClass and our own elements); no DevExpress internals.
 */

/* ------------------------------------------------------------------ */
/* Title with the orange rule (red thread 2). A span named by aria-labelledby, not a heading. */
/* ------------------------------------------------------------------ */
.eng-contact-title {
    display: block;
}

.eng-contact-title::after {
    content: "";
    display: block;
    width: var(--eng-rule-width);
    height: var(--eng-rule-height);
    margin-top: var(--dxds-spacing-80);
    background: var(--eng-color-accent-orange);
}

/* ------------------------------------------------------------------ */
/* Lead, sender and the note about required fields: plain text, read as the dialog's description. */
/* ------------------------------------------------------------------ */
.eng-contact-intro {
    display: grid;
    gap: var(--dxds-spacing-40);
    margin-bottom: var(--dxds-spacing-160);
}

.eng-contact-intro p {
    margin: 0;
}

.eng-contact-sender {
    color: var(--eng-color-text);
}

.eng-contact-sender-label {
    margin-inline-end: var(--dxds-spacing-40);
    font-weight: var(--dxds-font-weight-700);
}

.eng-contact-required {
    margin: 0 0 var(--dxds-spacing-160);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* Help under a field; the field points at it with aria-describedby. */
.eng-contact-hint {
    margin: var(--dxds-spacing-40) 0 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ------------------------------------------------------------------ */
/* Errors: the text at the field (Blazor's ValidationMessage) and the message at the top of the form. */
/* The editors add the red outline and the icon; the text carries the meaning, never the colour alone. */
/* ------------------------------------------------------------------ */
.eng-contact-dialog .validation-message {
    margin-top: var(--dxds-spacing-40);
    color: var(--dxds-color-content-danger-default-rest);
}

.eng-contact-alert,
.eng-contact-status {
    display: flex;
    gap: var(--dxds-spacing-120);
    margin: 0 0 var(--dxds-spacing-160);
    padding: var(--dxds-spacing-120) var(--dxds-spacing-160);
    background: var(--eng-color-surface);
    border-radius: var(--dxds-border-radius-40);
}

.eng-contact-alert {
    color: var(--dxds-color-content-danger-default-rest);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-danger-default-rest);
    border-inline-start-width: var(--dxds-border-width-40);
}

.eng-contact-status {
    color: var(--eng-color-text);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
}

/* ------------------------------------------------------------------ */
/* Buttons in the footer: Skicka (the one filled button) and Avbryt, with room between them. */
/* ------------------------------------------------------------------ */
.eng-contact-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--dxds-spacing-120);
}

/* A target of at least 44 px for the two buttons (red thread 10; WCAG 2.5.8 asks for 24). */
.eng-contact-button {
    min-height: 2.75rem;
}