/**
 * Purchase form styling.
 *
 * Built for Rīgas Tinte's dark theme and written to survive a restyle
 * elsewhere. Every colour resolves in three steps: the site's own Breakdance
 * variable first, then Breakdance's generic equivalent, then a literal. So on
 * this site the form inherits the real brand tokens and follows them if they
 * change, and on a site with neither variable it still renders correctly.
 *
 * The visual language is the site's, not a generic form's:
 *   - square corners, because the site sets border-radius 0 throughout
 *   - hairline rules in the text colour at low alpha, matching the header's
 *     1px #fffce178 divider
 *   - uppercase, letter-spaced, light-weight labels
 *   - red is the active colour: the selected amount is filled with it, hover
 *     and the selected "who is it for" card are edged with it
 *
 * Tokens are declared on [data-dwgc-form] rather than on a single wrapper,
 * because a form composed from part shortcodes has no shared ancestor: each
 * part is its own element somewhere in the builder's layout, and each one
 * needs the tokens on itself.
 */

[data-dwgc-form] {
	/* Brand. --gsap-light / --black-2 / --red are this site's own names;
	   the --bde-* fallbacks are Breakdance's global settings. */
	--dwgc-ink: var(--gsap-light, var(--bde-body-text-color, #fffce1));
	--dwgc-bg: var(--black-2, var(--bde-background-color, #191919));
	--dwgc-accent: var(--red, var(--bde-brand-primary-color, #fe0100));
	--dwgc-on-accent: var(--bde-button-primary-text-color, #fff);

	/* Rules and fills derived from the ink, so they track a colour change.
	   The literal in each first declaration is the fallback for a browser
	   without color-mix(); the site is dark, so it is the dark-theme value. */
	--dwgc-line: rgba(255, 252, 225, 0.22);
	--dwgc-line: color-mix(in srgb, var(--dwgc-ink) 22%, transparent);
	--dwgc-line-strong: rgba(255, 252, 225, 0.47);
	--dwgc-line-strong: color-mix(in srgb, var(--dwgc-ink) 47%, transparent);
	--dwgc-sunk: rgba(255, 252, 225, 0.06);
	--dwgc-sunk: color-mix(in srgb, var(--dwgc-ink) 6%, transparent);
	--dwgc-muted: rgba(255, 252, 225, 0.66);
	--dwgc-muted: color-mix(in srgb, var(--dwgc-ink) 66%, transparent);

	--dwgc-radius: 0;

	/* The amount tiles follow the site's own 4px corner, the value used by
	   the global classes in Breakdance's selectors.css. It is a separate
	   token from --dwgc-radius so the tiles can carry it without committing
	   the inputs and the button to it. */
	--dwgc-radius-amount: 4px;

	--dwgc-amount-columns: 5;

	/*
	 * One spacing scale, used everywhere, so the form has a rhythm rather
	 * than a collection of one-off margins. Each step means something:
	 *
	 *   3xs  within a single control (a tile's title and its note)
	 *   2xs  a control and the hint explaining it
	 *   xs   a label and the control it labels
	 *   sm   two fields that belong to the same question
	 *   md   between the form's sections — the dominant gap
	 *   lg   around the summary and submit, the form's closing block
	 *
	 * Spacing is owned by containers through `gap`, never by the margins of
	 * the things being spaced. That is what makes a part droppable into a
	 * page builder: on its own it contributes no outer margin, so the builder
	 * controls the gap, and inside the full form the form controls it.
	 */
	--dwgc-space-3xs: 4px;
	--dwgc-space-2xs: 8px;
	--dwgc-space-xs: 10px;
	--dwgc-space-sm: 16px;
	--dwgc-space-md: 28px;
	--dwgc-space-lg: 36px;

	color: var(--dwgc-ink);
}

/* The form's parts size their amount grid against whatever column the builder
   put them in, not the viewport, so a five-across row can react to a narrow
   column on a wide screen. */
.dwgc-purchase-form,
.dwgc-part--amounts {
	container-type: inline-size;
}

.dwgc-purchase-form {
	display: flex;
	flex-direction: column;
	gap: var(--dwgc-space-md);
	max-width: 34rem;
}

/* The form stacks its sections and owns the gap between them. */
.dwgc-form {
	display: flex;
	flex-direction: column;
	gap: var(--dwgc-space-md);
	margin: 0;
}

/* A section stacks its own fields at the tighter within-a-question step, and
   carries no outer margin of its own — see the note on the scale above. */
.dwgc-part {
	display: flex;
	flex-direction: column;
	gap: var(--dwgc-space-sm);
	margin: 0;
	min-width: 0;
}

.dwgc-form-title,
.dwgc-part-title {
	margin: 0;
	color: var(--dwgc-ink);
}

/* The closing block gets a little more air than a section break, so the
   summary and button read as the end of the form rather than one more
   question. */
.dwgc-part--summary {
	margin-top: calc(var(--dwgc-space-lg) - var(--dwgc-space-md));
}

/* The recipient fields exist because of the choice above them. Indenting
   them behind a hairline says so without a word of explanation. */
.dwgc-part--delivery + .dwgc-part--recipient {
	padding-left: var(--dwgc-space-sm);
	border-left: 1px solid var(--dwgc-line);
}

/* The anchor form holds only the hidden WooCommerce fields. Controls
   elsewhere on the page associate with it through their form attribute,
   which does not depend on it being rendered. */
.dwgc-form-anchor {
	display: none;
}

/* Several themes forget that [hidden] should win over their own display
   rules, and the recipient block relies on it. */
[data-dwgc-form] [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------------ */

/* A field is a plain box. It is deliberately not a flex container: these are
   <fieldset> as well as <p>, and a flex fieldset renders its <legend> wrongly
   in more than one browser. The gap between fields comes from .dwgc-part. */
[data-dwgc-form] .dwgc-field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

[data-dwgc-form] .dwgc-label {
	display: block;
	margin: 0 0 var(--dwgc-space-xs);
	padding: 0;
	color: var(--dwgc-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dwgc-required {
	color: var(--dwgc-accent);
}

[data-dwgc-form] .dwgc-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px var(--dwgc-space-sm);
	border: 1px solid var(--dwgc-line);
	border-radius: var(--dwgc-radius);
	background: transparent;
	color: var(--dwgc-ink);
	/* Under 16px, iOS Safari zooms the page when the field takes focus. */
	font-size: 16px;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.4;
	transition: border-color 0.14s ease;
}

[data-dwgc-form] .dwgc-input::placeholder {
	color: var(--dwgc-muted);
	opacity: 1;
}

[data-dwgc-form] .dwgc-input:hover {
	border-color: var(--dwgc-line-strong);
}

[data-dwgc-form] .dwgc-input:focus,
[data-dwgc-form] .dwgc-input:focus-visible {
	outline: 2px solid var(--dwgc-accent);
	outline-offset: 0;
	border-color: var(--dwgc-accent);
	background: transparent;
	color: var(--dwgc-ink);
}

[data-dwgc-form] .dwgc-textarea {
	resize: vertical;
	min-height: 5.5em;
}

.dwgc-hint {
	display: block;
	margin-top: var(--dwgc-space-2xs);
	color: var(--dwgc-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.dwgc-counter {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
 * Amount buttons
 *
 * Ten whole-euro denominations, five across and two down. The short "50€"
 * label from DWGC_Money::format_short() is what makes that fit; "50,00 €"
 * needed four columns for the same width.
 * ------------------------------------------------------------------ */

.dwgc-amounts {
	display: grid;
	grid-template-columns: repeat(var(--dwgc-amount-columns, 5), minmax(0, 1fr));
	gap: var(--dwgc-space-2xs);
}

.dwgc-amount {
	display: block;
	margin: 0;
	min-width: 0;
	cursor: pointer;
}

/* The radio stays in the accessibility tree and keeps keyboard behaviour;
   only its default appearance is hidden. */
.dwgc-amount-input,
.dwgc-delivery-input {
	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;
}

.dwgc-amount-face {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 54px;
	padding: 10px 6px;
	/* 1px in every state, and the same font weight in every state, so a tile
	   never changes size or re-flows its label when it is hovered or
	   selected. State is carried by colour alone. */
	border: 1px solid var(--dwgc-line);
	border-radius: var(--dwgc-radius-amount);
	background: transparent;
	color: var(--dwgc-ink);
	font-size: 1.0625rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	text-align: center;
	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.dwgc-amount:hover .dwgc-amount-face {
	border-color: var(--dwgc-accent);
}

/* Selected fills with the site's red, the same red-with-white pairing as the
   site's own primary buttons (--bde-button-primary-text-color). White on
   #fe0100 is 4.02:1 — AA for large text, and above the 3:1 needed for the
   selected state itself to read; cream would be 3.88:1. */
.dwgc-amount-input:checked + .dwgc-amount-face {
	border-color: var(--dwgc-accent);
	background: var(--dwgc-accent);
	color: var(--dwgc-on-accent);
}

/* The focus ring is an outline, offset clear of the tile, so it adds nothing
   to the box and cannot move the grid. On the selected tile the offset gap
   keeps it readable as a separate ring rather than a thicker red edge. */
.dwgc-amount-input:focus-visible + .dwgc-amount-face {
	outline: 2px solid var(--dwgc-ink);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Gift / for-me choice
 * ------------------------------------------------------------------ */

.dwgc-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--dwgc-space-2xs);
}

.dwgc-choice {
	display: block;
	margin: 0;
	min-width: 0;
	cursor: pointer;
}

.dwgc-choice-face {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dwgc-space-3xs);
	box-sizing: border-box;
	height: 100%;
	padding: var(--dwgc-space-sm);
	border: 1px solid var(--dwgc-line);
	border-radius: var(--dwgc-radius);
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* Same language as the amount tiles — red means active — but as a red edge
   rather than a fill: these cards carry a second line of small muted text,
   which would fail contrast on red, and one filled red group per form is
   enough. */
.dwgc-choice:hover .dwgc-choice-face {
	border-color: var(--dwgc-accent);
}

.dwgc-delivery-input:checked + .dwgc-choice-face {
	border-color: var(--dwgc-accent);
	background: var(--dwgc-sunk);
}

.dwgc-delivery-input:checked + .dwgc-choice-face::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--dwgc-accent);
}

.dwgc-delivery-input:focus-visible + .dwgc-choice-face {
	outline: 2px solid var(--dwgc-ink);
	outline-offset: 3px;
}

.dwgc-choice-title {
	color: var(--dwgc-ink);
	font-weight: 500;
}

.dwgc-choice-note {
	color: var(--dwgc-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Summary and submit
 * ------------------------------------------------------------------ */

.dwgc-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dwgc-space-sm);
	margin: 0;
	padding: var(--dwgc-space-sm) 0;
	border-top: 1px solid var(--dwgc-line);
	border-bottom: 1px solid var(--dwgc-line);
}

.dwgc-summary-label {
	color: var(--dwgc-muted);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dwgc-summary-value {
	color: var(--dwgc-ink);
	font-size: 1.75rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* The `button alt` classes mean WooCommerce and the theme both have opinions
   about this button, so the properties that carry the design are set here at
   a specificity that wins without !important. */
[data-dwgc-form] .dwgc-submit,
[data-dwgc-form] .dwgc-submit.button,
[data-dwgc-form] .dwgc-submit.button.alt {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 56px;
	padding: 16px 28px;
	border: 1px solid var(--dwgc-accent);
	border-radius: var(--dwgc-radius);
	/* The same pairing the site's own primary buttons use:
	   --bde-brand-primary-color with --bde-button-primary-text-color. */
	background: var(--dwgc-accent);
	color: var(--dwgc-on-accent);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.14s ease, color 0.14s ease;
}

[data-dwgc-form] .dwgc-submit:hover,
[data-dwgc-form] .dwgc-submit.button:hover,
[data-dwgc-form] .dwgc-submit.button.alt:hover {
	background: transparent;
	color: var(--dwgc-accent);
}

[data-dwgc-form] .dwgc-submit:focus-visible {
	outline: 2px solid var(--dwgc-ink);
	outline-offset: 2px;
}

.dwgc-footnote {
	margin: 0;
	color: var(--dwgc-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * WooCommerce notices
 *
 * A builder page has no WooCommerce notice area, so these print from the
 * form and arrive with the store's default light styling. Recolour them for
 * a dark page — an unreadable validation error is the same as none.
 * ------------------------------------------------------------------ */

.dwgc-notices:empty {
	display: none;
}

.dwgc-notices .woocommerce-error,
.dwgc-notices .woocommerce-message,
.dwgc-notices .woocommerce-info {
	margin: 0;
	padding: var(--dwgc-space-sm);
	border: 1px solid var(--dwgc-line-strong);
	border-left-width: 3px;
	border-radius: var(--dwgc-radius);
	background: var(--dwgc-sunk);
	color: var(--dwgc-ink);
	font-size: 0.9375rem;
	list-style: none;
}

.dwgc-notices .woocommerce-error {
	border-left-color: var(--dwgc-accent);
}

.dwgc-notices .woocommerce-error li,
.dwgc-notices .woocommerce-message li,
.dwgc-notices .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwgc-notices .woocommerce-error li + li {
	margin-top: 6px;
}

.dwgc-notices a {
	color: var(--dwgc-ink);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Admin-only notice
 * ------------------------------------------------------------------ */

.dwgc-purchase-form--notice {
	padding: var(--dwgc-space-sm);
	border: 1px dashed var(--dwgc-line-strong);
	border-radius: var(--dwgc-radius);
	color: var(--dwgc-ink);
}

.dwgc-purchase-form--notice p {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Narrow columns
 *
 * Five across is the intended layout and is kept for as long as the labels
 * fit, by tightening the tiles rather than reflowing them. Only a genuinely
 * tiny column drops to three, where five would leave the numbers clipped.
 * ------------------------------------------------------------------ */

@container (max-width: 30rem) {
	.dwgc-amount-face {
		min-height: 48px;
		padding: 8px 4px;
		font-size: 1rem;
	}

	.dwgc-amounts {
		gap: 6px;
	}
}

@container (max-width: 22rem) {
	.dwgc-amount-face {
		min-height: 44px;
		font-size: 0.9375rem;
		letter-spacing: 0;
	}
}

@container (max-width: 17rem) {
	.dwgc-amounts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Same tightening for browsers without container queries, against the
   viewport instead. */
@supports not (container-type: inline-size) {
	@media (max-width: 34rem) {
		.dwgc-amount-face {
			min-height: 48px;
			padding: 8px 4px;
			font-size: 1rem;
		}

		.dwgc-amounts {
			gap: 6px;
		}
	}

	@media (max-width: 24rem) {
		.dwgc-amount-face {
			min-height: 44px;
			font-size: 0.9375rem;
			letter-spacing: 0;
		}
	}
}

/* Respect a reduced-motion preference — the transitions are decorative. */
@media (prefers-reduced-motion: reduce) {
	[data-dwgc-form] .dwgc-input,
	.dwgc-amount-face,
	.dwgc-choice-face,
	[data-dwgc-form] .dwgc-submit {
		transition: none;
	}
}