/**
 * MUSTANG Event – Ticket-Extras (Route C)
 *
 * Layout ausschließlich per CSS auf dem Markup von "UpSell for WooCommerce".
 * Der Auswahlzustand kommt aus :checked / :has() – nicht aus JavaScript.
 *
 * Struktur, auf die sich das hier bezieht:
 *   .product_upsells ... ul > li > span.upsell_<ID>
 *       > h3.mu-card-title            (per JS eingesetzt)
 *       > div.columns.column-1 > a > img   (ausgeblendet)
 *       > div.columns.column-2
 *           > span.title              (Vorteilsliste)
 *           > span.price-box > span.product-price > span.tiered-pricing-dynamic-price-wrapper
 *           > span.select-box > input[name="upsells[]"] + label
 *
 * [data-mu-type] wird vom JS an das li geschrieben, damit hier keine
 * Produkt-IDs stehen müssen.
 */

.mu-ticket-page {
	--mu-accent: #E63329;
	--mu-card: #141312;
	--mu-card-hover: #191817;
	--mu-border: #2a2724;
	--mu-line: #262422;
	--mu-ink: #f2f0ef;
	--mu-ink-soft: #d8d5d2;
	--mu-ink-mute: #8a8683;
	--mu-protect: 254, 214, 64;
	--mu-radius: 4px;
	--mu-pad: 22px;
}

.mu-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Abschnittskopf, Schritte
 * ------------------------------------------------------------------ */

.product_upsells .mu-section-head {
	margin: 0 0 28px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.product_upsells .mu-section-title {
	margin: 0;
	text-transform: uppercase;
}

.product_upsells .mu-section-note {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
	color: var(--mu-ink-mute);
	letter-spacing: 0.02em;
}

/* Einheitlicher Abstand unter allen Schritt-Überschriften */
.mu-step-title {
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.product_upsells .mu-section-head {
	margin-bottom: 1rem !important;
}

.mu-step-bar {
	margin-bottom: 1rem;
}

/* Schritt-2-Kacheln: Luft links und rechts */
.attribute_pa_person .thwvsf-item-span,
.attribute_pa_person span.item-span-text {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
	box-sizing: border-box;
}

.mu-step-dimmed {
	opacity: 0.45;
	transition: opacity 0.2s;
}

/* Zweite Zeile in den Schritt-2-Kacheln: eng am Titel, heller,
   dafür Luft nach unten. */
.mu-option-note {
	display: block;
	margin: 1px 0 12px;
	line-height: 1.15;
	font-weight: 400;
	font-size: 13px;
	color: var(--mu-ink-soft);
}

.attribute_pa_person span.item-span-text strong {
	display: block;
	line-height: 1.2;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Ticketkarten in Schritt 1
 *
 * Die Bildkacheln der Variantenauswahl werden durch Karten mit Preis und
 * Leistungsliste ersetzt (Markup kommt aus dem JS, Zuordnung aus der
 * PHP-Konfiguration). Auswahl und Klick bleiben beim Varianten-Plugin.
 * ------------------------------------------------------------------ */

.mu-ticket-choices ul,
.mu-ticket-choices .thwvsf-wrapper-ul,
.mu-ticket-grid {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	width: 100% !important;
	max-width: none !important;
	align-items: stretch;
}

.mu-ticket-item {
	display: flex !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	line-height: 1.35 !important;
	border: 2px solid var(--mu-border) !important;
	border-radius: var(--mu-radius) !important;
	background: var(--mu-card) !important;
	overflow: visible;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s, background 0.15s;
}

.mu-ticket-item:hover {
	border-color: #3d3935 !important;
	background: var(--mu-card-hover) !important;
}

.mu-ticket-item.mu-ticket-selected {
	border-color: var(--mu-accent) !important;
	background: var(--mu-card-hover) !important;
}

/* Bildkachel und Beschriftung des Plugins werden nicht mehr gebraucht */
.mu-ticket-item img,
.mu-ticket-item .thwvsf-item-span-img,
.mu-ticket-item .thwvsf-item-selected-icon {
	display: none !important;
}

.mu-ticket-item .thwvsf-item-span {
	display: flex !important;
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	line-height: 1.35 !important;
	text-align: left;
	box-sizing: border-box;
}

/* Der Kartenkopf trägt die Rundung, weil das li nicht mehr clippt. */
.mu-tc-head {
	border-radius: 2px 2px 0 0;
}

.mu-tc-foot {
	border-radius: 0 0 2px 2px;
}

.mu-ticket-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	font-family: inherit;
	text-align: left;
}

.mu-tc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--mu-line);
	background: #111010;
}

.mu-ticket-item.mu-ticket-selected .mu-tc-head {
	border-bottom-color: #2e2b28;
	background: rgba(230, 51, 41, 0.1);
}

.mu-tc-title {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--mu-ink);
	white-space: normal;
	overflow-wrap: break-word;
}

.mu-tc-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 2px;
	white-space: nowrap;
}

.mu-tc-badge-warn {
	color: rgb(var(--mu-protect));
	border: 1px solid rgba(var(--mu-protect), 0.5);
}

.mu-tc-badge-muted {
	color: var(--mu-ink-mute);
}

.mu-tc-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
}

.mu-tc-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.mu-tc-amount {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--mu-ink);
	white-space: nowrap;
}

.mu-tc-strike {
	font-size: 14px;
	color: #7c7874;
}

.mu-tc-strike s {
	text-decoration: line-through;
}

.mu-tc-note {
	margin: 4px 0 20px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--mu-ink-mute);
}

.mu-tc-features {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1 1 auto;
}

.mu-tc-row {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mu-ink);
}

.mu-tc-row-off {
	color: var(--mu-ink-mute);
}

.mu-tc-mark {
	flex: 0 0 auto;
	width: 12px;
	color: var(--mu-accent);
	font-weight: 600;
}

.mu-tc-row-off .mu-tc-mark {
	color: var(--mu-ink-mute);
	font-weight: 400;
}

.mu-tc-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid var(--mu-line);
	min-height: 56px;
	box-sizing: border-box;
}

.mu-ticket-item.mu-ticket-selected .mu-tc-foot {
	border-top-color: #2e2b28;
	background: rgba(230, 51, 41, 0.08);
}

.mu-tc-radio {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid #4a4643;
	border-radius: 50%;
	box-sizing: border-box;
}

.mu-ticket-item.mu-ticket-selected .mu-tc-radio {
	border-color: var(--mu-accent);
	background: var(--mu-accent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 14px 14px no-repeat;
}

.mu-tc-cta,
.mu-tc-cta-on {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mu-tc-cta {
	color: var(--mu-ink-soft);
}

.mu-tc-cta-on {
	display: none;
	color: var(--mu-ink);
}

.mu-ticket-item.mu-ticket-selected .mu-tc-cta {
	display: none;
}

.mu-ticket-item.mu-ticket-selected .mu-tc-cta-on {
	display: inline;
}

@media (max-width: 700px) {
	.mu-ticket-choices ul,
	.mu-ticket-choices .thwvsf-wrapper-ul,
	.mu-ticket-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mu-tc-title {
		font-size: 19px;
	}
}

/* ------------------------------------------------------------------ *
 * Mengenzeile unter Schritt 2
 * ------------------------------------------------------------------ */

#mu-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 18px 22px;
	border: 2px solid var(--mu-border);
	border-radius: var(--mu-radius);
	background: var(--mu-card);
	box-sizing: border-box;
}

.mu-qty-label {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mu-ink);
}

.mu-qty-note {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--mu-ink-mute);
}

.mu-qty-controls {
	display: flex;
	align-items: center;
	gap: 2px;
}

.mu-qty-minus,
.mu-qty-plus {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #38352f;
	border-radius: 3px;
	background: #1b1917;
	color: var(--mu-ink);
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mu-qty-minus:hover:not(:disabled),
.mu-qty-plus:hover:not(:disabled) {
	background: #262320;
}

.mu-qty-minus:disabled,
.mu-qty-plus:disabled {
	color: #4a4643;
	cursor: not-allowed;
}

.mu-qty-value {
	min-width: 52px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mu-ink);
}

.mu-qty-price {
	min-width: 92px;
	margin-left: 12px;
	text-align: right;
	font-size: 14px;
	color: var(--mu-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* Das echte WooCommerce-Feld bleibt im Formular, aber unsichtbar. */
.mu-qty-native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ------------------------------------------------------------------ *
 * Mengenwahl in der Beifahrer-Karte
 * ------------------------------------------------------------------ */

.product_upsells .mu-comp-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 16px var(--mu-pad) 0;
	padding: 10px 12px;
	border: 1px solid #2c2a28;
	border-radius: 3px;
	background: #0f0e0d;
	cursor: default;
	box-sizing: border-box;
}

.mu-comp-label {
	font-size: 13px;
	color: #a8a4a0;
}

.mu-comp-controls {
	display: flex;
	align-items: center;
	gap: 2px;
}

.mu-comp-minus,
.mu-comp-plus {
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid #38352f;
	border-radius: 3px;
	background: #1b1917;
	color: var(--mu-ink);
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mu-comp-minus:hover:not(:disabled),
.mu-comp-plus:hover:not(:disabled) {
	background: #262320;
}

.mu-comp-minus:disabled,
.mu-comp-plus:disabled {
	color: #4a4643;
	cursor: not-allowed;
}

.mu-comp-value {
	min-width: 44px;
	text-align: center;
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--mu-ink);
}

@media (max-width: 700px) {
	#mu-qty-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ------------------------------------------------------------------ *
 * Kopfzeile Schritt 2 mit Reset-Link
 * ------------------------------------------------------------------ */

.mu-step-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.mu-step-bar .mu-step-title {
	margin-bottom: 0;
}

a.mu-reset {
	font-size: 13px;
	color: var(--mu-ink-mute);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.mu-reset:hover {
	color: var(--mu-ink-soft);
}

/* ------------------------------------------------------------------ *
 * Karte "Deine Auswahl" unter Schritt 2
 * ------------------------------------------------------------------ */

.mu-selection-card {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	margin: 28px 0 0;
	border: 2px solid var(--mu-border);
	border-radius: var(--mu-radius);
	background: var(--mu-card);
	overflow: hidden;
}

.mu-selection-head {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	padding: 22px 24px 0;
}

.mu-selection-eyebrow {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mu-ink-mute);
}

.mu-selection-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mu-ink);
}

.mu-selection-card .woocommerce-variation-description {
	grid-column: 1;
	grid-row: 2 / 4;
	padding: 18px 24px 24px;
	border-right: 1px solid var(--mu-line);
}

.mu-selection-card .woocommerce-variation-description p {
	max-width: 72ch;
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mu-ink-soft);
	text-wrap: pretty;
}

.mu-inc-rest {
	max-width: 72ch;
	margin-bottom: 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mu-ink-soft);
}

.mu-inc-title {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mu-ink-mute);
}

.mu-inc-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
	align-items: start;
	align-content: start;
	justify-items: start;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Zeilenumbrüche des Produkttexts dürfen keine leeren Rasterzellen erzeugen */
.mu-inc-grid br {
	display: none !important;
}

.mu-inc-item {
	display: flex !important;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	color: var(--mu-ink);
}

.mu-inc-mark {
	flex: 0 0 auto;
	color: var(--mu-accent);
	font-weight: 600;
}

.mu-inc-notice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 60ch;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mu-ink-soft);
}

.mu-inc-notice-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: rgb(var(--mu-protect));
}

.mu-inc-excluded {
	max-width: 60ch;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--mu-line);
	font-size: 13px;
	line-height: 1.45;
	color: var(--mu-ink-soft);
}

.mu-inc-excluded-label {
	color: var(--mu-ink-mute);
}

.mu-selection-card .woocommerce-variation-price {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 24px;
	background: #111010;
}

/* Wie in den Extras-Karten: der tiered-pricing-Wrapper ist der
   Flex-Container, sonst greift die Reihenfolge nicht. */
.mu-selection-card .woocommerce-variation-price .price,
.mu-selection-card .woocommerce-variation-price .tiered-pricing-dynamic-price-wrapper {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	line-height: 1.05;
}

.mu-selection-card .woocommerce-variation-price .product-price {
	display: contents;
}

.mu-selection-card .woocommerce-variation-price .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Steuerhinweis der Rechtstexte-Erweiterung ("Enthält 19% MwSt.") */
.mu-selection-card .woocommerce-variation-price > *:not(.price):not(.mu-early-bird) {
	font-size: 12px;
	line-height: 1.4;
	color: var(--mu-ink-mute);
}

.mu-selection-card .woocommerce-variation-price ins {
	order: 0;
	background: none;
	text-decoration: none;
	font-size: 42px;
	font-weight: 700;
	color: var(--mu-ink);
	white-space: nowrap;
}

.mu-selection-card .woocommerce-variation-price ins .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mu-selection-card .mu-strike-label {
	order: 1;
	font-size: 14px;
	color: #7c7874;
}

.mu-selection-card .woocommerce-variation-price del {
	order: 2;
	font-size: 14px;
	color: #7c7874;
	text-decoration: line-through;
	opacity: 1;
}

.mu-selection-card .woocommerce-variation-price del .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: 400;
	color: inherit;
}

.mu-selection-card .woocommerce-variation-price .woocommerce-price-suffix,
.mu-selection-card .woocommerce-variation-price small {
	order: 3;
	font-size: 12px;
	color: var(--mu-ink-mute);
}

.mu-selection-card .wgm-sale-label {
	order: 1;
	font-size: 14px;
	font-weight: 400;
	color: #7c7874;
}

/* ------------------------------------------------------------------ *
 * Premium-Bedingungen (Akkordeon)
 *
 * Kopfzeile und Panel bilden einen zusammenhängenden Block: der Rahmen
 * läuft durch, das Chevron dreht sich. Zustand über .mu-terms-open und
 * das [hidden]-Attribut am Panel.
 * ------------------------------------------------------------------ */

.mu-terms-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin-top: 22px;
	padding: 14px 18px;
	border: 1px solid var(--mu-border);
	border-radius: var(--mu-radius);
	background: #111010;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--mu-ink);
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s, background 0.15s;
}

.mu-terms-toggle:hover,
.mu-terms-toggle:focus-visible {
	border-color: #3d3935;
	background: #161514;
	color: var(--mu-ink);
	text-decoration: none;
}

.mu-terms-toggle:focus-visible {
	outline: 2px solid var(--mu-accent);
	outline-offset: 2px;
}

.mu-terms-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.mu-terms-toggle.mu-terms-open {
	border-color: #3d3935;
	background: #161514;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.mu-terms-toggle.mu-terms-open::after {
	transform: translateY(2px) rotate(225deg);
}

.mu-terms-panel[hidden] {
	display: none !important;
}

/* Mitgeliefertes Icon im Button unterdrücken – das Chevron kommt aus ::after */
.mu-terms-toggle svg,
.mu-terms-toggle i {
	display: none !important;
}

.mu-terms-panel {
	width: 100%;
	margin: -1px 0 0;
	padding: 18px;
	border: 1px solid #3d3935;
	border-top: 0;
	border-radius: 0 0 var(--mu-radius) var(--mu-radius);
	background: #0f0e0d;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mu-ink-soft);
	box-sizing: border-box;
}

/* Der vom Produkt mitgelieferte Innenblock braucht keinen zweiten Rahmen. */
.mu-terms-panel .mu-terms-block,
.mu-terms-panel #premium-terms-block {
	padding: 0;
	border: 0;
	background: none;
}

.mu-terms-block {
	box-sizing: border-box;
}

.mu-terms-panel p,
.mu-terms-panel li {
	margin: 0 0 12px;
	max-width: 90ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mu-ink-soft);
}

.mu-terms-panel > *:first-child {
	margin-top: 0;
}

.mu-terms-panel p:last-child,
.mu-terms-panel > *:last-child {
	margin-bottom: 0;
}

.mu-terms-panel a {
	color: var(--mu-accent);
	text-decoration: underline;
}

.mu-early-bird {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--mu-ink-soft);
}

.mu-early-bird-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: rgb(var(--mu-protect));
}

.mu-selection-card .woocommerce-variation-availability {
	grid-column: 2;
	grid-row: 3;
	padding: 0 24px 20px;
	background: #111010;
	font-size: 13px;
	color: var(--mu-ink-mute);
}

@media (max-width: 860px) {
	.mu-selection-card {
		grid-template-columns: 1fr;
	}

	.mu-selection-card .woocommerce-variation-description {
		grid-column: 1;
		grid-row: auto;
		border-right: 0;
		border-bottom: 1px solid var(--mu-line);
	}

	.mu-selection-card .woocommerce-variation-price,
	.mu-selection-card .woocommerce-variation-availability {
		grid-column: 1;
		grid-row: auto;
	}

	.mu-inc-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * Bestellformular über volle Breite
 *
 * Das Formular wird per PHP-Hook aus .summary.entry-summary heraus unter
 * die Produktzusammenfassung gesetzt. Hier bekommt es seinen Rahmen.
 * ------------------------------------------------------------------ */

.mu-ticket-page .product form.cart {
	clear: both;
	width: 100%;
	margin: 48px 0 0;
}

.mu-ticket-page .product form.cart::after {
	content: "";
	display: table;
	clear: both;
}

/* Vom Upsell-Plugin gerendertes Zwischen-Headline-Element ausblenden –
   die Überschrift sitzt jetzt auf der Karte. */
.product_upsells > h1,
.product_upsells > h2,
.product_upsells > h3,
.product_upsells > h4 {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Karten-Reihe
 *
 * Flex statt Grid: die Karten wachsen auf die verfügbare Breite, egal
 * wie viele gerade sichtbar sind (das Tages-/Wochenend-Upsell wechselt).
 * ------------------------------------------------------------------ */

.product_upsells ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}

/* Das li ist die Kartenhülle – und komplett klickbar. */
.product_upsells ul > li {
	display: flex;
	flex: 1 1 300px;
	min-width: min(300px, 100%);
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	position: relative;
	cursor: pointer;
	background: var(--mu-card);
	border: 2px solid var(--mu-border);
	border-radius: var(--mu-radius);
	overflow: hidden;
	transition: border-color 0.15s, background 0.15s;
}

/* Links in der Karte behalten ihr eigenes Verhalten. */
.product_upsells ul > li a {
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.product_upsells ul > li::before,
.product_upsells ul > li::marker {
	content: none;
}

.product_upsells ul > li:hover {
	background: var(--mu-card-hover);
	border-color: #3d3935;
}

.product_upsells ul > li:hover input[name="upsells[]"]:not(:checked) {
	border-color: #6d6763;
}

/* Ausgewählter Zustand – ohne JavaScript. */
.product_upsells ul > li:has(input[name="upsells[]"]:checked) {
	border-color: var(--mu-accent);
	background: var(--mu-card-hover);
}

/* Das span.upsell_<ID> ist der eigentliche Inhaltsstapel. */
.product_upsells ul > li > span[class*="upsell_"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Bilder werden nicht gebraucht. */
.product_upsells .columns.column-1,
.product_upsells .column-1 {
	display: none !important;
}

/* Textspalte über die ganze Kartenbreite – überschreibt die
   Spaltenbreiten des Upsell-Plugins. */
.product_upsells ul > li .columns.column-2,
.product_upsells ul > li .column-2 {
	order: 3;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	width: 100% !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

.product_upsells .mu-card-title,
.product_upsells ul > li > span[class*="upsell_"] > h3 {
	order: 2;
	margin: 0;
	padding: var(--mu-pad) var(--mu-pad) 14px;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mu-ink);
}

/* ------------------------------------------------------------------ *
 * Vorteilsliste
 * ------------------------------------------------------------------ */

.product_upsells span.title {
	display: block;
	padding: 0 var(--mu-pad);
	width: auto;
	box-sizing: border-box;
}

.product_upsells .mu-bullets {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.product_upsells .mu-bullet {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mu-ink-soft);
	text-wrap: pretty;
}

.product_upsells .mu-bullet-mark {
	flex: 0 0 auto;
	color: var(--mu-accent);
	font-weight: 600;
}

.product_upsells .mu-bullet a {
	color: var(--mu-accent);
	text-decoration: underline;
}

.product_upsells .mu-bullet a:hover {
	color: #ff5347;
}

/* ------------------------------------------------------------------ *
 * Preis
 *
 * .product-price wird transparent geschaltet, damit der tiered-pricing-
 * Wrapper selbst der Flex-Container ist: Aktionspreis groß zuerst, dann
 * "Standardpreis" mit Streichpreis, dann der MwSt.-Hinweis.
 * ------------------------------------------------------------------ */

.product_upsells .price-box {
	display: block;
	margin-top: auto;
	padding: var(--mu-pad) var(--mu-pad) 0;
	width: auto;
	box-sizing: border-box;
	line-height: 1.1;
}

.product_upsells .price-box .product-price {
	display: contents;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper ins {
	order: 0;
	text-decoration: none;
	background: none;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper ins .woocommerce-Price-amount,
.product_upsells .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount {
	font-size: 26px;
	font-weight: 700;
	color: var(--mu-ink);
	white-space: nowrap;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount {
	order: 0;
}

.product_upsells .wgm-sale-label {
	order: 1;
	font-size: 13px;
	font-weight: 400;
	color: #7c7874;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper del {
	order: 2;
	font-size: 13px;
	color: #7c7874;
	text-decoration: line-through;
}

.product_upsells .tiered-pricing-dynamic-price-wrapper del .woocommerce-Price-amount {
	font-size: 13px;
	font-weight: 400;
	color: inherit;
}

.product_upsells .price-box .woocommerce-price-suffix {
	order: 3;
	font-size: 12px;
	color: var(--mu-ink-mute);
}

/* Aufräumen: Zeilenumbruch und englischer Ersparnis-Hinweis des Preis-Plugins */
.product_upsells .price-box br,
.product_upsells .tiered-pricing-you-save {
	display: none;
}

.product_upsells .price-box .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Auswahlzeile mit eigener Checkbox
 * ------------------------------------------------------------------ */

.product_upsells .select-box {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
	padding: 16px var(--mu-pad);
	border-top: 1px solid var(--mu-line);
	width: auto;
	min-height: 56px;
	box-sizing: border-box;
}

.product_upsells ul > li:has(input[name="upsells[]"]:checked) .select-box {
	background: rgba(230, 51, 41, 0.08);
}

.product_upsells input[name="upsells[]"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 2px solid #4a4643;
	border-radius: 3px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s;
}

.product_upsells input[name="upsells[]"]:hover {
	border-color: #6d6763;
}

.product_upsells input[name="upsells[]"]:focus-visible {
	outline: 2px solid var(--mu-accent);
	outline-offset: 2px;
}

.product_upsells input[name="upsells[]"]:checked {
	border-color: var(--mu-accent);
	background-color: var(--mu-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.product_upsells .select-box label {
	margin: 0;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mu-ink);
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Ticketschutz – volle Breite, eigene Farbwelt
 * ------------------------------------------------------------------ */

.product_upsells ul > li[data-mu-type="protection"] {
	flex: 1 1 100%;
	min-width: 100%;
	background: rgba(var(--mu-protect), 0.07);
	border-color: rgba(var(--mu-protect), 0.45);
}

.product_upsells ul > li[data-mu-type="protection"]:hover {
	background: rgba(var(--mu-protect), 0.1);
}

.product_upsells ul > li[data-mu-type="protection"]:has(input:checked) {
	border-color: rgb(var(--mu-protect));
	background: rgba(var(--mu-protect), 0.12);
}

.product_upsells ul > li[data-mu-type="protection"] span.title {
	max-width: 76ch;
}

.product_upsells ul > li[data-mu-type="protection"] .price-box {
	padding-top: 16px;
}

.product_upsells ul > li[data-mu-type="protection"] .woocommerce-Price-amount {
	font-size: 14px;
	font-weight: 500;
	color: var(--mu-ink-soft);
	white-space: normal;
}

.product_upsells ul > li[data-mu-type="protection"] .woocommerce-price-suffix {
	display: none;
}

.product_upsells ul > li[data-mu-type="protection"] .select-box {
	border-top-color: rgba(var(--mu-protect), 0.3);
}

.product_upsells ul > li[data-mu-type="protection"]:has(input:checked) .select-box {
	background: rgba(var(--mu-protect), 0.1);
}

.product_upsells ul > li[data-mu-type="protection"] input[name="upsells[]"]:checked {
	border-color: rgb(var(--mu-protect));
	background-color: rgb(var(--mu-protect));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23191817' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * Summenzeile der Extras
 * ------------------------------------------------------------------ */

.product_upsells .mu-extras-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding: 18px 22px;
	border: 1px solid var(--mu-line);
	border-radius: var(--mu-radius);
	background: #111010;
}

.product_upsells .mu-extras-count {
	font-size: 14px;
	color: var(--mu-ink-mute);
}

.product_upsells .mu-extras-sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.product_upsells .mu-extras-sum-label {
	font-size: 14px;
	color: var(--mu-ink-mute);
}

.product_upsells .mu-extras-sum-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--mu-ink);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Übersicht vor dem Kaufen-Button
 * ------------------------------------------------------------------ */

#mu-cart-summary {
	margin: 28px 0 16px;
	padding: 20px 22px;
	border: 1px solid var(--mu-line);
	border-radius: var(--mu-radius);
	background: #111010;
}

#mu-cart-summary .mu-summary-title {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

#mu-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#mu-summary-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding-bottom: 8px;
	font-size: 14px;
	color: var(--mu-ink-soft);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	list-style: none;
}

#mu-summary-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

#mu-summary-list .mu-summary-total {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--mu-line);
	border-bottom: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--mu-ink);
}

#mu-summary-list .mu-summary-total .mu-summary-price {
	font-size: 18px;
	font-weight: 700;
}

#mu-summary-list .mu-summary-price {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--mu-ink);
}

.mu-closed-note {
	margin: 24px 0;
	padding: 20px 22px;
	border: 1px solid var(--mu-border);
	border-radius: var(--mu-radius);
	background: var(--mu-card);
}

/* ------------------------------------------------------------------ *
 * Fallback ohne :has() – Zustand bleibt am Kontrollkästchen erkennbar
 * ------------------------------------------------------------------ */

@supports not selector(:has(*)) {
	.product_upsells input[name="upsells[]"]:checked {
		box-shadow: 0 0 0 4px rgba(230, 51, 41, 0.25);
	}
}

/* ------------------------------------------------------------------ *
 * Mobil
 * ------------------------------------------------------------------ */

@media (max-width: 700px) {
	.product_upsells ul {
		gap: 16px;
	}

	.product_upsells ul > li {
		flex: 1 1 100%;
		min-width: 100%;
	}

	.product_upsells .mu-card-title,
	.product_upsells ul > li > span[class*="upsell_"] > h3 {
		font-size: 20px;
	}

	.product_upsells .mu-extras-total {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media print {
	.product_upsells .select-box,
	.product_upsells .mu-extras-total {
		background: none;
	}
}