/* =============================================================
   Estimate page (/estimate/, page 190) — page-estimate.php
   Ported from the Claude Design handoff (estimate-page.jsx).

   Dark hero with an overlapping form card + trust sidebar. The
   form card wraps the REAL Gravity Form (id 2); the .gform_*
   selectors below restyle that markup to match the design.
   ============================================================= */

.lecm-estimate {
	--green:      #00A94F;
	--green-hov:  #008C40;
	--green-tint: #E6F6EC;
	--green-dark: #1F4D2E;
	--ink:        #1F2A1A;
	--text2:      #3A4A2E;
	--muted:      #7A7A7A;
	--rule-soft:  #B5BCAE;
	--border:     #E5E7E0;
	--surface:    #FFFFFF;
	--bg:         #FAFAF7;

	background: var(--bg);
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: var(--ink);
}

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

.lecm-estimate__shell {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---------- Hero ---------- */
.lecm-estimate__hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ink) 0%, #2D3D24 100%);
	color: #fff;
	padding: 72px 48px 220px;
}
.lecm-estimate__hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 82% 18%, rgba(0, 169, 79, 0.18), transparent 52%);
	pointer-events: none;
}
.lecm-estimate__hero .lecm-estimate__shell { position: relative; }

.lecm-estimate__eyebrow {
	margin: 0 0 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
}
/* Extra specificity (.lecm-estimate prefix) to beat the Elementor kit's
   global h1 typography, which otherwise forces weight 600 + loose leading. */
.lecm-estimate .lecm-estimate__title {
	margin: 0;
	max-width: 760px;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	font-size: 68px;
	font-weight: 800;
	line-height: 0.97;
	letter-spacing: -0.028em;
	color: #fff;
}
.lecm-estimate__accent { color: var(--green); }
.lecm-estimate__intro {
	margin: 24px 0 0;
	max-width: 540px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- Body: form card overlaps up into the hero ---------- */
.lecm-estimate__body {
	background: var(--bg);
	padding: 0 48px 96px;
}
.lecm-estimate__grid {
	position: relative;
	margin-top: -160px;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 28px;
	align-items: start;
}

.lecm-estimate__formcard {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 40px 40px 44px;
}

/* ---------- Trust sidebar ---------- */
.lecm-estimate__side {
	display: grid;
	gap: 16px;
}
.lecm-estimate__scard {
	display: flex;
	gap: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 24px;
}
.lecm-estimate__scard-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--green-tint);
	color: var(--green-dark);
}
.lecm-estimate__scard-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
}
.lecm-estimate__scard-desc {
	margin-top: 5px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--muted);
}

.lecm-estimate__callcard {
	background: linear-gradient(135deg, var(--ink) 0%, #2D3D24 100%);
	border-radius: 10px;
	padding: 26px 24px;
	color: #fff;
}
.lecm-estimate__callcard-eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green);
}
.lecm-estimate__callcard-text {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}
.lecm-estimate .lecm-estimate__callcard-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}
.lecm-estimate .lecm-estimate__callcard-phone:hover { color: #fff; }
.lecm-estimate__callcard-phoneicon { color: var(--green); display: inline-flex; }

/* =============================================================
   Gravity Form (id 2) restyle — scoped to the estimate card.
   ============================================================= */
.lecm-estimate .gform_wrapper { margin: 0; }
.lecm-estimate .gform_wrapper form { margin: 0; }
.lecm-estimate .gform_heading { display: none; }

/* Field grid — GF renders a 12-col grid; tighten the gaps. */
.lecm-estimate .gform_wrapper .gform_fields {
	grid-column-gap: 18px;
	grid-row-gap: 26px;
}
/* Everything full-width by default; Phone + Email share a row. */
.lecm-estimate .gform_wrapper .gfield { grid-column: 1 / -1; }
.lecm-estimate #field_2_10,
.lecm-estimate #field_2_11 { grid-column: span 6; }

/* Labels. GF's orbital theme overrides label color/size/weight/spacing at
   higher specificity, so pin the design values with !important. */
.lecm-estimate .gform_wrapper .gfield_label,
.lecm-estimate .gform_wrapper .ginput_complex label,
.lecm-estimate .gform_wrapper .ginput_container_address label {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--text2) !important;
	margin-bottom: 8px;
}
/* Required indicator: replace GF's nested "(Required)" text with a green
   asterisk. GF nests two .gfield_required spans, so hide the text on both but
   add the asterisk only on the outer (direct child of the label). */
.lecm-estimate .gfield_label .gfield_required { font-size: 0; }
.lecm-estimate .gfield_label > .gfield_required::after {
	content: "*";
	font-size: 12px;
	color: var(--green);
	margin-left: 3px;
}
/* The Name field is required but GF only asterisks its (hidden) main label;
   add the green asterisk to the visible First/Last sub-labels. */
.lecm-estimate .ginput_container_name .gform-field-label--type-sub::after {
	content: "*";
	color: var(--green);
	margin-left: 3px;
}

/* Inputs, selects, textareas */
.lecm-estimate .gfield input[type="text"],
.lecm-estimate .gfield input[type="email"],
.lecm-estimate .gfield input[type="tel"],
.lecm-estimate .gfield input[type="number"],
.lecm-estimate .gfield select,
.lecm-estimate .gfield textarea {
	width: 100%;
	padding: 13px 14px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
	outline: none;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lecm-estimate .gform_wrapper .gfield textarea {
	min-height: 110px !important;
	height: 110px !important;
	resize: vertical;
}
/* GF's orbital theme pins a short fixed input height; restore the design's
   roomier fields (padding 13/14 + natural line-height ≈ 46px). */
.lecm-estimate .gform_wrapper .gfield input[type="text"],
.lecm-estimate .gform_wrapper .gfield input[type="email"],
.lecm-estimate .gform_wrapper .gfield input[type="tel"],
.lecm-estimate .gform_wrapper .gfield input[type="number"],
.lecm-estimate .gform_wrapper .gfield select {
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	padding: 13px 14px !important;
}
.lecm-estimate .gfield input:focus,
.lecm-estimate .gfield select:focus,
.lecm-estimate .gfield textarea:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(0, 169, 79, 0.14);
}

/* Name + Address composite sub-fields: even 2-col rows */
.lecm-estimate .ginput_complex { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lecm-estimate .ginput_complex span { display: block; }
/* Address: street (2fr) + city (1fr) side by side. GF's orbital theme forces
   full-width sub-fields at higher specificity, so override with !important. */
.lecm-estimate .gform_wrapper .ginput_container_address {
	display: grid !important;
	grid-template-columns: 2fr 1fr !important;
	gap: 18px !important;
}
.lecm-estimate .gform_wrapper .ginput_container_address .ginput_full,
.lecm-estimate .gform_wrapper .ginput_container_address .ginput_left,
.lecm-estimate .gform_wrapper .ginput_container_address .ginput_right {
	grid-column: auto !important;
	width: 100%;
	max-width: 100%;
}
/* Address uses placeholders (set in the prefill filter), so hide GF's sub-labels */
.lecm-estimate .ginput_container_address .gform-field-label--type-sub {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Preferred contact method radios → pill toggles. GF's orbital theme lays
   choices out in a single-column grid, so override with !important. */
.lecm-estimate .gform_wrapper .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}
.lecm-estimate .gform_wrapper .gfield_radio .gchoice {
	position: relative;
	margin: 0;
	width: auto !important;
	max-width: none;
	flex: 0 0 auto;
	padding: 0;
}
.lecm-estimate .gfield_radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.lecm-estimate .gform_wrapper .gfield_radio label {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 12px 22px !important;
	font-size: 14px;
	font-weight: 700;
	color: var(--text2);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lecm-estimate .gform_wrapper .gfield_radio input[type="radio"]:checked + label {
	color: var(--green-dark) !important;
	background: var(--green-tint) !important;
	border-color: var(--green) !important;
	box-shadow: inset 0 0 0 1px var(--green) !important;
}
.lecm-estimate .gform_wrapper .gfield_radio input[type="radio"]:focus + label {
	box-shadow: 0 0 0 3px rgba(0, 169, 79, 0.14) !important;
}
/* Pill icons (phone / mail) — masked so they take the label's text color,
   flipping to green-dark when the pill is selected. */
.lecm-estimate .gform_wrapper .gfield_radio label::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin-right: 10px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.lecm-estimate .gform_wrapper .gfield_radio label[for="choice_2_12_0"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}
.lecm-estimate .gform_wrapper .gfield_radio label[for="choice_2_12_1"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* Submit row: button left, reassurance note right (design layout) */
.lecm-estimate .gform_footer {
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
}
/* GF's footer styling inflates this to 18px/ink; pin the design's small
   muted note so it stays compact and right-aligned. */
.lecm-estimate .gform_footer .lecm-estimate__note {
	margin-left: auto !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--muted) !important;
}
.lecm-estimate .gform_wrapper .gform_footer input[type="submit"],
.lecm-estimate .gform_wrapper .gform_footer button[type="submit"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: auto !important;
	padding: 16px 50px 16px 28px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	color: #fff !important;
	background-color: var(--green) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 22px center !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.lecm-estimate .gform_wrapper .gform_footer input[type="submit"]:hover,
.lecm-estimate .gform_wrapper .gform_footer button[type="submit"]:hover {
	background-color: var(--green-hov) !important;
	color: #fff !important;
}

/* Validation + descriptions */
.lecm-estimate .gfield_description.validation_message,
.lecm-estimate .validation_message {
	font-size: 13px;
	color: #B3261E;
	margin-top: 6px;
}
.lecm-estimate .gfield_error input,
.lecm-estimate .gfield_error textarea,
.lecm-estimate .gfield_error select { border-color: #B3261E; }
.lecm-estimate .gform_validation_errors {
	background: #FCECEA;
	border: 1px solid #F3C5BF;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 22px;
}
.lecm-estimate .gform_confirmation_message {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	padding: 8px 0;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
	.lecm-estimate__hero { padding: 56px 24px 180px; }
	.lecm-estimate__title { font-size: 46px; }
	.lecm-estimate__intro { font-size: 16px; }
	.lecm-estimate__body { padding: 0 24px 72px; }
	.lecm-estimate__grid {
		grid-template-columns: 1fr;
		margin-top: -140px;
		gap: 20px;
	}
	.lecm-estimate__formcard { padding: 28px 22px 32px; }
	.lecm-estimate #field_2_10,
	.lecm-estimate #field_2_11 { grid-column: 1 / -1; }
	.lecm-estimate .ginput_complex { grid-template-columns: 1fr; gap: 12px; }
	.lecm-estimate .gform_wrapper .ginput_container_address {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
}

@media (max-width: 520px) {
	.lecm-estimate__title { font-size: 36px; }
	.lecm-estimate__hero { padding: 44px 18px 160px; }
	.lecm-estimate__body { padding: 0 16px 56px; }
	.lecm-estimate .gform_footer input[type="submit"] { width: 100%; }
}

/* ---------- Submission confirmation (gform_confirmation_2) ---------- */
/* Rendered by GF inside the white form card in place of the form. Double-class
   scoping throughout so colors survive the .elementor-kit-6 cascade. */
.lecm-estimate .lecm-estimate__confirm {
	padding: 14px 8px 6px;
}
.lecm-estimate .lecm-estimate__confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 26px;
	background: var(--green-tint);
	color: var(--green);
	margin-bottom: 24px;
}
.lecm-estimate .lecm-estimate__confirm-title {
	margin: 0 0 16px !important;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.lecm-estimate .lecm-estimate__confirm-copy {
	margin: 0 0 30px;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text2);
}
.lecm-estimate .lecm-estimate__confirm-foot {
	border-top: 1px solid var(--border);
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}
.lecm-estimate .lecm-estimate__confirm-note {
	margin: 0;
	max-width: 52ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
}
.lecm-estimate .lecm-estimate__confirm-tel,
.lecm-estimate .lecm-estimate__confirm-tel:visited {
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.lecm-estimate .lecm-estimate__confirm-tel:hover {
	color: var(--green-hov);
	text-decoration: underline;
}
.lecm-estimate .lecm-estimate__confirm-link,
.lecm-estimate .lecm-estimate__confirm-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--green);
	text-decoration: none;
	white-space: nowrap;
}
.lecm-estimate .lecm-estimate__confirm-link:hover {
	color: var(--green-hov);
}
.lecm-estimate .lecm-estimate__confirm-link:hover svg {
	transform: translateX(2px);
}
.lecm-estimate .lecm-estimate__confirm-link svg {
	transition: transform .14s ease;
}