/*
 * Forms module: only what the markup needs to work, whatever the skin.
 * The look comes from the project's CSS (classes of bs_forms_skin).
 */

/* The honeypot: out of sight and out of reach, still in the form for bots. */
.bs-form-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hidden steps, progress, summary and buttons stay hidden even when the skin gives their classes a display. */
[data-bs-form-wrap] [hidden] {
	display: none;
}

/*
 * Wizards without a layout shift (0.9.0): the markup already has the state
 * forms.js sets on start (progress, "Wstecz", "Dalej"), and until the
 * script marks the form ready, a browser that runs scripts shows the
 * first step only – nothing jumps when the script starts. Without
 * JavaScript every step shows and the script's controls go. A browser
 * without the "scripting" media feature (Safari before 17) shows all of
 * it until the script starts, as before.
 */
@media (scripting: enabled) {
	[data-bs-form-wrap] form:not([data-bs-ready]) [data-bs-step]:not([data-bs-step="1"]),
	[data-bs-form-wrap] form:not([data-bs-ready]) [data-bs-nav] [data-bs-submit],
	[data-bs-form-wrap] form:not([data-bs-ready]) [data-bs-notice] {
		display: none;
	}
}

@media (scripting: none) {
	[data-bs-form-wrap] :is([data-bs-progress], [data-bs-back], [data-bs-next]) {
		display: none;
	}
}

/*
 * 0.10.0: own list, month tiles, phone with a country, files. Only the
 * structure lives here; the look comes from custom properties the project
 * sets (defaults neutral): --bs-form-line (borders), --bs-form-field
 * (fill of a field), --bs-form-pop (fill of an open list), --bs-form-text,
 * --bs-form-muted, --bs-form-accent (chosen, focus), --bs-form-on-accent.
 */
[data-bs-form-wrap] {
	--bs-form-line: #8a8171;
	--bs-form-field: #fff;
	--bs-form-pop: #fff;
	--bs-form-text: #1c1a17;
	--bs-form-muted: #5c5547;
	--bs-form-accent: #2d6a2e;
	--bs-form-on-accent: #fff;
}

/* Own list: the box looks like a field, the list opens under it. */
.bs-listbox-wrap {
	position: relative;
}

.bs-listbox {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 40px 0 16px;
	cursor: pointer;
	color: var(--bs-form-text);
	user-select: none;
}

.bs-listbox.is-empty .bs-listbox__value {
	color: var(--bs-form-muted);
}

.bs-listbox__value {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bs-listbox__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: -1px;
	right: -1px;
	max-height: 280px;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--bs-form-line);
	background: var(--bs-form-pop);
	color: var(--bs-form-text);
}

.bs-listbox__list [role="option"] {
	padding: 10px 16px;
	cursor: pointer;
}

.bs-listbox__list .is-active {
	background: color-mix(in srgb, var(--bs-form-accent) 12%, transparent);
}

.bs-listbox__list [aria-selected="true"] {
	font-weight: 600;
	color: var(--bs-form-accent);
}

/* Phone: the country and the number in one row. */
.bs-form__tel,
[data-bs-tel-country] {
	min-width: 0;
}

/* Months: years in a row, the twelve months in a grid. */
.bs-month {
	display: grid;
	gap: 16px;
}

.bs-month fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The grid is a fieldset too: the selector outweighs ".bs-month fieldset" above, or the months stay in a wrapping row. */
.bs-month .bs-month__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bs-month .bs-month__grid[hidden] {
	display: none;
}

.bs-month__legend {
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	font-size: 0.875em;
	color: var(--bs-form-muted);
}

.bs-month__grid > .bs-month__legend {
	grid-column: 1 / -1;
}

.bs-month__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bs-form-line);
	background: var(--bs-form-field);
	color: var(--bs-form-text);
	cursor: pointer;
	text-align: center;
}

.bs-month__tile input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.bs-month__tile:has(input:checked) {
	border-color: var(--bs-form-accent);
	background: var(--bs-form-accent);
	color: var(--bs-form-on-accent);
}

.bs-month__tile:has(input:focus-visible) {
	outline: 2px solid var(--bs-form-accent);
	outline-offset: 2px;
}

.bs-month__tile:has(input:disabled) {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 599px) {
	.bs-month .bs-month__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Files: a drop zone, the chooser as a button, a list with thumbnails and progress. */
.bs-form__files-drop,
[data-bs-drop] {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 20px;
	border: 1px dashed var(--bs-form-line);
	background: var(--bs-form-field);
}

[data-bs-drop].is-over {
	border-style: solid;
	border-color: var(--bs-form-accent);
}

[data-bs-file-input] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

[data-bs-file-input]:focus-visible + label {
	outline: 2px solid var(--bs-form-accent);
	outline-offset: 2px;
}

[data-bs-file-list] {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-bs-file-list]:empty {
	display: none;
}

.bs-files__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--bs-form-line);
	background: var(--bs-form-field);
	color: var(--bs-form-text);
}

.bs-files__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	font-size: 11px;
	letter-spacing: 0.06em;
	background: color-mix(in srgb, var(--bs-form-line) 20%, transparent);
}

.bs-files__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bs-files__meta {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bs-files__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bs-files__state {
	font-size: 0.8125em;
	color: var(--bs-form-muted);
}

.bs-files__bar {
	width: 100%;
	height: 4px;
	accent-color: var(--bs-form-accent);
}

.bs-files__remove {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bs-form-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.bs-files__remove:focus-visible {
	outline: 2px solid var(--bs-form-accent);
}

/* Without JavaScript: no zone (files go only through the script), a note how to send them instead. */
@media (scripting: none) {
	[data-bs-form-wrap] :is([data-bs-drop], [data-bs-file-list]) {
		display: none;
	}
}

@media (scripting: enabled) {
	[data-bs-files] > .bs-form__files-nojs,
	[data-bs-files] > [class*="files-nojs"] {
		display: none;
	}
}