/**
 * Innovalls Price It - frontend styles.
 *
 * DARK THEME. Lime #D8FC06 on black, white text.
 *
 * THE CONTRAST LAW OF THIS PALETTE
 * --------------------------------
 * Lime is an extremely light colour (relative luminance 0.84). Measured:
 *
 *     black on lime  17.85:1   AAA
 *     white on lime   1.18:1   unreadable
 *
 * So anything sitting ON lime takes --pi-primary-ink, which is black, and
 * never white. Every lime surface in this file obeys that. If you add a new
 * lime element, it takes black text too.
 *
 * ELEMENTOR CONTRACT
 * ------------------
 * Every value a style control can change is a CSS custom property on .pi-app.
 * The widget writes properties inline on its own wrapper; the rules stay here.
 * A designer restyles the whole flow without one line of custom CSS, and
 * editing this file updates every published page at once.
 *
 * RESPONSIVE
 * ----------
 * Column counts read from --pi-service-cols / --pi-package-cols. The media
 * queries below set sensible defaults so the shortcode works unaided;
 * Elementor's responsive controls override them per breakpoint with higher
 * specificity, so desktop / tablet / mobile are all editable.
 *
 * Layout uses logical properties throughout, so the same stylesheet serves the
 * English LTR interface and an Arabic RTL one with no direction overrides.
 */

.pi-app {
	/* --- Brand ------------------------------------------------------ */
	--pi-primary: #d8fc06;
	--pi-primary-ink: #000000; /* Never white. See the contrast law above. */
	--pi-soft: rgba(216, 252, 6, 0.14);
	--pi-accent-ink: #d8fc06;

	/* --- Dark surfaces ---------------------------------------------- */
	--pi-bg: #000000;
	--pi-surface: #0e0e0e;
	--pi-surface-2: #1a1a1a;
	--pi-line: #2a2a2a;
	--pi-line-strong: #3d3d3d;

	/* --- Text ------------------------------------------------------- */
	--pi-text: #ffffff;
	--pi-body: #d4d4d4;
	--pi-muted: #a3a3a3;

	/* --- Status ----------------------------------------------------- */
	--pi-success: #4ade80;
	--pi-success-bg: rgba(74, 222, 128, 0.12);
	--pi-warn: #fbbf24;
	--pi-warn-bg: rgba(251, 191, 36, 0.12);
	--pi-danger: #f87171;
	--pi-danger-bg: rgba(248, 113, 113, 0.12);

	/* --- Shape ------------------------------------------------------ */
	--pi-radius: 18px;
	--pi-radius-card: 14px;
	--pi-radius-control: 10px;
	--pi-radius-chip: 10px;
	--pi-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	--pi-container: 1180px;

	/* --- Rhythm ----------------------------------------------------- */
	--pi-gap: 14px;
	--pi-pad: 26px;

	/* --- Grid (overridden per breakpoint below and by Elementor) ----- */
	--pi-service-cols: 3;
	--pi-package-cols: 4;

	/* --- Type ------------------------------------------------------- */
	--pi-font: inherit;
	--pi-price-size: 28px;
	--pi-card-min: 320px;

	box-sizing: border-box;
	max-width: var(--pi-container);
	margin-inline: auto;
	background: var(--pi-bg);
	color: var(--pi-text);
	font-family: var(--pi-font);
	line-height: 1.6;
	padding: 2px;
}

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

.pi-app button,
.pi-app input,
.pi-app select,
.pi-app textarea {
	font: inherit;
	color: inherit;
}

.pi-hidden {
	display: none !important;
}

.pi-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Stepper                                                             */
/* ------------------------------------------------------------------ */

.pi-stepper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.pi-step {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--pi-surface);
	border: 1px solid var(--pi-line);
	border-radius: var(--pi-radius-chip);
	padding: 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--pi-muted);
	margin: 0;
	min-width: 0;
}

.pi-step__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pi-step__n {
	inline-size: 26px;
	block-size: 26px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--pi-surface-2);
	color: var(--pi-body);
	flex: 0 0 auto;
	font-size: 12px;
}

.pi-step.is-active {
	border-color: var(--pi-primary);
	background: var(--pi-soft);
	color: var(--pi-text);
}

.pi-step.is-active .pi-step__n {
	background: var(--pi-primary);
	color: var(--pi-primary-ink);
}

.pi-step.is-done .pi-step__n {
	background: var(--pi-success-bg);
	color: var(--pi-success);
}

/* Mobile progress bar: hidden until the stepper collapses. */
.pi-progress {
	display: none;
	block-size: 4px;
	background: var(--pi-surface-2);
	border-radius: 999px;
	overflow: hidden;
	margin-block-end: 16px;
}

.pi-progress__fill {
	display: block;
	block-size: 100%;
	background: var(--pi-primary);
	border-radius: 999px;
	transition: inline-size 0.3s ease;
}

/* ------------------------------------------------------------------ */
/* Panels                                                              */
/* ------------------------------------------------------------------ */

.pi-panel {
	background: var(--pi-surface);
	border: 1px solid var(--pi-line);
	border-radius: var(--pi-radius);
	box-shadow: var(--pi-shadow);
	padding: var(--pi-pad);
}

.pi-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	margin-block-end: 20px;
}

.pi-panel__head h2 {
	margin: 0;
	font-size: clamp(19px, 2.4vw, 24px);
	line-height: 1.25;
	color: var(--pi-text);
}

.pi-panel__head p {
	margin: 6px 0 0;
	color: var(--pi-muted);
	font-size: 13px;
}

.pi-tag {
	background: var(--pi-surface-2);
	border: 1px solid var(--pi-line);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	color: var(--pi-body);
	white-space: nowrap;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.pi-services {
	display: grid;
	grid-template-columns: repeat(var(--pi-service-cols), minmax(0, 1fr));
	gap: var(--pi-gap);
}

.pi-packages {
	display: grid;
	grid-template-columns: repeat(var(--pi-package-cols), minmax(0, 1fr));
	gap: var(--pi-gap);
}

.pi-card {
	border: 1px solid var(--pi-line);
	border-radius: var(--pi-radius-card);
	background: var(--pi-surface);
	display: flex;
	flex-direction: column;
	text-align: start;
	position: relative;
	cursor: pointer;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.pi-card:hover:not([aria-disabled="true"]) {
	border-color: var(--pi-line-strong);
	transform: translateY(-2px);
}

.pi-card:focus-visible {
	outline: 2px solid var(--pi-primary);
	outline-offset: 3px;
}

.pi-card.is-selected {
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-soft);
}

.pi-card[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.pi-card--service {
	padding: 18px;
	min-block-size: 170px;
}

.pi-card--package {
	padding: 20px 16px;
	min-block-size: var(--pi-card-min);
}

/* Falls back to the accent, so the recommended card can be given its own
   colour without forcing anyone to set one. */
.pi-card--package.is-recommended {
	border-color: var(--pi-rec-border, var(--pi-primary));
}

.pi-card__icon {
	font-size: 30px;
	line-height: 1;
	color: var(--pi-primary);
}

.pi-card h3 {
	margin: 10px 0 4px;
	font-size: 17px;
	color: var(--pi-text);
}

.pi-card__sub {
	font-size: 11px;
	color: var(--pi-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pi-card p {
	font-size: 12px;
	color: var(--pi-muted);
	margin: 10px 0 14px;
}

.pi-badge {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: 14px;
	background: var(--pi-primary);
	color: var(--pi-primary-ink); /* black on lime */
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.pi-price {
	font-size: var(--pi-price-size);
	font-weight: 800;
	margin: 12px 0 6px;
	line-height: 1.15;
	color: var(--pi-primary);
	overflow-wrap: anywhere;
}

.pi-price small {
	font-size: 11px;
	color: var(--pi-muted);
	font-weight: 700;
	margin-inline-start: 2px;
}

.pi-features {
	list-style: none;
	margin: 10px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.pi-features li {
	font-size: 12px;
	color: var(--pi-body);
	display: flex;
	gap: 7px;
	align-items: baseline;
}

.pi-features li::before {
	content: "\2713";
	color: var(--pi-primary);
	font-weight: 900;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.pi-btn {
	border: 0;
	border-radius: var(--pi-radius-control);
	padding: 13px 18px;
	font-weight: 800;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none;
	/* Comfortable touch target on every device. */
	min-block-size: 46px;
	transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.pi-btn:focus-visible {
	outline: 2px solid var(--pi-primary);
	outline-offset: 3px;
}

.pi-btn--primary {
	background: var(--pi-primary);
	color: var(--pi-primary-ink); /* black on lime */
}

.pi-btn--primary:hover:not(:disabled) {
	background: #e6ff3d;
}

.pi-btn--secondary {
	background: transparent;
	border: 1px solid var(--pi-line-strong);
	color: var(--pi-text);
}

.pi-btn--secondary:hover:not(:disabled) {
	background: var(--pi-surface-2);
	border-color: var(--pi-primary);
}

.pi-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pi-card .pi-btn {
	margin-block-start: auto;
	inline-size: 100%;
}

.pi-actions {
	display: flex;
	gap: 10px;
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--pi-line);
}

/* ------------------------------------------------------------------ */
/* Form                                                                */
/* ------------------------------------------------------------------ */

.pi-formgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pi-gap);
}

.pi-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}

.pi-field--full {
	grid-column: 1 / -1;
}

.pi-field > label {
	font-size: 12px;
	font-weight: 700;
	color: var(--pi-text);
}

.pi-required {
	color: var(--pi-primary);
	margin-inline-start: 3px;
}

.pi-field input[type="text"],
.pi-field input[type="email"],
.pi-field input[type="tel"],
.pi-field input[type="url"],
.pi-field input[type="number"],
.pi-field input[type="date"],
.pi-field input[type="color"],
.pi-field select,
.pi-field textarea {
	inline-size: 100%;
	border: 1px solid var(--pi-line-strong);
	border-radius: var(--pi-radius-control);
	padding: 12px 13px;
	background: var(--pi-surface-2);
	color: var(--pi-text);
	/* 16px stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	min-block-size: 46px;
}

.pi-field textarea {
	min-block-size: 110px;
	resize: vertical;
}

.pi-field ::placeholder {
	color: var(--pi-muted);
	opacity: 1;
}

/* The reference removed focus styling entirely. Restored: an invisible focus
   ring makes a form unusable by keyboard. */
.pi-field input:focus,
.pi-field select:focus,
.pi-field textarea:focus {
	outline: none;
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-soft);
}

.pi-help {
	font-size: 11px;
	color: var(--pi-muted);
	margin: 0;
}

.pi-error {
	font-size: 11px;
	font-weight: 600;
	color: var(--pi-danger);
	margin: 0;
}

.pi-field.has-error input,
.pi-field.has-error select,
.pi-field.has-error textarea {
	border-color: var(--pi-danger);
}

/* Visual choice tiles */

.pi-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.pi-choice {
	border: 1px solid var(--pi-line-strong);
	border-radius: var(--pi-radius-chip);
	padding: 12px;
	text-align: center;
	background: var(--pi-surface-2);
	cursor: pointer;
	font-size: 12px;
	color: var(--pi-body);
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.pi-choice:focus-visible {
	outline: 2px solid var(--pi-primary);
	outline-offset: 3px;
}

.pi-choice.is-active {
	border-color: var(--pi-primary);
	background: var(--pi-soft);
	color: var(--pi-text);
}

.pi-choice__demo {
	block-size: 54px;
	background: var(--pi-bg);
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: var(--pi-text);
	margin-block-end: 8px;
	overflow: hidden;
}

.pi-choice.is-active .pi-choice__demo {
	color: var(--pi-primary);
}

.pi-choice__demo img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

/* Checkbox and radio groups */

.pi-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.pi-check {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--pi-line-strong);
	border-radius: var(--pi-radius-control);
	padding: 12px;
	font-size: 13px;
	cursor: pointer;
	background: var(--pi-surface-2);
	min-block-size: 46px;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.pi-check input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--pi-primary);
}

.pi-check.is-checked {
	border-color: var(--pi-primary);
	background: var(--pi-soft);
	color: var(--pi-text);
}

/* Upload */

.pi-drop {
	border: 1.5px dashed var(--pi-line-strong);
	border-radius: var(--pi-radius-chip);
	padding: 22px;
	text-align: center;
	background: var(--pi-surface-2);
	color: var(--pi-muted);
	font-size: 12px;
	cursor: pointer;
	min-block-size: 46px;
}

.pi-drop:focus-visible {
	outline: 2px solid var(--pi-primary);
	outline-offset: 3px;
}

.pi-drop.is-dragging {
	border-color: var(--pi-primary);
	background: var(--pi-soft);
	color: var(--pi-text);
}

.pi-files {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pi-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid var(--pi-line);
	border-radius: var(--pi-radius-control);
	padding: 10px 12px;
	font-size: 12px;
	background: var(--pi-surface-2);
	overflow-wrap: anywhere;
}

.pi-file button {
	border: 0;
	background: none;
	color: var(--pi-danger);
	cursor: pointer;
	font-weight: 700;
	padding: 6px 8px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Review                                                              */
/* ------------------------------------------------------------------ */

.pi-review {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 18px;
	align-items: start;
}

.pi-notice {
	border-radius: var(--pi-radius-chip);
	padding: 14px;
	font-size: 12px;
	line-height: 1.55;
	border: 1px solid transparent;
}

.pi-notice--info {
	background: var(--pi-soft);
	color: var(--pi-accent-ink);
	border-color: rgba(216, 252, 6, 0.3);
}

.pi-notice--ok {
	background: var(--pi-success-bg);
	color: var(--pi-success);
}

.pi-notice--warn {
	background: var(--pi-warn-bg);
	color: var(--pi-warn);
}

.pi-notice--error {
	background: var(--pi-danger-bg);
	color: var(--pi-danger);
}

.pi-box {
	border: 1px solid var(--pi-line);
	border-radius: var(--pi-radius-card);
	padding: 16px;
	background: var(--pi-surface-2);
	margin-block-start: 14px;
}

.pi-box__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.pi-box b {
	color: var(--pi-text);
}

.pi-box__sub {
	font-size: 11px;
	color: var(--pi-muted);
	margin-block-start: 4px;
}

.pi-gateways {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-block-start: 12px;
}

.pi-gateway {
	border: 1px solid var(--pi-line-strong);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 10px;
	color: var(--pi-body);
	background: var(--pi-bg);
}

.pi-summary {
	border: 1px solid var(--pi-line-strong);
	border-radius: var(--pi-radius-card);
	padding: 18px;
	background: var(--pi-surface-2);
	position: sticky;
	inset-block-start: 20px;
}

.pi-summary h3 {
	margin-block-start: 0;
	font-size: 15px;
	color: var(--pi-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pi-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-block-end: 1px solid var(--pi-line);
	font-size: 12px;
}

.pi-row span {
	color: var(--pi-muted);
}

.pi-row b {
	color: var(--pi-text);
	text-align: end;
	overflow-wrap: anywhere;
}

.pi-row:last-of-type {
	border-block-end: 0;
}

.pi-row--total b {
	font-size: 22px;
	color: var(--pi-primary);
	font-weight: 800;
}

.pi-breakdown {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-block-start: 1px dashed var(--pi-line-strong);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.pi-breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
	color: var(--pi-muted);
}

/* ------------------------------------------------------------------ */
/* Success                                                             */
/* ------------------------------------------------------------------ */

.pi-success {
	text-align: center;
	padding: 36px 12px;
}

.pi-success__icon {
	inline-size: 72px;
	block-size: 72px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-inline: auto;
	background: var(--pi-primary);
	color: var(--pi-primary-ink); /* black on lime */
	font-size: 30px;
	font-weight: 900;
}

.pi-success h2 {
	margin: 18px 0 8px;
	color: var(--pi-text);
	font-size: clamp(20px, 3vw, 26px);
}

.pi-success p {
	color: var(--pi-muted);
	max-inline-size: 620px;
	margin-inline: auto;
	font-size: 13px;
}

.pi-ref {
	display: inline-block;
	margin: 16px 4px 0;
	background: var(--pi-primary);
	color: var(--pi-primary-ink); /* black on lime */
	padding: 9px 14px;
	border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	direction: ltr;
	unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ */
/* Busy state                                                          */
/* ------------------------------------------------------------------ */

.pi-app.is-busy {
	cursor: progress;
}

.pi-app.is-busy .pi-summary {
	opacity: 0.55;
}

.pi-spinner {
	display: inline-block;
	inline-size: 15px;
	block-size: 15px;
	border: 2px solid var(--pi-primary);
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: pi-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.pi-app *,
	.pi-app *::before,
	.pi-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.pi-spinner {
		animation-duration: 1.5s !important;
		animation-iteration-count: infinite !important;
	}
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.pi-app {
		--pi-service-cols: 2;
		--pi-package-cols: 2;
		--pi-pad: 22px;
	}

	.pi-review {
		grid-template-columns: 1fr;
	}

	.pi-summary {
		position: static;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.pi-app {
		--pi-service-cols: 1;
		--pi-package-cols: 1;
		--pi-pad: 18px;
		--pi-radius: 14px;
		--pi-price-size: 26px;
		/* Cards size to their content once stacked; a tall minimum just
		   creates dead space the customer has to scroll past. */
		--pi-card-min: 0;
	}

	/* Five labelled steps do not fit. Show the current one and a progress
	   bar, which reads better than a wrapped three-row grid. */
	.pi-stepper {
		grid-template-columns: 1fr;
		gap: 0;
		margin-block-end: 10px;
	}

	.pi-step {
		display: none;
	}

	.pi-step.is-active {
		display: flex;
		background: transparent;
		border-color: var(--pi-line);
	}

	.pi-progress {
		display: block;
	}

	.pi-formgrid {
		grid-template-columns: 1fr;
	}

	.pi-choices {
		grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	}

	.pi-checks {
		grid-template-columns: 1fr;
	}

	.pi-panel__head {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Primary action on top once stacked, so the thumb reaches it first. */
	.pi-actions {
		flex-direction: column;
	}

	.pi-actions .pi-btn {
		inline-size: 100%;
	}

	.pi-card--package {
		padding: 18px 16px;
	}

	.pi-success {
		padding: 26px 8px;
	}
}

/* Very narrow phones. */
@media (max-width: 380px) {
	.pi-app {
		--pi-pad: 14px;
		--pi-gap: 10px;
	}

	.pi-choices {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Checkout summary                                                    */
/* ------------------------------------------------------------------ */

/* Sits above the WooCommerce checkout form so the customer can see the
   brief they just wrote. The theme owns the rest of that page, so this
   claims no page background of its own. */
.pi-checkout-summary {
	background: transparent;
	margin-block-end: 28px;
	padding: 0;
}

.pi-checkout-summary .pi-summary {
	position: static;
	margin-block-start: 4px;
}

.pi-checkout-summary .pi-actions {
	margin-block-start: 16px;
	padding-block-start: 14px;
}

/* ------------------------------------------------------------------ */
/* Brief + live summary                                                */
/* ------------------------------------------------------------------ */

/* With the review step gone, the summary sits beside the questions and
   updates as they are answered. On tablet and below it drops underneath,
   where it reads as a running total rather than a sidebar. */
@media (max-width: 1024px) {
	.pi-review .pi-summary {
		order: -1;
	}
}

/* ------------------------------------------------------------------ */
/* Live price feedback                                                 */
/* ------------------------------------------------------------------ */

/* The total dims while a fresh figure is on its way, so a stale number
   never looks authoritative. */
.pi-row--total.is-pricing b {
	opacity: 0.55;
}

.pi-row--total b {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.15s ease;
}

.pi-spinner--inline {
	inline-size: 12px;
	block-size: 12px;
	border-width: 2px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Service icon: glyph or image                                        */
/* ------------------------------------------------------------------ */

/* A glyph is part of the heading line, sized to the text beside it. */
.pi-card__glyph {
	color: var(--pi-primary);
	margin-inline-end: 8px;
	font-size: 1.1em;
	line-height: 1;
}

/* An image is its own block above the name, so it can actually be seen. */
.pi-card__image {
	inline-size: 100%;
	block-size: 96px;
	border-radius: var(--pi-radius-chip);
	background: var(--pi-surface-2);
	display: grid;
	place-items: center;
	overflow: hidden;
	margin-block-end: 4px;
}

.pi-card__image img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 767px) {
	.pi-card__image {
		block-size: 76px;
	}
}