/* "Get a Quote" full-screen overlay funnel (convincely-style takeover).
   Loaded sitewide; opened by the header "Get a Quote" button via quote-funnel.js.
   Keeps the user on the same URL. Houses Gravity Form #2 in the right column,
   trust signals + industry facts in the left brand panel. */

.gqf {
	--gqf-orange: #EE8028;
	--gqf-orange-dk: #d96e1b;
	--gqf-green: #3E5044;
	--gqf-cream: #F4EEE4;
	--gqf-border: #e3d8c6;
	--gqf-ink: #383838;
	--gqf-ink-2: #5a5a5a;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--gqf-cream);
	color: var(--gqf-ink);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
	font-family: 'sofia-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.gqf.is-open { opacity: 1; visibility: visible; transform: none; }
html.gqf-open, body.gqf-open { overflow: hidden !important; }

/* Close button */
.gqf__close {
	position: absolute;
	top: 1rem;
	right: 1.15rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--gqf-border);
	color: var(--gqf-green);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: transform .2s, background .2s, color .2s;
}
.gqf__close svg { width: 20px; height: 20px; }
.gqf__close:hover { background: var(--gqf-green); color: #fff; transform: scale(1.06); }

.gqf__main { display: flex; flex: 1; min-height: 0; }

/* ---- Left: brand / trust panel ---- */
.gqf__aside {
	flex: 0 0 40%;
	max-width: 460px;
	background: var(--gqf-green);
	color: #fff;
	padding: 3rem 2.5rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.gqf__brand { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.gqf__brand span { color: var(--gqf-orange); }
.gqf__headline { font-size: 1.7rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.gqf__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.gqf__points li { position: relative; padding-left: 1.6rem; font-size: .95rem; line-height: 1.45; color: #eaf0ec; }
.gqf__points li::before {
	content: ""; position: absolute; left: 0; top: .35em;
	width: .7rem; height: .7rem; border-radius: 50%; background: var(--gqf-orange);
}
.gqf__facts { display: flex; flex-direction: column; gap: .9rem; }
.gqf__fact {
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.12);
	border-left: 3px solid var(--gqf-orange);
	border-radius: 6px;
	padding: .95rem 1.1rem;
}
.gqf__fact-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--gqf-orange); margin-bottom: .4rem;
}
.gqf__fact-badge svg { width: 14px; height: 14px; }
.gqf__fact-text { font-size: .83rem; line-height: 1.55; color: #eef2ef; margin: 0; }
.gqf__assurance { margin-top: auto; font-size: .8rem; color: #cdd8d1; display: flex; align-items: center; gap: .5rem; }
.gqf__assurance svg { width: 16px; height: 16px; flex: none; }

/* ---- Right: form ---- */
.gqf__form { position: relative; flex: 1 1 60%; overflow-y: auto; padding: 3rem 2.5rem; }
.gqf__form-inner { max-width: 600px; width: 100%; margin: 0 auto; }
.gqf__form-head { margin-bottom: 1.5rem; }
.gqf__form-title { font-size: 1.6rem; font-weight: 700; color: var(--gqf-green); letter-spacing: -.02em; margin: 0 0 .35rem; }
.gqf__form-sub { font-size: .98rem; color: var(--gqf-ink-2); margin: 0; line-height: 1.5; }

/* ---- Gravity Forms inside the overlay ---- */
.gqf .gform_wrapper { margin: 0; }
.gqf .gform_wrapper .gfield_label { font-weight: 600; color: var(--gqf-green); font-size: .95rem; }
.gqf .gform_wrapper .gfield { margin-bottom: 1.1rem; }
.gqf .gform_wrapper .ginput_container input[type="text"],
.gqf .gform_wrapper .ginput_container input[type="email"],
.gqf .gform_wrapper .ginput_container input[type="tel"],
.gqf .gform_wrapper .ginput_container textarea,
.gqf .gform_wrapper .ginput_container select {
	border: 1px solid #cdbfa9; border-radius: 5px; padding: 11px 12px; font-size: 15px; width: 100%; background: #fff;
	/* GF's framework forces block-size + line-height = --gf-ctrl-size (38px) with
	   padding-block:0. Our padding above, on a border-box appearance:none control,
	   shrinks the content box below that 38px line-height and CLIPS the chosen
	   value — a real selection renders cut-off and reads as "didn't populate".
	   Reset height + line-height so our padding sizes the control and the value
	   shows in full. */
	height: auto; line-height: 1.4;
}
.gqf .gform_wrapper .ginput_container input:focus,
.gqf .gform_wrapper .ginput_container textarea:focus,
.gqf .gform_wrapper .ginput_container select:focus {
	border-color: var(--gqf-orange); outline: none; box-shadow: 0 0 0 3px rgba(238,128,40,.15);
}
/* ---- Select fields: a native <select> always stores its value, but with no
   explicit colour the chosen option rendered too faint to read as committed
   ("when I select it does not populate the field"). Force solid ink for a real
   selection; keep the unselected placeholder option greyed. ---- */
.gqf .gform_wrapper .ginput_container select { color: var(--gqf-ink); }
.gqf .gform_wrapper .ginput_container select:has(option.gf_placeholder:checked) { color: var(--gqf-ink-2); }
.gqf .gform_wrapper .ginput_container select option { color: var(--gqf-ink); }
.gqf .gform_wrapper .ginput_container select option.gf_placeholder { color: var(--gqf-ink-2); }
/* Brand the radio buttons (native control renders a blue dot when checked) */
.gqf .gform_wrapper input[type="radio"] {
	appearance: none; -webkit-appearance: none; flex: none;
	width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid #b3a68d;
	border-radius: 50%; background: #fff; cursor: pointer; position: relative;
}
.gqf .gform_wrapper input[type="radio"]:checked { border-color: var(--gqf-orange); }
.gqf .gform_wrapper input[type="radio"]:checked::after {
	content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gqf-orange);
}
.gqf .gform_wrapper input[type="radio"]:focus-visible { outline: 2px solid var(--gqf-orange); outline-offset: 2px; }
.gqf .gform_wrapper .gform_next_button,
.gqf .gform_wrapper .gform_button,
.gqf .gform_wrapper .gform_previous_button {
	border: none; border-radius: 5px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gqf .gform_wrapper .gform_next_button,
.gqf .gform_wrapper .gform_button { background: var(--gqf-orange); color: #fff; }
.gqf .gform_wrapper .gform_next_button:hover,
.gqf .gform_wrapper .gform_button:hover { background: var(--gqf-orange-dk); }
.gqf .gform_wrapper .gform_previous_button { background: #e7ddcd; color: var(--gqf-green); margin-right: 10px; }
.gqf .gform_wrapper .gf_progressbar_percentage,
.gqf .gform_wrapper .gf_progressbar .gf_progressbar_percentage { background: var(--gqf-green); }
.gqf .gq-intro { font-size: 15px; line-height: 1.5; }
.gqf .gq-intro strong { color: var(--gqf-green); }
.gqf .gq-section-note { font-size: 15px; color: var(--gqf-ink-2); }
.gqf .gq-retail-notice {
	background: #F0DCBE; border-left: 4px solid var(--gqf-orange); border-radius: 5px;
	padding: 14px 16px; font-size: 15px; line-height: 1.5;
}
.gqf .gq-retail-notice a { color: #b35e10; font-weight: 600; }
.gqf .gq-retail-cta {
	display: inline-block; margin-top: 12px; padding: 11px 20px; border-radius: 6px;
	background: var(--gqf-orange); color: #fff !important; font-weight: 600; text-decoration: none;
}
.gqf .gq-retail-cta:hover { background: var(--gqf-orange-dk); }
.gqf .gform_confirmation_message { font-size: 17px; line-height: 1.6; color: var(--gqf-green); padding: 20px 0; }

/* ---- Loading veil while GF fetches the next step (perceived speed) ---- */
.gqf.gqf-loading .gqf__form-inner { opacity: .4; pointer-events: none; transition: opacity .12s ease; }
.gqf.gqf-loading .gqf__form::after {
	content: ""; position: absolute; top: 40%; left: 50%; width: 42px; height: 42px;
	margin: -21px 0 0 -21px; border-radius: 50%; z-index: 6;
	border: 3px solid rgba(238, 128, 40, .25); border-top-color: var(--gqf-orange);
	animation: gqf-spin .7s linear infinite;
}
@keyframes gqf-spin { to { transform: rotate(360deg); } }

/* ---- Responsive: stack, aside becomes a compact top band ---- */
@media (max-width: 60em) {
	/* .gqf is a fixed, full-height flex column; the inner main must FILL it and
	   scroll internally (flex:1 + min-height:0), else on mobile the tall form
	   overflows the viewport with nothing to scroll and Next becomes unreachable. */
	.gqf__main { flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	/* Slim brand band on mobile so the form gets the screen (was a tall empty green block) */
	.gqf__aside { flex: none; max-width: none; padding: 1.1rem 1.25rem; gap: .6rem; }
	.gqf__headline { font-size: 1.05rem; }
	.gqf__points, .gqf__assurance { display: none; }
	.gqf__form { padding: 1.5rem 1.25rem 3rem; }
	/* Step indicator: clean 2-per-row grid instead of an uneven wrap */
	.gqf .gform_wrapper .gf_step { flex: 0 0 50%; max-width: 50%; margin-bottom: .5rem; }
}
@media (max-width: 40em) {
	.gqf__facts { display: none; }
	.gqf__headline { display: none; } /* logo-only slim bar on small phones */
	.gqf__aside { padding: .9rem 1.25rem; }
	.gqf__close { top: .55rem; right: .65rem; height: 38px; width: 38px; }
}

/* ---- Multi-step progress indicator: brand the GF default blue (#204ce5) to Rama orange ---- */
.gqf .gform_wrapper .gf_step_number {
	--gf-field-pg-steps-number-bg-color-active: var(--gqf-orange);
	--gf-field-pg-steps-number-border-color-active: var(--gqf-orange);
	--gf-field-pg-steps-number-color-active: #fff;
	--gf-field-pg-steps-number-bg-color-complete: var(--gqf-orange);
	--gf-field-pg-steps-number-border-color-complete: var(--gqf-orange);
}

/* ---- Next / Submit buttons: the orbital theme colours its primary buttons from
   --gf-color-primary (default blue #204ce5), which beats the .gform_next_button rule
   above. Override the colour variables on the wrapper so the buttons render brand orange. ---- */
.gqf .gform_wrapper {
	--gf-color-primary: var(--gqf-orange);
	--gf-color-primary-rgb: 238, 128, 40;
	--gf-color-primary-darker: var(--gqf-orange-dk);
	--gf-color-primary-lighter: #f1944a;
	--gf-ctrl-btn-bg-color-primary: var(--gqf-orange);
	--gf-ctrl-btn-bg-color-hover-primary: var(--gqf-orange-dk);
	--gf-ctrl-btn-bg-color-focus-primary: var(--gqf-orange-dk);
}