/**
 * Content modal dialog chrome on top of shared .tw-modal-overlay primitives.
 */

.tw-content-modal .tw-modal-overlay__panel.tw-content-modal__panel {
	width: min(100%, 36rem);
	max-width: 36rem;
	max-height: min(90dvh, 44rem);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--tw-color-white, #fff);
	color: var(--tw-color-dark, #141416);
	border-radius: var(--tw-border-radius, 1rem);
	box-shadow: 0 12px 40px rgba(20, 20, 22, 0.18);
}

.tw-content-modal--sm .tw-content-modal__panel {
	width: min(100%, 24rem);
	max-width: 24rem;
}

.tw-content-modal--lg .tw-content-modal__panel {
	width: min(100%, 48rem);
	max-width: 48rem;
}

.tw-content-modal--xl .tw-content-modal__panel {
	width: min(100%, 64rem);
	max-width: 64rem;
}

.tw-content-modal--top {
	align-items: flex-start;
}

.tw-content-modal--top .tw-content-modal__panel {
	margin-top: clamp(1.5rem, 8vh, 4rem);
}

.tw-content-modal--centered {
	align-items: center;
}

.tw-content-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(20, 20, 22, 0.08);
	font-weight: 600;
}

.tw-content-modal__header:empty {
	display: none !important;
}

.tw-content-modal__title {
	flex: 1 1 auto;
	min-width: 0;
}

.tw-content-modal__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.15rem 0.35rem;
	cursor: pointer;
	opacity: 0.7;
}

.tw-content-modal__close:hover,
.tw-content-modal__close:focus-visible {
	opacity: 1;
}

.tw-content-modal__body-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 1.25rem;
}

.tw-content-modal__message:empty {
	display: none;
}

.tw-content-modal__footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid rgba(20, 20, 22, 0.08);
}

.tw-content-modal__footer:empty,
.tw-content-modal__footer:has(> .tw-content-modal__footer-grid:only-child:empty),
.tw-content-modal .modal-footer:empty {
	display: none !important;
}

.tw-content-modal__footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.tw-content-modal__footer-item {
	flex: 1 1 auto;
}

.tw-content-modal__footer-item--align-start {
	text-align: start;
}

.tw-content-modal__footer-item--align-center {
	text-align: center;
}

.tw-content-modal__footer-item--align-end {
	text-align: end;
}

.tw-content-modal__footer-item--1 { flex-basis: 8.333%; }
.tw-content-modal__footer-item--2 { flex-basis: 16.666%; }
.tw-content-modal__footer-item--3 { flex-basis: 25%; }
.tw-content-modal__footer-item--4 { flex-basis: 33.333%; }
.tw-content-modal__footer-item--5 { flex-basis: 41.666%; }
.tw-content-modal__footer-item--6 { flex-basis: 50%; }
.tw-content-modal__footer-item--7 { flex-basis: 58.333%; }
.tw-content-modal__footer-item--8 { flex-basis: 66.666%; }
.tw-content-modal__footer-item--9 { flex-basis: 75%; }
.tw-content-modal__footer-item--10 { flex-basis: 83.333%; }
.tw-content-modal__footer-item--11 { flex-basis: 91.666%; }
.tw-content-modal__footer-item--12 { flex-basis: 100%; }

/* Shop / cart modal (“Mein Paket”) — same overlay stack, slightly wider. */
/*
 * Legacy Toboo style.css hides `#shop-modal[data-modalcontext=cart]` (Bootstrap era).
 * Overlay open state must win when the cart context attribute is set.
 */
#shop-modal.tw-shop-modal:not([hidden]),
#shop-modal.tw-shop-modal.is-open,
#shop-modal.tw-shop-modal.is-closing {
	display: flex !important;
}

.tw-shop-modal .tw-content-modal__panel {
	width: min(100%, 40rem);
	max-width: 40rem;
}

.tw-shop-modal .tw-content-modal__body.modal-cart {
	padding: 0;
}

.tw-shop-modal .modal-title,
.tw-shop-modal .tw-content-modal__title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}