/**
 * Extra options: the choices on the slip.
 *
 * Each group is a ruled block with its name in the condensed display face
 * and a quiet hint (required, min, max). Each option is a row: name at the
 * start, its price delta in the ink column, a square check (or round radio)
 * at the end. Selects and the pizza half-and-half picker follow the same
 * rules. Depends on css/foodmaster-tokens.css.
 */

.extra-options-accordion {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--fm-font-body);
	font-size: 15px;
	color: var(--fm-black);
}

.extra-options-accordion:empty {
	display: none;
}

/* Group */
.extra-options-accordion > li {
	position: relative;
	margin: 0;
	padding: 0 0 var(--fm-m);
	border-top: var(--fm-rule-strong);
	background: transparent;
	transition: none;
}

.extra-options-accordion > li:hover {
	background: transparent;
}

.extra-options-accordion > li:last-child {
	border-bottom: 0;
}

/* Group head (collapsible and flat share one look) */
.extra-options-accordion a.toggle,
.extra-options-accordion .wf-flat-style-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--fm-m) * 2);
	min-height: calc(var(--fm-m) * 6);
	padding: calc(var(--fm-m) * 1.5) 0 var(--fm-m);
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--fm-black);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 20px;
	line-height: 1;
	letter-spacing: calc(0.02em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	text-decoration: none;
	cursor: default;
}

.extra-options-accordion a.toggle {
	cursor: pointer;
	align-items: center;
}

.extra-options-accordion a.toggle:hover {
	color: var(--fm-ink);
	background: transparent;
}

.extra-options-accordion a.toggle:focus-visible {
	outline: none;
	box-shadow: var(--fm-focus);
	border-radius: var(--fm-radius);
}

/* Chevron on the collapsible head, drawn, not an icon font */
.extra-options-accordion a.toggle .foodmaster-icon-down-light {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	float: none;
	font-size: 0;
	transition: transform var(--fm-fast) var(--fm-ease);
}

.extra-options-accordion a.toggle .foodmaster-icon-down-light::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.25px solid currentColor;
	border-bottom: 2.25px solid currentColor;
	transform: translate(-50%, -70%) rotate(45deg);
}

.extra-options-accordion > li.active a.toggle .foodmaster-icon-down-light {
	transform: rotate(180deg);
}

/* Required marker and hints */
.extra-options-accordion > li[required] > a.toggle::after,
.extra-options-accordion > li[required] > .wf-flat-style-title::after {
	content: attr(data-required-label);
	order: 2;
	margin-inline-start: auto;
	padding: 3px 6px;
	border: 1px solid var(--fm-black);
	border-radius: var(--fm-radius);
	font-family: var(--fm-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: calc(0.06em * var(--fm-tracking));
	line-height: 1;
	text-transform: var(--fm-caps);
	color: var(--fm-black);
}

.extra-options-accordion > li[required] > a.toggle .foodmaster-icon-down-light {
	order: 3;
}

.foodmaster-choices-hint {
	display: block;
	margin: -2px 0 var(--fm-m);
	font-family: var(--fm-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fm-n6);
}

/* Option lists */
.extra-options-accordion .inner,
.extra-options-accordion > li.foodmaster_flat_category > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.extra-options-accordion .inner {
	display: none;
}

.extra-options-accordion .inner.shown,
.extra-options-accordion > li.active .inner {
	display: block;
}

/* Option row */
.extra_options_checkbox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: calc(var(--fm-m) * 2);
	min-height: calc(var(--fm-m) * 6);
	padding: var(--fm-m) 0;
	border-bottom: var(--fm-rule);
}

.extra_options_checkbox:last-child {
	border-bottom: 0;
}

.extra_options_label {
	min-width: 0;
}

.extra_options_label label {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--fm-black);
	overflow-wrap: break-word;
	cursor: pointer;
}

.extra_options_value {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.foodmaster-cbx-wrapper {
	display: flex;
	align-items: center;
}

/* The control: price delta in the ink column, then the box */
.foodmaster-cbx {
	display: inline-flex;
	align-items: center;
	flex-direction: row-reverse;
	gap: calc(var(--fm-m) * 1.5);
	margin: 0;
	cursor: pointer;
	user-select: none;
}

.foodmaster-cbx span:first-child {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fm-m) * 3);
	height: calc(var(--fm-m) * 3);
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	color: var(--fm-on-ink);
	transition: background var(--fm-fast) var(--fm-ease), border-color var(--fm-fast) var(--fm-ease);
	flex-shrink: 0;
}

.foodmaster-cbx.radio span:first-child {
	border-radius: 50%;
}

.foodmaster-cbx span:first-child svg {
	width: 12px;
	height: 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: square;
	stroke-linejoin: miter;
	opacity: 0;
	transition: opacity var(--fm-fast) var(--fm-ease);
}

.foodmaster-cbx.radio span:first-child svg {
	display: none;
}

.foodmaster-cbx.radio span:first-child::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--fm-fast) var(--fm-ease);
}

.foodmaster-cbx span:last-child {
	min-width: calc(var(--fm-m) * 7);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 17px;
	line-height: 1;
	color: var(--fm-ink);
	font-variant-numeric: tabular-nums lining-nums;
	text-align: end;
	white-space: nowrap;
}

.foodmaster-cbx span:last-child:empty {
	display: none;
}

.foodmaster-cbx:hover span:first-child {
	border-color: var(--fm-ink);
}

/* The native input stays in the tab order; the drawn box beside it shows state. */
.inp-foodmaster-cbx {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.inp-foodmaster-cbx:checked + .foodmaster-cbx span:first-child {
	background: var(--fm-ink);
	border-color: var(--fm-ink);
}

.inp-foodmaster-cbx:checked + .foodmaster-cbx span:first-child svg,
.inp-foodmaster-cbx:checked + .foodmaster-cbx.radio span:first-child::after {
	opacity: 1;
}

.inp-foodmaster-cbx:focus-visible + .foodmaster-cbx span:first-child {
	box-shadow: var(--fm-focus);
}

.inp-foodmaster-cbx:disabled + .foodmaster-cbx {
	cursor: not-allowed;
}

.inp-foodmaster-cbx:disabled + .foodmaster-cbx span:first-child {
	border-color: var(--fm-n3);
	background: var(--fm-n1);
}

.inp-foodmaster-cbx:disabled + .foodmaster-cbx span:last-child {
	color: var(--fm-n6);
}

/* Select-type group */
.wf_select_wrapper {
	position: relative;
	margin: var(--fm-m) 0 0;
}

.wf_select_wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: calc(var(--fm-m) * 1.5);
	width: 8px;
	height: 8px;
	border-right: var(--fm-rule-strong);
	border-bottom: var(--fm-rule-strong);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.wf_select_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: calc(var(--fm-m) * 6);
	padding: 0 calc(var(--fm-m) * 5) 0 calc(var(--fm-m) * 1.5);
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	color: var(--fm-black);
	font-family: var(--fm-font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.wf_select_wrapper select:focus {
	outline: none;
	box-shadow: var(--fm-focus);
}

/* Error state on a group */
.extra-options-accordion > li.error > a.toggle,
.extra-options-accordion > li.error > .wf-flat-style-title {
	color: var(--fm-error);
}

.extra-options-accordion > li.error {
	border-top-color: var(--fm-error);
}

.extra-options-accordion li.error .foodmaster-choices-hint {
	color: var(--fm-error);
	font-weight: 600;
}

.wf_requiremnts_error {
	margin: var(--fm-m) 0 0;
	padding: var(--fm-m) calc(var(--fm-m) * 1.5);
	border: 1.5px solid var(--fm-error);
	border-radius: var(--fm-radius);
	color: var(--fm-error);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Pizza half and half ---------- */
.foodmaster-half-half-options {
	margin: 0;
}

.foodmaster-pizza-selection {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--fm-m) calc(var(--fm-m) * 2);
	padding: var(--fm-m) 0;
	border-bottom: var(--fm-rule);
}

.foodmaster-pizza-selection:last-child {
	border-bottom: 0;
}

.foodmaster-topping-label {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--fm-black);
}

.foodmaster-pizza-icons {
	display: inline-grid;
	grid-auto-flow: column;
	gap: 0;
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	overflow: hidden;
}

.foodmaster-pizza-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fm-m) * 5.5);
	height: calc(var(--fm-m) * 5.5);
	margin: 0;
	background: var(--fm-paper);
	border-inline-start: 1.5px solid var(--fm-black);
	cursor: pointer;
	transition: background var(--fm-fast) var(--fm-ease);
}

.foodmaster-pizza-option:first-child {
	border-inline-start: 0;
}

.foodmaster-pizza-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.foodmaster-pizza-option .pizza-icon {
	width: 24px;
	height: 24px;
	color: var(--fm-black);
	transition: color var(--fm-fast) var(--fm-ease);
}

.foodmaster-pizza-option:hover {
	background: var(--fm-n1);
}

.foodmaster-pizza-option:has(input:checked) {
	background: var(--fm-ink);
}

.foodmaster-pizza-option:has(input:checked) .pizza-icon,
.foodmaster-pizza-option input:checked + .pizza-icon {
	color: var(--fm-on-ink);
}

.foodmaster-pizza-option:has(input:focus-visible) {
	box-shadow: inset var(--fm-focus);
}

.foodmaster-pizza-option:has(input[disabled]) {
	cursor: not-allowed;
}

.foodmaster-pizza-option:has(input[disabled]:not(:checked)) .pizza-icon {
	color: var(--fm-n3);
}

@media (prefers-reduced-motion: reduce) {
	.extra-options-accordion a.toggle .foodmaster-icon-down-light,
	.foodmaster-cbx span:first-child,
	.foodmaster-cbx span:first-child svg,
	.foodmaster-pizza-option,
	.foodmaster-pizza-option .pizza-icon {
		transition: none;
	}
}