/*
 * Forms of the site (stage C): what the markup of the BS Fields forms
 * module needs on top of the mockup's components (.pw-field, .pw-choice,
 * .pw-progress, .p-quote__*). Loaded only on pages with a form
 * (plantworld_conditional_styles(), every selector has a trigger class).
 * Values only from the tokens; no !important.
 */

/*
 * Parts kept hidden until needed (message after sending, alert, progress,
 * summary, buttons of other steps): the module's own CSS hides them on the
 * page, but the editor canvas loads the theme's files only, and the skin's
 * classes (.pw-form-success { display: flex }) beat the browser's [hidden].
 */
.p-quote__wizard [hidden],
form:has(> .pw-form-grid) [hidden],
.pw-form-success[hidden] {
	display: none;
}

/* ── Questions with tiles: a fieldset with its legend, without the browser's frame ── */
.pw-form-question,
.p-quote__choices {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The legend is outside the fieldset's flex layout, so its distance to the tiles is its own margin (= the gap of the mockup). */
.pw-form-question > legend {
	margin: 0 0 12px;
	padding: 0;
}

/* A second question in a wizard step ("Kiedy chcesz zacząć?"): in the mockup a heading 48px above the tiles, as every part of the wizard. */
.p-quote__choices > legend {
	margin: 0 0 48px;
	padding: 0;
}

/* The error under a group of tiles. */
.pw-form-question > .pw-field__msg,
.p-quote__choices > .pw-field__msg {
	margin-top: 12px;
}

/* On ink (Współpraca) the error text has the dark variant of the token. */
.pw-choice-grid--dark ~ .pw-field__msg--error,
.pw-form--dark .pw-field__msg--error {
	color: var(--pw-error-on-dark);
}

/* ── Wizard: one step = the parts of the mockup's wizard, with its rhythm ── */
.p-quote__step {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* ── Select: no fight with Neve ──
 * Neve forces `select { padding-right: 20px !important }`, so the select
 * cannot make room for its chevron. The wrapper draws the field (border,
 * fill, chevron 14px from its right edge) and ends the select 14px earlier:
 * the select's own 20px padding then ends exactly where the chevron starts,
 * so a long option never runs under it. States of the field (focus, error,
 * dark, quiet) are drawn on the wrapper from the same tokens as .pw-input.
 */
.pw-select-wrap {
	display: block;
	padding-right: 14px;
	border: 1px solid var(--border-field);
	background-color: var(--surface-field);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A8171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	transition: var(--transition-color);
}

.pw-select-wrap > .pw-select {
	--formfieldbordercolor: transparent;
	--formfieldbgcolor: transparent;
	border-color: transparent;
	background-image: none;
}

.pw-select-wrap > .pw-select:focus,
.pw-select-wrap > .pw-select:focus-visible {
	--formfieldbordercolor: transparent;
	outline: none;
}

/* The ring of the other fields (ds.css, audit A-32) goes around the wrapper, where the border is. */
.pw-select-wrap:focus-within {
	border-color: var(--focus-ring-on-light);
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-select-wrap:has(> [aria-invalid="true"]) {
	border-color: var(--pw-error);
}

.pw-field--on-dark .pw-select-wrap {
	border-color: var(--border-field-on-dark);
	background-color: var(--surface-field-on-dark);
}

.pw-field--on-dark .pw-select-wrap:focus-within {
	border-color: var(--focus-ring-on-dark);
	outline-color: var(--focus-ring-on-dark);
}

.pw-field--on-dark .pw-select-wrap:has(> [aria-invalid="true"]) {
	border-color: var(--pw-error-on-dark);
}

.pw-select-wrap:has(> :disabled) {
	opacity: 0.45;
}

/* ── Consent with an error: the box takes the error colour ── */
.pw-form-grid .pw-checkbox__input[aria-invalid="true"] + .pw-checkbox__box,
.pw-form .pw-checkbox__input[aria-invalid="true"] + .pw-checkbox__box {
	border-color: var(--pw-error);
}

.pw-form--dark .pw-checkbox__input[aria-invalid="true"] + .pw-checkbox__box {
	border-color: var(--pw-error-on-dark);
}

/* ── Turnstile: the height of the widget kept for it, so the button does not jump when it comes at the first touch ── */
.pw-turnstile {
	display: flex;
	flex-direction: column;
	min-height: 65px;
}

/* ── Sending: the button stays focusable and says what happens ── */
.pw-form-grid .pw-btn[aria-disabled="true"],
.pw-form__nav .pw-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* "Wstecz" on the first step, disabled as in the mockup. */
.pw-form__nav .pw-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/*
 * ── Stage G: controls of BS Fields 0.10.0 in the colours of the site ──
 * The plugin draws the structure from custom properties; here they get
 * the tokens, on light and on dark sections. Two classes of the same
 * element: the plugin's sheet loads after this one (in the footer) and
 * sets its neutral defaults on the wrapper too.
 */
.bs-form-wrap.pw-form-shell {
	--bs-form-line: var(--border-field);
	--bs-form-field: var(--surface-field);
	--bs-form-pop: var(--pw-paper);
	--bs-form-text: var(--text-body);
	--bs-form-muted: var(--text-lead-muted);
	--bs-form-accent: var(--pw-green-on-light);
	--bs-form-on-accent: var(--pw-white);
}

:is(.pw-section--dark, .pw-section--dark-soft) .bs-form-wrap.pw-form-shell {
	--bs-form-line: var(--border-field-on-dark);
	--bs-form-field: var(--surface-field-on-dark);
	--bs-form-pop: var(--pw-ink);
	--bs-form-text: var(--text-on-dark);
	--bs-form-muted: var(--text-on-dark-muted);
	--bs-form-accent: var(--pw-green);
	--bs-form-on-accent: var(--pw-ink);
}

/* A light card in a dark section (the hero of /wycena/): the form stays light. */
:is(.pw-section--dark, .pw-section--dark-soft) .pw-quote-hero__card .bs-form-wrap.pw-form-shell {
	--bs-form-line: var(--border-field);
	--bs-form-field: var(--surface-field);
	--bs-form-pop: var(--pw-paper);
	--bs-form-text: var(--text-body);
	--bs-form-muted: var(--text-lead-muted);
	--bs-form-accent: var(--pw-green-on-light);
}

/* "Możesz zaznaczyć kilka odpowiedzi" and the limits of a file field. */
.pw-form-hint {
	margin: 0;
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: var(--bs-form-muted);
}

.pw-form-question > .pw-form-hint,
.p-quote__choices > .pw-form-hint {
	margin: -4px 0 16px;
}

/* Own list: the field is the wrapper (border, fill, chevron); the box inside fills it. */
.pw-select-wrap.bs-listbox-wrap {
	padding-right: 0;
}

.pw-select-wrap .bs-listbox {
	min-height: 50px;
	padding: 0 48px 0 16px;
	font-size: 15px;
	outline: none;
}

.pw-select-wrap:has(.bs-listbox:focus-visible) {
	border-color: var(--bs-form-accent);
	outline: 2px solid var(--bs-form-accent);
	outline-offset: 2px;
}

.pw-select-wrap:has(.bs-listbox[aria-invalid="true"]) {
	border-color: var(--pw-error);
}

.pw-select-wrap:has(.bs-listbox[aria-expanded="true"]) {
	border-color: var(--bs-form-accent);
}

.pw-select-wrap .bs-listbox__list {
	font-size: 15px;
}

/*
 * Phone (review of 29.10.2026): the dialling code and the number in one
 * box – the frame, fill and focus ring belong to the box, the two controls
 * inside have none. The code opens the list of countries.
 */
.pw-tel {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--border-field);
	background: var(--surface-field);
	transition: var(--transition-color);
}

.pw-tel:focus-within {
	border-color: var(--focus-ring-on-light);
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-tel:has([aria-invalid="true"]) {
	border-color: var(--pw-error);
}

.pw-field--on-dark .pw-tel {
	border-color: var(--border-field-on-dark);
	background: var(--surface-field-on-dark);
}

.pw-tel .pw-select-wrap {
	flex: 0 0 auto;
	border: 0;
	outline: none;
	background-color: transparent;
	background-position: right 8px center;
}

.pw-tel .pw-select-wrap:focus-within {
	outline: none;
}

.pw-tel .bs-listbox {
	padding-right: 32px;
}

.pw-tel .pw-input {
	--formfieldbordercolor: transparent;
	--formfieldbgcolor: transparent;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 4px;
}

.pw-tel :is(input, select).pw-input:focus,
.pw-tel :is(input, select).pw-input:focus-visible {
	--formfieldbordercolor: transparent;
	outline: none;
}

.pw-tel .bs-listbox__list {
	right: auto;
	width: max-content;
	min-width: 260px;
}

/* Month tiles: no field frame around the group (the wrapper of the select draws one for lists only). */
.pw-select-wrap.bs-month-wrap {
	padding: 0;
	border: 0;
	background: none;
	outline: none;
}

/* Month tiles: the tiles of the site (.pw-choice) in a smaller size. */
.pw-form-shell .bs-month__tile {
	font-size: 15px;
	background: transparent;
	transition: var(--transition-color);
}

.pw-form-shell .bs-month__tile:hover:not(:has(input:disabled, input:checked)) {
	border-color: var(--bs-form-accent);
}

/* Review of 29.10.2026: the years in one even row across the field, the months four in a row (three on a phone). */
.pw-form-shell .bs-month__years {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.pw-form-shell .bs-month .bs-month__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 575px) {
	.pw-form-shell .bs-month__years {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-form-shell .bs-month .bs-month__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pw-form-shell .bs-month__unknown {
	padding-inline: 18px;
}

/* Files. */
.pw-files__drop {
	padding: 24px;
}

/* Review of 30.10.2026: the drop zone on the colour of the section, as the tiles; the dashed frame marks it. */
.pw-form-shell .pw-files__drop {
	background: transparent;
}

.pw-files__button {
	cursor: pointer;
}

.pw-files__list .bs-files__name {
	font-size: 15px;
}

/* Dialog and section "Oddzwonimy": two fields and the button in one column. */
.pw-form--callback .pw-form__nav,
.pw-form--callback .p-quote__pair {
	gap: 16px;
}

/* "Oddzwonimy" as a section (pattern cta-callback): the text and the form side by side from 960px. */
.pw-callback-band {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 32px 64px;
	align-items: center;
}

/* The fields of a pair start at the same height; the column itself keeps its full width. */
.pw-callback-band .pw-form--callback .p-quote__pair {
	align-items: start;
}

@media (max-width: 959px) {
	.pw-callback-band {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* "Oddzwonimy" (review of 29.10.2026): "Proszę o kontakt" across the whole form. */
.pw-form--callback [data-bs-submit] {
	width: 100%;
}

/* "Oddzwonimy" stacked (the hero of /wycena/): the name above the phone, each across. */
.pw-form--callback-stacked .p-quote__pair {
	grid-template-columns: minmax(0, 1fr);
}

/* "Oddzwonimy": two fields, consent and the button close together. */
.pw-form--callback.pw-stack--loose {
	gap: 20px;
}