/*
 * pc-contact-check — the two contact modals (Figma "Kontaktabfragen"): delivery failure and
 * yearly contact check. Surface, header, inputs and buttons are UUI (Core 27) components; this
 * sheet holds only what Figma does not draw as a component (DS audit): the label–value list,
 * the field-right hint with the lock, the support links, the scroll shade and the mobile layout.
 * Tokens are --uui-* only.
 */

/* The overlay's two fixed layers have no stacking order of their own; the host page does */
pc-contact-check .uui-modal-overlay__root,
pc-contact-check .uui-modal-overlay__stage {
	z-index: 1200;
}

/* Figma: 480 (Zustellfehler) and 520 (Jahresprüfung) wide, never taller than the viewport. The
   generated variant rule writes the 544px as a literal, so the override has to beat its specificity. */
pc-contact-check .rd-cc--delivery .rd-cc-modal[data-uui-component][type][breakpoint] .uui-modal__root {
	max-inline-size: 480px;
}

pc-contact-check .rd-cc--annual .rd-cc-modal[data-uui-component][type][breakpoint] .uui-modal__root {
	max-inline-size: 520px;
}

pc-contact-check .rd-cc-modal .uui-modal__root {
	/* dvh, not vh: iOS Safari would otherwise subtract the address bar from the footer */
	max-block-size: 90vh;
	max-block-size: 90dvh;
}

/* Header and footer stay fixed, only the body scrolls (generated: flex 1 1 auto + overflow-y) */
pc-contact-check .rd-cc-modal .uui-modal__body {
	overscroll-behavior: contain;
	position: relative;
}

.rd-cc-body {
	display: grid;
	gap: var(--uui-spacing-xl);
	min-inline-size: 0;
}

/* --- Zustellfehler: fields ------------------------------------------------------------- */

.rd-cc-field {
	display: grid;
	gap: var(--uui-spacing-sm);
}

/* Release Figma's drawn 320px on both parts; the generated rules carry three attribute selectors */
.rd-cc-field uui-input-field .uui-input-field__root,
.rd-cc-field uui-input-field .uui-input-field__input {
	inline-size: 100% !important;
}

.rd-cc-hint {
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-warning-primary);
}

.rd-cc-hint--error {
	color: var(--uui-text-error-primary);
}

.rd-cc-usage,
.rd-cc-sync {
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-tertiary);
}

/* --- Field-right hint: lock + grey text ------------------------------------------------- */

.rd-cc-lock {
	display: flex;
	align-items: center;
	gap: var(--uui-spacing-xs);
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-tertiary);
}

.rd-cc-lock .uui-icon {
	--uui-icon-size: 14px;
	color: var(--uui-fg-quaternary);
}

/* --- Jahresprüfung: label–value list ---------------------------------------------------- */

.rd-cc-list {
	margin: 0;
	border: 1px solid var(--uui-border-secondary);
	border-radius: var(--uui-radius-md);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
}

.rd-cc-row {
	display: grid;
	grid-template-columns: 144px minmax(0, 1fr);
	gap: var(--uui-spacing-md);
	padding: var(--uui-spacing-md) var(--uui-spacing-lg);
}

.rd-cc-row + .rd-cc-row {
	border-block-start: 1px solid var(--uui-border-secondary);
}

.rd-cc-row__label {
	color: var(--uui-text-tertiary);
}

.rd-cc-row__value {
	display: grid;
	gap: var(--uui-spacing-xs);
	margin: 0;
	min-inline-size: 0;
}

.rd-cc-value {
	display: grid;
	font-weight: var(--uui-font-weight-semibold);
	color: var(--uui-text-primary);
	overflow-wrap: anywhere;
}

.rd-cc-value--empty {
	font-weight: var(--uui-font-weight-regular, 400);
	color: var(--uui-text-tertiary);
}

/* --- Support contact under the list ----------------------------------------------------- */

.rd-cc-support {
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-secondary);
}

.rd-cc-support-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uui-spacing-sm) var(--uui-spacing-xl);
	margin-block-start: calc(-1 * var(--uui-spacing-md));
}

/* Figma: Buttons/Button, Hierarchy=Link color, icon leading — as real links for tel:/mailto: */
.rd-cc-link {
	display: inline-flex;
	align-items: center;
	gap: var(--uui-spacing-xs);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	font-weight: var(--uui-font-weight-semibold);
	color: var(--uui-fg-brand-secondary);
	text-decoration: none;
}

.rd-cc-link:hover,
.rd-cc-link:focus-visible {
	color: var(--uui-text-brand-secondary_hover, var(--uui-fg-brand-secondary));
	text-decoration: underline;
}

/* --- Scroll shade: 28px from transparent to the surface, hidden at the end ---------------- */

.rd-cc-fade {
	position: sticky;
	inset-block-end: 0;
	block-size: 28px;
	margin-block-start: calc(-28px - var(--uui-spacing-xl));
	background: linear-gradient(to bottom, transparent, var(--uui-bg-primary));
	pointer-events: none;
}

.rd-cc-fade--hidden {
	visibility: hidden;
}

/* --- Mobile: 342 wide, label above value, primary on top, safe area ----------------------- */

pc-contact-check .rd-cc--mobile .rd-cc-modal[data-uui-component][type][breakpoint] .uui-modal__root {
	max-inline-size: 342px;
}

.rd-cc--mobile .rd-cc-row {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--uui-spacing-xs);
}

pc-contact-check .rd-cc--mobile uui-modal-actions {
	padding-block-end: calc(var(--uui-spacing-3xl) + env(safe-area-inset-bottom, 0px));
}