/*
 * Webifi Quote Generator — design system.
 *
 * Source: monochrome design reference (pure black/white/gray, no borders —
 * separation from fill shading only). Implemented against the markup
 * contract in class-shortcode.php / wizard.js; nothing here changes PHP
 * output beyond the additive progress segments and the honeypot visibility
 * rule already documented there.
 *
 * No font-family is set anywhere below (elements that need to override the
 * browser's form-control UA font use `inherit` rather than a named
 * typeface) — the wizard deliberately takes on whichever font the active
 * theme sets on the page, rather than shipping its own.
 *
 * Known simplification vs. the reference: native <select> is styled to fit
 * the palette rather than rebuilt as the reference's pill/row/chip custom
 * controls. Question options (single/multi choice, yes/no, number range)
 * render as plain radio/checkbox rows rather than the reference's chip
 * controls — a cheap follow-up later, no markup or JS changes needed.
 */

.wqg {
	--wqg-surface: #111111;
	--wqg-surface-2: #161616;
	--wqg-surface-3: #1c1c1c;
	--wqg-surface-4: #242424;
	/* Dedicated backgrounds for text/select fields and their checkbox/radio
	   controls — kept separate from --wqg-surface-2/4 above so retuning
	   form controls doesn't also affect service cards and other elements
	   that share those tokens. */
	--wqg-field-bg: #161616;
	--wqg-control-bg: #3a3a3a;
	--wqg-fg: #f2f2f2;
	--wqg-fg-muted: rgba(242, 242, 242, 0.55);
	--wqg-fg-faint: rgba(242, 242, 242, 0.45);
	--wqg-accent: #f2f2f2;
	--wqg-accent-fg: #0a0a0a;
	--wqg-radius: 10px;
	--wqg-radius-sm: 8px;
	--wqg-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);

	background: var(--wqg-surface);
	color: var(--wqg-fg);
	width: 100%;
	padding: clamp(24px, 5vw, 40px);
	border-radius: var(--wqg-radius);
	box-sizing: border-box;
	/* Block themes (e.g. Twenty Twenty-Five) wrap shortcode output in a
	   `.is-layout-constrained` container whose own rule —
	   `> :where(...) { max-width: var(--wp--style--global--content-size);
	   margin-left/right: auto !important; }` — caps and centers every direct
	   child, overriding the width: 100% above. Countered here rather than
	   left to the theme, so the wizard reliably fills its container on any
	   theme, block-based or classic. */
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Some block themes lay their template out as a flex row (e.g. Twenty
 * Twenty-Five's blank template: <main class="is-layout-flex">), and a flex
 * item's default `flex: 0 1 auto` means it sizes to its content instead of
 * growing to fill that row — leaving .wqg's own direct container (whatever
 * class the theme gives it) narrow regardless of the 100% width above.
 * There's no fixed class name to hook across themes, so :has() finds that
 * container generically, one level up from the wizard itself.
 */
:has( > .wqg ) {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

.wqg *,
.wqg *::before,
.wqg *::after {
	box-sizing: inherit;
}

/* ---- step counter ---- */

.wqg__step-counter {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wqg-fg);
	margin: 0 0 10px;
}

/* ---- progress ---- */

.wqg__progress {
	display: flex;
	gap: 5px;
	margin-bottom: 24px;
}

.wqg__progress-seg {
	height: 3px;
	flex: 1;
	background: var(--wqg-surface-4);
	border-radius: 2px;
	transition: background-color 150ms ease;
}

.wqg__progress-seg--filled {
	background: var(--wqg-fg);
}

.wqg__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- aside / main columns ----
 *
 * .wqg__aside holds the step counter, progress bar, and the active step's
 * heading (WQG_Shortcode::render_step_meta()); .wqg__main holds the actual
 * .wqg__step sections (fields, options, nav). On tablet/mobile these simply
 * stack — .wqg stays block, so .wqg__aside renders above .wqg__main exactly
 * as the single-column layout always has. The side-by-side split only
 * applies from the desktop breakpoint below.
 */

.wqg__aside,
.wqg__main {
	min-width: 0;
}

@media (min-width: 900px) {
	.wqg {
		display: flex;
		align-items: flex-start;
		gap: 48px;
	}

	.wqg__aside {
		flex: 0 0 33%;
		max-width: 33%;
		/* Keeps the step counter/progress/heading in view while a long step
		   (e.g. many questions) scrolls past in .wqg__main beside it. Sticks
		   relative to the nearest scrolling ancestor — .wqg itself doesn't
		   scroll — so it's fine even though .wqg has no overflow of its own.
		   top leaves clear space above it once stuck, rather than pinning it
		   flush against the viewport edge (or, for logged-in admins, under
		   WordPress's own 32px fixed toolbar — accounted for below). */
		position: sticky;
		top: 24px;
	}

	/* WordPress pins its toolbar to the very top of the viewport at 32px
	   tall (desktop only — the breakpoint it switches to 46px, 782px, is
	   below this rule's own 900px floor, so there's no need to branch on
	   it here) whenever the viewer is logged in. Without this, the sticky
	   aside would stick 24px from the true viewport top and end up partly
	   hidden behind that toolbar instead of below it. */
	body.admin-bar .wqg__aside {
		top: calc(24px + 32px);
	}

	.wqg__main {
		flex: 1 1 0%;
	}
}

/* ---- steps ---- */

.wqg__step,
.wqg__step-meta {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.wqg__step[hidden],
.wqg__step-meta[hidden] {
	display: none;
}

.wqg__selected-service {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wqg-fg);
	margin: 0 0 10px;
}

.wqg__selected-service[hidden] {
	display: none;
}

.wqg__step-title {
	font-size: clamp(21px, 3vw, 28px);
	font-weight: 700;
	margin: 0 0 20px;
	line-height: 1.2;
}

.wqg__step-title:has(+ .wqg__step-desc) {
	margin-bottom: 6px;
}

.wqg__step-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wqg-fg-muted);
	margin: 0 0 20px;
}

/* ---- service grid / cards (step 1) ---- */

.wqg__service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}

.wqg__service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
	background: var(--wqg-surface-2);
	color: var(--wqg-fg);
	border: none;
	border-radius: var(--wqg-radius-sm);
	padding: 16px 18px;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.wqg__service-card:hover {
	background: var(--wqg-surface-3);
}

.wqg__service-card:focus-visible {
	outline: none;
	box-shadow: var(--wqg-focus-ring);
}

.wqg__service-card--selected {
	background: var(--wqg-accent);
	color: var(--wqg-accent-fg);
}

.wqg__service-card--selected:hover {
	background: var(--wqg-accent);
}

.wqg__service-card--selected::after {
	content: '✓';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--wqg-accent-fg);
	color: var(--wqg-accent);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.wqg__service-card-icon {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin-bottom: 8px;
}

/* Covers both the real <img> icon and the placeholder <span><svg></span> —
   sizing lives on the shared class, the svg just fills whichever box it's in. */
.wqg__service-card-icon svg,
.wqg__option-card-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wqg__icon-placeholder {
	color: var(--wqg-fg-faint);
	opacity: 0.6;
}

.wqg__service-card--selected .wqg__icon-placeholder,
.wqg__option--card-selected .wqg__icon-placeholder {
	color: var(--wqg-accent-fg);
	opacity: 0.7;
}

/* Uploaded icons: expected to be single-colour SVGs, applied as a CSS mask
   (URL set inline via style.maskImage in wizard.js) rather than an <img
   src>, so their colour can flip along with the rest of the card on
   selection — an <img> is opaque to CSS colour changes no matter the file
   format. Mirrors the placeholder's colour/opacity swap above. */
.wqg__icon-mask {
	background-color: var(--wqg-fg-faint);
	opacity: 0.6;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wqg__service-card--selected .wqg__icon-mask,
.wqg__option--card-selected .wqg__icon-mask {
	background-color: var(--wqg-accent-fg);
	opacity: 0.7;
}

.wqg__service-card-title {
	font-weight: 700;
	font-size: 15px;
	padding-right: 20px;
}

.wqg__service-card-desc {
	font-size: 12.5px;
	opacity: 0.7;
}

/* ---- fields (steps 2–4) ---- */

.wqg__field-group {
	border: none;
	margin: 0 0 24px;
	padding: 0;
	min-width: 0;
}

.wqg__field-group legend {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wqg-fg-faint);
	margin-bottom: 10px;
	padding: 0;
}

.wqg__field {
	margin-bottom: 34px;
}

/* A question's options list (single/multi choice, yes/no, number range) is
   a <fieldset class="wqg__field">; reset the browser default border/padding
   so it matches every other .wqg__field. */
fieldset.wqg__field {
	border: none;
	padding: 0;
	min-width: 0;
}

.wqg__field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wqg__label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
}

legend.wqg__label {
	padding: 0;
}

.wqg__input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	background: var(--wqg-field-bg);
	color: var(--wqg-fg);
	border: none;
	border-radius: var(--wqg-radius-sm);
	transition: box-shadow 150ms ease;
}

.wqg__input::placeholder {
	color: var(--wqg-fg-faint);
}

.wqg__input:focus-visible {
	outline: none;
	box-shadow: var(--wqg-focus-ring);
}

.wqg__field--error .wqg__input {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
}

select.wqg__input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2f2f2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.45'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}

select.wqg__input option {
	background: var(--wqg-field-bg);
	color: var(--wqg-fg);
}

/* ---- question options (radio/checkbox rows) ---- */

.wqg__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--wqg-field-bg);
	border-radius: var(--wqg-radius-sm);
	margin-bottom: 6px;
}

.wqg__option:last-child {
	margin-bottom: 0;
}

.wqg__option .wqg__input[type='radio'],
.wqg__option .wqg__input[type='checkbox'] {
	appearance: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	flex-shrink: 0;
	padding: 0;
	margin: 0;
	background: var(--wqg-control-bg);
	border-radius: 5px;
	position: relative;
	cursor: pointer;
}

.wqg__option .wqg__input[type='radio'] {
	border-radius: 50%;
}

.wqg__option .wqg__input[type='radio']:checked,
.wqg__option .wqg__input[type='checkbox']:checked {
	background: var(--wqg-accent);
}

.wqg__option .wqg__input[type='radio']:checked::after,
.wqg__option .wqg__input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wqg__option .wqg__input[type='checkbox']:checked::after {
	background: var(--wqg-accent-fg);
	clip-path: polygon(20% 50%, 40% 68%, 80% 24%, 90% 34%, 40% 88%, 10% 60%);
}

.wqg__option .wqg__input[type='radio']:checked::after {
	background: var(--wqg-accent-fg);
	border-radius: 50%;
	inset: 5px;
}

.wqg__option label {
	flex: 1;
	font-size: 14px;
	cursor: pointer;
}

/* ---- question options — card layout (opt-in per question) ---- */

.wqg__option-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.wqg__option--card {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	min-height: 128px;
	padding: 16px 18px;
	margin-bottom: 0;
	background: var(--wqg-surface-2);
	transition: background-color 150ms ease;
}

.wqg__option--card:hover {
	background: var(--wqg-surface-3);
}

.wqg__option--card-selected {
	background: var(--wqg-accent);
	color: var(--wqg-accent-fg);
}

.wqg__option--card-selected:hover {
	background: var(--wqg-accent);
}

/* Same tick badge as the step 1 service card's ::after (18px square,
   accent-fg background, accent checkmark) rather than the plain radio dot /
   checkbox tick used in the list layout — a real input still sits here for
   click/keyboard/screen-reader support, just repainted to match visually. */
.wqg__option--card .wqg__input[type='radio'],
.wqg__option--card .wqg__input[type='checkbox'] {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: transparent;
}

.wqg__option--card .wqg__input[type='radio']:checked,
.wqg__option--card .wqg__input[type='checkbox']:checked {
	background: var(--wqg-accent-fg);
}

.wqg__option--card .wqg__input[type='radio']:checked::after,
.wqg__option--card .wqg__input[type='checkbox']:checked::after {
	content: '✓';
	position: absolute;
	inset: 0;
	background: none;
	clip-path: none;
	color: var(--wqg-accent);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* space-between pins the icon to the top edge and the label text to the
   bottom edge of the card, rather than the two sitting stacked together in
   the middle — flex:1 is what gives space-between room to actually work,
   since the card itself has the min-height above. */
.wqg__option--card label {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding-right: 20px;
}

.wqg__option-card-icon {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.wqg__option-card-label {
	font-weight: 600;
}

/* ---- tooltips ---- */

.wqg__tooltip {
	position: relative;
	display: inline-flex;
}

.wqg__tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: none;
	background: var(--wqg-surface-4);
	color: var(--wqg-fg-muted);
	font-family: inherit;
	font-size: 11px;
	font-style: italic;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.wqg__tooltip-icon:hover,
.wqg__tooltip-icon:focus-visible {
	background: var(--wqg-surface-3);
	color: var(--wqg-fg);
}

.wqg__tooltip-icon:focus-visible {
	outline: none;
	box-shadow: var(--wqg-focus-ring);
}

.wqg__tooltip-bubble {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	width: max-content;
	max-width: 220px;
	background: var(--wqg-surface-4);
	color: var(--wqg-fg);
	font-size: 12px;
	line-height: 1.5;
	padding: 8px 10px;
	border-radius: var(--wqg-radius-sm);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	z-index: 1;
}

/* Hover reveals the bubble with CSS alone, so it still works if JS fails
   to load; the click handler in wizard.js adds a --open toggle for touch
   devices with no hover state. */
.wqg__tooltip:hover .wqg__tooltip-bubble,
.wqg__tooltip--open .wqg__tooltip-bubble {
	display: block;
}

/* ---- errors ---- */

.wqg__error {
	font-size: 14px;
	font-weight: 400;
	color: #e04b4b;
	margin: 6px 0 0;
}

/* "Not you? Clear saved details" (step 3) — only ever shown when wizard.js
   has actually prefilled the contact fields from a previous visit's
   localStorage-saved details. */
.wqg__link-button {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin: -8px 0 16px;
	font: inherit;
	font-size: 12.5px;
	color: var(--wqg-fg-faint);
	text-decoration: underline;
	cursor: pointer;
}

.wqg__link-button:hover {
	color: var(--wqg-fg);
}

.wqg__link-button[hidden] {
	display: none;
}

.wqg__error[hidden] {
	display: none;
}

/* ---- nav / buttons ---- */

.wqg__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.wqg__button {
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	border: none;
	border-radius: var(--wqg-radius-sm);
	padding: 14px 24px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: background-color 150ms ease, opacity 150ms ease;
}

.wqg__button:focus-visible {
	outline: none;
	box-shadow: var(--wqg-focus-ring);
}

.wqg__button--primary {
	background: var(--wqg-accent);
	color: var(--wqg-accent-fg);
}

.wqg__button--primary:hover {
	opacity: 0.9;
}

.wqg__button--primary:disabled {
	background: var(--wqg-surface-3);
	color: var(--wqg-fg-faint);
	cursor: not-allowed;
	opacity: 1;
}

.wqg__button--secondary {
	background: var(--wqg-surface-2);
	color: var(--wqg-fg);
}

/* Submit-in-flight state (wizard.js's setSubmitLoading()) — a small spinner
   ahead of the "Submitting…" label, so a slow request (network delay, or
   the server working through validation/pricing/notifications) reads as
   "in progress" rather than the button just having done nothing. Layered
   onto .wqg__button--primary:disabled's existing grey/faint styling, not
   replacing it. */
.wqg__button--loading {
	position: relative;
	padding-left: 40px;
}

.wqg__button--loading::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.6;
	animation: wqg-spin 700ms linear infinite;
}

@keyframes wqg-spin {
	to {
		transform: rotate(360deg);
	}
}

.wqg__button--secondary:hover {
	background: var(--wqg-surface-3);
}

/* Single-button nav (step 1 has no Back) should still right/left align
   sensibly since .wqg__nav is a flex row of 1–2 buttons. */
.wqg__nav .wqg__button:only-child {
	margin-left: auto;
}

/* ---- result (step 5) ---- */

.wqg__result {
	margin-bottom: 20px;
}

.wqg__result-label {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wqg-fg-muted);
	margin: 0 0 6px;
}

.wqg__result-label[hidden] {
	display: none;
}

.wqg__result-range {
	font-weight: 600;
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1;
	margin: 0 0 16px;
	text-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
}

/* Ongoing cost sits underneath the one-off range as a smaller "+" line
   rather than matching its size — it's an add-on to the headline number
   above, not a second headline. */
.wqg__result-recurring-label {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wqg-fg-muted);
	margin: 0 0 6px;
}

.wqg__result-recurring-label[hidden] {
	display: none;
}

.wqg__result-recurring {
	font-weight: 600;
	font-size: clamp(18px, 3vw, 22px);
	margin: 0 0 20px;
}

.wqg__result-recurring[hidden] {
	display: none;
}

.wqg__result-summary {
	background: var(--wqg-surface-2);
	border-radius: var(--wqg-radius-sm);
	margin-bottom: 20px;
	font-size: 13px;
	/* No padding here — it lives on <summary> (and the body) below instead,
	   so the whole visual card is the summary's own box and therefore the
	   entire thing is clickable, not just the text/chevron. */
}

.wqg__result-summary[hidden] {
	display: none;
}

.wqg__result-summary summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--wqg-radius-sm);
	padding: 14px 16px;
	/* Removes the browser's default focus outline on both the text and the
	   chevron (they're one element, so a partial fix isn't possible) —
	   replaced with the design system's own focus-visible ring below, which
	   only shows for keyboard focus rather than every click. */
	outline: none;
}

.wqg__result-summary summary::-moz-focus-inner {
	border: 0;
}

.wqg__result-summary summary:focus-visible {
	box-shadow: var(--wqg-focus-ring);
}

/* Native <summary> markers vary by browser (triangle, none at all) — a
   single custom chevron keeps this consistent and lets us rotate it on
   [open] instead of relying on a browser-specific open/closed glyph. */
.wqg__result-summary summary::-webkit-details-marker {
	display: none;
}

.wqg__result-summary summary::after {
	content: '▸';
	font-size: 11px;
	color: var(--wqg-fg-muted);
	transition: transform 150ms ease;
}

.wqg__result-summary[open] summary::after {
	transform: rotate(90deg);
}

.wqg__result-summary-body {
	margin-top: -2px;
	padding: 0 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wqg__result-summary-service {
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--wqg-fg-muted);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wqg__result-summary-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

/* Question on the left, picked answer on the right — no pricing here, the
   headline range above already covers that. A subtle grey line under each
   row is the only separator, matching the "fill shading, not borders"
   design system while still giving each item visual clarity. */
.wqg__result-summary-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(242, 242, 242, 0.1);
}

.wqg__result-summary-list li:last-child {
	border-bottom: none;
}

.wqg__result-summary-question {
	color: var(--wqg-fg-muted);
}

.wqg__result-summary-answer {
	font-weight: 500;
	text-align: right;
}

/* .wqg__result-nav rides on .wqg__nav's flex/space-between (see markup) —
   Back stays left, Book a Discovery Call right, same as steps 1-3. Only
   the extra top margin below is specific to this step. */
.wqg__result-nav {
	margin-top: 20px;
}

.wqg__disclaimer {
	font-size: 12px;
	line-height: 1.6;
	color: var(--wqg-fg-faint);
	margin: 0;
}