/**
 * Papeleo AI form theme — stylesheet.
 *
 * The rules half of the "papeleo-ai" Gravity Forms theme layer, enqueued by it
 * in the framework's "theme" group (plugins/gravityforms.php).
 *
 * Design tokens are deliberately NOT here: they are the layer's
 * `set_form_css_properties()`, which Gravity Forms prints as inline custom
 * properties scoped to each form — higher precedence than any stylesheet, and
 * the supported place for them. What is left below is what tokens cannot
 * express, written against stable GF classes rather than internals.
 */

/* Labels: the display face, like the rest of the site's headings. */
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme .gform-field-label {
	font-family: var(--wp--preset--font-family--display, "Sora", ui-sans-serif, system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--indigo-night, #1a1640);
}

/* Sub-labels and choice labels stay in the body face at reading size. */
.gform_wrapper.gform-theme .gform-field-label--type-sub,
.gform_wrapper.gform-theme .gform-field-label--type-inline,
.gform_wrapper.gform-theme .gchoice label {
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--text, #1c1b22);
}

.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .gform_description,
.gform_wrapper.gform-theme .gform_required_legend {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-soft, #5a5866);
}

.gform_wrapper.gform-theme ::placeholder {
	color: var(--wp--preset--color--text-faint, #6a6683);
	opacity: 1;
}

/*
 * The submit button's colour, radius and size come from the style settings in
 * plugins/gravityforms.php (buttonPrimaryBackgroundColor / inputSize), which
 * Gravity Forms prints as inline custom properties per form — those beat any
 * stylesheet, so styling it again here would be dead CSS. Only the weight and
 * the focus ring are added on top.
 */
.gform_wrapper.gform-theme .gform_button {
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.gform_wrapper.gform-theme .gform_button:focus-visible,
.gform_wrapper.gform-theme .gform-theme-field-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo-bright, #7f77dd);
	outline-offset: 2px;
}

/* Validation: keep GF's semantics, soften the shapes to match the site. */
.gform_wrapper.gform-theme .gform_validation_errors,
.gform_wrapper.gform-theme .gfield_validation_message {
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
}

/* Confirmation message reads like the site's cards. */
.gform_confirmation_wrapper,
.gform_wrapper.gform-theme .gform_confirmation_message {
	background-color: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--line, #dedcec);
	border-radius: 12px;
	padding: 20px 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--text, #1c1b22);
}

/* -------------------------------------------------------------------------
 * Forms inside a .gs-form-card container (Figma 51:484).
 *
 * Scoped to that wrapper so a form dropped anywhere else keeps GF's defaults.
 * ------------------------------------------------------------------------- */

.gs-form-card .gform_wrapper {
	width: 100%;
}

/*
 * The plan chooser lives in the page as a block of cards, which click this
 * field's radios for the user (assets/js/gf-plan-cards.js). The native control
 * is redundant once that bridge is in place, so it is hidden rather than
 * removed — Gravity Forms still owns the value, the pricing and the validation.
 *
 * `data-gf-plan-target` carries "<formId>_<fieldId>", matching the card group's
 * `data-gf-plan-source`, so the pairing is declared in the markup, not assumed.
 *
 * NOT `display: none`: Gravity Forms leaves invisible fields out of the total,
 * which zeroed the price (and the Stripe amount with it) until something was
 * clicked. This is the visually-hidden pattern instead, so the field keeps a
 * layout box and stays in the calculation. The script marks it aria-hidden and
 * untabbable, since the cards are the accessible control.
 */
.gs-form-card[data-gf-plan-target="1_19"] #field_1_19 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Consent rows: a tinted card each, per the design. */
.gs-form-card .gform_wrapper.gform-theme .gfield--type-consent {
	background-color: var(--wp--preset--color--lavender-mist, #eeedfe);
	border-radius: 10px;
	padding: 14px 16px;
}

.gs-form-card .gform_wrapper.gform-theme .gfield--type-consent .gfield_consent_label {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--text, #1c1b22);
}

.gs-form-card .gform_wrapper.gform-theme .gfield--type-consent .gfield_description {
	/* Sits right under the label, as in the design — GF's own 12px is too far. */
	margin-top: 0;
	padding-top: 4px;
	/* Line the description up with the label text: checkbox + its 12px gap. */
	padding-left: 30px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-soft, #5a5866);
}

/*
 * Gravity Forms puts the consent text in a bordered, padded box (its scrollable
 * agreement panel). The design shows it as plain secondary text under the
 * label, so the box is flattened away.
 */
.gs-form-card .gform_wrapper.gform-theme .gfield_consent_description_text {
	border: 0;
	padding: 0;
	max-height: none;
	overflow: visible;
}

/*
 * Gravity Forms lays the consent row out as a grid whose first column is a
 * fixed 30px, and already gives the label a 12px margin — the gap the design
 * asks for. Sizing the column to the checkbox itself keeps that 12px as the
 * whole distance instead of adding the leftover 12px of column to it.
 */
.gs-form-card .gform_wrapper.gform-theme .gfield--type-consent .ginput_container_consent {
	grid-template-columns: auto 1fr;
}

/*
 * Checkboxes: an 18px square drawn from the brand palette. `appearance: none`
 * hands the whole box over to us; the tick is a bordered pseudo-element rotated
 * into an L, so there is no image or font dependency.
 */
.gs-form-card .gform_wrapper.gform-theme input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	/*
	 * No right margin: the label carries the 12px gap (see the consent rules).
	 * The 1px top lines the box up with the first line of label text, which is
	 * how the design pairs them when the text wraps.
	 */
	margin: 1px 0 0;
	border: 2px solid var(--wp--preset--color--indigo-core, #3c3489);
	border-radius: 5px;
	background-color: var(--wp--preset--color--surface, #ffffff);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gs-form-card .gform_wrapper.gform-theme input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--indigo-core, #3c3489);
}

.gs-form-card .gform_wrapper.gform-theme input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gs-form-card .gform_wrapper.gform-theme input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo-bright, #7f77dd);
	outline-offset: 2px;
}

/*
 * The submit button spans the card, as in the design. That is a form setting,
 * not CSS: Gravity Forms prints the button width with !important, so the
 * supported switch is the form's own button width ("full"), set on form 1.
 * @see https://docs.gravityforms.com/form-settings/#form-layout
 */

/*
 * The "* indicates required fields" legend is redundant here — every required
 * field is marked, and the design has no such line.
 */
.gs-form-card .gform_wrapper.gform-theme .gform_required_legend {
	display: none;
}

/* -------------------------------------------------------------------------
 * Quote notice — what the account owes, above the amount it will be charged.
 *
 * Four states, distinguished by more than colour: a settled account is the one
 * that stops the form, so it reads as information rather than as an error the
 * customer has to fix. Colours come from theme.json with literals behind them,
 * the same as the form tokens.
 * ------------------------------------------------------------------------- */
.pai-quote-notice {
	/* A banner, not a field. Gravity Forms lays fields out in a grid, and
	   without this a notice that lands inside one becomes a single narrow
	   column of text beside the price. */
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--line, #dedcec);
	border-left-width: 4px;
	border-radius: 8px;
	background: var(--wp--preset--color--paper, #f5f4fb);
	color: var(--wp--preset--color--text, #1c1b22);
	font-size: 14px;
	line-height: 1.5;
}

.pai-quote-notice:empty {
	display: none;
}

.pai-quote-notice.is-loading {
	border-left-color: var(--wp--preset--color--lavender, #afa9ec);
	opacity: 0.85;
}

.pai-quote-notice.is-ok {
	border-left-color: var(--wp--preset--color--indigo-core, #3c3489);
}

/* A settled account ends the transaction, so it is a callout rather than a
   footnote — the customer has to understand why the form will not submit. */
.pai-quote-notice.is-settled {
	border: 1.5px solid var(--wp--preset--color--indigo-mid, #534ab7);
	border-left-width: 6px;
	background: var(--wp--preset--color--lavender-mist, #eeedfe);
	color: var(--wp--preset--color--indigo-night, #1a1640);
	font-weight: 600;
	font-size: 15px;
	padding: 16px 18px;
}

.pai-quote-notice.is-warning,
.pai-quote-notice.is-error {
	border-left-color: #b4690e;
	background: #fdf6ec;
}

/* A submit that cannot be pressed should look unpressable, not broken. */
.gform_wrapper .pai-quote-blocked,
.gform_wrapper .pai-quote-blocked:hover {
	opacity: 0.55;
	cursor: not-allowed;
	filter: grayscale(1);
}

/* Charge lines on an account that owes nothing: hidden, not zeroed. Gravity
   Forms would put the price back on its next recalculation, and a total under
   a "nothing to pay" banner reads as a mistake. */
.gform_wrapper .pai-quote-hidden {
	display: none !important;
}