/* 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: no page-level horizontal scroll; cart may scroll alone */
/* ------------------------------------------------------------------ */

.sw-layout.sw-subscription .subscription_buy_step_content {
	max-width: 100%;
	overflow-x: hidden;
}

.sw-layout.sw-subscription .subscription_buy_step_content.sw-subscription-buy {
	overflow-x: hidden;
}

.sw-layout.sw-subscription .sw-subscription-cart-wrap {
	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);
}

/* Payment step (?buy): keep tables as tables; align promo + payment method rows */
.sw-layout.sw-subscription .subscription_buy_step_content .std_form2 table {
	width: 100%;
	border-collapse: collapse;
}

.sw-layout.sw-subscription .subscription_buy_step_content .std_form2 td,
.sw-layout.sw-subscription .subscription_buy_step_content .std_form2 th {
	display: table-cell;
	vertical-align: middle;
}

.sw-layout.sw-subscription .sw-subscription-promo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm, 8px);
	margin: 0 0 var(--space-md, 16px);
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-promo-input {
	flex: 1 1 12rem;
	min-width: 0;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-payment-option-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm, 8px);
	margin: 0.35rem 0;
}

.sw-layout.sw-subscription .sw-subscription-payment-option-label {
	min-width: 0;
}

.sw-layout.sw-subscription .sw-subscription-payment-option-paypal {
	vertical-align: middle;
	cursor: pointer;
}

/* PO block: avoid legacy .separated_area h3 + global rules that can clip body text */
.sw-layout.sw-subscription .sw-subscription-po-panel {
	margin: 0 0 var(--space-md, 16px);
	padding: 0;
	overflow: visible;
	max-height: none;
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: var(--radius, var(--sw-radius, 8px));
	background-color: var(--color-bg-alt, #fafafa);
}

.sw-layout.sw-subscription .sw-subscription-po-title {
	padding: 11px 14px;
	margin: 0;
	background: #f1f1f1;
	border-radius: var(--radius, var(--sw-radius, 8px)) var(--radius, var(--sw-radius, 8px)) 0 0;
	font-weight: 700;
	color: var(--color-text, #333333);
}

.sw-layout.sw-subscription .sw-subscription-po-instructions-body {
	margin: 0;
	padding: 12px 14px 10px;
	overflow: visible;
	max-height: none;
	color: var(--color-text-muted, #555555);
}

.sw-layout.sw-subscription .sw-subscription-po-instructions-body p {
	margin: 0 0 0.65em;
	line-height: 1.5;
}

.sw-layout.sw-subscription .sw-subscription-po-instructions-body p:last-child {
	margin-bottom: 0;
}

.sw-layout.sw-subscription .sw-subscription-po-instructions-custom {
	margin: 0;
	line-height: 1.5;
}

.sw-layout.sw-subscription .sw-subscription-po-field {
	padding: 0 14px 14px;
}

.sw-layout.sw-subscription .sw-subscription-po-field input[type="text"] {
	max-width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Buy step (?buy): radios left of labels; beat theme input { width:100% } */
/* ------------------------------------------------------------------ */

.sw-layout.sw-subscription .sw-subscription-section {
	margin-bottom: var(--space-lg, 24px);
}

.sw-layout.sw-subscription .sw-subscription-section-title {
	margin: 0 0 var(--space-sm, 8px);
}

.sw-layout.sw-subscription .sw-subscription-renew-intro {
	margin: 0 0 var(--space-sm, 8px);
}

.sw-layout.sw-subscription .sw-subscription-renew-row {
	margin-bottom: var(--space-md, 16px);
	text-align: left;
}

.sw-layout.sw-subscription .sw-subscription-checkbox-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-sm, 8px);
	cursor: pointer;
	text-align: left;
	width: 100%;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-checkbox-label input[type="checkbox"] {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	margin-top: 0.15em;
}

.sw-layout.sw-subscription .sw-subscription-promo-apply {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-payment-options {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-xs, 6px);
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.sw-layout.sw-subscription .sw-subscription-payment-option {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-sm, 8px);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
}

.sw-layout.sw-subscription .sw-subscription-payment-option input[type="radio"] {
	width: auto;
	max-width: 1.25rem;
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
}

.sw-layout.sw-subscription .sw-subscription-payment-option-text {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

.sw-layout.sw-subscription .sw-subscription-payment-option-paypal {
	flex: 0 0 auto;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.sw-layout.sw-subscription .sw-subscription-panel {
	margin-bottom: var(--space-lg, 24px);
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-panel--billing,
.sw-layout.sw-subscription .sw-subscription-panel--cc {
	padding: var(--space-md, 16px);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: var(--radius, var(--sw-radius, 8px));
	background-color: var(--color-bg-alt, #fafafa);
}

.sw-layout.sw-subscription .sw-subscription-form-table {
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-form-table td:first-child {
	width: 32%;
	max-width: 11rem;
	padding-right: var(--space-md, 16px);
	vertical-align: top;
}

.sw-layout.sw-subscription .sw-subscription-form-table td .inp,
.sw-layout.sw-subscription .sw-subscription-form-table td input.inp,
.sw-layout.sw-subscription .sw-subscription-form-table td select.inp {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

.sw-layout.sw-subscription .sw-subscription-form-table--card input[name="card_number"] {
	width: 100%;
	max-width: 22rem;
	min-width: 0;
	box-sizing: border-box;
}

.sw-layout.sw-subscription .sw-subscription-form-row--expiry td:last-child {
	vertical-align: middle;
}

.sw-layout.sw-subscription .sw-subscription-cc-expiry-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm, 10px);
}

.sw-layout.sw-subscription .sw-subscription-cc-expiry-parts {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.2rem;
}

.sw-layout.sw-subscription .sw-subscription-cc-slash {
	opacity: 0.75;
	padding: 0 0.1rem;
}

.sw-layout.sw-subscription .sw-subscription-inp-exp {
	width: 2.75rem;
	text-align: center;
	box-sizing: border-box;
}

.sw-layout.sw-subscription .sw-subscription-cc-csc-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.sw-layout.sw-subscription .sw-subscription-cc-csc-label {
	margin-right: 0.1rem;
}

.sw-layout.sw-subscription .sw-subscription-inp-csc {
	width: 3.25rem;
	text-align: center;
	box-sizing: border-box;
}

.sw-layout.sw-subscription .sw-subscription-save-card-row td {
	vertical-align: middle;
}

.sw-layout.sw-subscription .sw-subscription-checkbox-label--inline {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-sm, 8px);
	width: auto;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-checkbox-label--inline input[type="checkbox"] {
	margin-top: 0;
	flex: 0 0 auto;
}

.sw-layout.sw-subscription .sw-subscription-cards-table {
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

.sw-layout.sw-subscription .sw-subscription-cards-table td {
	padding: 0.3rem 0.4rem 0.3rem 0;
	vertical-align: middle;
}

.sw-layout.sw-subscription .sw-subscription-cards-table__radio {
	width: 2rem;
	max-width: 2.25rem;
	vertical-align: middle;
}

.sw-layout.sw-subscription .sw-subscription-cards-table__num {
	width: 46%;
	max-width: 12rem;
	word-break: break-all;
}

.sw-layout.sw-subscription .sw-subscription-cards-table__brand {
	width: 5.5rem;
	max-width: 24%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sw-layout.sw-subscription .sw-subscription-cards-table__exp {
	width: 4.5rem;
	max-width: 18%;
	white-space: nowrap;
}

.sw-layout.sw-subscription .sw-subscription-cards-table__new td {
	padding-top: 0.55rem;
}

.sw-layout.sw-subscription .sw-subscription-card-new-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-sm, 8px);
	cursor: pointer;
	text-align: left;
	width: 100%;
	max-width: 100%;
}

.sw-layout.sw-subscription .sw-subscription-card-new-label input[type="radio"] {
	width: auto;
	max-width: 1.25rem;
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
}

.sw-layout.sw-subscription .sw-subscription-submit-row {
	margin-top: var(--space-md, 16px);
	text-align: left;
}