/*
 * 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;
}

/*
 * Fläche neben der Menge (seit v0.12.0). Das Feld steht im Add-to-Cart-
 * Formular vor der Menge; in Themes, die Menge und Button als Flex-Zeile
 * setzen (Avada), nimmt es die ganze Breite, damit Menge und Button
 * darunter zusammenbleiben. Schrift und Feld kommen vom Theme.
 */
.idf-sub-area {
	flex: 1 0 100%;
	width: 100%;
	margin: 0 0 1em;
}

.idf-sub-area[hidden],
.idf-sub-area__sum[hidden] {
	display: none !important;
}

.idf-sub-area__label {
	display: block;
	margin-bottom: 0.25em;
}

.idf-sub-area__input {
	max-width: 12em;
}

.idf-sub-area__hint {
	display: block;
	margin-top: 0.25em;
	font-size: 0.9em;
	opacity: 0.75;
}

.idf-sub-area__sum {
	margin: 0.5em 0 0;
}

.idf-sub-area__sum-value {
	font-weight: 600;
}

.idf-sub-area__sum-note {
	font-size: 0.9em;
	opacity: 0.75;
}

/* 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;
}

/*
 * Laufzeiten und Verlängerungen. Die Tabelle trägt die WooCommerce-Klassen
 * (shop_table), das Theme bestimmt also Rahmen und Schrift; hier nur der
 * Abstand und die laufende Zeile.
 */
.idf-sub-periods {
	margin: 1em 0 0;
}

.idf-sub-periods .is-current td {
	font-weight: 600;
}

/* 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,
.idf-sub-badge--inactive,
.idf-sub-badge--void {
	background: #e5e5e5;
	color: #50575e;
}

/*
 * Kündigung: der Button "Abo kündigen" trägt die Klasse .button und sieht damit
 * aus wie jeder Button des Themes. account.js wechselt zwischen Button und
 * Formular über das Attribut hidden. Manche Themes setzen display auf .button
 * und überstimmen damit hidden, deshalb hier ausdrücklich.
 */
.idf-sub-cancel {
	margin-top: 1em;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 0.75em;
}

.idf-sub-cancel [hidden] {
	display: none !important;
}

.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;
}