/* Subscription checkout — scoped like forum fr-style.css
 * Site theme can set: --color-primary, --color-secondary, --color-surface, --color-text,
 * --color-text-muted, --color-border, --color-bg-alt, --color-link, --color-link-hover,
 * --radius, --radius-sm, --space-*, etc. Fallbacks keep unconfigured sites readable.
 */

.sw-layout.sw-subscription,
.sw-layout.sw-subscription *,
.sw-layout.sw-subscription *::before,
.sw-layout.sw-subscription *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Step bar (replaces legacy table + .multi_step_bar — visible on mobile) */
/* ------------------------------------------------------------------ */

.sw-layout.sw-subscription .sw-subscription-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--space-sm, 8px);
	margin: 0 0 var(--space-lg, 24px);
	padding: var(--space-md, 16px);
	background-color: var(--color-bg-alt, #f1f5f9);
	color: var(--color-text-muted, #666666);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: var(--radius, var(--sw-radius, 8px));
}

.sw-layout.sw-subscription .sw-subscription-step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm, 8px);
	padding: var(--space-sm, 8px) var(--space-xs, 4px);
	text-align: center;
	font-size: 14px;
	line-height: 1.3;
}

.sw-layout.sw-subscription .sw-subscription-step__num {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--color-text-muted, #b7bbc9);
	border-radius: var(--radius-pill, 999px);
}

.sw-layout.sw-subscription .sw-subscription-step__label {
	min-width: 0;
	word-break: break-word;
}

.sw-layout.sw-subscription .sw-subscription-step--active {
	color: var(--color-text, #46495b);
	font-weight: 700;
}

.sw-layout.sw-subscription .sw-subscription-step--active .sw-subscription-step__num {
	background-color: var(--color-primary, var(--color-secondary, #14447b));
}

/* ------------------------------------------------------------------ */
/* Plan list (choose step) */
/* ------------------------------------------------------------------ */

.sw-layout.sw-subscription .sw-subscription-plan-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 16px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-layout.sw-subscription .sw-subscription-plan-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, 7.5rem) 1fr;
	gap: var(--space-md, 16px);
	align-items: start;
	padding: var(--space-md, 16px);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: var(--radius, var(--sw-radius, 8px));
	background-color: var(--color-surface, #ffffff);
}

.sw-layout.sw-subscription .sw-subscription-plan-list--multi .sw-subscription-plan-row {
	grid-template-columns: auto minmax(5.5rem, 7.5rem) 1fr;
}

@media only screen and (max-width: 600px) {
	.sw-layout.sw-subscription .sw-subscription-plan-row {
		grid-template-columns: 1fr;
		gap: var(--space-sm, 8px);
	}

	.sw-layout.sw-subscription .sw-subscription-plan-list--multi .sw-subscription-plan-row {
		grid-template-columns: 1fr;
	}

	.sw-layout.sw-subscription .sw-subscription-plan-cell--choice {
		order: -1;
	}
}

.sw-layout.sw-subscription .sw-subscription-plan-cell--choice {
	display: flex;
	align-items: flex-start;
	padding-top: 2px;
}

.sw-layout.sw-subscription .sw-subscription-plan-cell--price {
	min-width: 0;
	font-weight: 600;
}

.sw-layout.sw-subscription .sw-subscription-plan-cell--body {
	min-width: 0;
}

.sw-layout.sw-subscription .sw-subscription-actions {
	text-align: right;
	margin-top: var(--space-md, 16px);
	margin-bottom: var(--space-sm, 8px);
}

/* ------------------------------------------------------------------ */
/* Purchase step: cart table horizontal scroll on small screens */
/* ------------------------------------------------------------------ */

.sw-layout.sw-subscription .subscription_buy_step_content {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sw-layout.sw-subscription .tblBuySubscription {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

.sw-layout.sw-subscription .tblBuySubscription th,
.sw-layout.sw-subscription .tblBuySubscription td {
	padding: var(--space-sm, 8px);
	vertical-align: top;
}

.sw-layout.sw-subscription .subscription_description {
	margin-top: var(--space-xs, 4px);
}

.sw-layout.sw-subscription a {
	color: var(--color-link, #14447b);
}

.sw-layout.sw-subscription a:hover {
	color: var(--color-link-hover, #1a5a96);
}