/*
 * WCRM checkout: paid one-off add-on services (UX-43 §5.3), the quantity stepper (UX-45 §1), the add-on's question
 * (ADDON-58 §2) and its choice lists (ADDON-59 §2).
 *
 * Theme-proof: every interactive state of the info button, the quantity buttons and the group summary spells out
 * its own colours, so
 * Astra's `button:hover` / `button:focus` (accent background, white text) and Blocksy's flex cells cannot repaint
 * them (UX-41 lesson). The accent follows the theme palette when the theme names one.
 */

.wcrm-addons {
	--wcrm-addons-accent: var(--ast-global-color-0, var(--theme-palette-color-1, #1e73be));
	--wcrm-addons-border: #dcdcde;
	--wcrm-addons-muted: #6b6b6b;
	clear: both;
	display: block;
	/* 3px: the side padding of WooCommerce's .form-row, so the box lines up with the fields above it. 1em on top
	   (UX-46 §2): about the gap between two fields, below the e-mail field as well as below the password. */
	margin: 1em 3px 1.5em;
	padding: 0.85em 1em;
	border: 1px solid var(--wcrm-addons-border);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.wcrm-addons *,
.wcrm-addons *::before,
.wcrm-addons *::after {
	box-sizing: border-box;
}

/* HEAD-58: the height of the label's first line (its 1.35 line height in the head's em – the label is 1em of the head)
   as a length the box can use. Registered, so the box inherits the head's pixels instead of working 1.35em out against
   its own input font (Blocksy's is smaller); a browser without @property does just that, and the box gets the 0.1em it
   had before. */
@property --wcrm-addons-line {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/* HEAD-58: the box in the first column; the label text and, under it, the one-off fee hint in the second – so the hint
   starts exactly where the label text starts, whatever size a theme gives the box (Astra: 1.15 × 16 px, Blocksy keeps
   the browser's 13.3 px input font). */
.wcrm-addons .wcrm-addons__head {
	--wcrm-addons-line: 1.35em;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	justify-items: start;
	gap: 0.2em 0.55em;
	margin: 0;
	padding: 0;
}

.wcrm-addons .wcrm-addons__head .wcrm-addons__toggle-input {
	grid-column: 1;
	grid-row: 1;
}

/* The padding / negative margin pair reaches back over the column gap, so a click between the box and the text still
   ticks it (as when the label wrapped the box); the text itself does not move.
   The label names its size (the head's 1em, the body text) instead of taking the theme's label size, so the hint under
   it (0.9em of the same head) is 90 % of the label in every theme, as the muted bracket was: Blocksy's
   `label { font-size: 15px }` against the 16 px head left the hint at 96 % of the label. Astra's labels are 100 % of
   their parent anyway. On a narrow phone (Blocksy 360 px, Astra 320 px) the sentence breaks into two even lines instead
   of leaving „paslaugų“ alone on the second. */
.wcrm-addons .wcrm-addons__toggle {
	grid-column: 2;
	grid-row: 1;
	display: block;
	margin: 0;
	margin-inline-start: -0.55em;
	padding: 0;
	padding-inline-start: 0.55em;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35; /* = --wcrm-addons-line */
	text-wrap: balance;
	cursor: pointer;
}

/* 0.9em of the head – the label's size above (see .wcrm-addons__toggle). */
.wcrm-addons .wcrm-addons__hint {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	color: var(--wcrm-addons-muted);
	font-size: 0.9em;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
}

.wcrm-addons input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--wcrm-addons-accent);
	cursor: pointer;
}

/* The box sits on the first line of a wrapped label, centred on it: (line − box) / 2 – 1.6 px in Astra (the old 0.1em),
   3.1 px in Blocksy, whose 15.3 px box is smaller than its 16 px text. */
.wcrm-addons .wcrm-addons__head input[type="checkbox"] {
	margin-top: calc((var(--wcrm-addons-line) - 1.15em) / 2);
}

.wcrm-addons .wcrm-addons__total {
	margin: 0.75em 0 0;
	padding: 0;
	text-align: right;
	line-height: 1.4;
}

.wcrm-addons .wcrm-addons__total[hidden] {
	display: none !important;
}

/* Screen readers only: the shown total line, announced after a refresh. */
.wcrm-addons .wcrm-addons__live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wcrm-addons.is-open {
	border-color: #c3c4c7;
}

.wcrm-addons .wcrm-addons__list {
	margin-top: 0.85em;
}

.wcrm-addons .wcrm-addons__list[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- groups */

.wcrm-addons .wcrm-addons__group {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #ececec;
	background: transparent;
}

.wcrm-addons .wcrm-addons__group:last-of-type {
	border-bottom: 1px solid #ececec;
}

.wcrm-addons .wcrm-addons__summary {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	margin: 0;
	padding: 0.5em 0.25em;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: inherit;
	background: transparent;
	border: 0;
}

.wcrm-addons .wcrm-addons__summary::-webkit-details-marker {
	display: none;
}

.wcrm-addons .wcrm-addons__summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin: 0 0.2em 0 0.1em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	opacity: 0.7;
}

.wcrm-addons .wcrm-addons__group[open] > .wcrm-addons__summary::before {
	transform: rotate(45deg);
}

.wcrm-addons .wcrm-addons__summary:hover,
.wcrm-addons .wcrm-addons__summary:focus {
	color: inherit;
	background: #f6f7f7;
}

.wcrm-addons .wcrm-addons__summary:focus-visible {
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: -2px;
}

.wcrm-addons .wcrm-addons__group-name {
	flex: 1 1 auto;
	min-width: 0;
}

.wcrm-addons .wcrm-addons__badge {
	flex: 0 0 auto;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: #e7f3ea;
	color: #1e6b33;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.wcrm-addons .wcrm-addons__badge[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- items */

.wcrm-addons .wcrm-addons__items {
	margin: 0;
	padding: 0 0 0.35em;
	list-style: none;
}

.wcrm-addons .wcrm-addons__group .wcrm-addons__items {
	padding-left: 1.15em;
}

.wcrm-addons .wcrm-addons__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.3em 0;
	list-style: none;
}

.wcrm-addons .wcrm-addons__label {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 0.55em;
	min-width: 0;
	margin: 0;
	padding: 0.35em 0;
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
}

.wcrm-addons .wcrm-addons__label input[type="checkbox"] {
	margin-top: 0.1em;
}

.wcrm-addons .wcrm-addons__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wcrm-addons .wcrm-addons__price {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wcrm-addons .wcrm-addons__info,
.wcrm-addons .wcrm-addons__info-spacer {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}

.wcrm-addons .wcrm-addons__info,
.wcrm-addons .wcrm-addons__info:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	border: 1px solid #b4b9be;
	border-radius: 50%;
	background: #fff;
	color: #3c434a;
	font: italic 700 15px/1 Georgia, "Times New Roman", serif;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wcrm-addons .wcrm-addons__info:hover,
.wcrm-addons .wcrm-addons__info:focus,
.wcrm-addons .wcrm-addons__info:active {
	border-color: var(--wcrm-addons-accent);
	background: #f0f6fc;
	color: #1d2327;
	box-shadow: none;
}

.wcrm-addons .wcrm-addons__info:focus-visible {
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: 2px;
}

.wcrm-addons .wcrm-addons__info[aria-expanded="true"],
.wcrm-addons .wcrm-addons__info[aria-expanded="true"]:hover,
.wcrm-addons .wcrm-addons__info[aria-expanded="true"]:focus {
	border-color: #1d2327;
	background: #1d2327;
	color: #fff;
}

/* ---------------------------------------------------------------- quantity (UX-45 §1) */

/* The stepper takes its own line under the name, lined up with the name's text; the description follows it. */
.wcrm-addons .wcrm-addons__item--qty {
	flex-wrap: wrap;
}

/* Basis 0: a long name wraps inside its own cell instead of pushing the price onto the stepper's line. */
.wcrm-addons .wcrm-addons__item--qty .wcrm-addons__label {
	flex: 1 1 0;
}

.wcrm-addons .wcrm-addons__qty {
	order: 1;
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	gap: 0.6em;
	margin: -0.15em 0 0.3em;
	padding: 0 0 0 1.7em;
}

.wcrm-addons .wcrm-addons__qty[hidden] {
	display: none !important;
}

.wcrm-addons .wcrm-addons__item--qty .wcrm-addons__tip {
	order: 2;
}

.wcrm-addons .wcrm-addons__qty-label {
	display: inline;
	margin: 0;
	padding: 0;
	color: var(--wcrm-addons-muted);
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.3;
	cursor: default;
}

.wcrm-addons .wcrm-addons__qty-max {
	color: var(--wcrm-addons-muted);
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}

.wcrm-addons .wcrm-addons__stepper {
	display: inline-flex;
	align-items: stretch;
	height: 36px;
	border: 1px solid #b4b9be;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.wcrm-addons .wcrm-addons__stepper:focus-within {
	border-color: var(--wcrm-addons-accent);
}

.wcrm-addons input.wcrm-addons__qty-input,
.wcrm-addons input.wcrm-addons__qty-input:hover,
.wcrm-addons input.wcrm-addons__qty-input:focus {
	width: 3.4em;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0 0.25em;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #1d2327;
	box-shadow: none;
	outline: none;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wcrm-addons input.wcrm-addons__qty-input:focus-visible {
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: -2px;
}

/* With the buttons in place the browser's own spinner arrows would only add clutter. */
.wcrm-addons.wcrm-addons--js input.wcrm-addons__qty-input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.wcrm-addons.wcrm-addons--js input.wcrm-addons__qty-input::-webkit-inner-spin-button,
.wcrm-addons.wcrm-addons--js input.wcrm-addons__qty-input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Without JavaScript the buttons do nothing: the number field alone is shown. */
.wcrm-addons:not(.wcrm-addons--js) .wcrm-addons__step {
	display: none;
}

.wcrm-addons .wcrm-addons__step,
.wcrm-addons .wcrm-addons__step:visited {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #f6f7f7;
	color: #1d2327;
	font: 400 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wcrm-addons .wcrm-addons__step:first-child {
	border-right: 1px solid #dcdcde;
}

.wcrm-addons .wcrm-addons__step:last-child {
	border-left: 1px solid #dcdcde;
}

.wcrm-addons .wcrm-addons__step:hover,
.wcrm-addons .wcrm-addons__step:focus,
.wcrm-addons .wcrm-addons__step:active {
	border-color: #dcdcde;
	background: #e7eef6;
	color: #1d2327;
	box-shadow: none;
}

.wcrm-addons .wcrm-addons__step:focus-visible {
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: -2px;
}

/* At an end the button stays focusable (aria-disabled) but looks and acts disabled. */
.wcrm-addons .wcrm-addons__step[aria-disabled="true"],
.wcrm-addons .wcrm-addons__step[aria-disabled="true"]:hover,
.wcrm-addons .wcrm-addons__step[aria-disabled="true"]:focus,
.wcrm-addons .wcrm-addons__step[aria-disabled="true"]:active,
.wcrm-addons .wcrm-addons__step:disabled,
.wcrm-addons .wcrm-addons__step:disabled:hover,
.wcrm-addons .wcrm-addons__step:disabled:focus,
.wcrm-addons .wcrm-addons__step:disabled:active {
	border-color: #dcdcde;
	background: #f6f7f7;
	color: #a7aaad;
	cursor: default;
	opacity: 1;
}

/* ---------------------------------------------------------------- the add-on's question (ADDON-58 §2) */

/* Like the stepper: its own line under the name (after the stepper), lined up with the name's text. */
.wcrm-addons .wcrm-addons__item--detail {
	flex-wrap: wrap;
}

.wcrm-addons .wcrm-addons__item--detail .wcrm-addons__label {
	flex: 1 1 0;
}

.wcrm-addons .wcrm-addons__item--detail .wcrm-addons__tip {
	order: 2;
}

/* ADDON-59: the choice lists are a fieldset – Astra and Blocksy frame every fieldset (border, padding); this one is not. */
.wcrm-addons .wcrm-addons__detail {
	order: 1;
	display: block;
	flex: 1 0 100%;
	min-width: 0;
	margin: 0 0 0.35em;
	padding: 0 0 0 1.7em;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.wcrm-addons .wcrm-addons__detail[hidden] {
	display: none !important;
}

/* Also the legend of the choice lists (Astra / Blocksy pad and shift a legend). */
.wcrm-addons .wcrm-addons__detail-label {
	display: block;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0 0 0.25em;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	cursor: default;
}

.wcrm-addons .wcrm-addons__optional {
	color: var(--wcrm-addons-muted);
	font-weight: 400;
}

.wcrm-addons .wcrm-addons__detail-label .required {
	color: #b32d2e;
	font-weight: 700;
	text-decoration: none;
	border: 0;
}

/* „(privaloma)“ for screen readers only – the star next to it is aria-hidden and a <select> does not announce
   aria-required in every browser. */
.wcrm-addons .wcrm-addons__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* Theme-proof: Astra / Blocksy give `.input-text` their own height, padding and focus ring – the box keeps one look. */
.wcrm-addons input.wcrm-addons__detail-input,
.wcrm-addons input.wcrm-addons__detail-input:hover,
.wcrm-addons input.wcrm-addons__detail-input:focus {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 40px;
	margin: 0;
	padding: 0.45em 0.65em;
	border: 1px solid #b4b9be;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	box-shadow: none;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

.wcrm-addons input.wcrm-addons__detail-input:focus {
	border-color: var(--wcrm-addons-accent);
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: -1px;
}

.wcrm-addons input.wcrm-addons__detail-input::placeholder {
	color: #8c8f94;
	opacity: 1;
}

/* ---------------------------------------------------------------- the choice lists (ADDON-59 §2) */

/* One list per unit, as many per line as fit: a cell is never narrower than the longest text a list shows
   (--wcrm-addons-choice, in characters, from the server) plus the theme's side padding and arrow – so no list cuts its
   text, a wide box holds two or three lists per line and a phone one. Without min() a browser keeps one per line. */
.wcrm-addons .wcrm-addons__choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--wcrm-addons-choice, 12ch) + 3.5em)), 1fr));
	align-items: start;
	gap: 0.5em 0.6em;
	margin: 0;
	padding: 0;
}

/* The link of an error notice („Pasirinkite: …“) scrolls to its list: the question and the list before it stay in
   view above it (and a theme's sticky header does not cover it). */
.wcrm-addons select.wcrm-addons__choice,
.wcrm-addons input.wcrm-addons__detail-input {
	scroll-margin-top: 6em;
}

/* The theme's own select (its height, padding, corners and arrow) at the full width of its cell. The colours of every
   state are named here – the theme's where it has them as variables (Blocksy's form colours, Astra's border colour) –
   and the focus gets the accent ring Astra leaves out (`.woocommerce select:focus { outline: 0 }`, same border). */
.wcrm-addons select.wcrm-addons__choice,
.wcrm-addons select.wcrm-addons__choice:hover {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	border-color: var(--theme-form-field-border-initial-color, var(--ast-border-color, #c3c4c7));
	background-color: #fff;
	color: var(--theme-form-text-initial-color, var(--theme-text-color, #3c434a));
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
}

.wcrm-addons select.wcrm-addons__choice:focus {
	border-color: var(--wcrm-addons-accent);
	background-color: #fff;
	color: var(--theme-form-text-focus-color, var(--theme-text-color, #1d2327));
	box-shadow: none;
	outline: 2px solid var(--wcrm-addons-accent);
	outline-offset: -1px;
}

.wcrm-addons select.wcrm-addons__choice option {
	background-color: #fff;
	color: #1d2327;
}

/* A value chosen in another list of the add-on stays in place, greyed out (checkout-addons.js disables it). */
.wcrm-addons select.wcrm-addons__choice option:disabled {
	color: #a7aaad;
}

/* A list or field WooCommerce marked after a refused order („Pasirinkite: …“) gets the red frame the theme gives its
   own invalid fields – also while it has the focus the notice's link gave it (after the focus rules, which keep their
   outline); checkout-addons.js takes the mark away as soon as the customer answers. */
.wcrm-addons select.wcrm-addons__choice[aria-invalid="true"],
.wcrm-addons input.wcrm-addons__detail-input[aria-invalid="true"] {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e;
}

/* The focus ring is drawn over the border – a refused field that has the focus shows it in red, too. */
.wcrm-addons select.wcrm-addons__choice[aria-invalid="true"]:focus,
.wcrm-addons input.wcrm-addons__detail-input[aria-invalid="true"]:focus {
	border-color: #b32d2e;
	outline: 2px solid #b32d2e;
	outline-offset: -1px;
}

/* ---------------------------------------------------------------- popover */

.wcrm-addons .wcrm-addons__tip {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 40;
	width: 320px;
	max-width: 100%;
	max-height: 18em;
	max-height: min(18em, 60vh);
	margin-top: -0.2em;
	padding: 0.75em 0.9em;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
}

.wcrm-addons .wcrm-addons__tip[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.wcrm-addons {
		padding: 0.75em 0.8em;
	}

	.wcrm-addons .wcrm-addons__group .wcrm-addons__items {
		padding-left: 0.4em;
	}

	/* The question takes the row's full width under the checkbox on a phone. */
	.wcrm-addons .wcrm-addons__detail {
		padding-left: 0;
	}

	/* On a phone the description opens in the list, under its row, instead of covering the next rows. */
	.wcrm-addons .wcrm-addons__item {
		flex-wrap: wrap;
	}

	/* Basis 0: the name shrinks and wraps inside its own cell, so price and ⓘ stay on the row. */
	.wcrm-addons .wcrm-addons__label {
		flex: 1 1 0;
	}

	.wcrm-addons .wcrm-addons__tip {
		position: static;
		flex: 1 0 100%;
		width: 100%;
		margin: 0 0 0.35em;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcrm-addons .wcrm-addons__summary::before,
	.wcrm-addons .wcrm-addons__info,
	.wcrm-addons .wcrm-addons__step {
		transition: none;
	}
}

@media (forced-colors: active) {
	.wcrm-addons .wcrm-addons__info,
	.wcrm-addons .wcrm-addons__stepper,
	.wcrm-addons input.wcrm-addons__detail-input,
	.wcrm-addons select.wcrm-addons__choice {
		border-color: ButtonText;
	}

	.wcrm-addons select.wcrm-addons__choice option:disabled {
		color: GrayText;
	}

	.wcrm-addons .wcrm-addons__step[aria-disabled="true"],
	.wcrm-addons .wcrm-addons__step:disabled {
		color: GrayText;
	}

	.wcrm-addons .wcrm-addons__tip {
		border-color: CanvasText;
	}
}