/*
 * Roboto matches dh-partner.com (Roboto Light 300, Regular 400, Medium 500).
 *
 * Self-hosted on purpose: loading this from fonts.googleapis.com / fonts.gstatic.com
 * would leak every visitor's IP and User-Agent to Google before they have consented
 * to anything. The files below are the upstream Roboto v51 variable-weight woff2
 * subsets (Apache-2.0, see resources/fonts/LICENSE.txt), served from the theme itself.
 * The wght axis spans 300-500, which covers every weight this stylesheet asks for.
 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300 500;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin.1404ca34.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300 500;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext.cedb374b.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Use D+H colors */
    --dh-color-primary: #e10025;
    --dh-color-secondary: #3b3b3b;
    --dh-color-background: #f5f5f5;
    --dh-color-background-dark: #3d3e40;
    /* dh-partner.com input underline color */
    --dh-color-input-border: #9e9e9e;
    /* dh-partner.com `.form-control::placeholder` is #222 — slightly darker */
    /* than the typed text (#3d3e40). */
    --dh-color-placeholder: #222;
    /* dh-partner.com `.btn-primary` hover / active fills. */
    --dh-color-primary-hover: #bf001f;
    --dh-color-primary-active: #b4001e;

    /* Reduce spacers to make a more dense layout */
    --pf-v5-global--spacer--xs: 0.25rem;
    --pf-v5-global--spacer--sm: 0.5rem;
    --pf-v5-global--spacer--md: 1rem;
    --pf-v5-global--spacer--lg: 1rem;
    --pf-v5-global--spacer--xl: 1.5rem;
    --pf-v5-global--spacer--2xl: 2rem;
    --pf-v5-global--spacer--3xl: 2.5rem;
    --pf-v5-global--spacer--4xl: 3rem;

    /* Reduce gutters to make a more dense layout */
    --pf-v5-global--gutter: 0.75rem;
    --pf-v5-global--gutter--md: 1rem;

    /* Make corners crisp */
    --pf-v5-global--BorderRadius--sm: 0px;
    --pf-v5-global--BorderRadius--lg: 30em;
}

:root {
    /* Apply custom colors to Patternfly palette */
    --pf-v5-global--primary-color--100: var(--dh-color-primary);
    --pf-v5-global--primary-color--200: var(--dh-color-primary);
    --pf-v5-global--primary-color--300: var(--dh-color-primary);
    --pf-v5-global--primary-color--400: var(--dh-color-background);
    --pf-global--primary-color--100: var(--dh-color-primary);
    --pf-global--primary-color--200: var(--dh-color-primary);
    --pf-global--primary-color--300: var(--dh-color-primary);
    --pf-global--primary-color--400: var(--dh-color-background);

    --pf-v5-global--primary-color--dark-100: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-200: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-300: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-400: var(--dh-color-background);
    --pf-global--primary-color--dark-100: var(--dh-color-primary);
    --pf-global--primary-color--dark-200: var(--dh-color-primary);
    --pf-global--primary-color--dark-300: var(--dh-color-primary);
    --pf-global--primary-color--dark-400: var(--dh-color-background);

    --pf-v5-global--secondary-color--100: var(--dh-color-secondary);
    --pf-global--secondary-color--100: var(--dh-color-secondary);

    --pf-v5-global--secondary-color--dark-100: var(--dh-color-background);
    --pf-global--secondary-color--dark-100: var(--dh-color-background);

    --pf-v5-global--active-color--100: var(--dh-color-primary);
    --pf-v5-global--active-color--200: var(--dh-color-primary);
    --pf-v5-global--active-color--300: var(--dh-color-primary);
    --pf-v5-global--active-color--400: var(--dh-color-primary);
    --pf-global--active-color--100: var(--dh-color-primary);
    --pf-global--active-color--200: var(--dh-color-primary);
    --pf-global--active-color--300: var(--dh-color-primary);
    --pf-global--active-color--400: var(--dh-color-primary);

    --pf-v5-global--link--Color: var(--dh-color-primary);
    --pf-v5-global--link--Color--hover: var(--dh-color-primary);
    --pf-global--link--Color: var(--dh-color-primary);
    --pf-global--link--Color--hover: var(--dh-color-primary);

    --pf-v5-global--link--Color--dark: var(--dh-color-primary);
    --pf-global--link--Color--dark: var(--dh-color-primary);

    --pf-v5-global--BackgroundColor--100: var(--dh-color-background);
    --pf-v5-global--BackgroundColor--300: var(--dh-color-background-dark);
    --pf-global--BackgroundColor--100: var(--dh-color-background);
    --pf-global--BackgroundColor--300: var(--dh-color-background-dark);

    --pf-v5-global--BackgroundColor--dark--100: var(--dh-color-secondary);
    --pf-global--BackgroundColor--dark--100: var(--dh-color-secondary);

    /* Use primary color for card top */
    --keycloak-card-top-color: var(--pf-v5-global--primary-color--100);
}

.login-pf.pf-v5-theme-dark .pf-v5-c-login {
    /* Fix main background color for dark mode */
    background-color: var(--pf-v5-global--BackgroundColor--dark--100);
}

/* Page background: full white (dh-partner.com renders the kontakt page on */
/* a white body, with only the header drop-shadow as a visual divider). */
body#keycloak-bg,
.pf-v5-c-login,
.pf-v5-c-login__container {
    background-color: #fff;
}

/* Page header — mimic the dh-partner.com top bar: full-width container with */
/* the D+H logo at 195x45 in the top-left, sitting 12px from the left and */
/* vertically centered in the 118px-tall header. The card below gets a */
/* matching top padding so the fixed header never overlaps it. */
#kc-header {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vw (not 100%) because PatternFly's `.pf-v5-c-login` parent applies */
    /* a transform/filter that becomes the containing block for fixed children. */
    width: 100vw;
    max-width: none;
    height: 118px;
    margin: 0;
    padding: 0;
    /* White bar with the same subtle drop shadow dh-partner.com uses. */
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
    display: flex;
    align-items: center;
    z-index: 100;
}
/* Mirror dh-partner's `.container-xxl`: centered, max 1560px, 12px lateral */
/* padding. On viewports >1584px the logo follows the centered container; */
/* on narrower viewports it sits at 12px from the viewport edge. */
#kc-header-wrapper {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 12px;
    text-align: left;
}
div.kc-logo-text {
    /* Use custom logo */
    background-image: url(../img/dh-logo.c3eaf27e.svg) !important;
    /* dh-partner.com logo dimensions: 195x45, top-left of the header bar. */
    width: 195px;
    height: 45px;
    margin: 0;
    background-position: left center;
    background-size: 195px 45px;
    background-repeat: no-repeat;
}
.pf-v5-c-login__container {
    /* Reserve room for the fixed header so the card doesn't underlap it. */
    padding-top: 118px;
}

input[type=submit] {
    /* Show pointer on submit inputs */
    cursor: pointer;
}

/* Checkboxes — dh-partner `.form-check-input`: an 18x18 square drawn from
 * scratch (appearance: none) on white with a 1px rgba(0,0,0,.25) border,
 * filling #E10025 with a white tick when checked. `accent-color` can't
 * produce this (it recolors the platform control but leaves its size,
 * corner radius and unchecked border to the OS), so the control is
 * rebuilt the same way the reference does it. */
input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-bottom: 0;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0;
    cursor: pointer;
    print-color-adjust: exact;
}

input[type=checkbox]:checked {
    background-color: var(--dh-color-primary);
    border-color: var(--dh-color-primary);
    /* Same tick path dh-partner ships. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

/* Focus ring: dh-partner uses a 0.25rem primary-tinted halo. Kept here
 * because the checkbox is otherwise indistinguishable when focused. */
input[type=checkbox]:focus-visible {
    outline: none;
    border-color: #f08092;
    box-shadow: 0 0 0 0.25rem rgba(225, 0, 37, 0.25);
}

/* Checkbox labels are 16px/24px on dh-partner — one step below body copy. */
.pf-v5-c-check__label {
    font-size: 16px;
    line-height: 24px;
    color: var(--dh-color-background-dark);
}

/*
 * PatternFly v5 c-check is a 2-column grid (input | label). With a long,
 * wrapping label (e.g. terms-acceptance, marketing-consent) the checkbox
 * defaults to the top of the first text line instead of the visual middle.
 * Pin items to the cross-axis center so the checkbox sits centered against
 * the multi-line label text.
 */
.pf-v5-c-check {
    align-items: center;
}

#kc-registration-container {
    /* Visual breathing room above the "New user? Register" link on the login page */
    margin-top: 14px;
}

/* Links — dh-partner renders body links in primary red *and underlined*.
 * Font size is deliberately not set: on the reference a link inherits its
 * surroundings, so a link in body copy is 18px while one inside a 16px
 * checkbox label is 16px. Buttons carry an `a` tag too, hence the exclusions. */
.pf-v5-c-login__main a:not(.pf-v5-c-button),
#kc-registration a,
#kc-form-options a,
#kc-info a {
    color: var(--dh-color-primary);
    text-decoration: underline;
}
.pf-v5-c-login__main a:not(.pf-v5-c-button):hover {
    color: var(--dh-color-primary-hover);
    text-decoration: underline;
}

:focus,
:focus-within,
:focus-visible,
input[type="text"]:focus,
input[type="text"]:focus-within,
input[type="text"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-within,
input[type="password"]:focus-visible {
    /* Hide the text input outline because it is rounded (for some unknown reason) */
    outline: none;
}

/* Multi-step registration wizard ------------------------------------------ */

#dh-wizard-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

#dh-wizard-stepper .dh-wizard-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    position: relative;
    color: #888;
    font-size: 0.8125rem;
}

#dh-wizard-stepper .dh-wizard-step + .dh-wizard-step::before {
    content: "";
    position: absolute;
    top: 0.875rem;
    /* 1.5rem = circle radius (0.875rem) + 0.625rem breathing room on each side. */
    right: calc(50% + 1.5rem);
    /* Subtract the stepper's flex `gap` (0.5rem) so the line ends symmetrically */
    /* — without this the left gap renders 0.5rem larger than the right gap. */
    left: calc(-50% + 1.5rem - 0.5rem);
    height: 2px;
    background: #d4d4d4;
}

#dh-wizard-stepper .dh-wizard-step.is-complete + .dh-wizard-step::before,
#dh-wizard-stepper .dh-wizard-step.is-active + .dh-wizard-step::before {
    background: var(--dh-color-primary);
}

#dh-wizard-stepper .dh-wizard-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: #d4d4d4;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    z-index: 1;
}

#dh-wizard-stepper .dh-wizard-step.is-active .dh-wizard-step-number,
#dh-wizard-stepper .dh-wizard-step.is-complete .dh-wizard-step-number {
    background: var(--dh-color-primary);
}

#dh-wizard-stepper .dh-wizard-step.is-active .dh-wizard-step-label {
    color: var(--dh-color-secondary);
    font-weight: 600;
}

.dh-wizard-step-content {
    display: flex;
    flex-direction: column;
    /* Match dh-partner.com field spacing: 25px between consecutive fields. */
    gap: 25px;
}

/* Multi-column rows inside a wizard step (e.g. street + houseNumber). */
/* Each direct child gets equal flex unless it carries a narrower field — */
/* houseNumber is constrained to ~30% so street takes the remaining width. */
/* 24px horizontal gutter — dh-partner's two-column form rows sit in a */
/* Bootstrap grid whose columns are 336px inside a 696px container. */
.dh-wizard-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.dh-wizard-row > * {
    flex: 1 1 0;
    min-width: 0;
}
.dh-wizard-row > *:has([name="houseNumber"]) {
    flex: 0 0 30%;
}

/* On phones the row collapses to a column — "Hausnummer*" placeholder is too */
/* long for a 30% column at <576px viewport width. Each field stretches to */
/* match the full-width sibling fields outside the row. */
@media (max-width: 575px) {
    .dh-wizard-row {
        flex-direction: column;
        /* Stacked, so this is now field-to-field spacing, not a gutter. */
        gap: 25px;
    }
    .dh-wizard-row > * {
        flex: 1 1 auto;
        width: 100%;
    }
    /* Hide the per-step labels — circles + connecting lines are enough on */
    /* a narrow viewport, and the labels would either wrap awkwardly or */
    /* truncate. */
    #dh-wizard-stepper .dh-wizard-step-label {
        display: none;
    }
}

#dh-wizard-buttons {
    display: flex;
    gap: 0.75rem;
}

#dh-wizard-buttons > * {
    flex: 1 1 0;
}

/* Inline field errors (server-rendered + JS-rendered via #dh-error-template).
 * dh-partner's `.invalid-feedback` is 16px #E10025, 0.25rem below the field.
 * PatternFly's default helper-text "danger" color is too desaturated for the
 * D+H palette — pin to the primary red so wizard errors match the rest of the
 * brand chrome. */
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-helper-text__item-text.pf-m-error,
.pf-v5-c-helper-text__item-icon.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-icon {
    color: var(--dh-color-primary);
}
.pf-v5-c-helper-text,
.pf-v5-c-helper-text__item,
.pf-v5-c-helper-text__item-text {
    font-size: 16px;
    line-height: 24px;
}
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text {
    margin-top: 4px;
}

/* ===================================================================
 * dh-partner.com style alignment
 *
 * Visual signature measured off https://www.dh-partner.com/de/de/kontakt
 * (computed styles, 1440px viewport):
 *   - Body copy: Roboto 400, 18px/27px, color #3D3E40, white background
 *   - Headings: Roboto Light 300, color #3D3E40 —
 *     h1 45px/60px UPPERCASE, h2 34px/45px, h3 26px/36px
 *   - Inputs/selects: white bg, underline-only (1px #9E9E9E),
 *     no border-radius, 52px tall, padding 12px 0, 18px/27px text,
 *     and 25px of space below each field
 *   - Placeholders: #222 at full opacity
 *   - Textareas: same colors but full 1px box border, padding 14px 18px,
 *     resize disabled
 *   - Checkboxes: 18x18, square, 1px rgba(0,0,0,.25) border on white;
 *     checked = #E10025 fill with a white tick. Their labels are 16px/24px.
 *   - Buttons: 16px/24px Roboto 400, padding 12px 20px, 1px border, no
 *     radius, no text-transform (so 50px tall). `.btn-primary` is a solid
 *     #E10025 fill (hover #BF001F, active #B4001E); `.btn-outline-primary`
 *     is transparent with a #E10025 border and red text, filling solid red
 *     with white text on hover. Both transition colors over 0.15s ease-in-out.
 *   - Links: #E10025, underlined, inheriting the surrounding font size
 *   - Inline errors: 16px, #E10025, 4px below the field
 *   - No labels above fields — placeholders only, with `*` suffix for required.
 *     Labels stay sr-only for screen readers
 *     (label-to-placeholder copy is done by dh-placeholder-labels.js).
 *
 * Deliberate deviation: dh-partner's inputs show no focus indication at all
 * (the Bootstrap `:focus` ring is overridden away, so a focused field keeps
 * the same grey underline). That fails WCAG 2.4.7, so this theme keeps its
 * red focus underline instead of copying the reference exactly.
 *
 * PatternFly v5 form-control structure (from attributes-v2 parent theme):
 *   <span class="pf-v5-c-form-control"><input ...></span>
 * The underline is rendered by `::after` on the wrapper span, not by a
 * border on the input itself. Override the wrapper + the inner input.
 * ================================================================ */

.pf-v5-c-login,
.pf-v5-c-login__main,
.pf-v5-c-form,
.pf-v5-c-form-control,
.pf-v5-c-button,
#kc-form,
#kc-register-form {
    font-family: 'Roboto', sans-serif;
}

/* Base copy size. dh-partner.com sets 18px/27px on <body> and lets almost */
/* everything inherit it; PatternFly ships 16px/24px. Set it on the card so */
/* body text, links and anything unstyled picks up the dh-partner scale. */
/* Elements the reference sizes explicitly (checkbox labels at 16px, inline */
/* errors at 16px) are pinned separately below and are unaffected. */
body#keycloak-bg,
.pf-v5-c-login__main {
    font-size: 18px;
    line-height: 27px;
    color: var(--dh-color-background-dark);
}

/* PatternFly shrinks the footer/registration bands to 14px. dh-partner has */
/* no such small-print step — these inherit the 18px base instead. */
#kc-registration,
#kc-registration-container,
#kc-form-options,
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item {
    font-size: inherit;
    line-height: inherit;
}

/* Match dh-partner.com field spacing: each `.form-control` there carries */
/* `margin-bottom: 25px`, i.e. 25px between consecutive fields. */
/* PatternFly's .pf-v5-c-form is a CSS grid; overriding gap here covers the */
/* login form. The wizard uses .dh-wizard-step-content (handled below). */
.pf-v5-c-form {
    gap: 25px;
    row-gap: 25px;
}

/* Page title (Sign in / Register) — Roboto Light on the dh-partner heading */
/* scale. The card title maps to the site's h2 step (34px/45px): its h1 is */
/* 45px uppercase, which is sized for a full-width page banner and would */
/* wrap the longer localized titles inside a ~480px card. */
.pf-v5-c-login__main-header-title,
.pf-v5-c-login__main-header h1,
#kc-page-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 34px;
    line-height: 45px;
    color: var(--dh-color-background-dark);
}

/* Underline color on the wrapper's ::after pseudo. dh-partner inputs stay at */
/* a 1px line in every state and have no hover effect — only :focus changes */
/* the color to primary red. */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--after--BorderBottomColor: var(--dh-color-input-border);
    --pf-v5-c-form-control--m-focus--after--BorderBottomColor: var(--dh-color-primary);
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--dh-color-input-border);
    --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--dh-color-input-border);
    background-color: #fff;
}

/* Belt-and-suspenders override in case the custom properties aren't honored. */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control:hover::after {
    border-bottom-color: var(--dh-color-input-border);
    border-bottom-width: 1px;
}
.pf-v5-c-form-control:focus-within::after {
    border-bottom-color: var(--dh-color-primary);
    /* Lock width at 1px — PatternFly defaults thicken to 2px on focus, */
    /* which dh-partner doesn't do. */
    border-bottom-width: 1px;
}

/* PatternFly v5 also renders a faint top/right/left frame via ::before */
/* (1px solid #F0F0F0). dh-partner inputs are underline-only — suppress it. */
.pf-v5-c-form-control::before {
    border: 0;
}

/* Error state: red underline. */
.pf-v5-c-form-control:has(input[aria-invalid="true"])::after,
.pf-v5-c-form-control:has(select[aria-invalid="true"])::after,
.pf-v5-c-form-control:has(textarea[aria-invalid="true"])::after,
.pf-v5-c-form-control.pf-m-error::after {
    border-bottom-color: var(--dh-color-primary);
}

/* Inputs and selects inside the wrapper: dh-partner sizing (52px / 18px). */
.pf-v5-c-form-control input,
.pf-v5-c-form-control select {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 27px;
    height: 52px;
    padding: 12px 0;
    color: var(--dh-color-background-dark);
}

/* The page-header language switcher (#login-select-toggle) shares the */
/* form-control wrapper with form fields. It's not a form field, so suppress */
/* its underline + tighten the chevron-to-text gap (the wrapper otherwise */
/* sizes to fit the longest option, leaving extra space when "English" is */
/* selected and "Deutsch" is the longer option). */
.pf-v5-c-form-control:has(#login-select-toggle)::after,
.pf-v5-c-form-control:has(#login-select-toggle)::before {
    border: 0;
}
.pf-v5-c-form-control:has(#login-select-toggle) {
    width: max-content;
}
#login-select-toggle {
    /* 8px is enough room for the 16px chevron at right + 4px breathing room. */
    padding-right: 24px !important;
    background-position: calc(100% - 4px) 50% !important;
}

/* Right-align the language switcher so its right edge sits at the same */
/* 32px inset from the card edge as the title's left edge. PatternFly */
/* extends `__main-header-utilities` 16px into the header's padding-right, */
/* so we counter that with our own padding-right. */
.pf-v5-c-login__main-header-utilities {
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
}

/* Header layout: title and language switcher always share one row at every */
/* viewport width — the switcher must never wrap onto its own line. */
.pf-v5-c-login__main-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.pf-v5-c-login__main-header-utilities {
    flex-shrink: 0;
}

/* Replace PatternFly's FontAwesome chevron with the same Bootstrap-5 chevron */
/* SVG dh-partner uses (16x12, stroke `--dh-color-background-dark`, positioned */
/* 12px from the right, vertically centered). */
.pf-v5-c-form-control:has(select) .pf-v5-c-form-control__utilities {
    display: none;
}
.pf-v5-c-form-control select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    background-size: 16px 12px;
    /* Reserve room on the right so the placeholder/value never overlaps the chevron. */
    padding-right: 36px;
}

.pf-v5-c-form-control input::placeholder,
.pf-v5-c-form-control textarea::placeholder {
    /* dh-partner `.form-control::placeholder` — #222 at full opacity. */
    color: var(--dh-color-placeholder);
    opacity: 1;
}

/* Textareas: full box border (matches dh-partner contact-form pattern). */
.pf-v5-c-form-control:has(textarea),
textarea.pf-v5-c-form-control {
    border: 1px solid var(--dh-color-input-border);
    border-radius: 0;
    padding: 14px 18px;
}
.pf-v5-c-form-control:has(textarea)::after,
textarea.pf-v5-c-form-control::after {
    /* Suppress the underline pseudo when the wrapper is a full-box textarea. */
    border: 0;
}
.pf-v5-c-form-control textarea {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 27px;
    color: var(--dh-color-background-dark);
    /* dh-partner sets `resize: none` on its textareas. */
    resize: none;
}

/* Hide labels above text/select inputs (placeholders take their role). */
/* sr-only pattern keeps them announced by screen readers. */
.pf-v5-c-form__group-label,
.pf-v5-c-form__group .pf-v5-c-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Buttons — dh-partner `.btn` metrics: 16px/24px Roboto 400, padding
 * 12px 20px over a 1px border, square corners, no text-transform. That
 * works out to a 50px-tall control (12 + 24 + 12 + 2). Height is left to
 * the padding rather than pinned, so a button whose label wraps grows
 * instead of clipping.
 *
 * Use flex so the label is centered on both axes — secondary buttons render
 * as <a> elements, which would otherwise leave the text at the top of the box.
 */
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary,
input[type="submit"].pf-v5-c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 0;
    letter-spacing: normal;
    text-transform: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Primary — dh-partner `.btn-primary`: solid #E10025 fill, white label. */
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button.pf-m-primary {
    background-color: var(--dh-color-primary);
    border-color: var(--dh-color-primary);
    color: #fff;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
input[type="submit"].pf-v5-c-button.pf-m-primary:hover,
input[type="submit"].pf-v5-c-button.pf-m-primary:focus {
    background-color: var(--dh-color-primary-hover);
    border-color: var(--dh-color-primary-hover);
    color: #fff;
}
.pf-v5-c-button.pf-m-primary:active,
input[type="submit"].pf-v5-c-button.pf-m-primary:active {
    background-color: var(--dh-color-primary-active);
    border-color: var(--dh-color-primary-active);
    color: #fff;
}

/* Secondary — dh-partner `.btn-outline-primary`: transparent with a red
 * border and red label, filling solid red with a white label on hover.
 * PatternFly draws its own outline via `::before`; suppress that so the
 * real border above is the only frame. */
.pf-v5-c-button.pf-m-secondary {
    background-color: transparent;
    border-color: var(--dh-color-primary);
    color: var(--dh-color-primary);
}
.pf-v5-c-button.pf-m-secondary::before {
    border: 0;
}
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-secondary:focus,
.pf-v5-c-button.pf-m-secondary:active {
    background-color: var(--dh-color-primary);
    border-color: var(--dh-color-primary);
    color: #fff;
}

/* Marketing consent — no-JS fallback for the auto-rendered userprofile copy. */
/* The custom checkbox in register.ftl is commented out pending the Marketing + */
/* Legal sign-off, and dh-register-marketingConsent.js removes the copy the     */
/* userprofile system renders on its own. That removal is client-side only, so  */
/* with JavaScript disabled the unapproved consent wording would still paint.   */
/* `:not([data-dh-custom])` deliberately spares the custom block, so this rule  */
/* stays correct once that block is uncommented again.                          */
#kc-register-form .pf-v5-c-form__group:not([data-dh-custom]):has([name="marketingConsent"]),
#kc-update-profile-form .pf-v5-c-form__group:not([data-dh-custom]):has([name="marketingConsent"]) {
    display: none;
}

/* Show / hide password toggle (the eye icon next to password inputs). */
/* PatternFly's `pf-m-control` modifier paints a light-grey chip background; */
/* dh-partner doesn't have one, so flatten it to a plain icon button — but */
/* keep a 1px bottom border so the underline visually continues under the */
/* button to match the password field's underline (and turns red on focus). */
.pf-v5-c-button.pf-m-control {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dh-color-input-border);
    border-radius: 0;
    box-shadow: none;
}
.pf-v5-c-input-group:focus-within .pf-v5-c-button.pf-m-control {
    border-bottom-color: var(--dh-color-primary);
}
.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
    border: 0;
    background: transparent;
}