/* WCRM plans: template picker + rental plan price markup (spec §3.2–3.3). */

.wcrm-template-picker {
	--wcrm-accent: var(--ast-global-color-0, var(--theme-palette-color-1, #1e73be));
	margin: 1.25em 0 1.5em;
	clear: both;
}

.wcrm-template-picker__title {
	margin: 0 0 0.75em;
	font-weight: 700;
}

.wcrm-template-picker__error {
	margin: 0 0 0.75em;
	color: #b32d2e;
	font-weight: 600;
}

.wcrm-template-picker.is-invalid .wcrm-template-grid {
	outline: 2px solid #b32d2e;
	outline-offset: 4px;
	border-radius: 4px;
}

.wcrm-template-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 14px 10px;
}

@media (max-width: 1024px) {
	.wcrm-template-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.wcrm-template-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.wcrm-template-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wcrm-template-tile {
	position: relative;
	margin: 0;
	padding: 6px;
	text-align: center;
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcrm-template-tile:hover {
	border-color: #d5d5d5;
}

.wcrm-template-tile__choice:focus-visible,
.wcrm-template-tile:focus-visible {
	outline: 2px solid var(--wcrm-accent);
	outline-offset: 2px;
}

.wcrm-template-tile.is-selected {
	border-color: var(--wcrm-accent);
	/* The glow follows the brand accent; the grey fallback is for browsers without color-mix(). */
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcrm-accent) 18%, transparent);
}

.wcrm-template-tile__media {
	position: relative;
	display: block;
}

.wcrm-template-tile__choice {
	display: block;
	border-radius: 8px;
}

.wcrm-template-tile__label {
	display: block;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.wcrm-template-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.wcrm-template-tile__image {
	position: relative;
	display: block;
	aspect-ratio: 251 / 500;
	overflow: hidden;
	border-radius: 8px;
	background: #f3f3f3;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.15s ease;
}

.wcrm-template-tile:hover .wcrm-template-tile__image {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.wcrm-template-tile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* ✓ in the corner of the selected card. */
.wcrm-template-tile__check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wcrm-accent);
	color: #fff;
	/* A wider, softer shadow than the card's: the ✓ has to stay visible on a light picture (UX-37 §3). */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
	/* Above the preview scrim, so the chosen card's ✓ is never dimmed by it. */
	z-index: 2;
}

.wcrm-template-tile__check::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 5px;
	width: 6px;
	height: 12px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.wcrm-template-tile.is-selected .wcrm-template-tile__check,
.wcrm-template-radio:checked ~ .wcrm-template-tile__image .wcrm-template-tile__check {
	opacity: 1;
	transform: scale(1);
}

.wcrm-template-tile__name {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

/*
 * „Peržiūrėti“ (UX-37 §3, moved down in UX-39 §3): a pill at the *bottom* of the picture, together with a soft
 * darkening that only reaches the lower part of it, while the card is hovered, focused or chosen; a ghost button
 * under the picture on touch screens and narrow windows.
 *
 * The owner's point: a pill in the middle covered the design it was offering to show. The top of the picture – the
 * header, the hero image, everything somebody actually compares – now stays uncovered, and the gradient starts
 * fading in only at 55 % of the height.
 *
 * The link itself is the scrim (inset: 0) but never takes a click – only the pill inside it does – so the picture
 * keeps selecting the card, exactly as in 3.6.0, everywhere except the pill itself.
 *
 * The scrim is not shown for `.is-selected` (UX-37 review finding 8): the design the customer chose is the one
 * they want to look at, and a pill sitting in the middle of it for good would also take every click on the
 * picture's centre. It appears on :hover / :focus-within, which is when somebody is looking for it.
 */
.wcrm-template-tile__preview {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: end;
	justify-items: center;
	padding-bottom: 10px;
	border-radius: 8px;
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	z-index: 1;
}

.wcrm-template-tile__preview-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transform: translateY(6px);
	pointer-events: none;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wcrm-template-tile__preview-icon {
	flex: 0 0 auto;
	display: block;
}

.wcrm-template-tile:hover .wcrm-template-tile__preview,
.wcrm-template-tile:focus-within .wcrm-template-tile__preview,
.wcrm-template-tile__preview:focus {
	opacity: 1;
}

.wcrm-template-tile:hover .wcrm-template-tile__preview-btn,
.wcrm-template-tile:focus-within .wcrm-template-tile__preview-btn,
.wcrm-template-tile__preview:focus .wcrm-template-tile__preview-btn {
	transform: none;
	pointer-events: auto;
}

.wcrm-template-tile__preview:hover,
.wcrm-template-tile__preview:focus {
	text-decoration: none;
}

.wcrm-template-tile__preview:hover .wcrm-template-tile__preview-btn {
	background: rgba(17, 17, 17, 0.9);
	transform: translateY(-1px);
}

/* The ring is drawn on the pill (white + dark outline), so it stays visible on any picture. */
.wcrm-template-tile__preview:focus-visible {
	outline: none;
}

.wcrm-template-tile__preview:focus-visible .wcrm-template-tile__preview-btn {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(17, 17, 17, 0.9), 0 6px 18px rgba(0, 0, 0, 0.28);
}

@media (hover: none), (max-width: 768px) {
	/* No scrim on a touch screen: the button lives under the picture and is always there. */
	.wcrm-template-tile__preview {
		position: static;
		display: block;
		margin: 8px auto 0;
		/* The bottom inset of the overlay (UX-39 §3) has no place under the picture. */
		padding-bottom: 0;
		width: -moz-fit-content;
		width: fit-content;
		background: none;
		opacity: 1;
		pointer-events: auto;
	}

	.wcrm-template-tile__preview-btn,
	.wcrm-template-tile:hover .wcrm-template-tile__preview-btn,
	.wcrm-template-tile:focus-within .wcrm-template-tile__preview-btn,
	.wcrm-template-tile__preview:hover .wcrm-template-tile__preview-btn,
	.wcrm-template-tile__preview:focus .wcrm-template-tile__preview-btn {
		/* A finger-sized target: on a touch screen this button is the only way to see the design. */
		min-height: 44px;
		box-sizing: border-box;
		padding: 6px 12px;
		border: 1px solid currentColor;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: var(--wcrm-accent);
		box-shadow: none;
		transform: none;
		pointer-events: auto;
	}

	.wcrm-template-tile__preview:focus-visible .wcrm-template-tile__preview-btn {
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wcrm-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcrm-template-tile__check,
	.wcrm-template-tile__preview,
	.wcrm-template-tile__preview-btn {
		transition: none;
	}

	.wcrm-template-tile__preview-btn,
	.wcrm-template-tile__preview:hover .wcrm-template-tile__preview-btn {
		transform: none;
	}
}

/* Empty price paragraph when the "Nuo:" line is dropped on the plan page (UX-36 §4): no gap under the title. */
.single-product p.price.wcrm-price--empty,
.single-product p.price:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* Fixed „Užsisakyti“ bar (UX-36 §4; printed hidden by PHP, shown by plans.js). */
.wcrm-order-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: #fff;
	border-top: 1px solid #e3e3e3;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.wcrm-order-bar[hidden] {
	display: none;
}

.wcrm-order-bar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1200px;
	margin: 0 auto;
}

.wcrm-order-bar__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: #f3f3f3;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.wcrm-order-bar__thumb[hidden] {
	display: none;
}

.wcrm-order-bar__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.wcrm-order-bar__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.wcrm-order-bar__design {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcrm-order-bar__price {
	font-size: 0.95em;
}

/* The bar takes the compact card's typography (UX-39 §1): the amount is the one thing that is larger. */
.wcrm-order-bar__amount {
	font-size: 1.15em;
	font-weight: 700;
}

.wcrm-order-bar__total-label[hidden] {
	display: none;
}

/* The period price under „Iš viso dabar“ (UX-38 §3). */
.wcrm-order-bar__sub {
	font-size: 0.8em;
	opacity: 0.8;
}

.wcrm-order-bar__sub:empty {
	display: none;
}

.wcrm-order-bar__button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Room for the bar at the end of the page – plus the home-indicator inset the bar itself adds. */
body.wcrm-order-bar-open {
	padding-bottom: 90px;
	padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 600px) {
	.wcrm-order-bar {
		padding: 8px 12px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.wcrm-order-bar__inner {
		gap: 10px;
	}

	.wcrm-order-bar__thumb {
		width: 32px;
		height: 44px;
	}

	.wcrm-order-bar__design,
	.wcrm-order-bar__price {
		font-size: 0.85em;
	}

	.wcrm-order-bar__sub {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wcrm-order-bar__button {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Prices */
.wcrm-plan-price {
	display: inline-block;
}

/*
 * Price card (UX-38 §3, made compact in UX-39 §1): the same numbers in two dense lines –
 *
 *   95,88 € / metus · 7,99 €/mėn. [-20 %]
 *   Aktyvavimo mokestis 30,00 € (vienkartinis) · Iš viso dabar 125,88 €
 *   Vėliau – 95,88 € / metus. Atsisakyti bet kada.          ← only when the brand wrote a note
 *
 * – inside a thin frame instead of the full-width grey box of 3.8.0, which the owner found far too tall (~230 px
 * measured; this one is under 96 px with the note). `inline-flex` keeps the frame around the text on a desktop and
 * the media query below stretches it over the row on a phone.
 *
 * No colour of its own: the frame is `--wcrm-border`, which a brand or a theme may simply redefine, and the second
 * line's grey is restated as a color-mix of the theme's own text colour so a dark theme does not get black on black.
 * Only the green chip carries its own pair of colours.
 */
.wcrm-price-card {
	--wcrm-accent: var(--ast-global-color-0, var(--theme-palette-color-1, #1e73be));
	--wcrm-border: rgba(0, 0, 0, 0.1);
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	max-width: 100%;
	margin: 0 0 1.25em;
	padding: 10px 12px;
	border: 1px solid var(--wcrm-border);
	border-radius: 10px;
	background: transparent;
	/*
	 * The card is a composed block, not a bare price line: it sizes itself from the root instead of inheriting
	 * whatever `p.price` happens to be enlarged to (Astra: 1.2em, which alone pushed the card from 92 px to
	 * 105 px). Every em below is then a known number, which is what makes „≤ 96 px with the note“ a promise and
	 * not a hope. The colour is still inherited, so a dark theme keeps its own text.
	 */
	font-size: 1rem;
	line-height: 1.35;
}

/*
 * The two dense lines; each wraps on its own when the row runs out of room. The column gap is what tells the parts
 * of a line apart – there is no „·“ between them any more. A separator that is its own flex item is left hanging at
 * the end of the row the moment the line wraps („Aktyvavimo mokestis €30.00 (vienkartinis) ·“), and on a phone that
 * line wraps every time; it read as a typo (review finding 3).
 */
.wcrm-price-card__line1,
.wcrm-price-card__line2 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 14px;
}

.wcrm-price-card__line2 {
	/* A wider gap than line 1: the two halves are whole phrases („Aktyvavimo mokestis €30.00 (vienkartinis)“,
	   „Iš viso dabar €145.10“) and need more air between them than two numbers do. */
	column-gap: 18px;
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.66);
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.wcrm-price-card__main {
	display: block;
}

.wcrm-price-card .wcrm-plan-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.wcrm-price-card__amount {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.1;
}

.wcrm-price-card .wcrm-plan-period {
	font-size: 0.95em;
	font-weight: 500;
	opacity: 0.7;
}

.wcrm-price-card__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.wcrm-price-card__per-month {
	font-size: 0.95em;
	font-weight: 600;
}

/* „(7,99 €/mėn.)“ – the brackets belong to the number, so they can never be left on a line of their own. */
.wcrm-price-card__per-month::before {
	content: "(";
}

.wcrm-price-card__per-month::after {
	content: ")";
}

/*
 * The chip needs a surface of its own: against a page painted #ecf0f2 the old #e4f4e4 was a 1.0:1 difference in
 * lightness, so the „pill“ read as green text with no pill around it (review finding 9). A deeper fill and a thin
 * green outline give it back its shape; the text on it stays at 5.2:1.
 */
.wcrm-price-card__badge {
	display: inline-block;
	/* Centred, not on the baseline: a padded pill hanging off the baseline of a 1.6em amount made the whole line
	   taller than the amount itself. */
	align-self: center;
	padding: 1px 7px;
	border: 1px solid rgba(31, 107, 43, 0.25);
	border-radius: 999px;
	background: #d7edda;
	color: #1f6b2b;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	/* The explanation is the chip's tooltip (UX-39 §1): a mouse gets a cursor that says so. */
	cursor: help;
}

/*
 * …and a tooltip never opens on a touch screen, so there the same sentence is printed under the chip instead
 * (review finding 5). It is `aria-hidden`: the chip's own `aria-label` already carries it.
 */
.wcrm-price-card__badge-note {
	display: none;
}

@media (hover: none) {
	.wcrm-price-card__badge-note {
		display: block;
		flex: 1 0 100%;
		font-size: 0.82em;
		font-weight: 400;
		line-height: 1.35;
		color: #1f6b2b;
	}
}

.wcrm-price-card .wcrm-price-card__row,
.wcrm-price-card__total {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 4px;
	margin: 0;
	font-size: 1em;
}

.wcrm-price-card__row-label,
.wcrm-price-card__total-label {
	font-weight: 400;
}

.wcrm-price-card__row-value,
.wcrm-price-card__total-value {
	font-weight: 600;
	white-space: nowrap;
}

/*
 * No opacity of its own: it already inherits the 72 % of line 2 (5.0:1 on the page), and 0.75 on top of that made
 * „(vienkartinis)“ a 3.1:1 grey – under the 4.5:1 that 13 px text needs (review finding 6). The smaller size is
 * what makes it the quieter half of the row.
 */
.wcrm-price-card__hint {
	font-size: 0.9em;
	/* Like `__note`: a theme that prints `p.price` in bold (Astra does) would otherwise shout the quietest word of
	   the row (review finding 14 of lens 1, the same trap the separator fell into). */
	font-weight: 400;
	white-space: nowrap;
}

/*
 * `font-weight: 400`: a theme that prints `p.price` in bold (Astra does) would otherwise shout the quietest line.
 * `opacity: 0.72` and not 0.6: at 0.6 the note measured 3.6:1 on the real page, under AA for 13 px text.
 */
.wcrm-price-card__note {
	display: block;
	font-size: 0.82em;
	font-weight: 400;
	opacity: 0.72;
}

@media (max-width: 600px) {
	/* On a phone the frame takes the whole row: a card hugging its text would look lost beside a full-width form. */
	.wcrm-price-card {
		display: flex;
	}

	.wcrm-price-card__amount {
		font-size: 1.45em;
	}
}

/*
 * Period buttons (UX-38 §3): plans.js turns the period select into this radio group and hides the select; without
 * JS the select stays exactly as it is.
 */
.wcrm-period-buttons {
	--wcrm-accent: var(--ast-global-color-0, var(--theme-palette-color-1, #1e73be));
	display: flex;
	flex-wrap: wrap;
	/* The monthly period has no second line: stretch keeps all the buttons of a row the same height anyway. */
	align-items: stretch;
	gap: 10px;
	margin: 0;
	/* Blocksy makes `td.value` a flex container, and a flex item shrinks to its content: the group came out
	   283px wide inside a 1290px cell, so two 150px buttons wrapped into a column (owner report 2026-09-22).
	   Claiming the whole line keeps one row on every theme, flex parent or not. */
	width: 100%;
	flex: 1 1 100%;
}

.wcrm-period-buttons .wcrm-period-button {
	/* Content width, not a 150px basis – three periods still fit one row, and a narrow cell wraps by itself. */
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid rgba(127, 127, 127, 0.3);
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Astra paints every `button:hover` white on its accent colour; our background wins on specificity and the text
   would stay white on a light card (owner report 2026-09-22). Every state therefore names its own colours. */
.wcrm-period-buttons .wcrm-period-button:hover,
.wcrm-period-buttons .wcrm-period-button:focus,
.wcrm-period-buttons .wcrm-period-button:focus-visible,
.wcrm-period-buttons .wcrm-period-button:active {
	color: inherit;
	background: rgba(127, 127, 127, 0.08);
	border-color: rgba(127, 127, 127, 0.6);
	box-shadow: none;
}

.wcrm-period-buttons .wcrm-period-button:hover .wcrm-period-button__label,
.wcrm-period-buttons .wcrm-period-button:focus .wcrm-period-button__label,
.wcrm-period-buttons .wcrm-period-button:hover .wcrm-period-button__per-month,
.wcrm-period-buttons .wcrm-period-button:focus .wcrm-period-button__per-month {
	color: inherit;
}

.wcrm-period-buttons .wcrm-period-button.is-selected,
.wcrm-period-buttons .wcrm-period-button.is-selected:hover,
.wcrm-period-buttons .wcrm-period-button.is-selected:focus {
	color: inherit;
	border-color: var(--wcrm-accent);
	background: rgba(0, 0, 0, 0.05);
	background: color-mix(in srgb, var(--wcrm-accent) 10%, transparent);
}

.wcrm-period-buttons .wcrm-period-button:focus-visible {
	outline: 2px solid var(--wcrm-accent);
	outline-offset: 2px;
}

.wcrm-period-button__label {
	font-weight: 700;
}

.wcrm-period-button__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.wcrm-period-button__per-month {
	font-size: 0.85em;
	opacity: 0.8;
}

/*
 * DISC-50 §3: the chip gets the surface the card's chip had (review finding 9 of UX-39) – on a page painted #ecf0f2
 * the old #e4f4e4 left green text with no pill around it. The same green in every button state (UX-41: the chip
 * stays green with dark text when the button is hovered or selected).
 */
.wcrm-period-buttons .wcrm-period-button .wcrm-period-button__badge {
	padding: 0 7px;
	border: 1px solid rgba(31, 107, 43, 0.25);
	border-radius: 999px;
	background: #d7edda;
	color: #1f6b2b;
	line-height: 1.5;
	font-size: 0.75em;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * DISC-50 review: the chip's explanation is its tooltip (`title`), and a tooltip never opens on a touch screen, so
 * there the same sentence is printed once under the buttons (as it was under the card's chip before UX-42).
 * Elsewhere it stays out of sight but not out of reach: the buttons with a chip name it in `aria-describedby`.
 */
.wcrm-period-buttons__note {
	display: none;
}

@media (hover: none) {
	.wcrm-period-buttons__note {
		display: block;
		/* A row of its own also where the theme lays the cell out as a wrapping flex row (Blocksy), so the line
		   never sits beside „Išvalyti“. */
		flex: 1 0 100%;
		margin: 6px 0 0;
		font-size: 0.82em;
		line-height: 1.35;
		color: #1f6b2b;
	}
}

/* The select keeps doing WooCommerce's work, out of sight and out of the tab order. */
.wcrm-period-select--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

@media (max-width: 480px) {
	.wcrm-period-buttons .wcrm-period-button {
		flex: 1 1 calc(50% - 10px);
		align-items: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcrm-period-button {
		transition: none;
	}
}

.wcrm-checkout-item-price {
	display: block;
	font-weight: 600;
	margin-top: 0.25em;
}

.wcrm-checkout-item-signup-fee {
	margin: 0.25em 0 0;
	font-size: 0.9em;
}

/* Variation price moved above the design grid (plans.js). */
.wcrm-variation-price--above-picker {
	margin: 0 0 1.5em;
}

.wcrm-variation-price--above-picker .woocommerce-variation-price {
	margin: 0;
}