/* ==========================================================================
   Value Cremations – Gravity Forms page steps restyle
   Form: Apply for a Cremation (form ID 3, works for any multi-page form)

   Mobile  (< 768px): single-step card — big numbered circle, label below,
					  back/next arrows (arrows injected by vc-form-steps.js)
   Desktop (>= 768px): one-row horizontally scrollable pills
   ========================================================================== */

.gform_wrapper .gf_page_steps {
	--vc-dark: #1b1b1b;
	--vc-green: #3ba55d;
	--vc-beige: #efe9dd;
	--vc-border: #e3ddd2;
	--vc-muted: #6f6f6f;
	--vc-radius: 999px;

	border: none;
	margin-top: 24px;
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Shared pill/number styling
   -------------------------------------------------------------------------- */

.gform_wrapper .gf_page_steps .gf_step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	background: #fff;
	opacity: 1;
	white-space: nowrap;
	height: auto;
	width: auto;
}

.gform_wrapper .gf_page_steps .gf_step .gf_step_number {
	font-size: 1rem;
	font-weight: 600;
	color: var(--vc-muted);
	border: none;
	background: transparent;
	width: auto;
	height: auto;
	line-height: 1;
}

.gform_wrapper .gf_page_steps .gf_step .gf_step_label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--vc-dark);
	line-height: 1.2;
}

/* Active pill */
.gform_wrapper .gf_page_steps .gf_step.gf_step_active {
	border-color: var(--vc-green);
	border-width: 2px;
}

.gform_wrapper .gf_page_steps .gf_step.gf_step_active .gf_step_number,
.gform_wrapper .gf_page_steps .gf_step.gf_step_active .gf_step_label {
	color: var(--vc-green);
}

/* Completed pill – swap the number for a green tick */
.gform_wrapper .gf_page_steps .gf_step.gf_step_completed .gf_step_number {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--vc-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	color: transparent;
	overflow: hidden;
	text-indent: -999px;
}

/* Gravity Forms' own theme draws a circle + tick over completed step
   numbers via pseudo-elements (.gform_wrapper.gravity-theme
   .gf_step_completed .gf_step_number::before/::after) — remove both. */
.gform_wrapper .gf_page_steps .gf_step .gf_step_number::before,
.gform_wrapper .gf_page_steps .gf_step .gf_step_number::after,
.gform_wrapper .gf_page_steps .gf_step.gf_step_completed .gf_step_number::before,
.gform_wrapper .gf_page_steps .gf_step.gf_step_completed .gf_step_number::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Desktop / tablet: one-row scrollable pills
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.gform_wrapper .gf_page_steps {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		padding: 4px 2px 12px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;              /* Firefox */
		-webkit-overflow-scrolling: touch;
	}

	.gform_wrapper .gf_page_steps::-webkit-scrollbar {
		display: none;                      /* Chrome / Safari / Edge */
	}

	.gform_wrapper .gf_page_steps .gf_step {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	/* Fade the clipped edge(s) so it's obvious more steps sit off-screen
	   (the scrollbar is hidden). data-vc-overflow is kept up to date by
	   vc-form-steps.js on scroll and resize. */
	.gform_wrapper .gf_page_steps[data-vc-overflow="right"] {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
	}

	.gform_wrapper .gf_page_steps[data-vc-overflow="left"] {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
	}

	.gform_wrapper .gf_page_steps[data-vc-overflow="both"] {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
	}

	/* Arrows and the "of 8" badge are mobile-only affordances */
	.gform_wrapper .vc-step-arrow,
	.gform_wrapper .vc-step-total {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Mobile: single-step card
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

	.gform_wrapper .gf_page_steps {
		/* Line-based placement (no grid-template-areas): survives CSS
		   minifiers (e.g. Beaver Builder) that collapse whitespace
		   inside quoted strings and corrupt area names. */
		display: grid;
		grid-template-columns: 44px 1fr 52px 1fr 44px;
		align-items: center;
		justify-items: center;
		row-gap: 14px;
		border: 1px solid var(--vc-border);
		border-radius: 12px;
		background: #fff;
		padding: 28px 20px;
	}

	/* "of 8" page-count badge (injected by vc-form-steps.js) */
	.gform_wrapper .gf_page_steps .vc-step-total {
		grid-column: 4;
		grid-row: 1;
		justify-self: start;
		margin-left: 12px;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--vc-muted);
		white-space: nowrap;
	}

	/* Hide every step except the active one */
	.gform_wrapper .gf_page_steps .gf_step {
		display: none;
	}

	/* The active step: number becomes a big circle, label sits below */
	.gform_wrapper .gf_page_steps .gf_step.gf_step_active {
		display: contents;   /* lets number + label place into the grid areas */
	}

	.gform_wrapper .gf_page_steps .gf_step.gf_step_active .gf_step_number {
		grid-column: 3;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: var(--vc-dark);
		color: #fff;
		font-size: 1.25rem;
		font-weight: 600;
	}

	.gform_wrapper .gf_page_steps .gf_step.gf_step_active .gf_step_label {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 100%;
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--vc-dark);
		text-align: center;
		white-space: normal;
	}

	/* Injected arrow buttons (vc-form-steps.js) */
	.gform_wrapper .vc-step-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: none;
		border-radius: 50%;
		background: var(--vc-beige);
		color: var(--vc-dark);
		cursor: pointer;
		padding: 0;
		transition: background-color 0.15s ease;
	}

	.gform_wrapper .vc-step-arrow:hover,
	.gform_wrapper .vc-step-arrow:focus-visible {
		background: #e4dccb;
	}

	.gform_wrapper .vc-step-arrow svg {
		width: 20px;
		height: 20px;
		display: block;
	}

	.gform_wrapper .vc-step-arrow--prev {
		grid-column: 1;
		grid-row: 1;
	}

	.gform_wrapper .vc-step-arrow--next {
		grid-column: 5;
		grid-row: 1;
	}

	/* No previous button on page 1, no next button on the last page */
	.gform_wrapper .vc-step-arrow[hidden] {
		display: none;
	}
}
/* ==========================================================================
   Page 1: intro panel + preparation checklist
   The checklist (.vc-prep-checklist — a multi-choice checkbox field set via
   the field's CSS class) visually continues the beige .vc-form-intro panel
   directly above it, with white tappable rows that tint green when ticked.
   The html/#gform_wrapper_3 prefixes are needed to outweigh the intro rules
   in the child theme's style.css.
   ========================================================================== */

/* Breathing room between the location/price fields and the intro panel */
html #gform_wrapper_3 .vc-form-intro {
	margin-top: clamp(16px, 0.5rem + 1vw, 28px);
}

/* Merge the two fields into one continuous panel: square off the seam and
   let the checklist carry the panel's bottom spacing instead of the intro */
html #gform_wrapper_3 .gfield:has(.vc-form-intro):has(+ .gfield.vc-prep-checklist) .vc-form-intro {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

html #gform_wrapper_3 .gfield.vc-prep-checklist {
	margin-top: -16px; /* close the .gform_fields grid row-gap */
	padding: 4px clamp(20px, 1rem + 1.5vw, 40px) clamp(20px, 1rem + 1.5vw, 40px);
	background: var(--neutral-off-white);
	border-radius: 0 0 12px 12px;
	margin-bottom: clamp(8px, 0.25rem + 1vw, 20px);
}

html #gform_wrapper_3 .vc-prep-checklist legend.gfield_label {
	/* Float pulls the legend out of the fieldset "notch" so the beige
	   background paints behind it (legends otherwise sit outside it). */
	float: left;
	width: 100%;
	margin-bottom: 10px;
	padding: 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	font-weight: 700;
}

html #gform_wrapper_3 .vc-prep-checklist .ginput_container_checkbox {
	clear: both;
}

html #gform_wrapper_3 .vc-prep-checklist .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Each item: white tappable row on the beige panel */
html #gform_wrapper_3 .vc-prep-checklist .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 8px;
}

html #gform_wrapper_3 .vc-prep-checklist .gchoice .gfield-choice-input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--brand-green);
	cursor: pointer;
}

html #gform_wrapper_3 .vc-prep-checklist .gchoice label {
	margin: 0;
	cursor: pointer;
	line-height: 1.45;
}

/* Ticked: green tint, matching the declaration "Yes" rows */
html #gform_wrapper_3 .vc-prep-checklist .gchoice:has(:checked) {
	background: color-mix(in srgb, var(--brand-green) 14%, #fff);
}

/* ==========================================================================
   Estimated price fields (25 on page 1, 98 on page 6)
   These are read-only lookup results (GP Populate Anything fills them from
   the location choice), so they should not look like inputs the user has
   to deal with: no box, no required asterisk, just the price as bold text.
   ========================================================================== */

html #gform_wrapper_3 :is(#field_3_25, #field_3_98) .gfield_required {
	display: none;
}

html #gform_wrapper_3 :is(#field_3_25, #field_3_98) input {
	height: auto;
	padding: 6px 0;
	border: none;
	background: transparent;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 700;
	color: inherit;
	pointer-events: none;
}

/* ==========================================================================
   Select colour
   iOS Safari tints <select> text with the system blue accent whenever no
   colour is declared, so declare one for every select in the form. The
   location select shows brand green while the placeholder is still
   selected — a "start here" cue that flips to normal text on choosing.
   (:has() unsupported -> rule skipped, text just stays dark.)
   ========================================================================== */

html #gform_wrapper_3 select {
	color: var(--neutral-black, #202020);
}

html #gform_wrapper_3 select#input_3_3:has(option[value=""]:checked) {
	color: var(--brand-green);
	/* Same green outline treatment as the active step pill (border +
	   1px shadow reads as 2px without shifting the layout). */
	border-color: var(--brand-green);
	box-shadow: 0 0 0 1px var(--brand-green);
}