/*
 * <pcu-cme-signup-form> (protected/TS/src/ExtraComponents/Pcu/PcuCmeSignupForm.ts).
 * In 00_public, unlike the other Pcu*.css in 01_user: its first user is a public landing page
 * for anonymous visitors, who never receive the 01_user bundle.
 * UUI tokens only (--uui-*), no --rd-*.
 *
 * Values are Figma `Webinar-Linimed` → Anmelde-flow (9161:10487 desktop, 9161:10436 mobile),
 * hard-coded where the library has no token for them (owner request 2026-10-19: 1:1 with Figma).
 * Generated rules carry four to eight attribute selectors; where a value must beat them inside
 * a control, it takes !important — the documented exception in skill uui (using-components.md).
 */

pcu-cme-signup-form {
    display: block;
    inline-size: 100%;
}

.pcu-cme-signup-form {
    --uui-stack-gap: 24px;
    /* Figma's field border and placeholder grey; the legacy theme would make them lighter. */
    --uui-border-primary: #d4d4d4;
    --uui-text-placeholder: #737373;
}

/* Titel (145px, mobile 111px) and Vorname share a row. */
.pcu-cme-signup-form__row {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 24px;
}

.pcu-cme-signup-form__field {
    display: grid;
    /* The row stretches this field to the taller neighbour (Vorname with an error); without this its tracks stretch too and push the control down. */
    align-content: start;
    gap: 16px;
    min-inline-size: 0;
}

.pcu-cme-signup-form__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--uui-color-brand-900);
    cursor: default;
}

.pcu-cme-signup-form__optional {
    font-weight: 400;
    /* color: #525252; */
}

/*
 * Figma draws the controls 320px wide on two parts (__root and the field/__input); the form
 * decides the width.
 */
.pcu-cme-signup-form uui-input-field,
.pcu-cme-signup-form uui-select,
.pcu-cme-signup-form .uui-input-field__root,
.pcu-cme-signup-form .uui-input-field__input,
.pcu-cme-signup-form .uui-select__root,
.pcu-cme-signup-form .uui-select__field,
.pcu-cme-signup-form .uui-select__input {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

/*
 * Library gap (2026-10-22): the generator emits the menu scrollbar at Figma's absolute
 * `inset-inline-start: 302px` (320px frame − 14px bar − 4px), so in a menu wider than 320px
 * (Einrichtungstyp) it floats mid-list. Pin it to the right edge instead. Remove once the
 * translator emits right-pinned layers as `inset-inline-end` (skill uui, traps.md → A).
 */
.pcu-cme-signup-form .uui-select__scrollbar {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
}

/* Text fields: Figma's site input — 40px, 16px left inset, 14px text, no shadow, 4px corners. */
.pcu-cme-signup-form .uui-input-field__input {
    padding-inline: 16px 4px !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.pcu-cme-signup-form .uui-input-field__value {
    font-size: 14px !important;
    line-height: normal !important;
}

/* The title dropdown is Core 27's Select: 8px corners, 16px text, shadow-xs stay. */
.pcu-cme-signup-form uui-select {
    --uui-radius-md: 8px;
}

/*
 * Selected text is cut with an ellipsis instead of wrapping or pushing the chevron out (the 145px
 * Titel control, mobile 111px). The library sets `white-space: normal` in the placeholder state, hence !important.
 */
.pcu-cme-signup-form .uui-select__value-wrap {
    flex: 1 1 auto;
    min-inline-size: 0 !important;
}

.pcu-cme-signup-form .uui-select__value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pcu-cme-signup-form .uui-select__trailing-icon {
    flex-shrink: 0;
}

/* Helper text under a field (EFN): Figma's 12px grey, tighter than the library's sm text. */
.pcu-cme-signup-form uui-input-field[destructive="false"] .uui-input-field__hint {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #525252 !important;
}

/*
 * Library gap (2026-10-16): the published slice has no hint rule for type=default with
 * destructive=true (only date-and-time has one), so the error text renders unstyled.
 * Mirrors the generated date-and-time rule. Remove once the input-field slice covers it.
 */
.pcu-cme-signup-form uui-input-field[destructive="true"] .uui-input-field__hint {
    margin: 0;
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
    color: var(--uui-text-error-primary);
}

/* Consent: 18px box with a 2px border, 16px gap, 14px text in brand-900; "(optional)" leads the label. */
.pcu-cme-signup-form .uui-checkbox__root {
    inline-size: 100% !important;
    gap: 16px !important;
}

.pcu-cme-signup-form .uui-checkbox__input-wrap {
    padding-block-start: 0 !important;
}

.pcu-cme-signup-form .uui-checkbox__indicator {
    inline-size: 18px !important;
    block-size: 18px !important;
    border-width: 2px !important;
    border-radius: 2px !important;
}

.pcu-cme-signup-form .uui-checkbox__text-wrap {
    display: block !important;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pcu-cme-signup-form .uui-checkbox__label {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    /* color: var(--uui-color-brand-900) !important; */
}

/* Privacy notice above the button: a rule over it, centred, 14/20 grey. */
.pcu-cme-signup-form__notes {
    margin: 0;
    padding-block-start: 24px;
    border-block-start: 1px solid #d4d4d4;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #6b7280 !important;
    padding-bottom: 8px;
}

.pcu-cme-signup-form__notes a {
    color: var(--uui-text-brand-secondary);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.pcu-cme-signup-form__hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/*
 * The dialog around the form. `UuiModalDialog` is shared by every UUI dialog, so this dialog's
 * Figma frame is applied only where the surface contains the form. The leading
 * `[data-uui-component]` attributes outweigh the generated rules without !important.
 *
 * Shell gap (2026-10-16): the uui-modal host has no block-size limit, so .uui-modal__root's
 * max-block-size: 100% resolves to none; a dialog taller than the viewport grows past it and the
 * centred stage cuts off its head unreachably. Scoped to this dialog until UuiModalHost.css fixes
 * it for all UUI dialogs: cap the host, let the body scroll.
 */
.uui-modal-overlay__stage uui-modal:has(pcu-cme-signup-form) {
    display: flex;
    max-block-size: 100%;
}

/* Surface: 600px, 16px corners. */
[data-uui-component="modal"]:has(pcu-cme-signup-form)[type][breakpoint] .uui-modal__root {
    min-block-size: 0;
    max-inline-size: 600px;
    border-radius: 16px;
}

/* Head: close button on its own 36px row at 24px, then heading and webinar title, 24px to the form. */
[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__content {
    padding: 60px 24px 0;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__close {
    top: 24px;
    right: 24px;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__text-group {
    gap: 8px;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
    color: var(--uui-color-brand-900);
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__supporting {
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #525252;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__spacer {
    block-size: 24px;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__divider {
    display: none;
}

/* Footer: no rule of its own (the notice carries it), one 300px primary button centred 10px under the notice. */
[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__root {
    /* padding-block-start: 10px; */
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__divider-wrap {
    display: none;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__content {
    padding: 0 24px 24px;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__actions {
    justify-content: center;
}

/* Rounded like the page's own CTAs (rd-primary-btn: --rd-borderradius-border-xl, 24px), not Figma's 8px (owner request 2026-10-26). */
[data-uui-component="modal"]:has(pcu-cme-signup-form) .uui-modal-actions__action {
    --uui-radius-md: 24px;
    display: block;
    inline-size: 300px;
}

[data-uui-component="modal"]:has(pcu-cme-signup-form) .uui-modal-actions__action > .uui-button__control {
    inline-size: 100% !important;
    /* The inner stroke (::before) carries its own radius, generated as a literal 8px. */
    --uui-stroke-radius: 24px !important;
}

/* Mobile: bottom sheet — full width, top corners only, 16px inset, the notice's rule edge to edge. */
@media (max-width: 560px) {
    [data-uui-component="modal-overlay"] .uui-modal-overlay__stage:has(pcu-cme-signup-form) {
        align-items: flex-end;
        padding: 16px 0 0;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form)[type][breakpoint] .uui-modal__root {
        max-inline-size: none;
        border-radius: 16px 16px 0 0;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) .uui-modal__body {
        --uui-modal-body-padding-inline: 16px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__content {
        padding: 60px 16px 0;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__close {
        right: 16px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__text-group {
        gap: 4px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__heading {
        font-size: 18px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__supporting {
        font-size: 14px;
        line-height: 1.32;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__root {
        /* padding-block-start: 16px; */
    }

    .pcu-cme-signup-form__notes {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__content {
        padding: 0 16px 24px;
    }

    [data-uui-component="modal"]:has(pcu-cme-signup-form) .uui-modal-actions__action {
        inline-size: 100%;
    }

    .pcu-cme-signup-form__row {
        grid-template-columns: 111px minmax(0, 1fr);
    }
}

/*
 * Confirmation after a signup (WebinarLandingSignup.showSuccess). Figma `Webinar-Linimed`
 * 9161:10473: one 375px card at every width — 16px corners, 24px/16px padding, close button
 * on its own row, 96px illustration, 18/14px text in brand-900, one full-width primary button.
 */
[data-uui-component="modal"]:has(.pcu-cme-signup-success)[type][breakpoint] .uui-modal__root {
    max-inline-size: 375px;
    border-radius: 16px;
}

/* The body is short and the card sizes to it; the library's overflow-y: auto only ever showed a scrollbar here. */
[data-uui-component="modal"]:has(.pcu-cme-signup-success) .uui-modal__body {
    --uui-modal-body-padding-inline: 16px;
    overflow-y: visible;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__content {
    padding: 24px 16px 0;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__close {
    top: 24px;
    right: 16px;
}

/* No heading: the body carries the title. The close button keeps its 36px row. */
[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-header"][type][breakpoint] :is(.uui-modal-header__text-group, .uui-modal-header__spacer, .uui-modal-header__divider) {
    display: none;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-header"][type][breakpoint] .uui-modal-header__content {
    min-block-size: 60px;
}

.pcu-cme-signup-success {
    display: grid;
    justify-items: center;
    /* Title and text sit 8px apart, the icon 16px above them. */
    gap: 8px;
    text-align: center;
    color: var(--uui-color-brand-900);
}

.pcu-cme-signup-success__icon {
    display: block;
    inline-size: 96px;
    block-size: 96px;
    margin-block-end: 8px;
}

.pcu-cme-signup-success__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 29px;
}

.pcu-cme-signup-success__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* Footer: no rule, the button spans the 16px-inset width. */
[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__divider-wrap {
    display: none;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__content {
    padding: 24px 16px;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) [data-uui-component="modal-actions"][type][destructive][breakpoint] .uui-modal-actions__actions {
    justify-content: stretch;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) .uui-modal-actions__action {
    --uui-radius-md: 24px; /* as the form's button above */
    display: block;
    inline-size: 100%;
}

[data-uui-component="modal"]:has(.pcu-cme-signup-success) .uui-modal-actions__action > .uui-button__control {
    inline-size: 100% !important;
    /* The inner stroke (::before) carries its own radius, generated as a literal 8px. */
    --uui-stroke-radius: 24px !important;
}

/* Form-wide server message (webinar not bookable, reload needed); field messages sit under their field. */
.pcu-cme-signup-form__server-error {
    margin: 0;
    color: var(--uui-text-error-primary);
    font-size: 14px;
    line-height: 20px;
}