/*
 * Subscription rule toggles — replace the standard WC terms-and-conditions
 * checkbox in the checkout submit area when the cart contains a subscription
 * with an ACF subscription_rules repeater filled in.
 *
 * The row is a <div> with a JS click handler (not a <label>), so links
 * inside the rule text open normally while bare row clicks toggle the
 * visually-hidden checkbox. The .sthlmsauna-...__toggle span paints the
 * iOS-style switch state.
 */

.sthlmsauna-subscription-rules {
	margin: 0 0 1.5em;
}

.sthlmsauna-subscription-rules__intro {
	margin: 0 0 0.75em;
	font-weight: 600;
	color: var(--sbf-text, inherit);
}

.sthlmsauna-subscription-rules__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.sthlmsauna-subscription-rules__item {
	padding: 0;
	margin: 0;
}

.sthlmsauna-subscription-rules__row {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.85em 1em;
	background: var(--sbf-card-bg, #fff);
	border: 1px solid var(--sbf-border, #d8d8d2);
	border-radius: var(--sbf-radius, 8px);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	user-select: none;
	margin: 0;
}

.sthlmsauna-subscription-rules__row:hover {
	border-color: var(--sbf-primary, #2b6a4d);
}

.sthlmsauna-subscription-rules__row:has(.sthlmsauna-subscription-rules__input:checked) {
	border-color: var(--sbf-primary, #2b6a4d);
	background: var(--sbf-primary-light, #f1f7f3);
}

.sthlmsauna-subscription-rules__row:focus-within {
	outline: 2px solid var(--sbf-primary, #2b6a4d);
	outline-offset: 2px;
}

/*
 * Hide the native checkbox but keep it focusable for keyboard users — the
 * label/row absorbs all clicks, and the toggle span paints the state.
 */
.sthlmsauna-subscription-rules__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.sthlmsauna-subscription-rules__toggle {
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 24px;
	background: #cfcfca;
	border-radius: 999px;
	transition: background-color 0.18s ease;
}

.sthlmsauna-subscription-rules__toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	transition: transform 0.18s ease;
}

.sthlmsauna-subscription-rules__input:checked + .sthlmsauna-subscription-rules__toggle {
	background: var(--sbf-primary, #2b6a4d);
}

.sthlmsauna-subscription-rules__input:checked + .sthlmsauna-subscription-rules__toggle::after {
	transform: translateX(18px);
}

.sthlmsauna-subscription-rules__text {
	flex: 1 1 auto;
	color: var(--sbf-text, inherit);
	line-height: 1.4;
}

/*
 * When our rules block is on the page, swallow the native terms-and-conditions
 * checkbox row — JS keeps #terms in sync server-side, so the customer doesn't
 * need to see it.
 */
.woocommerce-checkout:has(.sthlmsauna-subscription-rules) .form-row.validate-required:has(#terms),
.sthlmsauna-subscription-rules ~ .form-row.validate-required:has(#terms),
.sthlmsauna-subscription-rules ~ .woocommerce-terms-and-conditions-wrapper .form-row.validate-required {
	display: none;
}

/*
 * Give the plain WC terms checkbox the same iOS-style toggle look as the
 * subscription rules above. Only shows when no subscription rules are in the
 * cart (otherwise the row is hidden by the rules above). Anchored on #terms so
 * it works whether the row sits inside the terms wrapper or before it (the
 * sthlmsauna checkout flows render it before). The native checkbox is repainted
 * with appearance:none so #terms stays a real, focusable input.
 */
.form-row.validate-required:has(#terms) {
	margin: 0;
}

.form-row.validate-required:has(#terms) label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.85em 1em;
	margin: 0;
	background: var(--sbf-card-bg, #fff);
	border: 1px solid var(--sbf-border, #d8d8d2);
	border-radius: var(--sbf-radius, 8px);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.form-row.validate-required:has(#terms) label.checkbox:hover {
	border-color: var(--sbf-primary, #2b6a4d);
}

.form-row.validate-required:has(#terms:checked) label.checkbox {
	border-color: var(--sbf-primary, #2b6a4d);
	background: var(--sbf-primary-light, #f1f7f3);
}

.form-row.validate-required:has(#terms) label.checkbox:focus-within {
	outline: 2px solid var(--sbf-primary, #2b6a4d);
	outline-offset: 2px;
}

#terms {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: #cfcfca;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

#terms::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	transition: transform 0.18s ease;
}

#terms:checked {
	background: var(--sbf-primary, #2b6a4d);
}

#terms:checked::after {
	transform: translateX(18px);
}

.form-row.validate-required:has(#terms) .woocommerce-terms-and-conditions-checkbox-text {
	flex: 1 1 auto;
	color: var(--sbf-text, inherit);
	line-height: 1.4;
}