/* Gravity Forms multi-page progress rendered as dots, bottom-centre in the
 * navigation row — matches brentwood.ca. Paired with assets/bw-gf-dots.js,
 * which moves the step indicator (.gf_page_steps) into the active page footer
 * and tags it .bw-dots. Requires Progress Indicator = "Steps".
 *
 * !important is used throughout to override Gravity Forms' framework/orbital
 * theme, which sizes/borders the step "number" via CSS custom properties. */

/* Footer row: Previous | dots | Next. */
.bw-dots-footer {
	display: flex !important;
	align-items: center;
	gap: 12px;
}

.bw-dots-footer .gform_previous_button {
	order: 1;
}

.bw-dots-footer .bw-dots {
	order: 2;
	flex: 1 1 auto;
}

.bw-dots-footer .gform_next_button,
.bw-dots-footer .gform_button {
	order: 3;
	margin: 0 !important;
}

/* The dots themselves. */
.gf_page_steps.bw-dots {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.gf_page_steps.bw-dots .gf_step {
	display: flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	min-inline-size: 0 !important;
}

.gf_page_steps.bw-dots .gf_step_label {
	display: none !important;
}

/* Turn the number badge into a plain dot. */
.gf_page_steps.bw-dots .gf_step_number {
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	inline-size: 12px !important;
	block-size: 12px !important;
	min-inline-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #9ca3af !important;   /* upcoming */
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
}

.gf_page_steps.bw-dots .gf_step_active .gf_step_number {
	background: #4b5563 !important;   /* current */
}

.gf_page_steps.bw-dots .gf_step_completed .gf_step_number {
	background: #22c55e !important;   /* completed */
}

/* Kill GF's completed-state checkmark pseudo so it stays a solid dot. */
.gf_page_steps.bw-dots .gf_step_completed .gf_step_number::before,
.gf_page_steps.bw-dots .gf_step_completed .gf_step_number::after {
	display: none !important;
	content: none !important;
}

/* Hide the final (Review) step dot, like the live form's 3 dots. */
.gf_page_steps.bw-dots .gf_step_last {
	display: none !important;
}

/* ── Next / Back buttons with chevrons (matches brentwood.ca) ───────────────
 * GF buttons are <input>, which cannot use ::before/::after, so the chevron is
 * a background-image SVG. GF sets button colours via CSS custom properties
 * without !important, so !important here wins. */

/* Next + Submit: solid red, white chevron-right. */
.gform_wrapper .gform_next_button.button,
.gform_wrapper .gform_button.button {
	background-color: #c8272c !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='9%2018%2015%2012%209%206'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 10px 40px 10px 22px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	cursor: pointer;
}

.gform_wrapper .gform_next_button.button:hover,
.gform_wrapper .gform_button.button:hover,
.gform_wrapper .gform_next_button.button:focus,
.gform_wrapper .gform_button.button:focus {
	background-color: #b31f24 !important;
	color: #fff !important;
}

/* Back: plain text link, grey chevron-left, NO hover effect. */
.gform_wrapper .gform_previous_button.button {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234b5563'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='15%2018%209%2012%2015%206'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 6px center !important;
	color: #4b5563 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 10px 12px 10px 26px !important;
	font-weight: 500 !important;
	cursor: pointer;
}

/* Kill the Back hover entirely (forced equal to its resting state). */
.gform_wrapper .gform_previous_button.button:hover,
.gform_wrapper .gform_previous_button.button:focus,
.gform_wrapper .gform_previous_button.button:active {
	background-color: transparent !important;
	color: #4b5563 !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
}