/* ============================================================================
   Get a Price — wizard skin for Gravity Forms (form id 1).
   Pixel-perfect port of the Adobe XD design. Pure presentation, scoped to
   #gform_wrapper_1 / .bsc-gp-wrap. Companion behaviour (step bar, info box,
   section headings, footer, subtitle) is in assets/js/get-a-price.js; the PHP
   glue is in backsaver-core/includes/get-a-price.php.

   Colours come from the theme's own CSS variables (us-theme-options), fonts are
   the theme-installed Blanc-* families + Open Sans. Sizes/spacings are the XD
   values (1920 canvas, 1415px card).
   ========================================================================== */

.bsc-gp-wrap {
	/* aliases → theme tokens (single source of truth) */
	--gp-navy:   var(--color-custom-1);   /* #003877 text/titles/primary/active */
	--gp-accent: var(--color-custom-3);   /* #00A1ED accent/subtitle/code/info  */
	--gp-field:  var(--color-custom-16);  /* #F4F4F4 input & card background     */
	--gp-info:   var(--color-custom-7);   /* #E6F6FE info-box background         */
	--gp-gray:   var(--color-custom-17);  /* #9A9A9A footer / back text / icons  */
	--gp-border: var(--color-custom-15);  /* #707070 outline-button border       */
	--gp-white:  var(--color-custom);     /* #FFFFFF                             */

	--gp-font-display: 'Blanc-Bold', sans-serif;
	--gp-font-medium:  'Blanc-Medium', sans-serif;
	--gp-font-text:    'Open Sans', sans-serif;

	/* subtle top blue wash fading to transparent (XD: #00A1ED→#FFFFFF @ ~11%) */
	padding: 60px clamp(16px, 6.5%, 130px);
}

/* --- Card ---------------------------------------------------------------- */
.bsc-gp-wrap #gform_wrapper_1 {
	position: relative;
	max-width: 1415px;
	margin: 0 auto;
	background: var(--gp-white);
	border-radius: 30px;
	padding: 50px 64px 46px;
}

/* --- Heading (no divider in the XD) -------------------------------------- */
#gform_wrapper_1 .gform_heading {
	margin: 0 0 46px;
	padding: 0 360px 0 0;          /* clear the absolute step indicator */
	border: 0;
}
#gform_wrapper_1 .gform_title {
	margin: 0 0 8px;
	font-family: var(--gp-font-display);
	font-weight: 400;              /* weight baked into the Blanc-Bold family */
	font-size: 38px;
	line-height: 1.0;
	text-transform: uppercase;
	color: var(--gp-navy);
}
#gform_wrapper_1 .gform_description,
#gform_wrapper_1 .bsc-gp-subtitle {
	display: block;
	margin: 0;
	font-family: var(--gp-font-text);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.37;
	color: var(--gp-accent);
}

/* --- Step indicator (built by JS; GF's own bar is hidden) ---------------- */
#gform_wrapper_1 .gf_progressbar_wrapper { display: none !important; }
#gform_wrapper_1 .bsc-gp-steps {
	position: absolute;
	top: 64px;
	right: 64px;
	width: 330px;
	text-align: right;
}
#gform_wrapper_1 .bsc-gp-steps__label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--gp-font-text);
	font-weight: 700;
	font-size: 19px;
	color: var(--gp-navy);
}
#gform_wrapper_1 .bsc-gp-steps__bar { display: flex; gap: 12px; }
#gform_wrapper_1 .bsc-gp-steps__bar span {
	flex: 1 1 0;
	height: 10px;
	border-radius: 15px;
	background: var(--gp-field);
}
#gform_wrapper_1 .bsc-gp-steps__bar span.is-on { background: var(--gp-navy); }

/* --- Section heading inside a step (built by JS on steps 2-3) ------------ */
#gform_wrapper_1 .bsc-gp-section {
	margin: 0 0 28px;
	font-family: var(--gp-font-text);
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
	color: var(--gp-navy);
}

/* --- Two-column field grid ----------------------------------------------- */
#gform_wrapper_1 .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 34px;
	row-gap: 24px;
}
#gform_wrapper_1 .gfield { grid-column: span 1; }
#gform_wrapper_1 .gfield--type-textarea,
#gform_wrapper_1 .gfield--type-name,
#gform_wrapper_1 .gfield--type-consent,
#gform_wrapper_1 .gfield--type-radio,
#gform_wrapper_1 .gfield--type-html,
#gform_wrapper_1 .gfield--type-section { grid-column: 1 / -1; }

#gform_wrapper_1 .gfield_label {
	margin-bottom: 16px;
	font-family: var(--gp-font-text);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.1;
	color: var(--gp-navy);
}
#gform_wrapper_1 .gfield_required { color: var(--gp-accent); margin-left: 4px; }

/* --- Inputs / selects / textarea ----------------------------------------- */
#gform_wrapper_1 .ginput_container input[type="text"],
#gform_wrapper_1 .ginput_container input[type="email"],
#gform_wrapper_1 .ginput_container input[type="tel"],
#gform_wrapper_1 .ginput_container input[type="number"],
#gform_wrapper_1 .ginput_container input[type="url"],
#gform_wrapper_1 .ginput_container select,
#gform_wrapper_1 .ginput_container textarea {
	box-sizing: border-box;
	width: 100%;
	height: 78px;
	background: var(--gp-field) !important;
	border: 1px solid transparent !important;
	border-radius: 7px;
	padding: 0 24px;
	font-family: var(--gp-font-text);
	font-weight: 400;
	font-size: 20px;
	color: var(--gp-navy);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, background .15s;
	display: flex;
	align-items: center;
}
#gform_wrapper_1 .ginput_container input::placeholder,
#gform_wrapper_1 .ginput_container textarea::placeholder { color: var(--gp-navy); opacity: 1; }
#gform_wrapper_1 .ginput_container input:focus,
#gform_wrapper_1 .ginput_container select:focus,
#gform_wrapper_1 .ginput_container textarea:focus {
	outline: none;
	border-color: var(--gp-accent) !important;
}
#gform_wrapper_1 .ginput_container textarea {
	height: 112px;
	min-height: 112px;
	padding: 22px 24px;
	border-radius: 8px;
	line-height: 1.3;
	resize: vertical;
}

/* custom select arrow (navy chevron) */
#gform_wrapper_1 .ginput_container select {
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003877' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px;
}

/* Name field (First / Last) keeps GF's two-up layout, just spacing */
#gform_wrapper_1 .ginput_complex.ginput_container { column-gap: 34px; }
#gform_wrapper_1 .ginput_complex label {
	font-family: var(--gp-font-text);
	font-size: 14px;
	color: var(--gp-navy);
}

/* --- Step 1: machine choice cards ---------------------------------------- */
#gform_wrapper_1 .gfield--type-radio .gfield_label {
	margin-bottom: 28px;
	font-family: var(--gp-font-text);
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
}
#gform_wrapper_1 .gfield_radio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 34px;
	row-gap: 19px;
}
#gform_wrapper_1 .gfield_radio .gchoice {
	position: relative;
	display: flex;                 /* let the label fill the whole card */
	background: var(--gp-field);
	border: 2px solid transparent;
	border-radius: 7px;
	transition: background .15s, border-color .15s;
}
#gform_wrapper_1 .gfield_radio .gchoice:hover { background: #eef0f0; }
#gform_wrapper_1 .gfield_radio .gchoice:has(input:checked) {
	border-color: var(--gp-accent);
}
/* label spans the entire .gchoice (full width + height) so the whole card is clickable */
#gform_wrapper_1 .gfield_radio .gchoice label {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 26px 28px;
	cursor: pointer;
}
/* radio control isn't drawn in the XD — hide it, keep it accessible/clickable */
#gform_wrapper_1 .gfield_radio .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
}
#gform_wrapper_1 .bsc-gp-card__title {
	display: block;
	font-family: var(--gp-font-display);
	font-weight: 400;
	font-size: 27px;
	line-height: 1.0;
	color: var(--gp-navy);
}
#gform_wrapper_1 .bsc-gp-card__title em { font-style: normal; color: var(--gp-accent); margin-left: .35em; }
#gform_wrapper_1 .bsc-gp-card__desc {
	display: block;
	margin-top: 8px;
	font-family: var(--gp-font-text);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.0;
	color: var(--gp-navy);
}

/* --- Step 1: blue info box (built by JS) --------------------------------- */
#gform_wrapper_1 .bsc-gp-infobox {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	padding: 17px 28px;
	background: var(--gp-info);
	border-radius: 8px;
}
#gform_wrapper_1 .bsc-gp-infobox svg { flex: none; width: 26px; height: 26px; color: var(--gp-accent); }
#gform_wrapper_1 .bsc-gp-infobox p {
	margin: 0;
	font-family: var(--gp-font-medium);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.0;
	color: var(--gp-accent);
}

/* --- Footer row (buttons + reassurance line) ----------------------------- */
#gform_wrapper_1 .gform_page_footer,
#gform_wrapper_1 .gform_footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 40px;
	padding: 0;
	border: 0;
}
#gform_wrapper_1 .bsc-gp-footer {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-right: auto;
	font-family: var(--gp-font-text);
	font-weight: 400;
	font-size: 19px;
	color: var(--gp-gray);
}
#gform_wrapper_1 .bsc-gp-footer span { display: inline-flex; align-items: center; gap: 8px; }
#gform_wrapper_1 .bsc-gp-footer svg { width: 18px; height: 18px; opacity: 1; }

/* --- Buttons ------------------------------------------------------------- */
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button[type="submit"],
#gform_wrapper_1 .gform_previous_button {
	box-sizing: border-box;
	height: 54px;
	border-radius: 7px;
	font-family: var(--gp-font-display);
	font-weight: 400;
	font-size: 23px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button[type="submit"] {
	border: 0;
	color: var(--gp-white);
	background-color: var(--gp-navy);
	padding: 0 64px 0 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 28px center;
}
#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button[type="submit"]:hover { background-color: var(--color-custom-8); }
#gform_wrapper_1 .gform_previous_button {
	color: var(--gp-gray) !important;
	background: transparent !important;
	border: 1px solid var(--gp-border) !important;
	padding: 0 40px;
}
#gform_wrapper_1 .gform_previous_button:hover { background: rgba(0, 0, 0, 0.02) !important; }

/* --- Validation ---------------------------------------------------------- */
#gform_wrapper_1 .gfield_error .ginput_container input,
#gform_wrapper_1 .gfield_error .ginput_container select,
#gform_wrapper_1 .gfield_error .ginput_container textarea { border-color: var(--color-custom-12) !important; }
#gform_wrapper_1 .validation_message {
	font-family: var(--gp-font-text);
	font-size: 15px;
	color: var(--color-custom-12);
	margin-top: 6px;
}

/* --- Thank-You screen (GF confirmation; paste the HTML from the docs) ----- */
.bsc-gp-thanks {
	max-width: 1415px;
	margin: 0 auto;
	background: var(--color-custom);
	border-radius: 30px;
	padding: 50px 64px 46px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
	font-family: 'Open Sans', sans-serif;
}
.bsc-gp-thanks__head {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);   /* thin divider, matches XD */
}
.bsc-gp-thanks__head h2 {
	margin: 0 0 8px;
	font-family: 'Blanc-Bold', sans-serif;
	font-size: 38px;
	line-height: 1;
	letter-spacing: 0;            /* kill Impreza's heading letter-spacing */
	word-spacing: normal;         /* and the extra gap between THANK / YOU  */
	text-transform: uppercase;
	color: var(--color-custom-1);
}
.bsc-gp-thanks__head p { margin: 0; font-size: 19px; color: var(--color-custom-3); }
.bsc-gp-thanks__video {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1286 / 549;
	background: var(--color-custom-1);
}
.bsc-gp-thanks__video img,
.bsc-gp-thanks__video iframe,
.bsc-gp-thanks__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.bsc-gp-thanks__video::after {                 /* XD blue tint overlay @30% */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-custom-3);
	opacity: 0.30;
	pointer-events: none;
}
.bsc-gp-thanks__video.is-playing::after { display: none; }   /* drop tint while the video plays */
/* Higher specificity + !important to defeat Impreza's default <button> skin
   (blue fill / radius / padding) so the play control is just the outline triangle. */
.bsc-gp-thanks .bsc-gp-thanks__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 90px; height: 90px;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	/* Play triangle — the uploaded white SVG (assets/icons/play-btn.svg) */
	background-image: url("../icons/play-btn.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: transform .15s, opacity .15s;
}
.bsc-gp-thanks .bsc-gp-thanks__play:hover { transform: translate(-50%, -50%) scale(1.05); opacity: .9; }
.bsc-gp-thanks__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 40px;
}
.bsc-gp-thanks__foot .bsc-gp-footer {
	margin-right: auto;
	display: flex; align-items: center; gap: 30px;
	font-size: 19px; color: var(--color-custom-17);
}
.bsc-gp-thanks__foot .bsc-gp-footer span { display: inline-flex; align-items: center; gap: 8px; }
.bsc-gp-thanks__foot .bsc-gp-footer svg { width: 18px; height: 18px; }
.bsc-gp-home {
	display: inline-flex;
	align-items: center;
	height: 54px;
	border-radius: 7px;
	padding: 0 40px;
	font-family: 'Blanc-Bold', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	color: var(--color-custom-17);
	background: transparent;
	border: 1px solid var(--color-custom-15);
	text-decoration: none;
	transition: background .15s;
}
.bsc-gp-home:hover { background: rgba(0, 0, 0, 0.02); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
	#gform_wrapper_1 .gform_title { font-size: 32px; }
	#gform_wrapper_1 .gform_heading { padding-right: 280px; }
	#gform_wrapper_1 .bsc-gp-steps { width: 270px; }
	#gform_wrapper_1 .bsc-gp-section,
	#gform_wrapper_1 .gfield--type-radio .gfield_label { font-size: 21px; }
	#gform_wrapper_1 .gfield_label { font-size: 20px; }
	#gform_wrapper_1 .bsc-gp-card__title { font-size: 24px; }
	#gform_wrapper_1 .bsc-gp-infobox p { font-size: 21px; }
}
@media (max-width: 860px) {
	.bsc-gp-wrap { padding: 32px 16px; }
	.bsc-gp-wrap #gform_wrapper_1 { padding: 32px 24px; border-radius: 22px; }
	#gform_wrapper_1 .gform_heading { padding-right: 0; }
	#gform_wrapper_1 .bsc-gp-steps {
		position: static;
		width: auto;
		text-align: left;
		margin-bottom: 24px;
	}
	#gform_wrapper_1 .gform_fields { grid-template-columns: 1fr; column-gap: 0; }
	#gform_wrapper_1 .gfield_radio { grid-template-columns: 1fr; }
	/* Same selector shape as the base rule above (incl. the [type="..."]
	   qualifiers) — a bare `input` here loses to `input[type="text"]` etc. on
	   specificity (an attribute selector counts as a class), so this override
	   was silently never applying: text/email/tel/number/url fields stayed at
	   the desktop 78px on every phone, confirmed via computed style at 375px. */
	#gform_wrapper_1 .ginput_container input[type="text"],
	#gform_wrapper_1 .ginput_container input[type="email"],
	#gform_wrapper_1 .ginput_container input[type="tel"],
	#gform_wrapper_1 .ginput_container input[type="number"],
	#gform_wrapper_1 .ginput_container input[type="url"],
	#gform_wrapper_1 .ginput_container select { height: 64px; }
	#gform_wrapper_1 .gform_page_footer,
	#gform_wrapper_1 .gform_footer { flex-wrap: wrap; }
	#gform_wrapper_1 .bsc-gp-footer { order: 2; width: 100%; margin: 16px 0 0; flex-wrap: wrap; gap: 16px; }

	#gform_wrapper_1 .gfield_radio .gchoice label{
		padding: 15px;
	}
	#gform_wrapper_1 .bsc-gp-card__title {
		font-size: 17px;
	}
	#gform_wrapper_1 .bsc-gp-card__desc{
		font-size: 14px;
	}
	/* Everything below was still sized for the 860/1200px tiers above (or
	   never reduced at all — the base 20-23px desktop values) and reads
	   oversized once the card narrows to a single phone column. Moved here
	   (860px, was 767px) per request so it kicks in together with the layout
	   changes above instead of a step later. */
	#gform_wrapper_1 .gform_title { font-size: 22px; }
	#gform_wrapper_1 .gform_description,
	#gform_wrapper_1 .bsc-gp-subtitle { font-size: 15px; }
	#gform_wrapper_1 .bsc-gp-steps__label { font-size: 14px; }
	#gform_wrapper_1 .bsc-gp-section,
	#gform_wrapper_1 .gfield--type-radio .gfield_label { font-size: 16px; }
	#gform_wrapper_1 .gfield_label { font-size: 15px; }
	#gform_wrapper_1 .bsc-gp-infobox p { font-size: 15px; }
	#gform_wrapper_1 .ginput_container input[type="text"],
	#gform_wrapper_1 .ginput_container input[type="email"],
	#gform_wrapper_1 .ginput_container input[type="tel"],
	#gform_wrapper_1 .ginput_container input[type="number"],
	#gform_wrapper_1 .ginput_container input[type="url"],
	#gform_wrapper_1 .ginput_container select,
	#gform_wrapper_1 .ginput_container textarea { font-size: 15px; }
	#gform_wrapper_1 .ginput_complex label { font-size: 13px; }
	#gform_wrapper_1 .bsc-gp-footer { font-size: 13px; }
	#gform_wrapper_1 .gform_next_button,
	#gform_wrapper_1 .gform_button[type="submit"],
	#gform_wrapper_1 .gform_previous_button { font-size: 17px; }
}