/* Update-Verlaengerung Stufe 1 (10/2026): Ablaufstatus + Kaufbox im Kundenkonto (inc/renewal-box.php) */

/* Lizenzkopf darf mit dem Status (bis 4 Zeilen) wachsen; vorher feste Hoehe 105px */
.elixxier-MyAccount-lizenz-wrapper .elixxier-MyAccount-lizenz-header {
	height: auto;
	min-height: 105px;
}

.expire-box.elx-renewal-status p {
	margin-bottom: 0.25em;
}

/* F16: Platz fuer die Status-Marke in einer Zeile (Theme begrenzt .expire-box.not-expired auf 260px) */
.expire-box.elx-renewal-status {
	max-width: 440px;
}

.expire-box.elx-renewal-status.is-expired .expire-countdown {
	color: #616163;
}

/* F16: erste Statuszeile als Marke (gruen mit Schild solange enthalten, grau mit Uhr wenn abgelaufen/gesperrt) */
.expire-box.elx-renewal-status .elx-renewal-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
}

.expire-box.elx-renewal-status .elx-renewal-pill.is-ok {
	background-color: #e9f6ec;
	color: #1f5f30;
}

.expire-box.elx-renewal-status .elx-renewal-pill.is-quiet {
	background-color: #f1f2f5;
	color: #5f6268;
}

.expire-box.elx-renewal-status .elx-renewal-pill.is-quiet strong {
	color: #1d1d1f;
}

.expire-box.elx-renewal-status .elx-renewal-pill-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Symbole (statisches Inline-SVG aus elixxier_ma_renewal_icon) */
.elx-renewal-status .elx-rn-ic,
.elx-renewal-box .elx-rn-ic {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

.elx-renewal-status .elx-renewal-pill .elx-rn-ic {
	width: 18px;
	height: 18px;
}

/* Kaufbox (F16): links die getoente Flaeche „Verlaengerung“, rechts optional die Karte „Alternative“ */
.elx-renewal-box {
	container-type: inline-size;
	container-name: elx-rn-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 14px 0 6px;
	color: #3b3d44;
	font-size: 15px;
	line-height: 1.5;
}

.elx-renewal-box *,
.elx-renewal-box *::before,
.elx-renewal-box *::after {
	box-sizing: border-box;
}

.elx-renewal-box p {
	margin: 0;
}

.elx-renewal-box .elx-renewal-grid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); /* F17: Karte schmaler (vorher 1.85fr / 1fr) */
	gap: 16px;
	align-items: start; /* F19 (S8): beide Spalten behalten ihre Inhaltshoehe (vorher stretch: linke Flaeche wuchs mit der Bonus-Karte) */
}

.elx-renewal-box .elx-renewal-grid.is-solo {
	grid-template-columns: minmax(0, 1fr);
}

.elx-renewal-box .elx-renewal-main {
	container-type: inline-size;
	container-name: elx-rn-main;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 22px;
	background-color: #f4f6ff;
	border: 1px solid #cfd7fb;
	border-radius: 10px;
}

.elx-renewal-box h3.elx-renewal-title {
	margin: 0;
	padding: 0;
	color: #1d1d1f;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

.elx-renewal-box .elx-renewal-lead {
	margin: -8px 0 0;
	max-width: 62ch;
	color: #3b3d44;
	font-size: 15px;
}

.elx-renewal-box .elx-renewal-lead strong {
	color: #1d1d1f;
}

/* Drei Felder: Restzeit/Ende, neues Ende, Preis */
.elx-renewal-box .elx-renewal-facts {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.12fr) minmax(0, 0.82fr);
	background-color: #ffffff;
	border: 1px solid #e2e5ec;
	border-radius: 8px;
}

.elx-renewal-box .elx-renewal-fact {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 12px 10px;
	border-left: 1px solid #e2e5ec;
}

.elx-renewal-box .elx-renewal-fact:first-child {
	border-left: 0;
}

.elx-renewal-box .elx-renewal-fi {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #e4e9ff;
	color: #445eed;
}

.elx-renewal-box .elx-renewal-fi .elx-rn-ic {
	width: 17px;
	height: 17px;
}

/* Werte stehen in allen drei Feldern auf einer Linie, auch wenn eine Beschriftung zweizeilig umbricht */
.elx-renewal-box .elx-renewal-fact-text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-self: stretch;
	min-width: 0;
}

.elx-renewal-box .elx-renewal-lbl {
	display: block;
	color: #5f6268;
	font-size: 12px;
	line-height: 1.3;
}

.elx-renewal-box .elx-renewal-val {
	display: block;
	color: #1d1d1f;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* Hervorgehobene Preiszeile */
.elx-renewal-box .elx-renewal-price {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background-color: #e6ebff;
	border-radius: 8px;
}

.elx-renewal-box .elx-renewal-price-ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #445eed;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.elx-renewal-box .elx-renewal-price-text {
	min-width: 0;
}

.elx-renewal-box .elx-renewal-price-main {
	display: block;
	color: #1d1d1f;
	font-size: 14.5px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.elx-renewal-box .elx-renewal-price-next {
	display: block;
	color: #3b3d44;
	font-size: 13.5px;
}

.elx-renewal-box .elx-renewal-countdown {
	display: block;
	margin-top: 2px;
	color: #a35a00;
	font-size: 13px;
}

.elx-renewal-box .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Theme faerbt/fettet Preisbetraege: in Knoepfen und im „Danach“-Satz die Schrift der Umgebung uebernehmen */
.elx-renewal-box .elx-renewal-buy .woocommerce-Price-amount,
.elx-renewal-box .elx-renewal-upsell .woocommerce-Price-amount,
.elx-renewal-box .elx-renewal-price-next .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Bereits erschienen */
.elx-renewal-box .elx-renewal-released {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #3b3d44;
	font-size: 13.5px;
}

.elx-renewal-box .elx-renewal-released .elx-rn-ic {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: #5f6268;
}

.elx-renewal-box .elx-renewal-released-text {
	min-width: 0;
}

.elx-renewal-box .elx-renewal-released strong {
	color: #1d1d1f;
	font-weight: 600;
}

.elx-renewal-box .elx-renewal-contact {
	color: #3b3d44;
	font-size: 15px;
}

/* Kaufknopf: Farbe vom Theme (.button.alt-elixxier-color), nur Layout ueberschrieben */
.elx-renewal-box .elx-renewal-buy.button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 13px 44px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	white-space: normal;
}

.elx-renewal-box .elx-renewal-buy .elx-rn-ic-arr {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
}

.elx-renewal-box .elx-renewal-buy-label {
	min-width: 0;
}

/* Fusszeile */
.elx-renewal-box .elx-renewal-foot {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid #cfd7fb;
	color: #5f6268;
	font-size: 12.5px;
	line-height: 1.5;
}

.elx-renewal-box .elx-renewal-foot .elx-rn-ic {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.elx-renewal-box .elx-renewal-foot-text {
	min-width: 0;
}

.elx-renewal-box .elx-renewal-foot-note,
.elx-renewal-box .elx-renewal-more {
	display: block;
}

.elx-renewal-box .elx-renewal-more {
	margin-top: 0.3em;
}

.elx-renewal-box .elx-renewal-more a {
	color: #445eed;
}

/* Karte „Alternative“ (Editionswechsel) */
.elx-renewal-box .elx-renewal-alt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 22px 18px; /* F17: seitlich 18 px, damit die Haken in der schmaleren Karte einzeilig bleiben */
	background-color: #ffffff;
	border: 1px solid #e2e5ec;
	border-radius: 10px;
}

.elx-renewal-box .elx-renewal-eyebrow {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 6px;
	background-color: #f1f2f5;
	color: #5f6268;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elx-renewal-box h3.elx-renewal-alt-title {
	margin: 0;
	padding: 0;
	color: #1d1d1f;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}

.elx-renewal-box ul.elx-renewal-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	color: #3b3d44;
	font-size: 13px; /* F17: vorher 13.5px */
}

.elx-renewal-box ul.elx-renewal-checks li {
	display: flex;
	align-items: flex-start;
	gap: 6px; /* F17: vorher 8px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.elx-renewal-box .elx-renewal-checks .elx-rn-ic {
	width: 16px; /* F17: vorher 18px */
	height: 16px;
	margin-top: 2px;
	color: #445eed;
}

.elx-renewal-box .elx-renewal-push {
	display: block;
	flex: 1;
	min-height: 4px;
}

.elx-renewal-box .elx-renewal-upsell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	padding: 10px 8px;
	border: 1px solid #445eed;
	border-radius: 6px;
	background-color: #ffffff;
	color: #445eed;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.elx-renewal-box .elx-renewal-upsell:hover,
.elx-renewal-box .elx-renewal-upsell:focus-visible {
	background-color: #f4f6ff;
	color: #445eed;
}

.elx-renewal-box .elx-renewal-upsell .elx-rn-ic {
	width: 18px;
	height: 18px;
}

.elx-renewal-box .elx-renewal-upsell.loading {
	opacity: 0.5;
	pointer-events: none;
}

/* F17: „Mehr erfahren“ (Upgrade-Fenster) unter dem ersten Haken */
.elx-renewal-box .elx-renewal-alt-more {
	display: block;
	margin-top: 2px;
	color: #445eed;
	font-weight: 600;
}

/* F17: je Angebot Preisblock der alten Upgrade-Box (Streichpreis, Endpreis, „Du sparst …“) ueber dem Knopf */
.elx-renewal-box .elx-renewal-offers {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.elx-renewal-box .elx-renewal-offer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.elx-renewal-box .elx-renewal-alt.has-multi .elx-renewal-offer + .elx-renewal-offer {
	padding-top: 14px;
	border-top: 1px solid #e2e5ec;
}

.elx-renewal-box .elx-renewal-offer-name {
	color: #1d1d1f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.elx-renewal-box .elx-renewal-offer-price {
	min-width: 0;
	color: #3b3d44;
	font-size: 16px;
	line-height: 1.35;
}

.elx-renewal-box .elx-renewal-offer-price small {
	display: inline-block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.35;
}

/* F18: 3D Importer Bonus unter dem CINEMA-Angebot (gruen abgesetzt wie die alte Bonus-Box in promo-inserts.php) */
.elx-renewal-box .elx-renewal-bonus {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin-top: 2px;
	padding: 12px;
	background-color: #e8f5e9;
	border: 1px solid #4caf50;
	border-radius: 8px;
	color: #3b3d44;
	font-size: 13px;
	line-height: 1.45;
}

.elx-renewal-box .elx-renewal-bonus-title {
	color: #2e7d32;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.elx-renewal-box .elx-renewal-bonus-code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	min-width: 0;
	padding: 8px 10px;
	background-color: #ffffff;
	border: 1px dashed #4caf50;
	border-radius: 6px;
}

.elx-renewal-box .elx-renewal-bonus-code-text {
	min-width: 0;
}

.elx-renewal-box .elx-renewal-bonus-lbl {
	display: block;
	color: #5f6268;
	font-size: 12px;
	line-height: 1.3;
}

.elx-renewal-box .elx-renewal-bonus-val {
	display: block;
	color: #1d1d1f;
	font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	user-select: all;
	-webkit-user-select: all;
}

/* Theme-Knopfstil zuruecksetzen; Gruen wie die alte Box (scripts-03.js setzt nach dem Kopieren #2e7d32, danach #4caf50) */
.elx-renewal-box button.elx-renewal-bonus-copy {
	flex: none;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 4px;
	background-color: #4caf50;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.elx-renewal-box .elx-renewal-bonus-hint {
	color: #5f6268;
	font-size: 12px;
	line-height: 1.4;
}

/* Schmale Flaeche: Felder untereinander (Container Query, Rueckfall unten per Media Query) */
@container elx-rn-main (max-width: 460px) {
	.elx-renewal-box .elx-renewal-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.elx-renewal-box .elx-renewal-fact {
		padding-inline: 12px;
		border-left: 0;
		border-top: 1px solid #e2e5ec;
	}

	.elx-renewal-box .elx-renewal-fact:first-child {
		border-top: 0;
	}
}

/* Schmale Box: Alternative unter die Verlaengerung */
@container elx-rn-box (max-width: 720px) {
	.elx-renewal-box .elx-renewal-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 1099px) {
		.elx-renewal-box .elx-renewal-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 849px) {
		.elx-renewal-box .elx-renewal-facts {
			grid-template-columns: minmax(0, 1fr);
		}

		.elx-renewal-box .elx-renewal-fact {
			padding-inline: 12px;
			border-left: 0;
			border-top: 1px solid #e2e5ec;
		}

		.elx-renewal-box .elx-renewal-fact:first-child {
			border-top: 0;
		}
	}
}

/* Schul-Tabelle: Hinweis unter „Updates bis …“ */
.school-updates-renewal {
	display: block;
	font-size: 12px;
	margin-top: 2px;
}

/* Sprung von Alt-Clients (#<Lizenzcode>): Lizenz hervorheben */
.elx-license-highlight {
	box-shadow: 0 0 0 3px #6ebf6a;
	border-radius: 8px;
	transition: box-shadow 0.6s ease;
}

tr.elx-license-highlight > td {
	background-color: #eef8ed;
}

@media (max-width: 767px) {
	.elixxier-MyAccount-lizenz-wrapper .elixxier-MyAccount-lizenz-header {
		flex-wrap: wrap;
	}

	.elixxier-MyAccount-lizenz-header .expire-box.elx-renewal-status {
		flex-basis: 100%;
		max-width: none;
		text-align: left;
		margin-top: 8px;
	}

	/* F16: einspaltig, Knoepfe volle Breite */
	.elx-renewal-box .elx-renewal-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elx-renewal-box .elx-renewal-main,
	.elx-renewal-box .elx-renewal-alt {
		padding: 16px;
	}

	.elx-renewal-box h3.elx-renewal-title {
		font-size: 21px;
	}

	.elx-renewal-box .elx-renewal-buy.button {
		padding-left: 38px;
		padding-right: 38px;
	}

	.elx-renewal-box .elx-renewal-upsell {
		width: 100%;
	}

	/* F13 (Mobil 390 px): Box nie breiter als die Karte, lange Woerter/Preise umbrechen */
	.elx-renewal-box,
	.elx-renewal-box .elx-renewal-actions,
	.elx-renewal-box .elx-renewal-buy.button {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0;
	}

	.elx-renewal-box {
		overflow-wrap: anywhere;
	}

	/* F13: Die Lizenzkarte war breiter als der Bildschirm (vorbestehend): der Flex-Inhalt der Kontoseite nahm die
	   Mindestbreite der Aktivierungstabelle an (min-width: auto). Nur auf der Lizenzseite (:has), die Tabelle scrollt
	   stattdessen in sich. Browser ohne :has behalten das bisherige Verhalten. */
	.woocommerce-MyAccount-content-outer:has(.elixxier-MyAccount-lizenz-wrapper),
	.woocommerce-MyAccount-content-outer:has(.elixxier-MyAccount-lizenz-wrapper) > .woocommerce-MyAccount-content-wrapper {
		min-width: 0;
		max-width: 100%;
	}

	.elixxier-MyAccount-lizenz-wrapper {
		min-width: 0;
		max-width: 100%;
	}

	.elixxier-MyAccount-lizenz-wrapper .elixxier-MyAccount-lizenz-aktivierugen-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}