/*
 * Value Cremations, the arrangement form (Gravity Forms form 3) on the Orbital theme.
 * Loaded by inc/gravity.php only where form 3 renders. Colours, spacing, type and radii are the
 * theme's presets; Orbital's own variables are set where it has one, and a rule is written only
 * where it has none. Numbered to match the old theme's parts for the port record.
 */

/* 0. Orbital variables, from the presets. The selector outranks the per-form inline block. */
#gform_wrapper_3[data-form-index].gform-theme.gform-theme--orbital {
	--vc-green: var(--wp--preset--color--accent);
	--vc-green-dark: var(--wp--preset--color--accent-strong);
	--vc-panel: var(--wp--preset--color--surface-subtle);
	--vc-tint: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
	--vc-ring: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	--vc-panel-pad: clamp(var(--wp--preset--spacing--20), 1rem + 1.5vw, var(--wp--preset--spacing--40));

	/* Next, Start and Submit in the site's orange; Previous on the off-white. */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-strong);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--text-body);
	--gf-ctrl-btn-bg-color-secondary: var(--vc-panel);
	--gf-ctrl-btn-border-color-secondary: var(--vc-panel);
	--gf-ctrl-btn-color-secondary: var(--wp--preset--color--text-body);

	/* This form sits on the white page, not the contact band's off-white, so its controls need
	 * an edge: the light panel colour on fields, the border token on the small choice boxes. A
	 * ticked box fills green with a white tick. */
	--gf-ctrl-border-color: var(--vc-panel);
	--gf-ctrl-choice-check-color: var(--wp--preset--color--text-inverse);

	/* Step numbers: plain text; a completed step is a green disc with Orbital's own tick. */
	--gf-field-pg-steps-number-size: 1.375rem;
	--gf-field-pg-steps-number-border-width: 0;
	--gf-field-pg-steps-number-bg-color: transparent;
	--gf-field-pg-steps-number-color: var(--wp--preset--color--text-muted);
	--gf-field-pg-steps-number-color-active: var(--vc-green-dark);
	--gf-field-pg-steps-number-bg-color-active: transparent;
	--gf-field-pg-steps-number-bg-color-complete: var(--vc-green);
	--gf-field-pg-steps-number-border-color-complete: var(--vc-green);
	--gf-field-pg-steps-number-color-complete: var(--wp--preset--color--text-inverse);
	--gf-field-pg-steps-step-gap: var(--wp--preset--spacing--10);
	--gf-field-pg-prog-font-size: var(--wp--preset--font-size--small);
	--gf-field-pg-prog-font-weight: 600;
	--gf-field-pg-prog-color: var(--wp--preset--color--text-body);
	--gf-field-pg-prog-text-transform: none;
}

/* 0a. Tick boxes (the consent field's box carries no choice class): a visible edge unticked,
 *     filled green ticked. Orbital fades the fill over 0.15s. */
#gform_wrapper_3 input[type="checkbox"] {
	border-color: var(--wp--preset--color--border-default);
}
#gform_wrapper_3 input[type="checkbox"]:checked {
	background-color: var(--vc-green);
	border-color: var(--vc-green);
}

/* 1. Page steps, shared: each step a pill. */
#gform_wrapper_3 .gf_page_steps {
	margin-block: var(--wp--preset--spacing--20);
}
#gform_wrapper_3 .gf_step {
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--surface);
	white-space: nowrap;
}
#gform_wrapper_3 .gf_step_active {
	border-color: var(--vc-green);
	box-shadow: inset 0 0 0 1px var(--vc-green); /* reads as 2px without moving the row */
}
#gform_wrapper_3 .gf_step_active .gf_step_label {
	color: var(--vc-green-dark); /* the accent green is 2.3:1 on white; accent-strong passes AA for text */
}

/* 1a. Wide: one row that scrolls sideways, the scrollbar hidden and the clipped edge faded.
 *     data-vc-overflow is kept current by arrange-form.js. */
@media (min-width: 768px) {
	#gform_wrapper_3 .gf_page_steps {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 4px 2px var(--wp--preset--spacing--10);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	#gform_wrapper_3 .gf_page_steps::-webkit-scrollbar {
		display: none;
	}
	#gform_wrapper_3 .gf_step {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}
	#gform_wrapper_3 .gf_page_steps[data-vc-overflow="right"] {
		mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
	}
	#gform_wrapper_3 .gf_page_steps[data-vc-overflow="left"] {
		mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
	}
	#gform_wrapper_3 .gf_page_steps[data-vc-overflow="both"] {
		mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
	}
	#gform_wrapper_3 .vc-step-arrow,
	#gform_wrapper_3 .vc-step-total {
		display: none;
	}
}

/* 1b. Phones: one card showing the current step, its number in a dark disc, the count beside
 *     it, the label under, and arrows (injected by arrange-form.js) that press the form's own
 *     Previous and Next. Line-based grid placement, no area names. */
@media (max-width: 767.98px) {
	#gform_wrapper_3 .gf_page_steps {
		display: grid;
		grid-template-columns: 2.75rem 1fr 3.25rem 1fr 2.75rem;
		align-items: center;
		justify-items: center;
		row-gap: var(--wp--preset--spacing--10);
		border: 1px solid var(--vc-panel);
		border-radius: var(--wp--preset--border-radius--card);
		background: var(--wp--preset--color--surface);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
	#gform_wrapper_3 .gf_step {
		display: none;
	}
	#gform_wrapper_3 .gf_step_active {
		display: contents;
	}
	#gform_wrapper_3 .gf_step_active .gf_step_number {
		grid-column: 3;
		grid-row: 1;
		--gf-field-pg-steps-number-size: 3.25rem;
		--gf-field-pg-steps-number-bg-color-active: var(--wp--preset--color--surface-inverse);
		--gf-field-pg-steps-number-color-active: var(--wp--preset--color--text-inverse);
		font-size: var(--wp--preset--font-size--large-body);
	}
	#gform_wrapper_3 .gf_step_active .gf_step_label {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 100%;
		font-size: var(--wp--preset--font-size--body);
		font-weight: 700;
		color: var(--wp--preset--color--text-body);
		text-align: center;
		white-space: normal;
	}
	#gform_wrapper_3 .vc-step-total {
		grid-column: 4;
		grid-row: 1;
		justify-self: start;
		margin-left: var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		color: var(--wp--preset--color--text-muted);
		white-space: nowrap;
	}
	#gform_wrapper_3 .vc-step-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 0;
		border-radius: 50%;
		background: var(--vc-panel);
		color: var(--wp--preset--color--text-body);
		cursor: pointer;
		padding: 0;
	}
	#gform_wrapper_3 .vc-step-arrow:hover,
	#gform_wrapper_3 .vc-step-arrow:focus-visible {
		background: var(--wp--preset--color--primary);
	}
	#gform_wrapper_3 .vc-step-arrow svg {
		width: 1.25rem;
		height: 1.25rem;
		display: block;
	}
	#gform_wrapper_3 .vc-step-arrow--prev { grid-column: 1; grid-row: 1; }
	#gform_wrapper_3 .vc-step-arrow--next { grid-column: 5; grid-row: 1; }
	#gform_wrapper_3 .vc-step-arrow[hidden] { display: none; }
}

/* 2. Page 1: the intro (an HTML field carrying .vc-form-intro) and the preparation checklist
 *    (.vc-prep-checklist on the field) as one off-white panel with white tappable rows. */
#gform_wrapper_3 .vc-form-intro {
	padding: var(--vc-panel-pad);
	margin-top: var(--wp--preset--spacing--20);
	background: var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--card);
}
#gform_wrapper_3 .vc-form-intro > :first-child { margin-top: 0; }
#gform_wrapper_3 .vc-form-intro > :last-child { margin-bottom: 0; }
#gform_wrapper_3 .gfield:has(.vc-form-intro):has(+ .vc-prep-checklist) .vc-form-intro {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
#gform_wrapper_3 .gfield.vc-prep-checklist {
	margin-top: calc(-1 * var(--gf-form-gap-y)); /* close the field grid's row gap */
	padding: 4px var(--vc-panel-pad) var(--vc-panel-pad);
	background: var(--vc-panel);
	border-radius: 0 0 var(--wp--preset--border-radius--card) var(--wp--preset--border-radius--card);
}
#gform_wrapper_3 .vc-prep-checklist .gfield_label {
	/* The field is a fieldset and its label a legend, which sits in the border notch with the
	 * panel unpainted behind its top half; floating it paints the panel to the seam. */
	float: left;
	width: 100%;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}
#gform_wrapper_3 .vc-prep-checklist .gfield_description,
#gform_wrapper_3 .vc-prep-checklist .ginput_container_checkbox {
	clear: both;
}
#gform_wrapper_3 .vc-prep-checklist .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}
#gform_wrapper_3 .vc-prep-checklist .gchoice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--preset--border-radius--small);
}
#gform_wrapper_3 .vc-prep-checklist .gchoice:has(:checked) {
	background: var(--vc-tint);
}

/* 3. The "Yes" declarations (a checkbox field that is not inline) and the consent fields: one
 *    tappable row on the off-white, tinted green once ticked, a rule under each question. */
#gform_wrapper_3 .gfield--type-checkbox:not(.gf_list_inline, .vc-prep-checklist),
#gform_wrapper_3 .gfield--input-type-consent {
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--vc-panel);
}
#gform_wrapper_3 .gfield--type-checkbox:not(.gf_list_inline, .vc-prep-checklist) .gchoice {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	width: fit-content;
	margin-top: var(--wp--preset--spacing--10);
	padding: 8px 18px 8px 10px;
	background: var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--small);
}
#gform_wrapper_3 .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10) 18px;
	background: var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--small);
}
#gform_wrapper_3 .ginput_container_consent .gfield_consent_label {
	margin: 0;
}
#gform_wrapper_3 .gfield--type-checkbox:not(.gf_list_inline, .vc-prep-checklist) .gchoice:has(:checked),
#gform_wrapper_3 .ginput_container_consent:has(:checked) {
	background: var(--vc-tint);
}

/* 4. The application questions: inline Yes / No / N/A radios as a row of pills. The input sits
 *    invisibly over its pill so focusing it never scrolls the page. */
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline {
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--vc-panel);
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice {
	position: relative;
	margin: 0;
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.75rem;
	margin: 0;
	padding: 9px 22px;
	border: 1px solid var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--pill);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice label:hover {
	border-color: var(--vc-green);
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice input:checked + label {
	border-color: var(--vc-green);
	background: var(--vc-tint);
	color: var(--vc-green-dark);
	font-weight: 600;
}
#gform_wrapper_3 .gfield--input-type-radio.gf_list_inline .gchoice input:focus-visible + label {
	box-shadow: 0 0 0 3px var(--vc-ring);
}

/* 5. Page footer: Previous at the left edge, Next or Submit at the right. */
#gform_wrapper_3 .gform_page_footer,
#gform_wrapper_3 .gform_footer {
	justify-content: space-between;
}
#gform_wrapper_3 .gform_next_button,
#gform_wrapper_3 .gform_footer .gform_button {
	margin-inline-start: auto;
}

/* 6. Estimated price (fields 25 and 98): a read-only lookup result shown as bold text, not a box. */
#gform_wrapper_3 :is(#field_3_25, #field_3_98) .gfield_required {
	display: none;
}
#gform_wrapper_3 :is(#field_3_25, #field_3_98) input {
	height: auto;
	padding: 6px 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 700;
	color: inherit;
	pointer-events: none;
}

/* 7. Selects: a declared colour so iOS Safari does not tint them blue; the location select in
 *    green while its placeholder is still chosen, the "start here" cue. */
#gform_wrapper_3 select {
	color: var(--wp--preset--color--text-body);
}
#gform_wrapper_3 select#input_3_3:has(option[value=""]:checked) {
	color: var(--vc-green-dark);
	border-color: var(--vc-green);
	box-shadow: 0 0 0 1px var(--vc-green);
}

/* 8. Section titles in the heading face, a rule under each. */
#gform_wrapper_3 .gsection_title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small-heading);
	font-weight: 300;
	line-height: 1.1;
}

/* 9. Gravity Perks Advanced Save and Continue: the drafts box and its modal's buttons, on the
 *    site's colours. Inert until the perk is active. */
#gform_wrapper_3 .gpasc-drafts {
	border: 1px solid var(--vc-panel);
	border-radius: var(--wp--preset--border-radius--panel);
	padding: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}
#gform_wrapper_3 .gpasc-drafts h4 {
	font-size: var(--wp--preset--font-size--large-body);
}
#gform_wrapper_3 .gpasc-draft-link-content a {
	text-decoration: underline;
}
#gform_wrapper_3 button.gpasc-new-draft-button {
	padding: 5px 12px;
	border: 1px solid;
	border-radius: var(--wp--preset--border-radius--pill);
}
#gform_wrapper_3 .partial_entry_warning {
	display: none;
}
#gpasc-auto-load-notice {
	font-size: var(--wp--preset--font-size--small);
	padding-top: var(--wp--preset--spacing--10);
}
button.tingle-btn--primary,
button.tingle-btn--default {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--pill);
	font-weight: 600;
}
button.tingle-btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-body);
}
button.tingle-btn--default {
	background-color: var(--wp--preset--color--surface-inverse);
	color: var(--wp--preset--color--text-inverse);
}