/*
 * Gravity Forms in the design style (dark fields, uppercase labels, pink button).
 * Works on top of the "Orbital" theme set in inc/gravity-forms.php.
 */

.gform_wrapper.gform-theme {
	--gf-color-primary: var(--bs-accent);
	--gf-color-primary-contrast: var(--bs-on-accent);
	--gf-color-in-ctrl: var(--bs-bg);
	--gf-color-in-ctrl-contrast: var(--bs-text);
	--gf-color-in-ctrl-primary: var(--bs-text);
	--gf-color-in-ctrl-light: var(--bs-surface-2);
	--gf-color-in-ctrl-dark: var(--bs-line-strong);
	--gf-color-out-ctrl-light: var(--bs-line);
	--gf-color-out-ctrl-dark: var(--bs-text-muted);
	--gf-color-danger: #FF6B8F;
	--gf-ctrl-border-color: var(--bs-line-strong);
	--gf-ctrl-label-color-primary: rgba(251, 221, 223, 0.6);
	--gf-ctrl-label-color-secondary: var(--bs-text);
	--gf-ctrl-desc-color: var(--bs-text-muted);
	--gf-radius: 0;
	--gf-font-family-base: var(--bs-font-body);
	--gf-font-family-primary: var(--bs-font-body);
	--gf-font-family-secondary: var(--bs-font-body);
	/* Buttons as in the design (Orbital's own rules beat plain selectors, its variables don't). */
	--gf-ctrl-btn-font-size: 13px;
	--gf-ctrl-btn-font-weight: 800;
	--gf-ctrl-btn-letter-spacing: 0.12em;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-size: 50px;
	--gf-ctrl-btn-padding-x: 24px;
	color: var(--bs-text);
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub) {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(251, 221, 223, 0.6);
}

.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='number'],
.gform_wrapper select,
.gform_wrapper textarea {
	border-radius: 0;
	background: var(--bs-bg);
	border-color: var(--bs-line-strong);
	color: var(--bs-text);
	font-size: 15px;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--bs-accent);
	box-shadow: none;
	outline: none;
}

.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform-button {
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: var(--bs-accent);
	color: var(--bs-on-accent);
	font-family: var(--bs-font-body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--bs-track-label);
	text-transform: uppercase;
	cursor: pointer;
}

.gform_wrapper .gform_footer input[type='submit']:hover,
.gform_wrapper .gform-button:hover {
	background: var(--bs-text);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	background: var(--bs-accent-soft);
	border: 1px solid var(--bs-accent);
	color: var(--bs-text);
	font-size: 13px;
}

.gform_wrapper .gform_validation_errors {
	border-radius: 0;
	background: var(--bs-accent-soft);
	border-color: var(--bs-accent);
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors > h2 {
	color: var(--bs-text);
	font-family: var(--bs-font-body);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

.gform_wrapper .ginput_total,
.gform_wrapper .ginput_product_price {
	font-family: var(--bs-font-display);
	font-weight: 900;
	color: var(--bs-accent);
}

.gform_confirmation_message {
	padding: 16px 18px;
	border: 1px solid var(--bs-accent);
	background: var(--bs-accent-soft);
	color: var(--bs-text);
}

/* Date picker field: full width like the other fields; the calendar opens on click,
   so Gravity Forms' small (dark, hard to see) icon is hidden. */
.gform_wrapper .ginput_container_date input.datepicker {
	width: 100% !important;
	max-width: none !important;
}

.gform_wrapper .ginput_container_date .ui-datepicker-trigger,
.gform_wrapper .ginput_container_date img.ui-datepicker-trigger {
	display: none !important;
}

.gform_wrapper .ginput_container_date {
	position: relative;
}

/* ---------- Newsletter (home page, next to the FAQ) ----------
   As in the design: e-mail and button in one row, the consent under them.
   The body / fields wrappers are flattened (display: contents) so the fields and the
   footer sit in one grid. Selectors are long to win over Gravity Forms' "Orbital" theme. */

.newsletter-form .gform_heading,
.newsletter-form .gform_wrapper.gform-theme .gfield_required {
	display: none;
}

.newsletter-form .gform_wrapper.gform-theme .gform-body,
.newsletter-form .gform_wrapper.gform-theme .gform_fields {
	display: contents;
}

.newsletter-form .gform_wrapper.gform-theme form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px 10px;
	align-items: start;
}

.newsletter-form .gform_wrapper.gform-theme form > *,
.newsletter-form .gform_wrapper.gform-theme .gfield.gfield--type-consent {
	grid-column: 1 / -1;
}

.newsletter-form .gform_wrapper.gform-theme .gfield.gfield--type-email {
	grid-column: 1;
}

.newsletter-form .gform_wrapper.gform-theme .gform_footer {
	display: block;
	margin: 0;
	padding: 0;
}

.newsletter-form .gform_wrapper.gform-theme .gform_footer input.gform_button[type='submit'] {
	inline-size: 100% !important; /* Gravity Forms' button rules are long selector lists that beat any normal one. */
}

.newsletter-form .gform_wrapper.gform-theme input[type='email'] {
	min-height: 50px;
}

.newsletter-form .gform_wrapper.gform-theme .gfield_consent_label {
	font-size: 13px;
	line-height: 1.45;
	color: var(--bs-text-muted);
}

@media (min-width: 480px) {
	.newsletter-form .gform_wrapper.gform-theme form {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.newsletter-form .gform_wrapper.gform-theme .gfield.gfield--type-email {
		grid-row: 1;
	}

	.newsletter-form .gform_wrapper.gform-theme .gform_footer {
		grid-column: 2;
		grid-row: 1;
	}
}