/**
 * SleekPress Subscriptions — the payment choice on the product page and the
 * Subscriptions tab in My Account.
 *
 * Grammar (spacing, radii, type steps) comes from the suite's `.sp-fe`
 * tokens; colour from the theme through them. Everything this file decides
 * itself is a `--spsub-*` token on the component root, so a site can restyle
 * the block without touching the rules.
 */

.spsub-plan,
.spsub-account {
	--spsub-gap: var(--sp-space-2, 0.5rem);
	--spsub-pad: var(--sp-space-3, 0.75rem);
	--spsub-radius: var(--sp-radius-m, 0.5rem);
	--spsub-border: var(--sp-border, 1px solid #e6e8eb);
	--spsub-accent: var(--sp-accent, #111827);
	--spsub-text: var(--sp-text, #1f2937);
	--spsub-muted: var(--sp-muted, #6b7280);
	--spsub-surface: var(--sp-surface, #fff);
	--spsub-selected: var(--sp-accent-soft, #f3f4f6);
	--spsub-danger: var(--sp-danger, #b32d2e);
	--spsub-text-sm: var(--sp-text-sm, 0.8125rem);
	--spsub-text-base: var(--sp-text-base, 0.875rem);
}

/* ---- product page ---- */

.spsub-plan {
	margin-block: var(--spsub-pad);
	color: var(--spsub-text);
}

.spsub-plan[hidden] {
	display: none;
}

.spsub-plan__choices {
	display: grid;
	gap: var(--spsub-gap);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.spsub-plan__legend {
	padding: 0;
	margin-block-end: var(--spsub-gap);
	font-weight: 600;
}

.spsub-plan__option {
	display: flex;
	align-items: flex-start;
	gap: var(--spsub-pad);
	padding: var(--spsub-pad);
	border: var(--spsub-border);
	border-radius: var(--spsub-radius);
	background: var(--spsub-surface);
	cursor: pointer;
}

.spsub-plan__option:has(.spsub-plan__input:checked) {
	border-color: var(--spsub-accent);
	background: var(--spsub-selected);
}

.spsub-plan__option:has(.spsub-plan__input:focus-visible) {
	outline: 2px solid var(--spsub-accent);
	outline-offset: 2px;
}

.spsub-plan__input {
	margin: 0.25rem 0 0;
	accent-color: var(--spsub-accent);
}

.spsub-plan__text {
	display: grid;
	gap: 0.25rem;
}

.spsub-plan__title {
	font-weight: 600;
}

.spsub-plan__detail,
.spsub-plan__note {
	color: var(--spsub-muted);
	font-size: var(--spsub-text-sm);
}

.spsub-plan__note {
	margin: 0;
}

/* ---- My Account ---- */

.spsub-account {
	display: grid;
	gap: var(--sp-space-5, 1.5rem);
	color: var(--spsub-text);
}

.spsub-account__card {
	display: grid;
	gap: var(--spsub-pad);
	padding: var(--sp-space-4, 1rem);
	border: var(--spsub-border);
	border-radius: var(--spsub-radius);
	background: var(--spsub-surface);
}

.spsub-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spsub-gap);
}

.spsub-account__title {
	margin: 0;
	font-size: var(--sp-text-md, 1rem);
}

.spsub-account__status {
	font-size: var(--spsub-text-sm);
	font-weight: 600;
}

.spsub-account__status.is-overdue,
.spsub-account__status.is-cancelled {
	color: var(--spsub-danger);
}

.spsub-account__summary {
	margin: 0;
	color: var(--spsub-muted);
	font-size: var(--spsub-text-base);
}

.spsub-account__schedule {
	width: 100%;
	margin: 0;
	font-size: var(--spsub-text-base);
}

.spsub-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spsub-gap);
}

.spsub-account__actions form {
	margin: 0;
}