/*
 * The Request a Quote page, in the 2026 design.
 *
 * Paul, 4 Oct 2026: "I thought you told me 2 days ago that the quote page is 100%
 * revised/changed????" - the new hero was on, but underneath it the page was still the old
 * narrow prose column: a grey box of centred body copy and a stack of unstyled fields.
 *
 * This file is hand-written and is NOT generated by build_theme.py, which is why it is separate
 * from epic.css and epic-site.css - a rebuild of those must not quietly wipe it.
 *
 * Nothing here touches the estimator's behaviour. Every selector is cosmetic: the field names,
 * ids, classes and JS hooks (.calculate, .addfield, [data-service]) are untouched, so the pricing
 * logic that has been running for years still runs exactly as before.
 */

/* The page body is a prose column everywhere else on the site. Here it is an application form,
   so it gets the full width back and a two-column layout. */
.page-quote .epic-pagebody .epic-prose { max-width: none; }
.page-quote .epic-pagebody { padding-top: clamp(38px, 4vw, 64px); }

.eq-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 352px;
	gap: clamp(28px, 3.4vw, 56px);
	align-items: start;
}
@media (max-width: 1000px) {
	.eq-layout { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the intro copy ---------- */
/* Was a centred grey panel. Left-aligned lede, same as every other page on the site. */
.eq-main .wp-block-uagb-advanced-heading .text-center,
.eq-main .wp-block-uagb-advanced-heading > div { text-align: left; }
.eq-main .wp-block-uagb-container,
.eq-main .wp-block-uagb-advanced-heading {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
.eq-main .uagb-heading-text {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.12;
	color: var(--ink);
	margin: 0 0 14px;
}
/* This paragraph carried an inline #eee background and a fixed 640px width - that grey box was
   the whole reason the page still looked unconverted. */
.eq-main .uagb-desc-text {
	font-size: clamp(1rem, 1.2vw, 1.09rem);
	line-height: 1.7;
	color: var(--slate);
	background: none !important;
	width: auto !important;
	max-width: 68ch !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 0 clamp(26px, 3vw, 38px) !important;
	text-align: left !important;
}
/* The copy uses <br><br> for its paragraph breaks; give those the air a <p> would have had. */
.eq-main .uagb-desc-text br + br { line-height: 2.1; }

/* ---------------------------------------------------------------- the form card ----------- */
#quote_form {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: clamp(24px, 2.6vw, 40px);
	box-shadow: 0 1px 2px rgba(14, 26, 34, .04), 0 18px 46px -24px rgba(14, 26, 34, .22);
}
.eq-main .wp-block-uagb-forms,
.eq-main .uagb-forms__outer-wrap { padding: 0 !important; margin: 0 !important; background: none !important; }

/* Section headings inside the form - "Client Information", "Quote Details". */
#quote_form .section-text {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
/* The old markup gave these headings a fixed width, so the rule under them stopped short of the
   card edge and looked like a mistake. */
#quote_form .section-text { display: block; width: 100% !important; max-width: none !important; }
#quote_form .section-text:not(:first-child) { margin-top: clamp(30px, 3vw, 44px); }

/* Fields. */
#quote_form .uagb-forms-field-set { margin: 0 0 18px; }
#quote_form .uagb-forms-input-label {
	font-size: .845rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 7px;
	letter-spacing: -.01em;
}
#quote_form .uagb-forms-input-label.required::after {
	content: " *";
	color: #C8372D;
	font-weight: 700;
}
/* The theme's own required marker, if the plugin prints one, must not double up. */
#quote_form .uagb-forms-input-label.required > .required { display: none; }

/* Fields themselves are ALREADY styled site-wide in epic-site.css - same border, same 10px
   radius, same blue focus ring, all with !important. Re-declaring them here did nothing except
   set appearance:none, which deleted the dropdown arrow off every select on the page. So the
   shared rules are left to do their job and only what is genuinely missing is added. */
/* Astra strips the native dropdown arrow, so every select on this page read as a plain box with
   no sign it could be opened. The caret is drawn inline rather than loaded, and marked important
   because the shared rules that style these fields are themselves important. */
#quote_form select {
	width: 100%;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A6B77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	padding-right: 40px !important;
}
#quote_form input[type="text"],
#quote_form input[type="email"],
#quote_form textarea { width: 100%; }
#quote_form textarea { min-height: 128px !important; resize: vertical; }

#quote_form ::placeholder { color: #93A4AF; }

/* Two fields side by side - the plugin's own column wrapper, given a real grid. */
#quote_form .uag-col-2-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
#quote_form .uag-col-2-wrap > .uag-col-2 { width: auto; margin: 0 0 18px; }
@media (max-width: 620px) {
	#quote_form .uag-col-2-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* Consumer / Corporate. Real choice chips rather than two loose radio buttons. */
#quote_form .uagb-forms-field-set:has(> input[type="radio"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}
#quote_form input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#quote_form input[type="radio"] + label {
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: .93rem;
	font-weight: 500;
	padding: 11px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: border-color .16s, background .16s, color .16s;
}
#quote_form input[type="radio"] + label::before {
	content: "";
	width: 15px; height: 15px;
	border-radius: 50%;
	border: 1.5px solid #B6C4CD;
	transition: border-color .16s, border-width .16s;
}
#quote_form input[type="radio"]:checked + label {
	border-color: var(--blue);
	background: rgba(20, 110, 154, .06);
	color: var(--blue-800);
	font-weight: 600;
}
#quote_form input[type="radio"]:checked + label::before {
	border-color: var(--blue);
	border-width: 4.5px;
}
#quote_form input[type="radio"]:focus-visible + label { box-shadow: 0 0 0 3px rgba(20, 110, 154, .18); }
/* The inline margins the old markup set on the radios themselves. */
#quote_form input[type="radio"][style] { margin-left: 0 !important; }

/* File input. */
#quote_form input[type="file"] {
	width: 100%;
	font-size: .9rem;
	color: var(--slate);
	background: var(--wash);
	border: 1px dashed #C6D2DA;
	border-radius: 10px;
	padding: 14px 15px;
	cursor: pointer;
}
#quote_form input[type="file"]::file-selector-button {
	font-family: inherit;
	font-size: .86rem;
	font-weight: 600;
	color: var(--blue-800);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 15px;
	margin-right: 13px;
	cursor: pointer;
}
#quote_form .small {
	font-size: .8rem;
	line-height: 1.55;
	color: var(--slate);
	margin-top: 8px;
}

/* The explanation that appears under a chosen service. */
#quote_form .service-info:not(:empty) {
	font-size: .88rem;
	line-height: 1.6;
	color: var(--blue-800);
	background: rgba(20, 110, 154, .06);
	border-left: 3px solid var(--blue);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	margin: -6px 0 18px;
}

/* The running estimate. It was a line of grey label text; it is the single most important thing
   on the page, so it reads as a figure. The markup and the hidden inputs are untouched. */
#quote_form .estimate {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin: clamp(26px, 2.8vw, 36px) 0 0;
}
#quote_form .estimate .uagb-forms-input-label {
	font-size: .95rem;
	font-weight: 600;
	color: var(--slate);
	margin: 0;
	/* The markup is "Total Rough estimate: $" followed by the figure in a span, so pushing the
	   span to the far right orphaned the dollar sign. Kept together, read as one line. */
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0;
	flex-wrap: wrap;
}
#quote_form .estimate .uagb-forms-input-label span {
	font-size: clamp(1.5rem, 2.4vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -.035em;
	color: var(--ink);
}
/* scripts/quote.css prints this in red with a dotted rule under it. It carries two very
   different messages - "Minimum fee will be added" and "We will price this for you and come back
   to you" - and neither is an error, so neither should look like one. */
#quote_form .estimate .price_fee {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	color: var(--blue-800) !important;
	font-size: .92rem !important;
	font-weight: 600 !important;
	line-height: 1.6;
}
#quote_form .estimate .price_fee:not(:empty) { margin-top: 10px; }
#quote_form .estimate .uagb-forms-input-label-text:not(:empty) {
	font-size: .84rem;
	line-height: 1.6;
	color: var(--slate);
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
/* The label keeps a dotted rule from the old stylesheet; the panel already has a border. */
#quote_form .estimate > .uagb-forms-input-label {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Submit. The site already has ONE form button - navy, going amber on hover - set in
   epic-site.css and used by every other form on the site. It is deliberately left alone here: a
   second button colour on one page would be the inconsistency, not the fix. Only the alignment
   and the disabled state are added. */
#quote_form .uagb-forms-main-submit-button { cursor: pointer; }
#quote_form button[type="submit"]:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}
/* Two wraps follow the estimate: the button, then the "Multiple Languages?" link. Both carry a
   .text-center class from the old markup; left-align them with everything else on the page. */
#quote_form .uagb-forms-main-submit-button-wrap { text-align: left; margin-top: 20px; }
#quote_form .uagb-forms-main-submit-button-wrap + .uagb-forms-main-submit-button-wrap {
	margin-top: 14px;
}
#quote_form a#lang_info {
	font-size: .9rem;
	font-weight: 600;
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#quote_form a#lang_info:hover { color: var(--amber-600); }

/* Validation messages from the estimator. */
#quote_form .error,
#quote_form .uagb-forms-input-error {
	font-size: .84rem;
	color: #C8372D;
	margin-top: 6px;
}
#quote_form .uagb-forms-input.error,
#quote_form input.error,
#quote_form select.error { border-color: #C8372D; }

/* ---------------------------------------------------------------- the side panel ---------- */
.eq-aside { position: sticky; top: 112px; display: grid; gap: 18px; }
@media (max-width: 1000px) { .eq-aside { position: static; } }

.eq-card {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 26px 26px 28px;
}
.eq-card.eq-dark {
	background: var(--blue-900);
	border-color: var(--blue-900);
	color: #fff;
}
.eq-card h2 {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 18px;
}
.eq-card.eq-dark h2 { color: var(--amber); }

.eq-steps { list-style: none; margin: 0; padding: 0; counter-reset: eq; }
.eq-steps li {
	counter-increment: eq;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 20px;
	position: relative;
}
.eq-steps li:last-child { padding-bottom: 0; }
.eq-steps li::before {
	content: counter(eq);
	grid-column: 1;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	font-size: .82rem; font-weight: 700;
	color: var(--white);
	background: var(--blue);
	border-radius: 50%;
}
/* The line joining the steps, so it reads as a sequence rather than three bullets. */
.eq-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 14.5px; top: 34px; bottom: 6px;
	width: 1px;
	background: var(--line);
}
/* The counter occupies column 1; both of these belong in column 2, or auto-placement drops the
   description back under the number and the text runs one word wide. */
.eq-steps strong, .eq-steps span { grid-column: 2; }
.eq-steps strong {
	display: block;
	font-size: .97rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -.015em;
	margin-bottom: 3px;
}
.eq-steps span { font-size: .89rem; line-height: 1.6; color: var(--slate); display: block; }

.eq-call { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* .epic-prose underlines and recolours every link; the panel sets its own. */
.eq-aside a { text-decoration: none; }
.eq-card.eq-dark .eq-call a.eq-num {
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	text-decoration: none;
}
.eq-card.eq-dark .eq-call a.eq-num:hover { color: var(--amber); }
.eq-card.eq-dark p { font-size: .89rem; line-height: 1.65; color: #B9CEDC; margin: 10px 0 0; }

.eq-note { font-size: .86rem; line-height: 1.65; color: var(--slate); margin: 0; }
.eq-note + .eq-note { margin-top: 12px; }
.eq-note strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- the loading state ------- */
/* scripts/quote.css points the "working it out" spinner at
   /wp-content/themes/astra/assets/images/loading-gif.gif, which is not there - it 404s, so while
   the price is being fetched the visitor saw a broken image. Replaced with a spinner drawn inline,
   which cannot 404 and does not need a request. The old file is left alone. */
#quote_form .estimate > .uagb-forms-input-label.active {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cg fill='none' stroke='%23146E9A' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='19' cy='19' r='15' stroke='%23D8E3EA'/%3E%3Cpath d='M19 4a15 15 0 0 1 15 15'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 19 19' to='360 19 19' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important;
	background-size: 30px 30px !important;
	background-position: right center !important;
}
#quote_form button.uagb-forms-main-submit-button.active {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cg fill='none' stroke='%23146E9A' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='19' cy='19' r='15' stroke='%23D8E3EA'/%3E%3Cpath d='M19 4a15 15 0 0 1 15 15'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 19 19' to='360 19 19' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important;
	background-size: 24px 24px !important;
	background-position: right 14px center !important;
	padding-right: 50px !important;
}