/**
 * Cadence Subscriptions
 *
 * Intentionally quiet. The subscribe option is distinguished by a slightly
 * stronger border and a tint when selected — not by a starburst or a colour that
 * shouts. If the routine is the right choice for a customer, the copy should be
 * what convinces them.
 *
 * Deliberately theme-neutral: inherits font, colour and radius from the theme
 * where it can, so it does not look bolted on.
 */

.cadence-chooser {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin: 0 0 1.5em;
}

.cadence-option {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 1em;
	border: 1px solid currentColor;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.cadence-option:hover {
	opacity: 1;
}

.cadence-option:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cadence-option:has(input:checked) {
	opacity: 1;
	box-shadow: inset 0 0 0 1px currentColor;
}

/* Fallback for browsers without :has() — the radio still works, it just
   does not get the emphasised state. */
.cadence-option input[type="radio"] {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

.cadence-option__body {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	flex: 1 1 auto;
}

.cadence-option__title {
	font-weight: 600;
	line-height: 1.3;
}

.cadence-option__sub,
.cadence-option__saving {
	font-size: 0.875em;
	opacity: 0.8;
	line-height: 1.4;
}

/* The saving is real information, so it is legible — but it is the last line in
   the block, not the first, and it carries no special colour. */
.cadence-option__saving {
	margin-top: 0.15em;
}

.cadence-frequency {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-top: 0.35em;
}

.cadence-frequency__label {
	font-size: 0.875em;
	opacity: 0.8;
}

.cadence-frequency__select {
	max-width: 100%;
}

.cadence-cart-badge {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	vertical-align: middle;
}

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

.cadence-account__item {
	padding: 1.25em;
	margin-bottom: 1em;
	border: 1px solid currentColor;
	border-radius: 6px;
}

.cadence-account__title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.cadence-account__meta {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	font-size: 0.9em;
}

.cadence-account__meta li {
	margin: 0 0 0.25em;
}

.cadence-account__warning {
	font-weight: 600;
}

.cadence-account__actions {
	margin: 0;
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

/* Cancelling is always available and never hidden or made hard to find.
   It is de-emphasised, not obstructed. */
.cadence-account__cancel {
	opacity: 0.7;
}

.cadence-account__cancel:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cadence-option {
		transition: none;
	}
}