/**
 * Styling for the notice shown when the session list could not be loaded.
 *
 * Deliberately plain, so it inherits the theme's type rather than fighting it.
 */

.picac-vt-notice {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border-left: 4px solid #c0392b;
	background: #fdf3f2;
	color: #6b2019;
	font-size: 0.95em;
	line-height: 1.5;
}

/**
 * Suburb suggestions.
 *
 * The input keeps whatever the theme gives it; only the dropdown is styled.
 */

.picac-vt-combobox {
	position: relative;
}

.picac-vt-suggestions {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 16em;
	overflow-y: auto;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 3px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}

.picac-vt-suggestions[hidden] {
	display: none;
}

.picac-vt-suggestions li {
	margin: 0;
	/* Comfortably tappable: this form is mostly filled in on site, on a phone. */
	padding: 0.7em 0.9em;
	cursor: pointer;
	line-height: 1.3;
	color: #222;
}

.picac-vt-suggestions li.is-active,
.picac-vt-suggestions li:hover {
	background: #eef4fb;
}

.picac-vt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/**
 * Radio buttons that read as a row of buttons.
 *
 * Opt in per field by adding picac-vt-buttons alongside the marker class.
 *
 * Specificity is deliberately high and a few declarations are !important.
 * Gravity Forms ships .gform-theme--framework .gfield--type-choice
 * .gfield_radio, and Elementor layers its own form styling on top; without
 * this the layout and the colours lose to both.
 *
 * The radio input is kept in the page rather than removed: moved out of sight,
 * but still focusable and still in the accessibility tree, so the group
 * remains a real set of radios to a keyboard and to a screen reader. Styling
 * hangs off :checked and :focus-visible on that input.
 */

.picac-vt-buttons {
	--picac-vt-brand: #0db14b;
	/* 15% of the brand on white. Light enough to read dark text on, green
	   enough to still look like the same family as the selected state. */
	--picac-vt-brand-tint: #dbf3e4;
	--picac-vt-brand-tint-hover: #caeed7;
	/* The chosen button. Dark rather than the brand green, so the white on
	   it lands at 14.9:1. --picac-vt-brand stays bright: it rings the chosen
	   button, and it is the focus outline and the online link, both of which
	   sit on the dark section rather than on a fill. */
	--picac-vt-selected: #052e16;
	--picac-vt-on-selected: #ffffff;
	--picac-vt-on-tint: #07562a;
	/* The online option is plain text on the section background rather than a
	   button, so it has no fill of its own to guarantee contrast. This assumes
	   a dark section, which is where the form sits today. Change this one
	   value if the form ever moves onto a light background. */
	--picac-vt-link: #ffffff;
	/* The venue name, which is read before anything else in the button. Not
	   pure black: #000 on a light tint is harsh to read at weight 700. This
	   holds in both states, so it is measured against both fills: 14.9:1 on
	   the unselected tint and 6.1:1 on the selected brand green. */
	--picac-vt-venue-name: #1a1a1a;
	/* Text in a button that was not the one taken. Muted rather than faded:
	   these sit on a photograph, so dropping the whole button's opacity would
	   let the picture through and cost more legibility than it is worth. This
	   is 5.9:1 on the tint, against 14.9:1 for the one that was chosen. */
	--picac-vt-muted: #4f5f56;
}

.gform_wrapper .gfield.picac-vt-buttons .gfield_radio,
.gform_wrapper .gfield.picac-vt-buttons .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: var( --picac-vt-gap, 0.5rem );
	align-items: stretch;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice {
	/* Even across the row whatever the label says: basis 0 means the content
	   does not get a vote in how the space is divided. min-width lets a long
	   address wrap instead of forcing the button wider. */
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin: 0 !important;
	padding: 0;
	/* Gravity Forms lays a choice out as a grid sized to its content, which
	   makes the label's width:100% mean "as wide as the words" rather than
	   "as wide as the button". The track is already even; this is what lets
	   the green box fill it, so the gaps between buttons stay equal. One
	   column, taking everything, and the radio is positioned out of flow so
	   it never claims a track of its own. */
	display: grid;
	grid-template-columns: 1fr;
}

/* Hidden by the filter: not a match for the chosen location. */
.gchoice.picac-vt-choice-hidden {
	display: none !important;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice label {
	display: block;
	width: 100%;
	margin: 0 !important;
	/* Generous, because this gets tapped on a phone on a job site. */
	padding: 1rem 1.5rem;
	/* Border matches the fill while unselected, and turns brand green when
	   chosen. It is always there rather than added on selection, so the
	   button does not change size between the two. */
	border: 2px solid var( --picac-vt-brand-tint );
	border-radius: var( --picac-vt-radius, 4px );
	background: var( --picac-vt-brand-tint ) !important;
	color: var( --picac-vt-on-tint ) !important;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	overflow-wrap: break-word;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice label:hover {
	border-color: var( --picac-vt-brand-tint-hover );
	background: var( --picac-vt-brand-tint-hover ) !important;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"]:checked + label {
	/* The one place the border does not match the fill: a bright ring keeps
	   the chosen button distinct where the photograph behind it is as dark
	   as the fill. */
	border-color: var( --picac-vt-brand );
	background: var( --picac-vt-selected ) !important;
	color: var( --picac-vt-on-selected ) !important;
}

/*
 * Everything inside the chosen button turns white with it.
 *
 * The venue name and its address each carry a colour of their own, and a
 * colour set on a child is not replaced by one inherited from its parent,
 * however important that parent's is. So they are named here. The address
 * drops its usual fade too: at this size, on this fill, it needs the contrast
 * more than it needs the hierarchy, which the smaller type already carries.
 */
.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"]:checked + label .picac-vt-venue__name,
.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"]:checked + label .picac-vt-venue__address,
.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"]:checked + label .picac-vt-venue__line {
	color: var( --picac-vt-on-selected );
	opacity: 1;
}

/*
 * Once a field has an answer, the options not taken step back.
 *
 * The fill stays put and only the text is muted, because the buttons sit on a
 * photographic section: fading the button itself would show the picture
 * through it. The chosen one is already dark with white text, so this widens a
 * gap that is mostly there rather than inventing one.
 */
.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label {
	color: var( --picac-vt-muted ) !important;
}

.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label .picac-vt-venue__name,
.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label .picac-vt-venue__address {
	color: var( --picac-vt-muted );
}

/* Hovering one is a sign of interest in it, so it comes back. */
.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label:hover,
.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label:hover .picac-vt-venue__name,
.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label:hover .picac-vt-venue__address {
	color: var( --picac-vt-on-tint ) !important;
}

.gform_wrapper .gfield.picac-vt-buttons.picac-vt-has-choice .gchoice input[type="radio"]:not(:checked) + label:hover .picac-vt-venue__name {
	color: var( --picac-vt-venue-name ) !important;
}

/*
 * The online option does not step back when a venue is chosen. It is the
 * same kind of thing as the tick box under the dates, which does not fade
 * either, so the two behave alike (asked for 2026-10-07). This rule exists to
 * undo the muting above, which is for text on a tinted button.
 */
.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons.picac-vt-has-choice .gchoice[data-picac-programme] input[type="radio"]:not(:checked) + label {
	color: var( --picac-vt-link ) !important;
	opacity: 1;
}

.gform_wrapper .gfield.picac-vt-buttons .gchoice input[type="radio"]:focus-visible + label {
	outline: 3px solid var( --picac-vt-brand );
	outline-offset: 2px;
}

/*
 * Dates sit on a three column grid and stay on it.
 *
 * A location down to its last date gets one button a third of the row wide,
 * not one stretched across the whole of it. How wide a button is should not
 * be telling you how many are left, and a full-width date next to a row of
 * quarter-width venues reads as a different kind of thing altogether.
 *
 * Less the two gaps between three columns.
 */
.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice {
	flex: 0 0 calc( ( 100% - 2 * var( --picac-vt-gap, 0.5rem ) ) / 3 );
}

/*
 * Dates read as two lines, left aligned: the day over the time it runs.
 *
 * The break is a newline in the label rather than markup, because Gravity
 * Forms escapes choice text and an <option> cannot hold two lines. A dropdown
 * collapses it back to a space, which is what an option wants anyway.
 */
.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice label {
	white-space: pre-line;
	text-align: left;
}

/* Venue name over its address, inside the button. */

.gform_wrapper .gfield.picac-vt-buttons .picac-vt-venue__name {
	display: block;
	/* Collapses with the address's own top margin, so the gap is this and
	   not the two added together. */
	margin-bottom: 0.5rem;
	color: var( --picac-vt-venue-name, #1a1a1a );
	font-weight: 700;
}

.gform_wrapper .gfield.picac-vt-buttons .picac-vt-venue__address {
	display: block;
	margin-top: 0.25em;
	font-weight: 400;
	font-size: 0.82em;
	line-height: 1.35;
	opacity: 0.9;
}

/*
 * Each line of the address breaks where the address says, not where the
 * button runs out of room, so four venues side by side line up.
 */
.gform_wrapper .gfield.picac-vt-buttons .picac-vt-venue__line {
	display: block;
}

/*
 * Online is a programme, not a venue, so it is pulled out of the row of
 * buttons and set as a line of text underneath.
 *
 * Scoped to the location field on purpose: every choice in the session field
 * also carries data-picac-programme, and this must not turn the dates into
 * links.
 */

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] {
	flex: 0 0 100%;
	/* After the venue buttons, on its own line. */
	order: 2;
	margin-top: 0.4rem !important;
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] label {
	display: inline-block;
	width: auto;
	/* Not a button, so it must not be stretched across the row by the grid
	   above: the underline should be as long as the words and no longer. */
	justify-self: start;
	padding: 0.2em 0;
	border-color: transparent;
	background: transparent !important;
	color: var( --picac-vt-link ) !important;
	font-weight: 500;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] label:hover {
	border-color: transparent;
	background: transparent !important;
	text-decoration-thickness: 2px;
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] input[type="radio"]:checked + label {
	border-color: transparent;
	background: transparent !important;
	color: var( --picac-vt-link ) !important;
	font-weight: 700;
	/* Chosen, so it is a state now rather than a link to follow. */
	text-decoration: none;
}

/*
 * A marker in front of the online option, so choosing it shows.
 *
 * A colour change alone was too quiet: the venue buttons fade when it is
 * picked, but nothing on the option itself said it had been. So it carries
 * the shape everyone reads as a choice - an empty ring, which fills with the
 * accent and takes a tick once chosen. The ring is the text's own colour, so
 * it reads wherever the text does; the filled state is white on the accent,
 * which carries on any background.
 */
.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] label::before {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	inline-size: 1.25em;
	block-size: 1.25em;
	border: 2px solid currentColor;
	border-radius: 50%;
	color: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-shadow: none;
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-programme] input[type="radio"]:checked + label::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: var( --picac-vt-brand );
	background: var( --picac-vt-brand );
	color: #ffffff;
	font-size: 0.85em;
	inline-size: 1.47em;
	block-size: 1.47em;
}

/*
 * Stands in for the placeholder a dropdown would have had: "Select a location
 * first", "No dates available for this location".
 *
 * Plain text, not a chip (Silas, 2026-10-19). Inherited colour would be wrong
 * on a dark section, so it takes the field label's colour as measured by
 * picac-vt-sessions.js (--picac-vt-note-auto), unless the form's Notes under a
 * field colour (--picac-vt-note) is set.
 */
.picac-vt-choice-note {
	display: block;
	margin: 0.5em 0 0;
	padding: 0;
	background: none;
	color: var( --picac-vt-note, var( --picac-vt-note-auto, inherit ) );
	font-size: 0.95em;
	line-height: 1.3;
}

/*
 * Before picac-vt-sessions.js has filtered them, the dates and the tick box
 * are hidden, so a first visit does not paint every date on offer. The
 * picac-vt-js class goes on <html> from an inline script in front of the
 * form, and comes off by itself if the script never marks a field ready, so
 * a page without working JavaScript still shows everything.
 */
.picac-vt-js .gform_wrapper .gfield.picac-vt-session:not(.picac-vt-ready) .gchoice,
.picac-vt-js .gform_wrapper .gfield.picac-vt-enquiry:not(.picac-vt-ready) {
	display: none !important;
}

/*
 * Day, month and year on one line, inside whatever column the field is in.
 *
 * Gravity Forms gives each of the three a fixed 168px, which is 528px of
 * inputs plus gaps in a field that is often half the form wide, so the year
 * drops to a line of its own. Sharing the row instead means they fit whatever
 * they are put in, at full width or half.
 */
.gform_wrapper .gfield.picac-vt-dob .ginput_complex > .gform-grid-col {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.gform_wrapper .gfield.picac-vt-dob .ginput_complex > .gform-grid-col input {
	width: 100%;
	min-width: 0;
}

/*
 * Dates go full width from tablet down.
 *
 * 1024px is Elementor's tablet breakpoint, and this site's kit sets desktop to
 * start at 1025, so this is exactly "tablet and below" as the page builder
 * means it.
 *
 * A date is two lines of text - the day over the time it runs - and a third of
 * a tablet is not enough for that without it wrapping somewhere awkward. The
 * three column grid is a desktop idea; narrower than that, one date per row
 * reads as a list, which is what somebody picking a date is doing anyway.
 *
 * This is more specific than the two-up rule below, so it holds on a phone too
 * whichever order the two blocks end up in.
 */
@media ( max-width: 1024px ) {
	.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice {
		flex: 0 0 100%;
	}
}

@media ( max-width: 600px ) {
	.gform_wrapper .gfield.picac-vt-buttons .gchoice {
		/* Two up rather than four squashed to nothing. */
		flex: 1 1 calc( 50% - var( --picac-vt-gap, 0.5rem ) / 2 );
	}
}


/**
 * Validation errors.
 *
 * Gravity Forms states an error twice: once in a summary at the top of the
 * form, and once on the field itself. Both are the theme's danger red on the
 * page background, which on a photographic section reads as thin orange text
 * and not much else.
 *
 * The form's validationPlacement is set to "below", so the field's message is
 * rendered after its input rather than before it. That is a form setting, not
 * a CSS trick: reordering it here would leave the reading order wrong for a
 * screen reader.
 *
 * Scoped to picac-vt-form_wrapper, which the plugin puts on its own forms, so
 * another Gravity Form on the same page keeps its own error styling.
 */

.gform_wrapper.picac-vt-form_wrapper {
	/* Gravity Forms' own --gf-color-danger. Named here so the summary border
	   and the field message cannot drift apart. */
	--picac-vt-error: #c02b0a;
	/* Red enough to read as red rather than pink, light enough that black sits
	   on it at 10.9:1. Going deeper than this starts costing the black text
	   real legibility, and black was the ask. The border keeps Gravity Forms'
	   own 25% danger red, 3.0:1 against this fill - fine for a border, which
	   is not text. */
	--picac-vt-error-tint: #efa9a2;
	--picac-vt-on-error: #ffffff;
	--picac-vt-on-error-tint: #000000;
}

/* The summary. Filled rather than outlined, so it carries on a photograph.
 *
 * Set through Gravity Forms' own variables rather than by out-specifying its
 * rules: --gf-form-validation-color feeds the heading, the icon and the list
 * in one go, and a future GF release that adds another piece picks this up
 * instead of quietly staying red.
 *
 * The border is deliberately not set. It keeps GF's own 25% danger red, which
 * is 3.6:1 against the fill - enough for a border, which is not text.
 */
.gform_wrapper.picac-vt-form_wrapper .gform_validation_errors {
	--gf-form-validation-bg-color: var( --picac-vt-error-tint );

	/* All four, not just the base one. Gravity Forms declares the derived
	   variables - heading, summary, icon - on an ancestor, where the base is
	   still its own red. A custom property resolves where it is declared, so
	   overriding the base here changes nothing they have already taken from
	   it. Measured: setting only the base left the heading red. */
	--gf-form-validation-color: var( --picac-vt-on-error-tint );
	--gf-form-validation-heading-color: var( --picac-vt-on-error-tint );
	--gf-form-validation-summary-color: var( --picac-vt-on-error-tint );
	--gf-form-validation-heading-icon-color: var( --picac-vt-on-error-tint );
}

/* The field's own message, joined to the bottom of the input it belongs to. */
.gform_wrapper.picac-vt-form_wrapper .gfield_error .gfield_validation_message,
.gform_wrapper.picac-vt-form_wrapper .gfield_error .validation_message {
	margin: 0;
	padding: 0.6em 0.9em;
	border: 0;
	/* Square across the top so it meets the input, rounded below so the input
	   and the message read as one control rather than two stacked boxes. */
	border-radius: 0 0 var( --gf-ctrl-radius, 3px ) var( --gf-ctrl-radius, 3px );
	background: var( --picac-vt-error );
	color: var( --picac-vt-on-error );
	font-size: 0.9em;
	line-height: 1.4;
}

/* Nothing between the input and the message. The container's margin is the
   gap Gravity Forms leaves for a description that is not there. */
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container {
	margin-bottom: 0;
}

/* Only the controls that are actually a box with corners. A radio group has
   no single edge for the message to join, so it keeps its own shape and the
   message simply sits under the group. */
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > input[type="text"],
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > input[type="tel"],
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > input[type="email"],
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > input[type="number"],
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > select,
.gform_wrapper.picac-vt-form_wrapper .gfield_error .ginput_container > textarea {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/**
 * The confirmation page.
 *
 * Deliberately almost nothing: this sits inside whatever the theme gives a
 * page, and the only thing worth lifting out of the paragraph flow is the line
 * naming the session somebody has just enrolled in.
 */

.picac-vt-thanks__enrolment {
	margin: 1em 0;
	padding: 0.75em 1em;
	border-left: 4px solid var( --picac-vt-brand, #0db14b );
	background: var( --picac-vt-brand-tint, #dbf3e4 );
	color: var( --picac-vt-on-tint, #07562a );
}

/*
 * A form offering one venue and nothing else.
 *
 * The plugin adds picac-vt-single-venue to the location field when its only
 * choice is one venue, already chosen. There is nothing to ask, so the field
 * is not shown at all: a venue page carries the venue and its address itself.
 *
 * display:none, not Gravity Forms' Visibility setting and not deleting the
 * field. The checked radio inside is still submitted, and everything
 * downstream reads it: the script that shows the dates, the venue written
 * onto the entry and the thank-you page, and the only record of where
 * somebody registering interest wanted to train.
 */
.gform_wrapper .gfield.picac-vt-location.picac-vt-single-venue {
	display: none !important;
}

/*
 * The progress bar, on a form split into steps with Page fields.
 *
 * Gravity Forms colours it blue by default, or with whatever its Page settings
 * pick - one of its named colours, or a custom one written as an inline style
 * on the bar. So the fill is set with !important: the per-form Progress bar
 * card is the one place to change it, and an inline style would otherwise win
 * without anyone being able to see why.
 *
 * Declared on the wrapper rather than on .picac-vt-buttons, where the button
 * colours live, because the bar sits outside every field. The defaults are
 * the chosen-button green on the button fill, so the bar reads as part of the
 * same set: 13.9:1 between the two, well past the 3:1 a graphic needs.
 */
.gform_wrapper.picac-vt-form_wrapper {
	--picac-vt-progress: #052e16;
	--picac-vt-progress-track: #dbf3e4;
}

.gform_wrapper.picac-vt-form_wrapper .gf_progressbar {
	background-color: var( --picac-vt-progress-track ) !important;
}

.gform_wrapper.picac-vt-form_wrapper .gf_progressbar .gf_progressbar_percentage {
	background: var( --picac-vt-progress ) !important;
}

/*
 * Next, Submit and Previous.
 *
 * Moving forward is the one thing everybody does, so Next and Submit are the
 * filled, prominent button: its natural size on desktop, half the form's
 * width on tablet and the full width on a phone. Previous is for the few who
 * picked the wrong date: it stays, because without it the only way back is
 * the browser's, which on an AJAX form can leave the page and lose what was
 * typed, but it drops to a small text link centred under the button.
 *
 * The footer is a one-column grid. The column's width is the button's width,
 * which is what keeps Previous centred under the button rather than under the
 * form. Breakpoints are this site's Elementor kit: tablet 768 to 1024, phone
 * 767 and under.
 *
 * Gravity Forms puts Previous first in the markup, so it comes first when
 * tabbing even though it shows second. Reordering the markup is not offered
 * by Gravity Forms, and keyboard users reaching Back before Submit loses
 * nothing.
 *
 * Covers both footers: .gform_page_footer on a form with steps, .gform_footer
 * on one without.
 */
.gform_wrapper.picac-vt-form_wrapper {
	--picac-vt-action: #052e16;
	--picac-vt-action-hover: #0a4a24;
	--picac-vt-on-action: #ffffff;
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) {
	display: grid !important;
	/* Desktop: the button, then Previous beside it on the right. Tablet and
	   phone below go back to one column, Previous underneath. */
	grid-template-columns: max-content max-content;
	justify-content: start;
	justify-items: center;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

@media ( max-width: 1024px ) {
	.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) {
		grid-template-columns: 50%;
	}
}

@media ( max-width: 767px ) {
	.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) {
		grid-template-columns: 100%;
	}
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) :is( .gform_next_button, .gform_button ) {
	order: 1;
	justify-self: stretch;
	inline-size: 100% !important;
	min-inline-size: 10rem;
	margin: 0 !important;
	padding: 1rem 2.5rem !important;
	border: 2px solid var( --picac-vt-action ) !important;
	border-radius: var( --picac-vt-radius, 4px ) !important;
	background: var( --picac-vt-action ) !important;
	color: var( --picac-vt-on-action ) !important;
	/* No font size, weight or line height: the text is Gravity Forms' own
	   button text, so it follows the theme and the form's style settings. */
	box-shadow: none !important;
	cursor: pointer;
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) :is( .gform_next_button, .gform_button ):hover {
	border-color: var( --picac-vt-action-hover ) !important;
	background: var( --picac-vt-action-hover ) !important;
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) :is( .gform_next_button, .gform_button ):focus-visible {
	outline: 3px solid var( --picac-vt-action ) !important;
	outline-offset: 3px !important;
}

/*
 * Previous as a link. Coloured like the form's labels, the one colour already
 * known to read on whatever the form sits on.
 */
.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) .gform_previous_button {
	order: 2;
	inline-size: auto !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	padding: 0.25rem 0.5rem !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var( --picac-vt-back, var( --gf-ctrl-label-color-primary, inherit ) ) !important;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) .gform_previous_button:hover {
	text-decoration-thickness: 2px !important;
}

/*
 * "None of these dates suit me" gets the same marker as the online option:
 * an empty ring that fills with the accent and takes a tick once chosen, so
 * the two "not a date" answers look like the same kind of thing.
 *
 * The real checkbox stays in place, invisible but focusable and in the
 * accessibility tree, exactly as the venue and date buttons do it, so it is
 * still a checkbox to a keyboard and a screen reader. The ring is the label's
 * own colour, so it reads wherever the text does.
 */
.gform_wrapper .gfield.picac-vt-enquiry .gchoice {
	position: relative;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice input[type="checkbox"] {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 !important;
	padding-inline-start: 0 !important;
	cursor: pointer;
}

/* Gravity Forms draws its own box on the label in some themes. */
.gform_wrapper .gfield.picac-vt-enquiry .gchoice label::after {
	content: none !important;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice label::before {
	content: "";
	position: static !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	inline-size: 1.25em;
	block-size: 1.25em;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	transform: none !important;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice input[type="checkbox"]:checked + label {
	font-weight: 700;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice input[type="checkbox"]:checked + label::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: var( --picac-vt-brand, #0db14b );
	background: var( --picac-vt-brand, #0db14b );
	color: #ffffff;
	font-size: 0.85em;
	inline-size: 1.47em;
	block-size: 1.47em;
}

.gform_wrapper .gfield.picac-vt-enquiry .gchoice input[type="checkbox"]:focus-visible + label {
	outline: 3px solid var( --picac-vt-brand, #0db14b );
	outline-offset: 2px;
}

/*
 * The summary of what was chosen, on page two.
 *
 * The plugin writes "Brunswick – Tue 20 Oct 2026, 7:30am – 1pm" into the
 * description of a field classed picac-vt-summary. On a Section it sits above
 * the section's title as a pill. Moved with order rather than in the markup,
 * so a screen reader still meets the heading first.
 *
 * Fill, border and text come from the Summary card. Text defaults to the
 * form's own colour, so it is not declared here. The default fill is green at
 * 18% so the section shows through; the card's colour picker has no
 * transparency, so a colour picked there is solid.
 */
.gform_wrapper.picac-vt-form_wrapper {
	--picac-vt-summary: #0080002e;
	--picac-vt-summary-border: #008000;
}

.gform_wrapper.picac-vt-form_wrapper .gfield.gsection.picac-vt-summary {
	display: flex;
	flex-direction: column;
}

.gform_wrapper.picac-vt-form_wrapper .gfield.gsection.picac-vt-summary .gsection_description {
	order: -1;
}

.gform_wrapper.picac-vt-form_wrapper .gfield.picac-vt-summary :is( .gsection_description, .gfield_description, .picac-vt-summary__text ) {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 0.5rem !important;
	padding: 0.5rem 0.7rem !important;
	border: 1px solid var( --picac-vt-summary-border );
	border-radius: 1rem;
	background: var( --picac-vt-summary );
	color: var( --picac-vt-on-summary, inherit );
	font-size: 14px;
}

/*
 * Icons on the venue and date buttons.
 *
 * Lucide icons (https://lucide.dev), v1.52.0. ISC License, Copyright (c) 2026
 * Lucide Icons and Contributors. Permission to use, copy, modify, and/or
 * distribute this software for any purpose with or without fee is hereby
 * granted, provided that the above copyright notice and this permission notice
 * appear in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR
 * DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE.
 *
 * Inlined rather than loaded from Lucide, so there is no request to anyone
 * else and nothing to break if their CDN does. Each is a mask filled with
 * currentColor, so an icon is always the colour of its button's text: green on
 * an unchosen button, white on the chosen one, and whatever the Button colours
 * card says. Decorative, so a screen reader is not told about them.
 *
 * A venue has map-pin above its name and map-pin-check once chosen. A date has
 * calendar to the left and calendar-check-2 once chosen. A venue not chosen
 * keeps the plain pin: it is not wrong, only not picked, and can still be.
 *
 * Only on venues and dates. The online option's ring and the tick box are
 * their own markers, and are left alone.
 */
.gform_wrapper .gfield.picac-vt-buttons {
	--picac-vt-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3C/svg%3E");
	--picac-vt-icon-pin-chosen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19.43 12.935c.357-.967.57-1.955.57-2.935a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 1.202 0 32.197 32.197 0 0 0 .813-.728' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3Cpath d='m16 18 2 2 4-4' /%3E%3C/svg%3E");
	--picac-vt-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v3' /%3E%3Cpath d='M16 2v3' /%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M3 9h18' /%3E%3C/svg%3E");
	--picac-vt-icon-date-chosen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M 19 3 L 5 3' /%3E%3Cpath d='M 21 13 L 21 5' /%3E%3Cpath d='M 21 5 A2 2 0 0 0 19 3' /%3E%3Cpath d='M 3 19 A2 2 0 0 0 5 21' /%3E%3Cpath d='M 3 5 L 3 19' /%3E%3Cpath d='M 5 3 A2 2 0 0 0 3 5' /%3E%3Cpath d='m16 19 2 2 4-4' /%3E%3Cpath d='M16 2v3' /%3E%3Cpath d='M3 9h18' /%3E%3Cpath d='M5 21 L12.5 21' /%3E%3Cpath d='M8 2v3' /%3E%3C/svg%3E");
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-location] label::before,
.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice label::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.5em;
	block-size: 1.5em;
	background-color: currentColor;
	-webkit-mask: var( --picac-vt-icon-pin ) center / contain no-repeat;
	mask: var( --picac-vt-icon-pin ) center / contain no-repeat;
}

/* Above the venue name, centred like the name is. */
.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-location] label::before {
	display: block;
	margin: 0 auto 0.4rem;
	color: var( --picac-vt-venue-name, #1a1a1a );
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-location] input[type="radio"]:checked + label::before {
	color: var( --picac-vt-on-selected );
	-webkit-mask-image: var( --picac-vt-icon-pin-chosen );
	mask-image: var( --picac-vt-icon-pin-chosen );
}

/* A venue not chosen steps back with its name. */
.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons.picac-vt-has-choice .gchoice[data-picac-location] input[type="radio"]:not(:checked) + label::before {
	color: var( --picac-vt-muted );
}

/* To the left of the date, which is two lines, centred against both. */
.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice label {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice label::before {
	-webkit-mask-image: var( --picac-vt-icon-date );
	mask-image: var( --picac-vt-icon-date );
}

.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice input[type="radio"]:checked + label::before {
	-webkit-mask-image: var( --picac-vt-icon-date-chosen );
	mask-image: var( --picac-vt-icon-date-chosen );
}

/*
 * The chosen icon arrives rather than appearing: a quick pop from small to a
 * touch too big and back, so the click visibly landed. An animation on the
 * :checked rule plays each time that rule starts to apply, which is exactly
 * when something is chosen. Nothing moves for anybody whose device asks for
 * reduced motion.
 */
@keyframes picac-vt-icon-pop {
	0% {
		transform: scale( 0.4 ) rotate( -15deg );
		opacity: 0.2;
	}
	60% {
		transform: scale( 1.2 ) rotate( 4deg );
		opacity: 1;
	}
	100% {
		transform: scale( 1 ) rotate( 0 );
		opacity: 1;
	}
}

.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-location] input[type="radio"]:checked + label::before,
.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice input[type="radio"]:checked + label::before {
	animation: picac-vt-icon-pop 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
}

@media ( prefers-reduced-motion: reduce ) {
	.gform_wrapper .gfield.picac-vt-location.picac-vt-buttons .gchoice[data-picac-location] input[type="radio"]:checked + label::before,
	.gform_wrapper .gfield.picac-vt-session.picac-vt-buttons .gchoice input[type="radio"]:checked + label::before {
		animation: none;
	}
}

/*
 * arrow-right after "Next", from the same Lucide set as the venue and date
 * icons (licence above), one text-height tall so it reads as part of the
 * word. Was square-arrow-right until 2026-10-07. The button's own text
 * colour. Next is a <button>, which can carry a pseudo-element.
 */
.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) .gform_next_button::after {
	/* Gravity Forms' theme sets content: none on this button's ::after. */
	content: "" !important;
	flex: 0 0 auto;
	/* Gravity Forms gives this ::after its own, larger font size for its
	   icon font, which made 1em 20px against 14px text. Inheriting it makes
	   the arrow exactly as tall as the word, and the same height as the
	   spinner that replaces it. */
	font-size: inherit !important;
	inline-size: 1em;
	block-size: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E") center / contain no-repeat;
}

/* While Next is working, the spinner takes the arrow's place. */
.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) .gform_next_button.gform-has-spinner::after {
	display: none !important;
}

/*
 * Next, Submit and Previous lay their text out in a row, so Gravity Forms'
 * spinner - which it puts inside the button and centres over the text - can
 * sit to the right of the words instead.
 */
.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) :is( .gform_next_button, .gform_button, .gform_previous_button ) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ) :is( .gform_next_button, .gform_button, .gform_previous_button ) .gform-loader {
	position: static !important;
	inset: auto !important;
	flex: 0 0 auto;
	/* Gravity Forms draws it in em against a 2px font size: 10em across.
	   A tenth of the button's text makes it one text-height, so the button
	   does not grow while it spins. */
	font-size: 0.1em !important;
	margin: 0 !important;
}

/*
 * Once Submit has been pressed, Previous goes. Gravity Forms marks the button
 * it is working on with gform-has-spinner, so nothing needs a script. Hidden
 * rather than removed, so the button does not shift while it spins; a
 * validation error redraws the form and brings Previous back.
 */
.gform_wrapper.picac-vt-form_wrapper :is( .gform_page_footer, .gform_footer ):has( .gform_button.gform-has-spinner ) .gform_previous_button {
	visibility: hidden;
}

/*
 * Text boxes at 16px or more, so a phone does not zoom in on them.
 *
 * iOS Safari zooms the page when a field with text smaller than 16px is
 * focused, and does not zoom back out. max() keeps a theme's larger size where
 * it has one. Every typed-into control on the form; radios, tick boxes and
 * buttons are not focused for typing and are left alone.
 */
.gform_wrapper.picac-vt-form_wrapper :is(
	input:not( [type="radio"] ):not( [type="checkbox"] ):not( [type="submit"] ):not( [type="button"] ):not( [type="hidden"] ):not( [type="image"] ),
	select,
	textarea
) {
	font-size: max( 16px, 1em ) !important;
}