/**
 * Custom checkout fields on the storefront.
 *
 * These sit inside whatever theme the merchant chose, immediately above its
 * add-to-cart button, so colour and type are inherited rather than declared —
 * a form that announces itself in a different palette from the page around it
 * reads as bolted on, which is exactly what it is and exactly what it should
 * not look like.
 *
 * What is declared: rhythm, so a stack of ten fields is scannable; a visible
 * boundary around each choice, so a set of options reads as one question; and
 * the few things a theme reset must not be able to take away — focus you can
 * see, a required marker you can read, and a hidden label that stays available
 * to a screen reader.
 *
 * currentColor is used throughout for accents, so the form picks up the
 * theme's own text colour instead of introducing one.
 */

/* -----------------------------------------------------------------------------
   Living inside somebody else's add-to-cart form

   These fields render inside form.cart, between the quantity input and the
   submit button, because that is what makes them submit with the add. Plenty of
   themes leave that form as a plain block and nothing below matters. Page
   builders do not: Elementor lays the form out as a flex row so the quantity
   and the button sit side by side, and a third child dropped into that row
   becomes a third column — the fields squeeze into a sliver while the quantity
   box and the button stretch to the full height of the field stack.

   The fix is to claim a whole line rather than a column. Once the fields are on
   their own row the remaining row holds only the quantity and the button, so
   they return to their natural size and nothing needs its alignment overridden.
   -------------------------------------------------------------------------- */

.ftgws-addons {
	margin: 0 0 1.75em;
	display: flex;
	flex-direction: column;
	gap: 1.5em;

	/* A full-width flex line. Inert when the form is an ordinary block. */
	flex: 1 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Only a form that actually contains our fields, and only the two properties
   that decide whether it can wrap. Colour, spacing and the button are the
   merchant's business and are left alone. */
form.cart:has(> .ftgws-addons) {
	flex-wrap: wrap;
}

/* The grid equivalent, for a builder that reaches for grid instead. flex-wrap
   does nothing there, and a grid item needs to be told to span every column. */
form.cart:has(> .ftgws-addons) > .ftgws-addons {
	grid-column: 1 / -1;
}

/* fieldset carries a border and padding in every browser. These fields are
   grouped for assistive technology, not boxed for the eye. */
.ftgws-addon {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ftgws-addon__title {
	display: block;
	font-weight: 600;
	margin: 0 0 0.4em;
	padding: 0;
	line-height: 1.35;
}

.ftgws-addon__title--heading {
	font-size: 1.2em;
	letter-spacing: -0.01em;
	margin-top: 0.75em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid currentColor;
	border-image: linear-gradient(to right, currentColor, transparent 65%) 1;
	opacity: 0.95;
}

.ftgws-addon__required {
	margin-inline-start: 0.15em;
	color: #b32d2e;
	font-weight: 700;
}

.ftgws-addon__price {
	font-weight: 400;
	opacity: 0.7;
	font-size: 0.9em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ftgws-addon__description {
	margin: 0 0 0.6em;
	font-size: 0.9em;
	opacity: 0.75;
	max-width: 46em;
}

.ftgws-addon__description > :last-child {
	margin-bottom: 0;
}

.ftgws-addon__control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ftgws-addon__control--price,
.ftgws-addon__control--quantity,
.ftgws-addon__control--date {
	width: auto;
	min-width: 9em;
	max-width: 14em;
}

/* -----------------------------------------------------------------------------
   Choices

   Each option gets a real boundary. A bare column of radios beside long labels
   is hard to scan and easy to mis-click; a bounded row makes the whole thing
   the target and makes the chosen one obvious at a glance.
   -------------------------------------------------------------------------- */

.ftgws-addon__options {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.ftgws-addon__option {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.6em 0.75em;
	cursor: pointer;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 6px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.ftgws-addon__option:hover {
	border-color: color-mix(in srgb, currentColor 38%, transparent);
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.ftgws-addon__option:has(input:checked) {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Focus must survive every theme reset, or the form becomes unusable by
   keyboard without anyone noticing. */
.ftgws-addon__option:has(input:focus-visible),
.ftgws-addon__control:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ftgws-addon__option input[type="radio"],
.ftgws-addon__option input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.ftgws-addon__option-label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Browsers without :has() get no selected state from the rules above, so the
   boundary stays neutral rather than misleading. */
@supports not (selector(:has(*))) {
	.ftgws-addon__option {
		border-color: color-mix(in srgb, currentColor 18%, transparent);
	}
}

/* -----------------------------------------------------------------------------
   The image grid

   Real radios, visually hidden inside their labels — so they keep their place
   in the tab order and their accessible name. A grid of unfocusable images is
   unusable by keyboard and invisible to a screen reader.
   -------------------------------------------------------------------------- */

.ftgws-addon__options--images {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75em;
}

.ftgws-addon__options--images .ftgws-addon__option {
	flex-direction: column;
	align-items: stretch;
	gap: 0.4em;
	padding: 0.5em;
	width: 9.5em;
	text-align: center;
}

.ftgws-addon__options--images input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ftgws-addon__options--images img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* -----------------------------------------------------------------------------
   Feedback
   -------------------------------------------------------------------------- */

.ftgws-addon__counter {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 0.3em;
	font-variant-numeric: tabular-nums;
}

.ftgws-addon__error {
	color: #b32d2e;
	font-size: 0.9em;
	margin: 0.4em 0 0;
	font-weight: 500;
}

/* -----------------------------------------------------------------------------
   The running total

   The one place this form is allowed to look like a panel, because it is the
   part a customer checks before committing. Every row is server-rendered;
   script only rewrites amounts and toggles rows already present.
   -------------------------------------------------------------------------- */

.ftgws-addons-totals {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 6px;
	padding: 0.85em 1em;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.ftgws-addons-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	margin: 0;
}

.ftgws-addons-totals__row[data-row="today"] {
	font-weight: 700;
	font-size: 1.05em;
}

/* The recurring commitment is the number a subscriber most needs to notice, so
   it gets a rule above it rather than being one more line in a list. */
.ftgws-addons-totals__row[data-row="recurring"] {
	padding-top: 0.4em;
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 12%, transparent);
	opacity: 0.85;
	font-size: 0.95em;
}

.ftgws-addons-totals__label {
	min-width: 0;
}

.ftgws-addons-totals__amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* [hidden] loses to display:flex on specificity, and every rule above depends
   on it to keep a row out of the page until it has something to say. */
.ftgws-addons-totals__row[hidden],
.ftgws-addon__error[hidden],
.ftgws-addon__counter[hidden] {
	display: none;
}

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