/*
 * Stacked one-page presentation for Gravity Form #1 — modern card design.
 * Loaded only on /test via jrfgf-onepage-preview.php (mu-plugin).
 * Every rule is scoped under body.jrfgf-onepage so nothing leaks elsewhere.
 */

body.jrfgf-onepage {
	--jrfgf-accent: #00d24a;
	--jrfgf-accent-soft: rgba(0, 210, 74, .12);
	--jrfgf-accent-ring: rgba(0, 210, 74, .22);
	--jrfgf-ink: #101828;
	--jrfgf-muted: #667085;
	--jrfgf-border: #e4e7ec;
	--jrfgf-card: #ffffff;
	--jrfgf-radius: 18px;

	background: #f5f6f8;
}

/* ------------------------------------------------------------------ */
/* Step cards                                                          */
/* ------------------------------------------------------------------ */

/* Structural rules are gated on .jrfgf-onepage-ready (added by onepage.js at
   runtime) so that if the JS ever fails to load, the form falls back to
   Gravity Forms' native step-by-step behavior instead of losing its buttons. */
body.jrfgf-onepage-ready .gform_wrapper .gform_page {
	display: block !important;
	position: relative;
	background: var(--jrfgf-card);
	border: 1px solid var(--jrfgf-border);
	border-radius: var(--jrfgf-radius);
	padding: 32px 34px 26px;
	margin: 0 0 22px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .05);
	transition: box-shadow .3s ease, border-color .3s ease, opacity .3s ease;
}

body.jrfgf-onepage .gform_page.jrfgf-step-current {
	border-color: var(--jrfgf-accent);
	box-shadow: 0 0 0 3px var(--jrfgf-accent-ring), 0 12px 32px rgba(16, 24, 40, .08);
}

/* The NEXT step: visible but blurred preview, non-interactive */
body.jrfgf-onepage .gform_page.jrfgf-step-locked {
	pointer-events: none;
	user-select: none;
	box-shadow: none;
}

body.jrfgf-onepage .gform_page .gform_page_fields {
	transition: opacity .35s ease, filter .35s ease;
}

body.jrfgf-onepage .gform_page.jrfgf-step-locked .gform_page_fields {
	opacity: .55;
	filter: blur(5px);
}

/* Steps beyond the next one: hidden entirely until unlocked */
body.jrfgf-onepage-ready .gform_wrapper .gform_page.jrfgf-step-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Step header (number badge + title, injected by onepage.js)          */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .jrfgf-step-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

body.jrfgf-onepage .jrfgf-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: #eef0f3;
	color: var(--jrfgf-muted);
	font-size: 14px;
	font-weight: 700;
}

body.jrfgf-onepage .jrfgf-step-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--jrfgf-ink);
	letter-spacing: .01em;
}

body.jrfgf-onepage .gform_page.jrfgf-step-current .jrfgf-step-num {
	background: var(--jrfgf-ink);
	color: #fff;
}

/* Completed steps get a green check badge */
body.jrfgf-onepage .gform_page.jrfgf-step-done .jrfgf-step-num {
	background: var(--jrfgf-accent);
	color: #04240f;
	font-size: 0;
}

body.jrfgf-onepage .gform_page.jrfgf-step-done .jrfgf-step-num::after {
	content: '\2713';
	font-size: 15px;
	font-weight: 800;
}

/* Keep the blurred step's header readable — only its content blurs */
body.jrfgf-onepage .gform_page.jrfgf-step-locked .jrfgf-step-head {
	opacity: .55;
}

/* Hide each page's leading section title — the step header replaces it.
   Later sections inside a page (e.g. "On site Contact Information") stay. */
body.jrfgf-onepage .gform_page .gform_fields > .gfield--type-section:first-child {
	display: none !important;
}

/* Remaining in-page sections, restyled */
body.jrfgf-onepage .gfield--type-section {
	border-bottom: 1px solid var(--jrfgf-border);
	margin-top: 10px;
}

body.jrfgf-onepage .gsection_title {
	font-size: 15px;
	font-weight: 700;
	color: var(--jrfgf-ink);
}

/* ------------------------------------------------------------------ */
/* Navigation buttons                                                  */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage-ready .gform_page_footer {
	display: none !important;
}

body.jrfgf-onepage-ready .gform_page.jrfgf-step-current .gform_page_footer {
	display: flex !important;
	justify-content: flex-start;
	padding: 8px 0 0;
	margin: 14px 0 0;
	border-top: none;
}

body.jrfgf-onepage-ready .gform_previous_button {
	display: none !important;
}

body.jrfgf-onepage-ready .gf_progressbar_wrapper {
	display: none !important;
}

/* The sidebar already has its own Save Quote button; hide the duplicate
   save link inside the step footer (the sidebar button still triggers it). */
body.jrfgf-onepage-ready .gform_page_footer .gform_save_link {
	display: none !important;
}

body.jrfgf-onepage .gform_next_button,
body.jrfgf-onepage .gform_page_footer .gform_button {
	width: 100%;
	max-width: 340px;
	background: var(--jrfgf-accent) !important;
	color: #04240f !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 15px 32px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body.jrfgf-onepage .gform_next_button:hover,
body.jrfgf-onepage .gform_page_footer .gform_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 210, 74, .35);
	filter: brightness(.96);
}

/* ------------------------------------------------------------------ */
/* Inputs                                                              */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .gform_wrapper input[type="text"],
body.jrfgf-onepage .gform_wrapper input[type="email"],
body.jrfgf-onepage .gform_wrapper input[type="tel"],
body.jrfgf-onepage .gform_wrapper input[type="number"],
body.jrfgf-onepage .gform_wrapper select,
body.jrfgf-onepage .gform_wrapper textarea,
body.jrfgf-onepage .gform_wrapper .ts-control {
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: #fff;
	padding: 12px 14px;
	font-size: 15px;
	color: var(--jrfgf-ink);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.jrfgf-onepage .gform_wrapper input:focus,
body.jrfgf-onepage .gform_wrapper select:focus,
body.jrfgf-onepage .gform_wrapper textarea:focus,
body.jrfgf-onepage .gform_wrapper .ts-control.focus,
body.jrfgf-onepage .gform_wrapper .focus .ts-control {
	border-color: var(--jrfgf-accent);
	box-shadow: 0 0 0 3px var(--jrfgf-accent-ring);
	outline: none;
}

body.jrfgf-onepage .gform_wrapper ::placeholder {
	color: #98a2b3;
}

body.jrfgf-onepage .gform_wrapper .gfield_label {
	font-size: 13.5px;
	font-weight: 600;
	color: #344054;
	margin-bottom: 6px;
}

body.jrfgf-onepage .gform_wrapper input[type="checkbox"] {
	accent-color: var(--jrfgf-accent);
}

/* Postcode search: big centered pill.
   The plugin styles the OUTER .ts-wrapper (25% width + magnifier icon) and
   resets the inner .ts-control — so the pill styling must live on the
   wrapper, and the inner control must stay chromeless. */
body.jrfgf-onepage .jrfgf-zip .ginput_container .ts-wrapper {
	width: 100%;
	max-width: 480px;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 10px 24px 10px 48px !important;
	background-position: 18px 50%;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.jrfgf-onepage .jrfgf-zip .ginput_container .ts-wrapper.focus,
body.jrfgf-onepage .jrfgf-zip .ginput_container .ts-wrapper:focus-within {
	border-color: var(--jrfgf-accent);
	box-shadow: 0 0 0 3px var(--jrfgf-accent-ring);
}

body.jrfgf-onepage .jrfgf-zip .ginput_container .ts-control {
	border: none !important;
	box-shadow: none !important;
	background: transparent;
	padding: 6px 0;
	font-size: 16px;
}

/* Selected location renders as a confirmed chip: ✓ 2000 × */
body.jrfgf-onepage .jrfgf-zip .ts-control .item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--jrfgf-accent-soft);
	border: 1.5px solid var(--jrfgf-accent);
	border-radius: 999px;
	padding: 4px 14px;
	font-weight: 700;
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .jrfgf-zip .ts-control .item::before {
	content: '\2713';
	font-weight: 800;
	color: #0a8f3c;
}

body.jrfgf-onepage .jrfgf-zip .ts-control .item .jrfgf-zip-clear {
	margin-left: 2px;
	padding: 0 3px;
	cursor: pointer;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--jrfgf-muted);
	pointer-events: auto;
}

body.jrfgf-onepage .jrfgf-zip .ts-control .item .jrfgf-zip-clear:hover {
	color: #b42318;
}

/* Confirmation line once a serviced location is selected */
body.jrfgf-onepage .jrfgf-zip-confirm {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #0a8f3c;
}

body.jrfgf-onepage .jrfgf-zip-confirm::before {
	content: '\2713\00a0';
	font-weight: 800;
}

/* Step 1's content is centered — center its button too */
body.jrfgf-onepage-ready .gform_page[data-js="page-field-id-0"] .gform_page_footer {
	justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Radio choices: Yes/No pills + pickup option cards                   */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .gfield--type-radio .gchoice {
	display: inline-block;
	margin: 0 8px 8px 0;
}

body.jrfgf-onepage .gfield--type-radio .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.jrfgf-onepage .gfield--type-radio .gchoice label {
	display: inline-block;
	border: 1.5px solid #d0d5dd;
	border-radius: 999px;
	background: #fff;
	color: var(--jrfgf-ink);
	padding: 10px 26px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	max-width: none;
	transition: all .18s ease;
}

body.jrfgf-onepage .gfield--type-radio .gchoice:hover label {
	border-color: var(--jrfgf-ink);
}

body.jrfgf-onepage .gfield--type-radio .gchoice:has(input:checked) label {
	background: var(--jrfgf-ink);
	border-color: var(--jrfgf-ink);
	color: #fff;
}

/* JS-driven fallback for browsers without :has() — kept as a separate rule
   on purpose: a selector list containing :has() is dropped entirely by
   browsers that don't support it. */
body.jrfgf-onepage .gfield--type-radio .gchoice.jrfgf-checked label {
	background: var(--jrfgf-ink);
	border-color: var(--jrfgf-ink);
	color: #fff;
}

body.jrfgf-onepage .gfield--type-radio .gchoice:has(input:focus-visible) label {
	box-shadow: 0 0 0 3px var(--jrfgf-accent-ring);
}

/* Pickup-type cards (field 39) become full-width selectable cards */
body.jrfgf-onepage .gfield--type-radio[id$="_39"] .gchoice {
	display: block;
	margin: 0 0 12px;
}

body.jrfgf-onepage .gfield--type-radio[id$="_39"] .gchoice label {
	display: block;
	width: 100%;
	border-radius: 14px;
	padding: 18px 20px;
	white-space: normal;
	line-height: 1.45;
	font-weight: 500;
}

body.jrfgf-onepage .gfield--type-radio[id$="_39"] .gchoice:has(input:checked) label {
	background: var(--jrfgf-accent-soft);
	border-color: var(--jrfgf-accent);
	color: var(--jrfgf-ink);
}

/* Separate rule: :has() fallback (see note above) */
body.jrfgf-onepage .gfield--type-radio[id$="_39"] .gchoice.jrfgf-checked label {
	background: var(--jrfgf-accent-soft);
	border-color: var(--jrfgf-accent);
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .gfield--type-radio[id$="_39"] .jrfgf-title {
	font-weight: 700;
	margin-bottom: 4px;
}

body.jrfgf-onepage .gfield--type-radio[id$="_39"] .jrfgf-subtext {
	font-size: 13px;
	color: var(--jrfgf-muted);
}

/* ------------------------------------------------------------------ */
/* Item picker (popular tiles + selected rows)                         */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .jrfgf-flex-item {
	border: 1.5px solid var(--jrfgf-border);
	border-radius: 14px;
	background: #fff;
	padding: 16px 12px;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.jrfgf-onepage .jrfgf-flex-item:hover {
	border-color: var(--jrfgf-accent);
	box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
	transform: translateY(-2px);
}

body.jrfgf-onepage .jrfgf-flex-item.disabled {
	border-color: var(--jrfgf-accent);
	background: var(--jrfgf-accent-soft);
	transform: none;
	box-shadow: none;
}

/* "My Items": drop the plugin's outer bordered box; each row is its own card */
body.jrfgf-onepage .selected-items-container {
	border: none;
	border-radius: 0;
	padding: 0;
}

body.jrfgf-onepage .jrfgf-selected-item,
body.jrfgf-onepage .jrfgf-selected-item:not(:first-of-type) {
	border: 1px solid var(--jrfgf-border);
	border-top: 1px solid var(--jrfgf-border);
	border-radius: 12px;
}

body.jrfgf-onepage .jrfgf-selected-item {
	background: #fff;
	padding: 14px 16px;
	margin-bottom: 10px;
	gap: 14px;
}

body.jrfgf-onepage .jrfgf-selected-item .item-label span {
	text-transform: none;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .jrfgf-selected-item .item-label p {
	font-style: normal;
	font-size: 12.5px;
	color: var(--jrfgf-muted);
	margin: 2px 0 0;
}

body.jrfgf-onepage .jrfgf-selected-item .item-controls {
	padding: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

/* Quantity stepper: one pill containing − qty + */
body.jrfgf-onepage .quantity-control {
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 2px;
	gap: 2px;
	background: #fff;
}

body.jrfgf-onepage .quantity-control div {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .15s ease;
}

body.jrfgf-onepage .quantity-control div:hover {
	background: var(--jrfgf-ink);
}

body.jrfgf-onepage .quantity-control div:hover svg path {
	fill: #fff;
}

body.jrfgf-onepage .quantity-control svg {
	width: 12px;
	height: 12px;
}

body.jrfgf-onepage .quantity-control input {
	width: 34px;
	font-size: 15px;
	padding: 0 !important;
	border: none;
	box-shadow: none;
}

/* Remove: quiet red text link instead of a pill button */
body.jrfgf-onepage .remove-item {
	border: none;
	padding: 0;
	margin-top: 0;
	border-radius: 0;
	text-transform: none;
	font-size: 12.5px;
	font-weight: 600;
	color: #b42318;
	cursor: pointer;
}

body.jrfgf-onepage .remove-item:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Inline datepicker                                                   */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .ui-datepicker,
body.jrfgf-onepage .ui-datepicker-inline {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--jrfgf-border);
	border-radius: 14px;
	padding: 14px;
	font-family: inherit;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
}

body.jrfgf-onepage .ui-datepicker .ui-datepicker-header {
	background: transparent;
	border: none;
	font-weight: 700;
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .ui-datepicker th {
	font-size: 12px;
	font-weight: 600;
	color: var(--jrfgf-muted);
	text-transform: uppercase;
}

body.jrfgf-onepage .ui-datepicker td a,
body.jrfgf-onepage .ui-datepicker td span {
	text-align: center;
	border: none;
	background: transparent;
	border-radius: 9px;
	padding: 9px 0;
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .ui-datepicker td a:hover {
	background: #f2f4f7;
}

body.jrfgf-onepage .ui-datepicker td a.ui-state-active {
	background: var(--jrfgf-accent);
	color: #04240f;
	font-weight: 800;
}

body.jrfgf-onepage .ui-datepicker .ui-state-disabled {
	opacity: .3;
}

/* ------------------------------------------------------------------ */
/* Layout shell: remove the plugin's outer white box behind the cards  */
/* ------------------------------------------------------------------ */

body.jrfgf-onepage .jrfgf_form_wrapper:not(.hide_summary) .jrfgf_form_container {
	background: transparent;
	box-shadow: none !important;
	padding: 0;
}

/* The Elementor kit sets html,body { overflow-x:hidden } which silently
   disables position:sticky. overflow-x:clip prevents horizontal scrolling
   without creating a scroll container. This stylesheet only loads on /test,
   so the html rule is page-scoped despite having no body-class prefix. */
html {
	overflow-x: clip !important;
}

body.jrfgf-onepage {
	overflow-x: clip !important;
}

/* ------------------------------------------------------------------ */
/* Order summary sidebar                                               */
/* ------------------------------------------------------------------ */

/* Stick the whole sidebar column; align-items keeps it content-height */
body.jrfgf-onepage .jrfgf_form_wrapper:not(.hide_summary) {
	align-items: flex-start;
}

body.jrfgf-onepage .jrfgf_summary_container {
	position: sticky;
	top: 110px;
}

body.jrfgf-onepage .jrfgf_order_summary {
	border: 1px solid var(--jrfgf-border);
	border-radius: 16px;
	background: #fff;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05) !important;
}

body.jrfgf-onepage .jrfgf_summary_title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jrfgf-muted);
	margin-bottom: 12px;
	text-align: left;
}

/* "Guaranteed Price" — small label over a big clean number
   (replaces the plugin's green band) */
body.jrfgf-onepage .jrfgf_summary_total {
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jrfgf-muted);
	margin-bottom: 14px;
}

body.jrfgf-onepage .jrfgf_summary_total .jrfgf-summary-total {
	display: block;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0;
	color: var(--jrfgf-ink);
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

/* Price breakdown: quiet text toggle + clean rows */
body.jrfgf-onepage .jrfgf_toggle_breakdown {
	background: transparent;
	border: none;
	border-top: 1px solid var(--jrfgf-border);
	padding: 12px 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--jrfgf-muted);
}

body.jrfgf-onepage .jrfgf_toggle_breakdown:hover {
	color: var(--jrfgf-ink);
}

body.jrfgf-onepage .chevron svg {
	width: 12px;
	fill: currentColor;
}

body.jrfgf-onepage .jrfgf_summary_lines {
	border: none;
	padding: 2px 2px 8px;
}

body.jrfgf-onepage .jrfgf-service-fee-title {
	border-bottom: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jrfgf-muted);
	margin: 12px 0 4px;
}

body.jrfgf-onepage .jrfgf-service-fee-details {
	padding: 4px 0;
	font-size: 13.5px;
	align-items: baseline;
	gap: 12px;
}

/* Item name may wrap; the amount never does */
body.jrfgf-onepage .jrfgf-service-fee-details > div:last-child,
body.jrfgf-onepage .jrfgf-breakdown-total > div > div:last-child {
	white-space: nowrap;
	flex-shrink: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body.jrfgf-onepage .jrfgf-breakdown-total {
	border-top: 1px solid var(--jrfgf-ink);
	margin-top: 10px;
	padding-top: 8px;
}

/* Save quote: secondary button */
body.jrfgf-onepage .jrfgf_save_quote_button_wrapper {
	margin: 18px 0 0;
}

body.jrfgf-onepage .jrfgf_save_quote_button_wrapper a {
	display: block;
	padding: 12px 20px;
	border: 1.5px solid var(--jrfgf-ink);
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	transition: all .15s ease;
}

body.jrfgf-onepage .jrfgf_save_quote_button_wrapper a:hover {
	background: var(--jrfgf-ink);
	color: #fff !important;
}

/* Coupon */
body.jrfgf-onepage #gf_coupon_button {
	background: var(--jrfgf-ink) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 22px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

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

@media (max-width: 782px) {
	body.jrfgf-onepage .gform_wrapper .gform_page {
		padding: 22px 18px 18px;
		border-radius: 14px;
	}

	body.jrfgf-onepage .gform_next_button,
	body.jrfgf-onepage .gform_page_footer .gform_button {
		max-width: none;
	}

	body.jrfgf-onepage .jrfgf_summary_container {
		position: static;
	}
}

/* Summary when relocated into the Payment step (mobile only).
   GF's field area is a 12-column grid — span all of it. Shown boxless:
   no border/shadow/padding, just the price content. */
body.jrfgf-onepage .jrfgf_order_summary.jrfgf-mobile-inline {
	grid-column: 1 / -1;
	border: none;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent;
	padding: 0;
	margin: 0 0 22px;
}

/* The sidebar (on other steps) already offers Save Quote — skip it here */
body.jrfgf-onepage .jrfgf_order_summary.jrfgf-mobile-inline .jrfgf_save_quote_button_wrapper {
	display: none;
}