/* Root scroll locking lives in base.css; body overflow:hidden would reparent sticky headers. */
/* Native dialogs keep their feature-owned focus, coordination and animations. */
.child-ui-modal {
    --child-ui-modal-width: 38rem;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: min(var(--child-ui-modal-width), calc(100% - 2rem));
    max-width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--child-color-border-light, #e9ecef);
    border-radius: var(--child-radius-surface, 8px);
    background: var(--child-color-dialog-bg, #fff);
    color: var(--child-color-text, #333);
    box-shadow: 0 1rem 4rem rgb(var(--child-color-shadow-rgb, 0 0 0) / 20%);
    text-align: left;
}
.child-ui-modal[open] { display: flex; flex-direction: column; }

/* Opened from a drawer: same dialog motion; the drawer's backdrop is handed over instead of fading. */
.child-ui-modal.child-ui-modal--handoff-fade[open] {
    animation: child-ui-modal-in var(--child-ui-modal-duration, 250ms) ease-out both;
}
.child-ui-modal.child-ui-modal--handoff-fade[open]:not(.has-drawer-backdrop)::backdrop {
    animation: child-ui-modal-fade-in var(--child-ui-modal-duration, 250ms) ease-out both;
}
#child-mini-cart[open].is-sharing-handoff::backdrop,
#child-wishlist[open].is-sharing-handoff::backdrop {
    animation: none;
    opacity: 1;
}
.child-ui-modal::backdrop { background: rgb(var(--child-color-backdrop-rgb, 0 0 0) / 40%); }

/*
 * Dialog system: one look, one motion, four fixed desktop sizes (width x height).
 *   --s  short confirmations      --m  forms (contact, share)
 *   --l  rich content (product dialogs, sample order, cart edit)      --xl  legal texts
 * Without a size class a dialog is "m". Drawers (--drawer) keep their own slide-in.
 */
.child-ui-modal {
    --child-ui-modal-duration: 250ms;
    --child-ui-modal-offset: 24px;
    --child-ui-modal-height: 36rem;
}
.child-ui-modal--s { --child-ui-modal-width: 28rem; --child-ui-modal-height: 18rem; }
.child-ui-modal--m { --child-ui-modal-width: 40rem; --child-ui-modal-height: 36rem; }
.child-ui-modal--l { --child-ui-modal-width: 52rem; --child-ui-modal-height: 44rem; }
.child-ui-modal--xl { --child-ui-modal-width: 64rem; --child-ui-modal-height: 52rem; }
.child-ui-modal:not(.child-ui-modal--drawer):not(.child-ui-modal--s):not(.child-ui-modal--l):not(.child-ui-modal--xl) { --child-ui-modal-width: 40rem; }
@media (min-width: 768px) {
    .child-ui-modal:not(.child-ui-modal--drawer) {
        width: min(var(--child-ui-modal-width), calc(100% - 4rem));
        height: min(var(--child-ui-modal-height), calc(100vh - 4rem));
        height: min(var(--child-ui-modal-height), calc(100dvh - 4rem));
    }
}
.child-ui-modal:not(.child-ui-modal--drawer):not([open]) { display: none; }
.child-ui-modal:not(.child-ui-modal--drawer):not(.child-ui-modal--transition):not(.child-ui-modal--handoff-fade)[open] {
    animation: child-ui-modal-in var(--child-ui-modal-duration) ease-out both;
}
.child-ui-modal:not(.child-ui-modal--drawer):not(.child-ui-modal--transition):not(.child-ui-modal--handoff-fade)[open]::backdrop {
    animation: child-ui-modal-fade-in var(--child-ui-modal-duration) ease-out both;
}
.child-ui-modal:not(.child-ui-modal--drawer):not(.child-ui-modal--transition)[open].is-closing {
    animation: child-ui-modal-out var(--child-ui-modal-duration) ease-in both;
}
.child-ui-modal:not(.child-ui-modal--drawer):not(.child-ui-modal--transition)[open].is-closing::backdrop {
    animation: child-ui-modal-fade-out var(--child-ui-modal-duration) ease-in both;
}
/* Open: fade in while sliding up from slightly below. Close: fade out while sliding back down. */
@keyframes child-ui-modal-in { from { opacity: 0; transform: translateY(var(--child-ui-modal-offset)); } to { opacity: 1; transform: none; } }
@keyframes child-ui-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--child-ui-modal-offset)); } }
@keyframes child-ui-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes child-ui-modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .child-ui-modal, .child-ui-modal::backdrop { --child-ui-modal-duration: 1ms; --child-ui-modal-offset: 0px; }
}

/* Text content (legal pages, product dialogs) behaves the same in every dialog. */
.child-ui-modal__body { overflow-wrap: anywhere; }
.child-ui-modal__body > :first-child { margin-top: 0; }
.child-ui-modal__body > :last-child { margin-bottom: 0; }
.child-ui-modal__body :is(img, video, iframe, svg, canvas) { max-width: 100%; }
.child-ui-modal__body :is(img, video) { height: auto; }
.child-ui-modal__body :is(pre, table) { max-width: 100%; overflow-x: auto; }
.child-ui-modal__close .ti { display: block; font-size: 24px; }
/* Drawers (cart, wishlist, account) slide in from the right; one duration for all, read by their scripts too. */
.child-ui-modal--drawer {
    --child-ui-drawer-duration: 220ms;
    inset: 0 0 0 auto;
    width: min(440px, 100%);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: -8px 0 32px rgb(var(--child-color-shadow-rgb, 0 0 0) / 15%);
}
/*
 * Every dialog: header (fixed) → .child-ui-modal__body (the only scroll area) → footer with CTAs (fixed, optional).
 * Header and footer stay put because the dialog is a flex column and only the body may scroll.
 */
.child-ui-modal__header, .child-ui-modal__footer {
    flex: 0 0 auto;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    background: var(--child-color-dialog-bg, #fff);
}
.child-ui-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.child-ui-modal__header h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; }
/*
 * Drawer headings start with the header icon that opens them, on the header's light hover-pill background.
 * The pill is a wrapper: the icon itself is a CSS mask and cannot carry its own background.
 */
.child-ui-modal__header h2:has(.child-ui-modal__title-icon) { display: flex; align-items: center; gap: .75rem; }
.child-ui-modal__title-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgb(var(--child-color-surface-hover-rgb, 0 0 0) / 5%);
    color: var(--child-color-header-link, var(--child-header-icon-color, currentColor));
}
.child-ui-modal__title-icon .ti { font-size: 24px; }
.child-ui-modal__footer { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--child-color-border-light, #e9ecef); }
.child-ui-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.child-ui-modal__body::-webkit-scrollbar { display: none; }
/* Wrappers must shrink rather than introducing a second scroll surface. */
.child-ui-modal__content, .child-ui-modal .child-ui-modal__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
}
.child-ui-modal__close {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--child-radius-control, 5px);
    background: transparent;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
}
.child-ui-modal__close:hover { background: var(--child-color-surface-hover, #f1f3f5); }
.child-ui-modal [hidden] { display: none !important; }
.child-ui-modal :focus-visible, .child-ui-button:focus-visible { outline: 2px solid var(--child-color-field-focus, #228be6); outline-offset: 3px; }
.child-ui-modal__cta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; min-width: 0; }
.child-ui-modal__cta [role="status"] { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; text-align: center; }
.child-ui-modal__cta [role="status"]:empty { display: none; }
.child-ui-modal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.child-ui-modal__actions > .child-ui-button { width: 100%; min-width: 0; margin: 0; }
.child-ui-button,
.child-ui-modal .child-ui-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.child-ui-button.child-ui-button--primary,
.child-ui-modal .child-ui-button.child-ui-button--primary,
.child-ui-modal .child-ui-modal__form .child-ui-button.child-ui-button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--child-color-primary, #228be6);
    border-radius: 5px;
    background: var(--child-color-primary, #228be6);
    color: var(--child-color-primary-text, #fff);
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.child-ui-button.child-ui-button--primary:hover,
.child-ui-modal .child-ui-button.child-ui-button--primary:is(:hover, :focus),
.child-ui-modal .child-ui-modal__form .child-ui-button.child-ui-button--primary:is(:hover, :focus) { background: var(--child-color-primary-hover, #1c7ed6); border-color: var(--child-color-primary-hover, #1c7ed6); color: var(--child-color-primary-text, #fff); }
.child-ui-button.child-ui-button--primary:disabled,
.child-ui-button.child-ui-button--primary[aria-disabled="true"],
.child-ui-modal .child-ui-button.child-ui-button--primary:is(:disabled, [aria-disabled="true"]),
.child-ui-modal .child-ui-modal__form .child-ui-button.child-ui-button--primary:is(:disabled, [aria-disabled="true"]) { background: var(--child-color-primary, #228be6); border-color: var(--child-color-primary, #228be6); color: var(--child-color-primary-text, #fff); opacity: .5; cursor: not-allowed; }
.child-ui-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--child-color-text-muted, #bfc3c7);
}
.child-ui-hint .child-ui-hint__trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    float: none;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--child-radius-control, 3px);
    background: transparent;
    color: var(--child-color-text-muted, #bfc3c7);
    box-shadow: none;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.child-ui-hint .child-ui-hint__trigger .ti { display: block; font-size: 20px; }
.child-ui-hint__panel .child-ui-hint__close {
    display: block;
    float: none;
    width: auto;
    min-height: 0;
    margin: .5rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--child-color-text-muted, #646970);
    box-shadow: none;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
.child-ui-hint button:focus-visible,
.child-ui-hint__panel button:focus-visible { outline: 2px solid var(--child-color-field-focus, currentColor); outline-offset: 3px; }
.child-ui-hint__panel {
    box-sizing: border-box;
    display: block;
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
.child-ui-hint__panel::after {
    content: '';
    display: block;
    height: 1rem;
}
.child-ui-hint__panel > .child-ui-hint__body {
    display: block;
    margin: 0;
    padding: .75rem .875rem;
    border-left: 3px solid var(--child-color-info-border, #228be6);
    background: #fff;
    color: var(--child-color-text, #333);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}
.child-ui-hint__panel[hidden] { display: none; }
.child-ui-hint__panel .child-ui-hint__text { display: block; white-space: pre-wrap; }
@media (max-width: 480px) {
    .child-ui-modal__header, .child-ui-modal__body, .child-ui-modal__footer { padding-left: 1rem; padding-right: 1rem; }
}

/* Shared form fields for every MVO form (contact, share, withdrawal, …): add class "child-ui-form". */
.child-ui-form label { display: block; margin-bottom: .375rem; font-weight: 600; }
.child-ui-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1rem;
    padding: .75rem;
    border: 1px solid var(--child-color-field-border, #ced4da);
    border-radius: var(--child-radius-control, 6px);
    background: var(--child-color-field-bg, #fff);
    color: var(--child-color-field-text, #333);
    box-shadow: none;
    font: inherit;
}
.child-ui-form textarea { min-height: 6rem; resize: vertical; }
.child-ui-form :is(input, textarea, select):focus { border-color: var(--child-color-field-focus, #228be6); }
.child-ui-form [aria-invalid="true"] { border-color: var(--child-color-error-text, #b42318); }
.child-ui-form .child-ui-form__hint { margin: -.5rem 0 1rem; font-size: .8125rem; color: var(--child-color-text-muted, #595959); }
.child-ui-form .child-ui-form__errors { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--child-radius-control, 6px);
    background: var(--child-color-error-bg, #fef3f2); color: var(--child-color-error-text, #b42318); list-style: none; }
.child-ui-form .child-ui-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Two fields side by side on wider screens (e.g. name and e-mail), stacked on phones. */
.child-ui-form .child-ui-form__row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .child-ui-form .child-ui-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.child-ui-form .child-ui-form__field { min-width: 0; }
.child-ui-modal__cta-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.child-ui-modal__cta-group[hidden] { display: none; }
/* Back/secondary action on the left, primary on the right (e.g. "Angaben ändern" | "Widerruf bestätigen"). */
.child-ui-modal__cta-group--split { flex: 1 1 auto; justify-content: space-between; }

/* Key/value table (e.g. summaries) with a rounded border. */
.child-ui-table {
    width: 100%;
    margin: 0 0 1rem;
    border: 1px solid var(--child-color-border-light, #e9ecef);
    border-radius: var(--child-radius-surface, 8px);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.child-ui-table :is(th, td) { padding: .75rem 1rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.child-ui-table th { width: 35%; font-weight: 600; background: var(--child-color-surface-muted, #f8f9fa); }
.child-ui-table tr + tr :is(th, td) { border-top: 1px solid var(--child-color-border-light, #e9ecef); }
@media (max-width: 480px) {
    .child-ui-table, .child-ui-table tbody, .child-ui-table tr, .child-ui-table :is(th, td) { display: block; width: auto; }
    .child-ui-table th { padding-bottom: .25rem; }
    .child-ui-table td { padding-top: .25rem; border-top: 0 !important; }
}