/* Instant Window Cleaning Quote — front-end styles.
   Everything is scoped under .iwq so nothing leaks into the theme.
   Colours and the body font come from CSS variables the plugin prints
   inline, so they follow whatever is set in Settings → Instant Quote. */

.iwq {
	--iwq-accent: #cd218c;
	--iwq-accent-soft: rgba(205, 33, 140, 0.08);
	--iwq-accent-line: rgba(205, 33, 140, 0.4);
	--iwq-accent-2: #58a264;
	--iwq-ink: #531979;
	--iwq-text: #531979;
	--iwq-muted: #7a4f99;
	--iwq-gold: #deb14c;
	--iwq-gold-strong: #ad8a3b;
	--iwq-line: rgba(222, 177, 76, 0.5);
	--iwq-bw: 2px;
	--iwq-radius: 12px;
	--iwq-radius-sm: 7px;
	--iwq-soft: #fbf7fd;
	--iwq-bg: #fff;
	--iwq-body-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	max-width: 800px;
	margin: 0 auto;
	color: var(--iwq-text);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.iwq *,
.iwq *::before,
.iwq *::after {
	box-sizing: border-box;
}

/* Raleway is applied to everything EXCEPT .iwq-title, which is left alone so
   the headline keeps the theme's own heading font. */
.iwq-sub,
.iwq-stepper,
.iwq-q,
.iwq-hint,
.iwq-opts label,
.iwq-callout,
.iwq-lead,
.iwq-field label,
.iwq-optional,
.iwq input,
.iwq textarea,
.iwq-btn,
.iwq-estimate,
.iwq-note,
.iwq-addon,
.iwq-panels,
.iwq-error,
.iwq-done-h,
.iwq-done-p {
	font-family: var(--iwq-body-font);
}

.iwq-form {
	background: var(--iwq-bg);
	border: var(--iwq-bw) solid var(--iwq-gold);
	border-radius: var(--iwq-radius);
	overflow: hidden;
}

/* ---- Header + stepper ----
   A solid band of the primary colour with white text. White on the default
   #cd218c is 5:1, comfortably past the 4.5:1 readability threshold. */

.iwq-head {
	padding: 28px 34px 0;
	background: var(--iwq-accent);
	color: #fff;
	border-bottom: var(--iwq-bw) solid var(--iwq-gold);
}

.iwq-title {
	margin: 0 0 4px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
}

.iwq-sub {
	margin: 0 0 20px;
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.88);
}

.iwq-stepper {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iwq-step-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 18px 14px 0;
	margin-right: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	border-bottom: 3px solid transparent;
	margin-bottom: calc(var(--iwq-bw) * -1);
	transition: color 0.2s, border-color 0.2s;
}

.iwq-step-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	border: var(--iwq-bw) solid rgba(255, 255, 255, 0.55);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	flex: 0 0 auto;
}

.iwq-step-item.is-current {
	color: #fff;
	/* White, not gold: the header's own bottom rule is gold, so a gold
	   underline here would merge into it and read as nothing. */
	border-bottom-color: #fff;
}

.iwq-step-item.is-current span {
	background: #fff;
	border-color: #fff;
	color: var(--iwq-accent);
}

/* Steps already completed go green. */
.iwq-step-item.is-done {
	color: rgba(255, 255, 255, 0.92);
}

.iwq-step-item.is-done span {
	background: var(--iwq-accent-2);
	border-color: var(--iwq-accent-2);
	color: #fff;
}

/* ---- Steps ---- */

.iwq-step {
	display: none;
	padding: 6px 34px 30px;
}

.iwq-step.is-active {
	display: block;
	animation: iwq-in 0.22s ease;
}

@keyframes iwq-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.iwq-step.is-active { animation: none; }
}

/* ---- Question rows ---- */

.iwq-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 10px 26px;
	align-items: start;
	padding: 20px 0;
}

.iwq-row + .iwq-row {
	border-top: 1px solid var(--iwq-line);
}

.iwq-row-q {
	padding-top: 8px;
}

.iwq-q {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--iwq-ink);
}

.iwq-hint {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--iwq-muted);
}

/* ---- Options ---- */

.iwq-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.iwq-opts-tight label {
	min-width: 58px;
}

.iwq-opts input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.iwq-opts label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 15px;
	border: var(--iwq-bw) solid var(--iwq-gold-strong);
	border-radius: var(--iwq-radius-sm);
	background: #fff;
	color: var(--iwq-text);
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	user-select: none;
}

.iwq-opts label:hover {
	border-color: var(--iwq-accent);
	background: var(--iwq-accent-soft);
	color: var(--iwq-accent);
}

.iwq-opts input:checked + label {
	border-color: var(--iwq-accent);
	background: var(--iwq-accent);
	color: #fff;
	font-weight: 600;
}

.iwq-opts input:focus-visible + label {
	outline: 2px solid var(--iwq-accent);
	outline-offset: 2px;
}

/* ---- Callout (large / unusual property) ---- */

.iwq-callout {
	margin-top: 12px;
	padding: 14px 16px;
	border-left: calc(var(--iwq-bw) * 2) solid var(--iwq-gold);
	background: var(--iwq-soft);
	border-radius: 0 var(--iwq-radius-sm) var(--iwq-radius-sm) 0;
	font-size: 14.5px;
}

.iwq-callout strong {
	display: block;
	margin-bottom: 3px;
	color: var(--iwq-ink);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.iwq-callout p {
	margin: 0;
	color: var(--iwq-text);
}

.iwq-callout a {
	color: var(--iwq-accent);
	font-weight: 700;
	text-decoration: underline;
}

.iwq-callout-note {
	margin-top: 7px !important;
	font-size: 13.5px;
	color: var(--iwq-muted) !important;
}

.iwq-callout-done {
	margin: 18px auto 0;
	max-width: 460px;
	text-align: left;
}

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

.iwq-lead {
	margin: 18px 0 20px;
	font-size: 16px;
	color: var(--iwq-text);
}

.iwq-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

.iwq-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--iwq-ink);
}

.iwq-field-full {
	margin-top: 20px;
}

.iwq-field-wide {
	grid-column: 1 / -1;
}

.iwq-optional {
	font-weight: 400;
	color: var(--iwq-muted);
	font-size: 13px;
}

.iwq input[type="text"],
.iwq input[type="tel"],
.iwq input[type="email"],
.iwq input[type="number"],
.iwq textarea {
	width: 100%;
	padding: 10px 12px;
	border: var(--iwq-bw) solid var(--iwq-gold-strong);
	border-radius: var(--iwq-radius-sm);
	font-size: 15px;
	color: var(--iwq-text);
	background: #fff;
}

.iwq input:focus,
.iwq textarea:focus {
	outline: none;
	border-color: var(--iwq-accent);
	box-shadow: 0 0 0 3px var(--iwq-accent-soft);
}

.iwq-hp {
	position: absolute !important;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

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

.iwq-actions {
	display: flex;
	gap: 10px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: var(--iwq-bw) solid var(--iwq-line);
}

.iwq-btn {
	padding: 12px 30px;
	border: var(--iwq-bw) solid var(--iwq-accent);
	border-radius: var(--iwq-radius-sm);
	background: var(--iwq-accent);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	margin-left: auto;
	transition: filter 0.15s, opacity 0.15s;
}

.iwq-btn:hover {
	filter: brightness(1.1);
}

.iwq-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.iwq-btn-ghost {
	background: transparent;
	color: var(--iwq-muted);
	border-color: var(--iwq-gold-strong);
	font-weight: 600;
	margin-left: 0;
	margin-right: auto;
	padding: 12px 22px;
}

.iwq-btn-ghost:hover {
	filter: none;
	border-color: var(--iwq-ink);
	color: var(--iwq-ink);
}

/* ---- Estimate panel ---- */

.iwq-estimate {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	margin: 20px 0 12px;
	border-radius: var(--iwq-radius);
	overflow: hidden;
	background: var(--iwq-ink);
	color: #fff;
}

.iwq-estimate-figure {
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
}

.iwq-estimate-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iwq-gold);
}

.iwq-estimate-price {
	font-size: 42px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 6px 0 2px;
}

.iwq-estimate-unit {
	font-size: 14px;
	opacity: 0.8;
}

.iwq-estimate-breakdown {
	margin: 0;
	padding: 20px 26px;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	font-size: 14.5px;
}

.iwq-breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	opacity: 0.9;
}

.iwq-breakdown-row.is-context {
	padding-bottom: 9px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0.75;
	font-size: 13.5px;
}

.iwq-breakdown-row.is-total {
	margin-top: 5px;
	padding-top: 9px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-weight: 700;
	opacity: 1;
	color: var(--iwq-gold);
}

.iwq-note {
	margin: 0 0 24px;
	font-size: 13.5px;
	color: var(--iwq-muted);
}

/* ---- Add-ons ---- */

.iwq-addon-block .iwq-q {
	margin-bottom: 10px;
}

.iwq-addons {
	border: var(--iwq-bw) solid var(--iwq-line);
	border-radius: var(--iwq-radius-sm);
	overflow: hidden;
}

.iwq-addon {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--iwq-line);
	cursor: pointer;
	transition: background 0.15s;
}

.iwq-addon:last-child {
	border-bottom: 0;
}

.iwq-addon:hover {
	background: var(--iwq-soft);
}

.iwq-addon-label {
	flex: 1;
	font-size: 14.5px;
}

.iwq-addon-price {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--iwq-muted);
	white-space: nowrap;
}

.iwq-addon:has(input:checked) .iwq-addon-price {
	color: var(--iwq-accent);
	font-weight: 700;
}

/* Toggle switch — green when on. */
.iwq-switch {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 22px;
}

.iwq-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.iwq-switch-track {
	position: absolute;
	inset: 0;
	background: #d5cbdd;
	border-radius: 99px;
	transition: background 0.18s;
}

.iwq-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.18s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.iwq-switch input:checked + .iwq-switch-track {
	background: var(--iwq-accent-2);
}

.iwq-switch input:checked + .iwq-switch-track::after {
	transform: translateX(16px);
}

.iwq-switch input:focus-visible + .iwq-switch-track {
	outline: 2px solid var(--iwq-accent);
	outline-offset: 2px;
}

.iwq-panels {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px 14px 68px;
	border-bottom: 1px solid var(--iwq-line);
	background: var(--iwq-soft);
	flex-wrap: wrap;
}

.iwq-panels label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.iwq-panels input[type="number"] {
	width: 84px;
	padding: 7px 10px;
}

.iwq-panels-note {
	font-size: 13.5px;
	color: var(--iwq-muted);
}

/* ---- Errors + done ---- */

.iwq-error {
	margin: 16px 0 0;
	padding: 10px 13px;
	border-radius: var(--iwq-radius-sm);
	background: #fdeceb;
	border-left: calc(var(--iwq-bw) * 2) solid #c0392b;
	color: #97281c;
	font-size: 14px;
}

.iwq-done {
	text-align: center;
	padding: 40px 34px 46px;
}

.iwq-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--iwq-accent-2);
	color: #fff;
	margin-bottom: 16px;
}

.iwq-done-h {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--iwq-ink);
}

.iwq-done-p {
	margin: 0 auto;
	max-width: 460px;
	color: var(--iwq-muted);
	font-size: 15.5px;
}

/* ---- Narrow screens ---- */

@media (max-width: 700px) {
	.iwq-head {
		padding: 22px 18px 0;
	}

	.iwq-step {
		padding: 4px 18px 24px;
	}

	.iwq-title {
		font-size: 22px;
	}

	.iwq-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 16px 0;
	}

	.iwq-row-q {
		padding-top: 0;
	}

	.iwq-fields {
		grid-template-columns: 1fr;
	}

	.iwq-estimate {
		grid-template-columns: 1fr;
	}

	.iwq-estimate-figure {
		padding: 20px;
	}

	.iwq-estimate-breakdown {
		padding: 16px 20px 20px;
	}

	.iwq-stepper {
		gap: 0;
	}

	.iwq-step-item {
		flex: 1;
		justify-content: center;
		padding: 0 4px 12px;
		margin-right: 0;
		font-size: 12.5px;
		gap: 6px;
	}

	.iwq-btn {
		padding: 12px 20px;
		flex: 1;
	}

	.iwq-panels {
		padding-left: 16px;
	}
}

@media (max-width: 420px) {
	.iwq-step-item span {
		width: 22px;
		height: 22px;
	}

	.iwq-estimate-price {
		font-size: 36px;
	}
}

/* ------------------------------------------------------------------
   Theme and page-builder armour

   Divi, Elementor and similar builders style bare elements through
   very specific selectors — often hung off an #id — which beat a
   single class. Everything below is either a layout rule the form
   cannot work without, or a property those builders are known to
   overwrite. Nothing here is new design; it is the design above,
   stated loudly enough that a builder cannot talk over it.
   ------------------------------------------------------------------ */

.iwq *,
.iwq *::before,
.iwq *::after {
	box-sizing: border-box !important;
}

/* Without these two the wizard shows every step at once. */
.iwq .iwq-step {
	display: none !important;
}

.iwq .iwq-step.is-active {
	display: block !important;
}

.iwq [hidden] {
	display: none !important;
}

/*
 * The armour below sets display on several of these elements, and a class
 * selector outranks a bare attribute one. Anything the plugin hides with the
 * hidden attribute needs a rule of its own that is at least as specific.
 */
.iwq .iwq-addon[hidden],
.iwq .iwq-panels[hidden],
.iwq .iwq-callout[hidden],
.iwq .iwq-error[hidden],
.iwq .iwq-step[hidden],
.iwq .iwq-stepper[hidden],
.iwq [data-estimate-block][hidden],
.iwq [data-enquiry-panel][hidden] {
	display: none !important;
}

.iwq {
	text-align: left !important;
}

/* Builders add bullets, numbers and indents to lists inside content. */
.iwq .iwq-stepper,
.iwq .iwq-estimate-breakdown,
.iwq .iwq-addons {
	list-style: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.iwq .iwq-step-item,
.iwq .iwq-breakdown-row {
	list-style: none !important;
}

.iwq .iwq-step-item::marker,
.iwq .iwq-breakdown-row::marker,
.iwq .iwq-step-item::before,
.iwq .iwq-breakdown-row::before {
	content: none !important;
	display: none !important;
}

.iwq .iwq-stepper {
	display: flex !important;
}

/* Divi's default paragraph rule adds a bottom padding to every <p>. */
.iwq p {
	padding-bottom: 0 !important;
}

.iwq .iwq-form {
	background: var(--iwq-bg) !important;
	border: var(--iwq-bw) solid var(--iwq-gold) !important;
	border-radius: var(--iwq-radius) !important;
	max-width: none !important;
}

.iwq .iwq-head {
	background: var(--iwq-accent) !important;
}

.iwq .iwq-title {
	margin: 0 0 4px !important;
	padding: 0 !important;
	color: #fff !important;
	font-size: 26px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.iwq .iwq-done-h {
	color: var(--iwq-ink) !important;
	padding: 0 !important;
	text-transform: none !important;
}

/* Answer options: these are labels, and themes love to make labels block. */
.iwq .iwq-opts label {
	display: inline-flex !important;
	width: auto !important;
	margin: 0 !important;
	padding: 9px 15px !important;
	background: #fff !important;
	color: var(--iwq-text) !important;
	border: var(--iwq-bw) solid var(--iwq-gold-strong) !important;
	border-radius: var(--iwq-radius-sm) !important;
	font-size: 14.5px !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.iwq .iwq-opts input:checked + label {
	background: var(--iwq-accent) !important;
	border-color: var(--iwq-accent) !important;
	color: #fff !important;
}

.iwq .iwq-opts input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
}

.iwq .iwq-field label {
	display: block !important;
	color: var(--iwq-ink) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Form fields. */
.iwq .iwq-form input[type="text"],
.iwq .iwq-form input[type="tel"],
.iwq .iwq-form input[type="email"],
.iwq .iwq-form input[type="number"],
.iwq .iwq-form textarea {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	background: #fff !important;
	color: var(--iwq-text) !important;
	border: var(--iwq-bw) solid var(--iwq-gold-strong) !important;
	border-radius: var(--iwq-radius-sm) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.iwq .iwq-form .iwq-panels input[type="number"] {
	width: 84px !important;
	padding: 7px 10px !important;
}

/* Buttons. Divi hangs a pseudo-element arrow off its buttons; if the theme
   applies that to bare <button> elements it lands inside ours. */
.iwq .iwq-btn {
	display: inline-block !important;
	width: auto !important;
	padding: 12px 30px !important;
	background: var(--iwq-accent) !important;
	color: #fff !important;
	border: var(--iwq-bw) solid var(--iwq-accent) !important;
	border-radius: var(--iwq-radius-sm) !important;
	font-size: 15.5px !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.iwq .iwq-btn::before,
.iwq .iwq-btn::after {
	content: none !important;
	display: none !important;
}

.iwq .iwq-btn-ghost {
	background: transparent !important;
	color: var(--iwq-muted) !important;
	border-color: var(--iwq-gold-strong) !important;
	padding: 12px 22px !important;
}

/* Add-on toggles. */
.iwq .iwq-addon {
	display: flex !important;
	margin: 0 !important;
}

.iwq .iwq-switch input {
	opacity: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	position: absolute !important;
}

.iwq .iwq-estimate {
	background: var(--iwq-ink) !important;
	color: #fff !important;
	border-radius: var(--iwq-radius) !important;
}

.iwq .iwq-breakdown-row {
	display: flex !important;
	padding: 0 !important;
	border: 0 !important;
}

.iwq .iwq-breakdown-row.is-context {
	padding-bottom: 9px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0.75;
	font-size: 13.5px;
}

.iwq-breakdown-row.is-total {
	border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
	padding-top: 9px !important;
}