/*
 * pcu-webinar-signup — CME guest signup form (Figma "Webinar-Linimed", Anmelde-flow).
 *
 * HUMAN-OWNED. In 00_public on purpose, unlike the other pcu-* sheets in 01_user: the form
 * lives on public landing pages, anonymous visitors only download the public bundle.
 * The page must also load Inter (src/css/fonts/inter.css) — nothing in the product does yet.
 */

pcu-webinar-signup {
    display: block;
    min-inline-size: 0;
    max-inline-size: 438px;
    font-family: var(--uui-font-family);
    color: var(--uui-text-primary);
}

.pcu-webinar-signup__card {
    position: relative;
    box-sizing: border-box;
    padding: var(--uui-spacing-3xl);
    background: var(--uui-bg-primary);
    border-radius: var(--uui-radius-xl);
}

.pcu-webinar-signup__close {
    position: absolute;
    inset-block-start: var(--uui-spacing-xl);
    inset-inline-end: var(--uui-spacing-xl);
}

.pcu-webinar-signup__form,
.pcu-webinar-signup__fields,
.pcu-webinar-signup__footer {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.pcu-webinar-signup__form {
    gap: var(--uui-spacing-2xl);
}

.pcu-webinar-signup__fields {
    gap: var(--uui-spacing-xl);
}

.pcu-webinar-signup__head {
    display: flex;
    text-align: start;
    flex-direction: column;
    gap: var(--uui-spacing-xxs);
    padding-inline-end: var(--uui-spacing-4xl);
}

.pcu-webinar-signup__title,
.pcu-webinar-signup__subtitle,
.pcu-webinar-signup__privacy,
.pcu-webinar-signup__success-title,
.pcu-webinar-signup__success-text {
    margin: 0;
}

.pcu-webinar-signup__subtitle,
.pcu-webinar-signup__privacy,
.pcu-webinar-signup__success-text {
    color: var(--uui-text-tertiary);
}

/* Title select (narrow) beside the first name, as drawn. */
.pcu-webinar-signup__name-row {
    display: grid;
    grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
    gap: var(--uui-spacing-xl);
}

/*
 * Form controls carry Figma's 320px on __root and __input (skill uui, using-components §3);
 * the generated rules outweigh a plain class, the documented exception is !important.
 */
pcu-webinar-signup uui-input-field,
pcu-webinar-signup uui-select,
pcu-webinar-signup uui-input-field .uui-input-field__root,
pcu-webinar-signup uui-input-field .uui-input-field__input,
pcu-webinar-signup uui-select .uui-select__root,
pcu-webinar-signup uui-select .uui-select__input {
    inline-size: 100% !important;
    min-inline-size: 0;
}

/* "Bitte wählen" stays on one line in the narrow title select. */
/* Same attribute weight as the generated rule plus host and class, so no !important. */
pcu-webinar-signup .pcu-webinar-signup__title-select[data-uui-component="select"][size][type][state] .uui-select__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * Error text under a field. Core 27 imports the destructive hint only for some states, so
 * the default field would show the message unstyled; this mirrors the generated rule.
 */
pcu-webinar-signup uui-input-field[destructive="true"] .uui-input-field__hint {
    display: block;
    margin: 0;
    font-family: var(--uui-font-family), sans-serif;
    font-size: var(--uui-text-sm-font-size);
    font-weight: var(--uui-font-weight-regular);
    line-height: var(--uui-text-sm-line-height);
    color: var(--uui-text-error-primary);
}

/* The consent sentence is body text in Figma, not a semibold checkbox label. */
pcu-webinar-signup .pcu-webinar-signup__consent[data-uui-component="checkbox"][checked][indeterminate][size][type][text][state] .uui-checkbox__label {
    font-weight: var(--uui-font-weight-regular);
    color: var(--uui-text-tertiary);
}

.pcu-webinar-signup__consent {
    display: block;
}

.pcu-webinar-signup__footer {
    align-items: center;
    gap: var(--uui-spacing-lg);
    padding-block-start: var(--uui-spacing-2xl);
    border-block-start: 1px solid var(--uui-border-secondary);
    text-align: center;
}

.pcu-webinar-signup__footer uui-alert {
    align-self: stretch;
    text-align: start;
}

.pcu-webinar-signup__privacy a {
    color: var(--uui-text-brand-secondary);
}

/* Honeypot: off-screen, not display:none — some bots skip hidden fields. */
.pcu-webinar-signup__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    left: -10000px;
}

.pcu-webinar-signup__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uui-spacing-lg);
    padding-block: var(--uui-spacing-xl);
    text-align: center;
}

.pcu-webinar-signup__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--uui-spacing-xl);
}

.pcu-webinar-signup__skeleton-line {
    display: block;
    block-size: 40px;
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-secondary);
    animation: pcu-webinar-signup-pulse 1.4s ease-in-out infinite;
}

.pcu-webinar-signup__skeleton-line:first-child {
    block-size: 48px;
    inline-size: 70%;
}

@keyframes pcu-webinar-signup-pulse {
    50% {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    pcu-webinar-signup {
        max-inline-size: none;
    }

    .pcu-webinar-signup__card {
        padding: var(--uui-spacing-xl);
    }
}

/* Legacy mobile CSS centres every h2; the form heading stays left-aligned as drawn. */
pcu-webinar-signup .pcu-webinar-signup__head .pcu-webinar-signup__title {
    text-align: start;
}

/* Long consent sentence: let the text column shrink instead of pushing past the card. */
pcu-webinar-signup .pcu-webinar-signup__consent .uui-checkbox__root,
pcu-webinar-signup .pcu-webinar-signup__consent .uui-checkbox__text-wrap {
    min-inline-size: 0;
    max-inline-size: 100%;
}