/* SGP design system components used by the website.
 *
 * Ported from SGP-Design/design-system styles/foundations.css (iconography)
 * and styles/components.css @ 0ed224d: Button, Icon button, Inline link and
 * Dialog; Text field and Checkbox @ c902bca. Declarations are the library's;
 * the only edits are raw sizes swapped for tokens (the raw-value gate), the
 * library's data-force review hooks left out, and .on-dark, the website's
 * dark section class, added beside the library's .sgp-on-dark.
 * Specs: system/components/actions.md, system/components/inputs-feedback.md,
 * system/foundations/interaction.md.
 */

/* ---------- Iconography: Material Symbols Outlined ---------- */

.sgp-icon {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: var(--material-icon);
	line-height: 1;
	width: 1em;
	height: 1em;
	display: inline-block;
	flex: none;
	overflow: hidden;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "liga";
	font-optical-sizing: auto;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0;
}

.sgp-icon--filled {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0;
}

/* Theme icons that became glyphs keep the block's own icon size where the
   content sets one (--isize: list bullets); otherwise Material's 24. */
.icon.sgp-icon {
	font-size: var(--isize, var(--material-icon));
	width: 1em;
	height: 1em;
}

/* ---------- Button ---------- */

/* Name: Button label */
.sgp-button {
	--_bg: transparent;
	--_fg: var(--sgp-color-ink);
	--_pad: var(--sgp-space-24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	gap: var(--sgp-space-8);
	min-height: var(--sgp-control-height);
	padding: var(--sgp-space-16) var(--_pad);
	border: 0;
	border-radius: var(--sgp-radius-control);
	background: var(--_bg);
	color: var(--_fg);
	font: var(--sgp-weight-medium) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

.sgp-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--sgp-state-layer);
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	transition: opacity var(--sgp-dur-short) var(--sgp-ease);
}

.sgp-button:hover::before { opacity: var(--sgp-state-hover); }
.sgp-button:focus-visible::before { opacity: var(--sgp-state-focus); }
.sgp-button:active::before { opacity: var(--sgp-state-pressed); }

.sgp-button:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

.sgp-button__label { display: inline-block; }
.sgp-button__icon { transition: transform var(--sgp-dur-short) var(--sgp-ease); }

/* Trailing action/navigation icon moves right on pointer hover (actions.md). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sgp-button:hover .sgp-button__icon--move { transform: translateX(var(--sgp-space-4)); }
}

.sgp-button--primary   { --_bg: var(--sgp-color-interactive);  --_fg: var(--sgp-color-on-color); }
.sgp-button--secondary { --_bg: var(--sgp-color-tonal-action); --_fg: var(--sgp-color-ink); }
.sgp-button--ask       { --_bg: var(--sgp-color-ask);          --_fg: var(--sgp-color-on-color); }

/* Tertiary: no container; hover and press turn the label interactive and
   underline it instead of drawing a layer. */
.sgp-button--tertiary { --_pad: 0; }
.sgp-button--tertiary::before { display: none; }

.sgp-button--tertiary:hover,
.sgp-button--tertiary:active { --_fg: var(--sgp-color-interactive); }

.sgp-button--tertiary:hover .sgp-button__label,
.sgp-button--tertiary:active .sgp-button__label {
	text-decoration: underline;
	text-decoration-thickness: var(--sgp-underline-hover);
	text-underline-offset: var(--sgp-underline-offset);
}

/* On dark surfaces. */
:is(.sgp-on-dark, .on-dark) .sgp-button--secondary,
.sgp-button--secondary.sgp-on-dark {
	--_bg: transparent;
	--_fg: var(--sgp-color-on-color);
	box-shadow: inset 0 0 0 var(--border-2) var(--sgp-color-on-color);
}

:is(.sgp-on-dark, .on-dark) .sgp-button--secondary::before,
.sgp-button--secondary.sgp-on-dark::before { display: none; }

:is(.sgp-on-dark, .on-dark) .sgp-button--secondary:hover,
:is(.sgp-on-dark, .on-dark) .sgp-button--secondary:active,
.sgp-button--secondary.sgp-on-dark:hover,
.sgp-button--secondary.sgp-on-dark:active {
	--_bg: var(--sgp-color-on-color);
	--_fg: var(--sgp-color-ink);
}

:is(.sgp-on-dark, .on-dark) .sgp-button--tertiary,
:is(.sgp-on-dark, .on-dark) .sgp-button--tertiary:hover,
:is(.sgp-on-dark, .on-dark) .sgp-button--tertiary:active { --_fg: var(--sgp-color-on-color); }

:is(.sgp-on-dark, .on-dark) .sgp-button,
.sgp-button.sgp-on-dark { --sgp-focus-ring-color: var(--sgp-color-on-color); }

/* Website layout keys on a button block. */
.sgp-button--full { align-self: stretch; }
.sgp-button.l-self-center { align-self: center; }

/* ---------- Circle button ---------- */
/* Icon-only arrow control: carousels and pagination (sgp_circle_button()).
   The library has no circle button yet, so it takes the library icon
   button's state layer: hover 8%, focus and press 10%. One dark circle on
   every surface, photos included. Hosts may place it and set
   --sgp-circle-size; the states stay here. */
/* Placement is the host's: zero specificity, so a host's position always wins. */
:where(.sgp-circle-button) {
	position: relative;
}

.sgp-circle-button {
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sgp-circle-size, var(--size-56));
	height: var(--sgp-circle-size, var(--size-56));
	padding: 0;
	border: 0;
	border-radius: var(--sgp-radius-full);
	background-color: var(--color-nav-btn);
	color: var(--sgp-color-on-color);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sgp-circle-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--sgp-state-layer-on-dark);
	opacity: 0;
	transition: opacity var(--sgp-dur-short) var(--sgp-ease);
}

.sgp-circle-button:hover::before { opacity: var(--sgp-state-hover); }
.sgp-circle-button:focus-visible::before { opacity: var(--sgp-state-focus); }
.sgp-circle-button:active::before { opacity: var(--sgp-state-pressed); }

.sgp-circle-button:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-color-on-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

/* No earlier or later page: the arrow keeps its place but is not shown. */
.sgp-circle-button.is-disabled {
	visibility: hidden;
}

/* ---------- Icon button (standard) ----------
   Material standard icon button: 40 container, 24 glyph, 48 target. */
.sgp-icon-button {
	--_size: var(--sgp-target-min);
	--_bg: var(--sgp-color-tonal-action);
	--_fg: var(--sgp-color-ink);
	--_layer: var(--sgp-state-layer);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sgp-space-24);
	padding: 0;
	border: 0;
	background: none;
	color: var(--_fg);
	font: var(--sgp-weight-medium) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.sgp-icon-button__container {
	width: var(--_size);
	height: var(--_size);
	border-radius: var(--sgp-radius-full);
	background: var(--_bg);
	display: grid;
	place-items: center;
	position: relative;
	isolation: isolate;
	flex: none;
}

.sgp-icon-button__container::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--_layer);
	opacity: 0;
	z-index: -1;
	transition: opacity var(--sgp-dur-short) var(--sgp-ease);
}

.sgp-icon-button:hover .sgp-icon-button__container::before { opacity: var(--sgp-state-hover); }
.sgp-icon-button:focus-visible .sgp-icon-button__container::before { opacity: var(--sgp-state-focus); }
.sgp-icon-button:active .sgp-icon-button__container::before { opacity: var(--sgp-state-pressed); }

.sgp-icon-button:focus-visible .sgp-icon-button__container {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

.sgp-icon-button:focus { outline: none; }

.sgp-icon-button--standard { --_size: var(--sgp-control-compact); --_bg: transparent; --_layer: currentColor; }

/* 48 target around the 40 container. */
.sgp-icon-button--standard .sgp-icon-button__container::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--sgp-space-4));
	border-radius: inherit;
}

:is(.sgp-on-dark, .on-dark) .sgp-icon-button,
.sgp-icon-button.sgp-on-dark {
	--_fg: var(--sgp-color-on-color);
	--sgp-focus-ring-color: var(--sgp-color-on-color);
}

/* ---------- Inline link ----------
   Inside running text: underlined at rest, interactive on hover. */
.sgp-link,
.rich a:not([class]),
.sgp-wpforms .wpforms-field-description a {
	color: var(--sgp-color-ink);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--sgp-underline-rest);
	text-underline-offset: var(--sgp-underline-offset);
}

.sgp-link:hover,
.rich a:not([class]):hover,
.sgp-wpforms .wpforms-field-description a:hover {
	color: var(--sgp-color-interactive);
	text-decoration-thickness: var(--sgp-underline-hover);
}

.sgp-link:focus-visible,
.rich a:not([class]):focus-visible,
.sgp-wpforms .wpforms-field-description a:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

/* Running text on dark keeps on-color (Royal on Oxford is under 4.5:1). */
:is(.on-dark, .tc-white) .rich a:not([class]),
.rich:is(.tc-white) a:not([class]),
:is(.on-dark, .tc-white) .rich a:not([class]):hover,
.rich:is(.tc-white) a:not([class]):hover {
	color: var(--sgp-color-on-color);
	--sgp-focus-ring-color: var(--sgp-color-on-color);
}

/* ---------- Text field (outlined) ----------
   Label above. States: resting, hover, focus, error, disabled. */
.sgp-field { display: flex; flex-direction: column; gap: var(--sgp-space-8); min-width: 0; }
.sgp-field__label { font: var(--sgp-weight-medium) var(--sgp-text-14) var(--sgp-font); color: var(--sgp-color-ink-secondary); }
.sgp-field__box {
	display: flex;
	align-items: center;
	gap: var(--sgp-space-16);
	height: var(--sgp-control-height);
	padding: 0 var(--sgp-space-16);
	border-radius: var(--sgp-radius-control);
	box-shadow: inset 0 0 0 var(--border-1) var(--sgp-color-outline);
	color: var(--sgp-color-ink);
	background: transparent;
	transition: box-shadow var(--sgp-dur-short) var(--sgp-ease);
}
.sgp-field__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	padding: 0;
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	color: var(--sgp-color-ink);
	text-overflow: ellipsis;
}
.sgp-field__input::placeholder { color: var(--sgp-color-ink-placeholder); opacity: 1; }
.sgp-field__support { font: var(--sgp-weight-regular) var(--sgp-text-14) var(--sgp-font); color: var(--sgp-color-ink-secondary); }
.sgp-field__box:hover { box-shadow: inset 0 0 0 var(--border-1) var(--sgp-color-ink); }
.sgp-field:focus-within .sgp-field__label { color: var(--sgp-color-interactive); }
.sgp-field:focus-within .sgp-field__box { box-shadow: inset 0 0 0 var(--border-2) var(--sgp-color-interactive); }
.sgp-field--error .sgp-field__label,
.sgp-field--error .sgp-field__support,
.sgp-field--error .sgp-field__status { color: var(--sgp-color-critical); }
.sgp-field--error .sgp-field__box,
.sgp-field--error:focus-within .sgp-field__box { box-shadow: inset 0 0 0 var(--border-2) var(--sgp-color-critical); }
.sgp-field--disabled { opacity: var(--sgp-disabled-opacity); }
.sgp-field--disabled .sgp-field__box { box-shadow: inset 0 0 0 var(--border-1) var(--sgp-color-ink); }
.sgp-field--disabled .sgp-field__input { cursor: default; }

/* Website addition, not in the library: a multi-line field keeps the outlined
   box and lets it grow with the text. */
.sgp-field__box--multiline {
	align-items: stretch;
	height: auto;
	padding-block: var(--sgp-space-16);
}
.sgp-field__box--multiline .sgp-field__input { resize: vertical; }

/* ---------- Checkbox ----------
   Material mechanics: native input, 40 state-layer circle, glyph 24,
   Royal when selected. The glyph is drawn from Material Symbols on the
   input itself (no redrawn box). */
.sgp-check {
	display: inline-flex;
	align-items: center;
	gap: var(--sgp-space-4);  /* 4 + the 8 inset inside the 40 target = 12 from glyph to label (library) */
	min-height: var(--sgp-control-compact);
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	color: var(--sgp-color-ink);
	cursor: pointer;
}
.sgp-check__input {
	-webkit-appearance: none;
	appearance: none;
	width: var(--sgp-control-compact);
	height: var(--sgp-control-compact);
	margin: 0 0 0 calc(-1 * var(--sgp-space-8));
	flex: none;
	border-radius: var(--sgp-radius-full);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	color: var(--sgp-color-ink);
	background: transparent;
	transition: background-color var(--sgp-dur-short) var(--sgp-ease);
}
.sgp-check__input::before {
	font-family: "Material Symbols Outlined";
	font-size: var(--material-icon);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0;
}
.sgp-check__input[type="checkbox"]::before { content: "check_box_outline_blank"; }
.sgp-check__input[type="checkbox"]:checked::before { content: "check_box"; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0; }
.sgp-check__input:checked { color: var(--sgp-color-interactive); }
.sgp-check__input:hover { background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-hover) * 100%), transparent); }
.sgp-check__input:checked:hover { background: color-mix(in srgb, var(--sgp-color-interactive) calc(var(--sgp-state-hover) * 100%), transparent); }
.sgp-check__input:focus-visible {
	background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-focus) * 100%), transparent);
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: 0;
}
.sgp-check__input:disabled { cursor: default; background: none; }
.sgp-check:has(.sgp-check__input:disabled) { opacity: var(--sgp-disabled-opacity); cursor: default; }

/* ---------- WPForms (the live contact and newsletter forms) ----------
   On the live site the theme embeds WPForms 3489 and 3745 (inc/forms.php),
   which print the plugin's own markup and stylesheet. This gives that markup
   the Text field, Checkbox and Button treatments above: WPForms' own style
   variables where they reach, direct rules for what they cannot express
   (the heavier focus outline, label colour on focus, the Material checkbox, the Button
   type and state layer). .sgp-wpforms--contact submits with Ask and
   --newsletter with Primary, as the preview stand-in does. The prefix
   outranks the plugin's own selectors whichever stylesheet loads last. */
.sgp-wpforms .wpforms-container {
	--wpforms-field-border-radius: var(--sgp-radius-control);
	--wpforms-field-border-size: var(--border-1);
	--wpforms-field-border-style: solid;
	--wpforms-field-border-color: var(--sgp-color-outline);
	--wpforms-field-background-color: transparent;
	--wpforms-field-text-color: var(--sgp-color-ink);
	--wpforms-label-color: var(--sgp-color-ink-secondary);
	--wpforms-label-sublabel-color: var(--sgp-color-ink-secondary);
	--wpforms-label-error-color: var(--sgp-color-critical);
	--wpforms-field-size-input-height: var(--sgp-control-height);
	--wpforms-field-size-padding-h: var(--sgp-space-16);
	--wpforms-field-size-input-spacing: var(--sgp-space-8);
	--wpforms-field-size-sublabel-spacing: var(--sgp-space-8);
	--wpforms-button-border-radius: var(--sgp-radius-control);
	--wpforms-button-border-style: none;
	--wpforms-button-background-color: var(--sgp-color-ask);
	--wpforms-button-text-color: var(--sgp-color-on-color);
	--wpforms-button-size-height: var(--sgp-control-height);
	--wpforms-button-size-padding-h: var(--sgp-space-24);
	--wpforms-button-size-margin-top: 0;
	--wpforms-container-padding: 0;
	margin: 0;
}
.sgp-wpforms--newsletter .wpforms-container { --wpforms-button-background-color: var(--sgp-color-interactive); }

/* Field rhythm: the stand-in form's 20 between fields. */
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-container { display: grid; gap: var(--space-20); }
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field { padding-block: 0; }
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-submit-container { margin-top: var(--space-20); padding: 0; }
.sgp-wpforms div.wpforms-container-full .wpforms-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Labels, sub-labels and help text: Text field label and support. */
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-label {
	margin: 0 0 var(--sgp-space-8);
	padding: 0;
	font: var(--sgp-weight-medium) var(--sgp-text-14) var(--sgp-font);
	color: var(--sgp-color-ink-secondary);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-required-label { color: inherit; font-weight: inherit; }
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(.wpforms-field-sublabel, .wpforms-field-description) {
	margin-top: var(--sgp-space-8);
	hyphens: manual;
	font: var(--sgp-weight-regular) var(--sgp-text-14) var(--sgp-font);
	color: var(--sgp-color-ink-secondary);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field:focus-within > .wpforms-field-label,
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field:focus-within > fieldset > .wpforms-field-label { color: var(--sgp-color-interactive); }

/* Inputs: the outlined Text field. The heavier focus and error outline is
   the border plus an inset of the same width, so the text does not shift. */
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(input:is([type="text"], [type="email"], [type="tel"]), textarea) {
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	color: var(--sgp-color-ink);
	background-color: transparent;
	box-shadow: none;
	transition: border-color var(--sgp-dur-short) var(--sgp-ease), box-shadow var(--sgp-dur-short) var(--sgp-ease);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form textarea {
	height: calc(5lh + 2 * var(--sgp-space-16));
	padding: var(--sgp-space-16);
	resize: vertical;
}
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(input:is([type="text"], [type="email"], [type="tel"]), textarea)::placeholder { color: var(--sgp-color-ink-placeholder); opacity: 1; }
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(input:is([type="text"], [type="email"], [type="tel"]), textarea):hover { border-color: var(--sgp-color-ink); }
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(input:is([type="text"], [type="email"], [type="tel"]), textarea):focus {
	border-color: var(--sgp-color-interactive);
	box-shadow: inset 0 0 0 var(--border-1) var(--sgp-color-interactive);
	outline: 0;
}
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-has-error .wpforms-field-label { color: var(--sgp-color-critical); }
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field :is(input, textarea):is(.wpforms-error, .user-invalid):not([type="checkbox"]),
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field :is(input, textarea):is(.wpforms-error, .user-invalid):not([type="checkbox"]):focus {
	border-color: var(--sgp-color-critical);
	box-shadow: inset 0 0 0 var(--border-1) var(--sgp-color-critical);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(em, label).wpforms-error {
	margin-top: var(--sgp-space-8);
	padding: 0;
	font: var(--sgp-weight-regular) var(--sgp-text-14) var(--sgp-font);
	color: var(--sgp-color-critical);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form :is(em, label).wpforms-error::before { display: none; }

/* Checkboxes: the Material Checkbox, glyph drawn on the native input. */
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field ul { display: grid; gap: var(--sgp-space-8); margin: 0; padding: 0; }
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field ul li { display: flex; align-items: center; gap: var(--sgp-space-4); min-height: var(--sgp-control-compact); margin: 0; padding: 0; }
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
	padding: 0;
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	color: var(--sgp-color-ink);
	cursor: pointer;
}
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: static;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: var(--sgp-control-compact);
	height: var(--sgp-control-compact);
	margin: 0 0 0 calc(-1 * var(--sgp-space-8));
	border: 0;
	border-radius: var(--sgp-radius-full);
	box-shadow: none;
	color: var(--sgp-color-ink);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--sgp-dur-short) var(--sgp-ease);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]::before {
	content: "check_box_outline_blank";
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
	background: none;
	font-family: "Material Symbols Outlined";
	font-size: var(--material-icon);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0;
}
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked::before { content: "check_box"; border: 0; box-shadow: none; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0; }
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]::after { display: none; }
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked { color: var(--sgp-color-interactive); }
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]:hover { background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-hover) * 100%), transparent); }
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked:hover { background: color-mix(in srgb, var(--sgp-color-interactive) calc(var(--sgp-state-hover) * 100%), transparent); }
.sgp-wpforms div.wpforms-container-full .wpforms-form input[type="checkbox"]:focus-visible {
	background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-focus) * 100%), transparent);
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: 0;
}
.sgp-wpforms div.wpforms-container-full .wpforms-form .wpforms-has-error input[type="checkbox"] { color: var(--sgp-color-critical); }

/* Submit: SGP Button type, height and state layer, in the form's tier. */
.sgp-wpforms div.wpforms-container-full .wpforms-form button[type="submit"] {
	min-height: var(--sgp-control-height);
	padding: var(--sgp-space-16) var(--sgp-space-24);
	font: var(--sgp-weight-medium) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--sgp-dur-short) var(--sgp-ease);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form button[type="submit"]:hover { background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-hover) * 100%), var(--wpforms-button-background-color)); }
.sgp-wpforms div.wpforms-container-full .wpforms-form button[type="submit"]:active { background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-pressed) * 100%), var(--wpforms-button-background-color)); }
.sgp-wpforms div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible {
	background: color-mix(in srgb, var(--sgp-state-layer) calc(var(--sgp-state-focus) * 100%), var(--wpforms-button-background-color));
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}
.sgp-wpforms div.wpforms-container-full .wpforms-form button[type="submit"]:focus::after { display: none; }

/* After sending: WPForms' confirmation, as running text. */
.sgp-wpforms div.wpforms-container-full .wpforms-confirmation-container-full {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	color: var(--sgp-color-ink);
}

/* ---------- Dialog ----------
   Native modal <dialog> on the Oxford scrim; the surface casts no shadow. */
/* ---------- Split selector ----------
   Brand Portal homepage pattern: a compact tab list paired with one detail
   surface. The component owns geometry, surface, radius, and interaction;
   product pages only provide content typography and responsive composition. */

.sgp-split-selector {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: stretch;
	gap: var(--sgp-space-48);
}

.sgp-split-selector__list {
	display: grid;
	gap: var(--sgp-space-16);
}

.sgp-split-selector__tab {
	display: flex;
	align-items: center;
	gap: var(--sgp-space-16);
	min-height: var(--sgp-control-height);
	padding: var(--sgp-space-16) var(--sgp-space-24);
	border: 0;
	border-radius: var(--sgp-radius-control);
	color: var(--sgp-color-ink);
	text-align: left;
	background: transparent;
	cursor: pointer;
	transition: background-color var(--sgp-dur-medium) var(--sgp-ease), box-shadow var(--sgp-dur-medium) var(--sgp-ease);
}

.sgp-split-selector__tab:is(:hover, :focus-visible) {
	background: var(--sgp-color-surface);
	box-shadow: var(--sgp-elevation-transient);
}

.sgp-split-selector__tab.is-active {
	background: var(--sgp-color-surface);
	box-shadow:
		inset 0 0 0 var(--border-2) var(--sgp-color-interactive),
		var(--sgp-elevation-transient);
}

.sgp-split-selector__tab:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

.sgp-split-selector__detail {
	min-width: 0;
	height: 100%;
	border-radius: var(--sgp-radius-section);
	background: var(--sgp-color-surface);
}

.sgp-split-selector__panel {
	display: grid;
	align-content: center;
	gap: var(--sgp-space-24);
	height: 100%;
	min-height: var(--size-400);
	padding: var(--sgp-space-48);
	border-radius: inherit;
}

.sgp-split-selector__panel[hidden] {
	display: none;
}

/* Spectrum shadow from the Brand Portal Request Support action.
   The color lives behind the card; the light surface stays completely white. */
@property --sgp-spectrum-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

.sgp-spectrum-frame {
	--_sgp-spectrum: var(--sgp-color-interactive) 0%, var(--sgp-color-interactive) 30%, var(--sgp-brand-purple) 50%, var(--sgp-brand-pink) 72%, var(--sgp-brand-pink) 88%, var(--sgp-brand-orange) 100%;
	position: relative;
	isolation: isolate;
	padding: var(--border-2);
	border: 0;
	border-radius: var(--sgp-radius-section);
	background: linear-gradient(135deg, var(--_sgp-spectrum));
}

.sgp-spectrum-frame::before {
	position: absolute;
	inset: calc(-1 * var(--sgp-space-8));
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--_sgp-spectrum));
	content: "";
	filter: blur(calc(var(--blur-10) * 2));
	opacity: .5;
	pointer-events: none;
}

/* The white panel preserves a crisp spectrum stroke while the pseudo-element
 * supplies the softer halo behind it, matching the supplied brand reference. */
.sgp-spectrum-frame > .sgp-split-selector__panel {
	position: relative;
	z-index: 1;
	border-radius: calc(var(--sgp-radius-section) - var(--border-2));
	background: var(--sgp-color-surface);
}

@media (max-width: 767px) {
	.sgp-split-selector {
		grid-template-columns: minmax(0, 1fr);
	}

	.sgp-split-selector__panel {
		min-height: 0;
		padding: var(--sgp-space-32);
	}
}

.dialog {
	width: min(var(--dialog-width), 100vw - 2 * var(--sgp-space-16));
	max-height: calc(100vh - var(--sgp-space-64));
	padding: var(--sgp-space-48);
	border: 0;
	border-radius: var(--sgp-radius-dialog);
	background: var(--sgp-color-surface);
	color: var(--sgp-color-ink);
	box-shadow: none;
	overflow: auto;
}

.dialog::backdrop {
	background: var(--sgp-color-scrim);
}