/*
 * Frontend-Styles: Preis-Suffix, Abo-Karten im Kundenkonto, Status-Badges.
 *
 * Bewusst zurückhaltend und ohne feste Farben außer den Status-Badges --
 * Themes sollen die Typografie bestimmen. Alles hängt an eigenen Klassen,
 * nichts überschreibt WooCommerce-Selektoren.
 */

/* Einheit hinter dem Preis: kleiner und ruhiger als der Betrag selbst. */
.idf-sub-unit {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.75;
	white-space: nowrap;

	/* Die Einheit ist ein Wort im Fließtext, kein Betrag. Themes, die den
	   ganzen Preis-Block in Großbuchstaben setzen (bei reinen Zahlen fällt das
	   nicht auf), machten daraus sonst ein schreiendes "PRO TAG". */
	text-transform: none;
}

/*
 * Preis-Container, die ihre Flex-Richtung umdrehen.
 *
 * Avada rendert den Varianten-Preis als `display:inline-flex` mit
 * `flex-direction:row-reverse`, damit bei Rabatten der durchgestrichene Preis
 * rechts landet. Unser Suffix wird dadurch zum Flex-Item und kippt mit nach
 * vorn: aus "2.490,00 € pro Tag" wurde optisch "pro Tag 2.490,00 €". Im DOM
 * stand die Reihenfolge immer richtig, nur die Anzeige drehte sie.
 *
 * Wo unser Suffix steckt, drehen wir die Richtung deshalb zurück. Das
 * !important ist nötig, weil die Theme-Regel spezifischer ist.
 *
 * Nebenwirkung, bewusst in Kauf genommen: Bei einem Produkt mit Einheit **und**
 * Rabatt steht der durchgestrichene Preis wieder links (WooCommerce-Standard)
 * statt rechts (Avada-Stil).
 */
.price:has(> .idf-sub-unit) {
	flex-direction: row !important;
}

/* Vertragshinweis unter dem Preis auf der Produktseite. */
.idf-sub-contract-hint {
	font-size: 0.9em;
	opacity: 0.8;
	margin: 0.25em 0 1em;
}

/* Abo-Block in der Bestellansicht. */
.idf-sub-block {
	margin: 2em 0;
}

.idf-sub-card {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	padding: 1em 1.25em;
	margin-bottom: 1em;
}

.idf-sub-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.75em;
	font-size: 1.05em;
}

.idf-sub-card__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25em 1em;
	margin: 0;
}

.idf-sub-card__facts dt {
	font-weight: 600;
	margin: 0;
}

.idf-sub-card__facts dd {
	margin: 0;
}

.idf-sub-card__note {
	margin: 0.75em 0 0;
	font-size: 0.95em;
	opacity: 0.85;
}

/* Status-Badge. */
.idf-sub-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	background: #e5e5e5;
	color: #2c3338;
}

.idf-sub-badge--active {
	background: #d6f0e0;
	color: #14562f;
}

.idf-sub-badge--cancel_requested {
	background: #fdf0d5;
	color: #7a5001;
}

.idf-sub-badge--cancelled {
	background: #fbdada;
	color: #8a1f1f;
}

.idf-sub-badge--ended {
	background: #e5e5e5;
	color: #50575e;
}

/* Kündigung: Zwei-Schritt über <details>, ohne JavaScript. */
.idf-sub-cancel {
	margin-top: 1em;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 0.75em;
}

.idf-sub-cancel > summary {
	cursor: pointer;
	font-size: 0.95em;
	opacity: 0.8;
}

.idf-sub-cancel > summary:hover {
	opacity: 1;
}

.idf-sub-cancel__form {
	margin-top: 0.75em;
}

.idf-sub-cancel__form textarea {
	width: 100%;
	max-width: 32em;
}

.idf-sub-cancel__form label {
	display: block;
	margin-bottom: 0.25em;
	font-size: 0.9em;
}