/**
 * DadsFam Recurring Billing — the customer's Renewals page.
 * Class prefix: dfam-
 *
 * Themes vary wildly, so this leans on its own classes and neutral colours
 * rather than assuming anything about the surrounding page.
 */

.dfam-renewals {
	--dfam-r-ink: #14181f;
	--dfam-r-body: #5a6472;
	--dfam-r-muted: #8b95a3;
	--dfam-r-line: #e6e9ee;
	--dfam-r-soft: #f7f8fa;
	--dfam-r-brand: #2f5fe0;
	--dfam-r-brand-soft: #eff4ff;
	--dfam-r-good: #067647;
	--dfam-r-good-soft: #ecfdf3;
	--dfam-r-warn: #b54708;
	--dfam-r-warn-soft: #fffaeb;
	--dfam-r-bad: #b42318;
	--dfam-r-bad-soft: #fef3f2;

	color: var(--dfam-r-body);
	font-size: 15px;
	line-height: 1.55;
}

.dfam-renewals.dfam-accent-orange {
	--dfam-r-brand: #e8590c;
	--dfam-r-brand-soft: #fff4ec;
}

.dfam-renewals.dfam-accent-violet {
	--dfam-r-brand: #7839ee;
	--dfam-r-brand-soft: #f4f0ff;
}

.dfam-renewals.dfam-accent-emerald {
	--dfam-r-brand: #0b8a5b;
	--dfam-r-brand-soft: #eafaf2;
}

.dfam-renewals.dfam-accent-slate {
	--dfam-r-brand: #364152;
	--dfam-r-brand-soft: #f1f3f7;
}

.dfam-renewals * {
	box-sizing: border-box;
}

.dfam-renewals__intro {
	margin: 0 0 20px;
	color: var(--dfam-r-muted);
	font-size: 14px;
	max-width: 58ch;
}

/* ==========================================================================
   Card
   ========================================================================== */

.dfam-r-card {
	margin: 0 0 16px;
	border: 1px solid var(--dfam-r-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 );
	overflow: hidden;
}

.dfam-r-card.is-closed {
	background: var(--dfam-r-soft);
	box-shadow: none;
}

.dfam-r-card.has-invoice {
	border-color: #f7c99a;
}

.dfam-r-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px 14px;
}

.dfam-r-card__head h3 {
	margin: 0;
	padding: 0;
	color: var(--dfam-r-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.dfam-r-card__period {
	display: inline-block;
	margin-top: 3px;
	color: var(--dfam-r-muted);
	font-size: 13px;
}

/* Facts row */
.dfam-r-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	border-top: 1px solid var(--dfam-r-line);
	border-bottom: 1px solid var(--dfam-r-line);
	background: var(--dfam-r-line);
}

.dfam-r-fact {
	flex: 1 1 140px;
	padding: 13px 20px;
	background: #fff;
}

.dfam-r-card.is-closed .dfam-r-fact {
	background: var(--dfam-r-soft);
}

.dfam-r-fact__label {
	display: block;
	color: var(--dfam-r-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dfam-r-fact__value {
	display: block;
	margin-top: 2px;
	color: var(--dfam-r-ink);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.dfam-r-fact__value .amount,
.dfam-r-fact__value bdi {
	color: inherit;
	font-weight: inherit;
}

/* Attention strip */
.dfam-r-alert {
	padding: 12px 20px;
	background: var(--dfam-r-warn-soft);
	border-bottom: 1px solid #f7e0b5;
	color: #7a4405;
	font-size: 13.5px;
	line-height: 1.55;
}

.dfam-r-alert strong {
	color: #5c3304;
}

/* Actions */
.dfam-r-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
}

.dfam-r-card__actions:empty {
	display: none;
}

/* ==========================================================================
   Buttons — self contained so themes do not fight them
   ========================================================================== */

.dfam-renewals .dfam-r-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--dfam-r-line);
	border-radius: 8px;
	background: #fff;
	color: var(--dfam-r-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.dfam-renewals .dfam-r-btn:hover {
	border-color: #c9d0da;
	background: var(--dfam-r-soft);
	color: var(--dfam-r-ink);
	text-decoration: none;
}

.dfam-renewals .dfam-r-btn--primary {
	border-color: var(--dfam-r-brand);
	background: var(--dfam-r-brand);
	color: #fff;
}

.dfam-renewals .dfam-r-btn--primary:hover {
	filter: brightness( 0.93 );
	border-color: var(--dfam-r-brand);
	background: var(--dfam-r-brand);
	color: #fff;
}

.dfam-renewals .dfam-r-btn--quiet {
	border-color: transparent;
	background: transparent;
	color: var(--dfam-r-muted);
	font-weight: 500;
	padding-left: 4px;
	padding-right: 4px;
}

.dfam-renewals .dfam-r-btn--quiet:hover {
	background: transparent;
	color: var(--dfam-r-bad);
	text-decoration: underline;
}

/* ==========================================================================
   Status pills
   ========================================================================== */

.dfam-r-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	background: var(--dfam-r-soft);
	color: var(--dfam-r-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.dfam-r-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.dfam-r-status--active {
	background: var(--dfam-r-good-soft);
	color: var(--dfam-r-good);
}

.dfam-r-status--paused {
	background: var(--dfam-r-warn-soft);
	color: var(--dfam-r-warn);
}

.dfam-r-status--suspended {
	background: var(--dfam-r-bad-soft);
	color: var(--dfam-r-bad);
}

.dfam-r-status--cancelled {
	background: var(--dfam-r-soft);
	color: var(--dfam-r-muted);
}

.dfam-r-status--expired {
	background: var(--dfam-r-brand-soft);
	color: var(--dfam-r-brand);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.dfam-renewals__empty {
	padding: 40px 26px;
	border: 1px dashed var(--dfam-r-line);
	border-radius: 12px;
	background: var(--dfam-r-soft);
	text-align: center;
}

.dfam-renewals__empty h3 {
	margin: 0 0 6px;
	color: var(--dfam-r-ink);
	font-size: 17px;
	font-weight: 600;
}

.dfam-renewals__empty p {
	margin: 0 auto 18px;
	max-width: 40ch;
	color: var(--dfam-r-muted);
	font-size: 14px;
}

/* ==========================================================================
   Price suffix on the shop
   ========================================================================== */

.dfam-recurring-note {
	font-size: 0.85em;
	color: #767676;
}

/* ==========================================================================
   Narrow columns
   ========================================================================== */

@media screen and ( max-width: 600px ) {
	.dfam-r-card__head {
		flex-direction: column;
		gap: 10px;
	}

	.dfam-r-fact {
		flex-basis: 100%;
	}

	.dfam-r-card__actions .dfam-r-btn--primary {
		flex: 1 1 100%;
	}
}