/**
 * Form Manager — visitor-facing form styles (4 templates).
 *
 * Consumes the theme's --bl-* design tokens (with fallbacks). Layout is a
 * flex grid whose cells take per-field widths (100 / 50 / 33). Three template
 * skins: tpl-1 "Letisztult" (clean bordered), tpl-2 "Kártyás" (shadowed card),
 * tpl-3 "Minimál" (underline fields), tpl-4 "Mintakérő" (square panel card with
 * a titled head, orange accent — the glove-sample request's look).
 */

.bl-form {
	--bl-form-accent: var(--bl-blue, #1858A8);
	--bl-form-gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--bl-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	color: var(--bl-ink, #1A1F2B);
	box-sizing: border-box;
}
.bl-form *,
.bl-form *::before,
.bl-form *::after { box-sizing: inherit; }

.bl-form__intro {
	margin: 0 0 6px;
	color: var(--bl-muted, #6B7280);
	font-size: 15px;
	line-height: 1.5;
}
.bl-form__product {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--bl-navy, #0B2C5A);
}

/* ---- Grid ---------------------------------------------------------- */
.bl-form__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-form-gap);
}
.bl-form__cell {
	flex: 1 1 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.bl-form__cell--w50 { flex: 1 1 calc(50% - (var(--bl-form-gap) / 2)); }
.bl-form__cell--w33 { flex: 1 1 calc(33.333% - (var(--bl-form-gap) * 2 / 3)); }

.bl-form__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bl-navy, #0B2C5A);
}

/* ---- Controls ------------------------------------------------------ */
.bl-form input[type="text"],
.bl-form input[type="email"],
.bl-form input[type="tel"],
.bl-form input[type="number"],
.bl-form input[type="date"],
.bl-form input[type="url"],
.bl-form input[type="file"],
.bl-form textarea,
.bl-form select {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	font-family: inherit;
	color: var(--bl-ink, #1A1F2B);
	background: #fff;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.bl-form textarea { resize: vertical; min-height: 110px; }
.bl-form input:focus,
.bl-form textarea:focus,
.bl-form select:focus {
	outline: none;
	border-color: var(--bl-form-accent);
	box-shadow: 0 0 0 3px rgba(24, 88, 168, .14);
}
.bl-form input[type="file"] { padding: 9px 12px; background: var(--bl-soft, #F6F8FB); }

.bl-form__cell--group legend,
.bl-form__cell--group { border: 0; padding: 0; margin: 0; }
.bl-form__cell--group legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--bl-navy, #0B2C5A);
	margin-bottom: 4px;
	padding: 0;
}
.bl-form__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	padding: 3px 0;
	cursor: pointer;
}
.bl-form__opt input { width: auto; }

.bl-form__cell--consent {
	font-size: 14px;
	color: var(--bl-muted, #6B7280);
}
.bl-form__cell--consent .bl-form__opt { align-items: flex-start; gap: 9px; font-size: inherit; }
.bl-form__cell--consent input { width: auto; margin-top: 3px; }
.bl-form__cell--consent a { color: var(--bl-form-accent); }

.bl-form__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.bl-form__heading {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bl-navy, #0B2C5A);
}
.bl-form__req { color: var(--bl-orange, #E8550D); }
.bl-form__submit-note { font-size: 13px; color: var(--bl-muted, #6B7280); }

/* A framed group: set "bl-form__box" as the field's CSS class. The legend is
   floated so it stops being a *rendered* legend and sits inside the frame
   instead of on its border. */
.bl-form__box {
	padding: 14px 16px !important;
	border: 1px solid var(--bl-line, #E5E7EB) !important;
	background: #fff;
}
.bl-form__box > legend { float: left; width: 100%; }

.bl-form__cell--heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--bl-navy, #0B2C5A);
	padding-top: 4px;
}
.bl-form__cell--heading p { margin: 0; }

/* Honeypot — visually hidden but not display:none (bots skip those). */
.bl-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ---- Footer / status ---------------------------------------------- */
.bl-form__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.bl-form__submit { cursor: pointer; }
.bl-form__submit.is-loading { opacity: .7; cursor: progress; }
.bl-form__status {
	font-size: 14px;
	line-height: 1.4;
}
.bl-form__status.is-loading { color: var(--bl-muted, #6B7280); }
.bl-form__status.is-error   { color: #b32d2e; }
.bl-form__status.is-success { color: #1a7f37; font-weight: 600; }
.bl-form.is-done .bl-form__foot { margin-top: 0; }
.bl-form.is-done .bl-form__intro,
.bl-form.is-done .bl-form__product { display: none; }

/* ==================================================================== */
/* Template 1 — Letisztult (default, clean bordered)                     */
/* ==================================================================== */
.bl-form--tpl-1 {
	padding: 26px;
	background: #fff;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: 14px;
	box-shadow: var(--bl-shadow, 0 1px 3px rgba(16,24,40,.10));
}

/* ==================================================================== */
/* Template 2 — Kártyás (elevated card with accent header)               */
/* ==================================================================== */
.bl-form--tpl-2 {
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--bl-shadow-lg, 0 10px 30px rgba(11,44,90,.10));
}
.bl-form--tpl-2 .bl-form__intro {
	margin: 0;
	padding: 22px 28px;
	color: #fff;
	background: linear-gradient(135deg, var(--bl-navy, #0B2C5A), var(--bl-blue, #1858A8));
	font-size: 16px;
	font-weight: 500;
}
.bl-form--tpl-2 .bl-form__product { padding: 14px 28px 0; margin: 0; }
.bl-form--tpl-2 .bl-form__grid { padding: 22px 28px; }
.bl-form--tpl-2 .bl-form__foot { padding: 0 28px 26px; margin-top: 0; }
.bl-form--tpl-2 input,
.bl-form--tpl-2 textarea,
.bl-form--tpl-2 select { background: var(--bl-soft, #F6F8FB); }
.bl-form--tpl-2 input:focus,
.bl-form--tpl-2 textarea:focus,
.bl-form--tpl-2 select:focus { background: #fff; }

/* ==================================================================== */
/* Template 3 — Minimál (underline fields, borderless)                   */
/* ==================================================================== */
.bl-form--tpl-3 { padding: 8px 2px; }
.bl-form--tpl-3 { --bl-form-gap: 22px; }
.bl-form--tpl-3 input[type="text"],
.bl-form--tpl-3 input[type="email"],
.bl-form--tpl-3 input[type="tel"],
.bl-form--tpl-3 input[type="number"],
.bl-form--tpl-3 input[type="date"],
.bl-form--tpl-3 input[type="url"],
.bl-form--tpl-3 textarea,
.bl-form--tpl-3 select {
	border: 0;
	border-bottom: 2px solid var(--bl-line, #E5E7EB);
	border-radius: 0;
	padding-left: 2px;
	padding-right: 2px;
	background: transparent;
}
.bl-form--tpl-3 input:focus,
.bl-form--tpl-3 textarea:focus,
.bl-form--tpl-3 select:focus {
	box-shadow: none;
	border-bottom-color: var(--bl-form-accent);
}
.bl-form--tpl-3 .bl-form__label {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 12px;
	color: var(--bl-muted, #6B7280);
}

/* ==================================================================== */
/* Template 4 — Mintakérő (square panel card, titled head, orange accent) */
/* ==================================================================== */
.bl-form--tpl-4 {
	--bl-form-accent: var(--bl-orange, #E8550D);
	--bl-form-gap: 20px;
	/* Scoped: every shared rule that reads --bl-radius turns square in here. */
	--bl-radius: 3px;
	--t4-line: #D2DAE4;
	--t4-strong: #B4C0CF;
	--t4-panel: #F6F8FA;
	--t4-soft: #FBEEE6;
	--t4-ink2: #33445F;
	--t4-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	padding: 0;
	background: #fff;
	border: 1px solid var(--t4-line);
	font-size: 15px;
	line-height: 1.6;
}
.bl-form--tpl-4 .bl-form__head {
	gap: 0;
	margin: 0;
	padding: 26px 30px 22px;
	border-bottom: 1px solid var(--t4-line);
}
.bl-form--tpl-4 .bl-form__heading {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.bl-form--tpl-4 .bl-form__intro { margin: 0; max-width: 56ch; font-size: 14.5px; }
.bl-form--tpl-4 .bl-form__product { margin: 0; padding: 14px 30px 0; }
.bl-form--tpl-4 .bl-form__grid { padding: 26px 30px 0; }

.bl-form--tpl-4 .bl-form__label,
.bl-form--tpl-4 .bl-form__cell--group legend {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .005em;
	color: var(--bl-ink, #1A1F2B);
}
.bl-form--tpl-4 .bl-form__req { font-weight: 600; }
.bl-form--tpl-4 .bl-form__hint { font-size: 12.5px; }

.bl-form--tpl-4 input[type="text"],
.bl-form--tpl-4 input[type="email"],
.bl-form--tpl-4 input[type="tel"],
.bl-form--tpl-4 input[type="number"],
.bl-form--tpl-4 input[type="date"],
.bl-form--tpl-4 input[type="url"],
.bl-form--tpl-4 textarea,
.bl-form--tpl-4 select,
.bl-form--tpl-4 .bl-select__btn {
	padding: 9px 11px;
	font-size: 14.5px;
	background: var(--t4-panel);
	border-color: var(--t4-strong);
}
.bl-form--tpl-4 .bl-select__btn { padding-right: 34px; }
.bl-form--tpl-4 textarea { min-height: 76px; }
.bl-form--tpl-4 input:focus,
.bl-form--tpl-4 textarea:focus,
.bl-form--tpl-4 select:focus,
.bl-form--tpl-4 .bl-select__btn[aria-expanded="true"] {
	background: #fff;
	border-color: var(--bl-orange, #E8550D);
	box-shadow: 0 0 0 3px rgba(232, 85, 13, .16);
}
.bl-form--tpl-4 input[type="checkbox"],
.bl-form--tpl-4 input[type="radio"] { accent-color: var(--bl-orange, #E8550D); }
.bl-form--tpl-4 .bl-select__opt.is-on { background: var(--bl-navy, #0B2C5A); }

.bl-form--tpl-4 .bl-form__opts .bl-form__opt {
	padding: 6px 9px;
	font-size: 14px;
	color: var(--t4-ink2);
	border-color: var(--t4-line);
}
.bl-form--tpl-4 .bl-form__opts .bl-form__opt:hover { border-color: var(--t4-strong); }
.bl-form--tpl-4 .bl-form__counter {
	font-family: var(--t4-mono);
	font-size: 11px;
	letter-spacing: .1em;
}

.bl-form--tpl-4 .bl-form__picker {
	gap: 12px;
	padding: 16px 18px;
	background: var(--t4-panel);
	border-color: var(--t4-strong);
	border-radius: 0;
}
.bl-form--tpl-4 .bl-form__picker-title { color: var(--bl-ink, #1A1F2B); }
.bl-form--tpl-4 .bl-form__prod { border-color: var(--t4-line); }
.bl-form--tpl-4 .bl-form__prod:hover { border-color: var(--t4-strong); }
.bl-form--tpl-4 .bl-form__prod-name {
	font-family: var(--t4-mono);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--bl-ink, #1A1F2B);
}
.bl-form--tpl-4 .bl-form__prod.is-on {
	border-color: var(--bl-orange, #E8550D);
	background: var(--t4-soft);
}
.bl-form--tpl-4 .bl-form__picker-idle { border-color: var(--t4-strong); border-radius: 0; }

.bl-form--tpl-4 .bl-form__info-btn {
	width: 19px;
	height: 19px;
	border-color: var(--t4-strong);
	font-family: var(--t4-mono);
}
.bl-form--tpl-4 .bl-form__info {
	background: var(--t4-soft);
	border-radius: 0;
	color: var(--t4-ink2);
}
.bl-form--tpl-4 .bl-form__info strong { color: var(--bl-ink, #1A1F2B); }
.bl-form--tpl-4 .bl-form__box { border-color: var(--t4-line) !important; }

/* Consents share one panel: the second butts up against the first. */
.bl-form--tpl-4 .bl-form__cell--consent {
	padding: 16px;
	font-size: 13px;
	background: var(--t4-panel);
	border: 1px solid var(--t4-line);
}
.bl-form--tpl-4 .bl-form__cell--consent + .bl-form__cell--consent {
	margin-top: calc(-1 * var(--bl-form-gap));
	padding-top: 0;
	border-top: 0;
}

.bl-form--tpl-4 .bl-form__foot { gap: 14px; margin-top: 22px; padding: 0 30px 30px; }
.bl-form.bl-form--tpl-4 .bl-form__submit {
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	background: var(--bl-orange, #E8550D);
	border: 0;
	border-radius: 3px;
}
.bl-form.bl-form--tpl-4 .bl-form__submit:hover { background: var(--bl-orange-d, #cc480a); }
.bl-form--tpl-4 .bl-form__submit-note { font-size: 12.5px; }
.bl-form--tpl-4.is-done .bl-form__foot { padding-top: 22px; }

/* ==================================================================== */
/* Explanatory copy: the grey line under a label, and the "i" panel      */
/* ==================================================================== */
.bl-form__hint {
	font-size: 13px;
	line-height: 1.45;
	color: var(--bl-muted, #6B7280);
}
.bl-form__info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 7px;
	padding: 0;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: 50%;
	background: #fff;
	color: var(--bl-muted, #6B7280);
	font: 600 11px/1 var(--bl-font, system-ui, sans-serif);
	cursor: pointer;
	vertical-align: middle;
	flex: none;
}
.bl-form__info-btn:hover {
	border-color: var(--bl-orange, #E8550D);
	color: var(--bl-orange, #E8550D);
}
.bl-form__info-btn[aria-expanded="true"] {
	background: var(--bl-orange, #E8550D);
	border-color: var(--bl-orange, #E8550D);
	color: #fff;
}
.bl-form__info {
	border-left: 3px solid var(--bl-orange, #E8550D);
	background: var(--bl-soft, #F6F8FB);
	border-radius: 0 var(--bl-radius, 10px) var(--bl-radius, 10px) 0;
	padding: 11px 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--bl-ink, #1A1F2B);
}
.bl-form__info p { margin: 0 0 7px; }
.bl-form__info p:last-child { margin-bottom: 0; }

/* ==================================================================== */
/* Option groups: bordered choices, optionally in two columns            */
/* ==================================================================== */
.bl-form__opts {
	display: grid;
	gap: 7px;
	margin-top: 2px;
}
.bl-form__opts--two { grid-template-columns: 1fr 1fr; }
.bl-form__opts .bl-form__opt {
	align-items: flex-start;
	gap: 9px;
	padding: 8px 11px;
	font-size: 14px;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}
.bl-form__opts .bl-form__opt:hover { border-color: var(--bl-blue, #1858A8); }
.bl-form__opts .bl-form__opt input { margin-top: 2px; flex: none; }
.bl-form__opts .bl-form__opt.is-off { opacity: .45; cursor: not-allowed; }
.bl-form__opts .bl-form__opt.is-off:hover { border-color: var(--bl-line, #E5E7EB); }

.bl-form__counter {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bl-muted, #6B7280);
	white-space: nowrap;
}
.bl-form__counter.is-full { color: var(--bl-orange, #E8550D); font-weight: 600; }

/* ==================================================================== */
/* Dependent picker — the choices one earlier answer opens up            */
/* ==================================================================== */
.bl-form__cell--matrix { gap: 0; }
.bl-form__picker {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 15px 17px;
	background: var(--bl-soft, #F6F8FB);
	border: 1px solid var(--bl-line, #E5E7EB);
	border-left: 3px solid var(--bl-orange, #E8550D);
	border-radius: 0 var(--bl-radius, 10px) var(--bl-radius, 10px) 0;
}
.bl-form__picker-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}
.bl-form__picker-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bl-navy, #0B2C5A);
}
.bl-form__prodlist { display: grid; gap: 8px; }
.bl-form__prod {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.bl-form__prod:hover { border-color: var(--bl-blue, #1858A8); }
.bl-form__prod input { width: auto; margin-top: 3px; flex: none; }
.bl-form__prod-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--bl-navy, #0B2C5A);
}
.bl-form__prod-desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--bl-muted, #6B7280);
}
.bl-form__prod.is-on {
	border-color: var(--bl-orange, #E8550D);
	background: rgba(232, 85, 13, .06);
}
.bl-form__prod.is-off { opacity: .42; cursor: not-allowed; }
.bl-form__prod.is-off:hover { border-color: var(--bl-line, #E5E7EB); }
.bl-form__picker-idle {
	margin: 0;
	padding: 13px 17px;
	border: 1px dashed var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bl-muted, #6B7280);
}
.bl-form__picker-idle:empty { display: none; }

/* ==================================================================== */
/* Searchable dropdown — the native select keeps the value               */
/* ==================================================================== */
.bl-select { position: relative; }
.bl-form .bl-select__native {
	/* Visually hidden, but still laid out: reportValidity() must be able to
	   focus it, which a display:none control cannot do. */
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	pointer-events: none;
}
.bl-select__btn {
	width: 100%;
	padding: 11px 34px 11px 13px;
	font: inherit;
	font-size: 15px;
	text-align: left;
	color: var(--bl-ink, #1A1F2B);
	background: #fff;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	cursor: pointer;
	position: relative;
}
.bl-select__btn::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--bl-muted, #6B7280);
	border-bottom: 2px solid var(--bl-muted, #6B7280);
	transform: rotate(45deg);
}
.bl-select__btn.is-empty { color: var(--bl-muted, #6B7280); }
.bl-select__btn[aria-expanded="true"] {
	border-color: var(--bl-form-accent);
	box-shadow: 0 0 0 3px rgba(24, 88, 168, .14);
}
.bl-select__panel {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	background: #fff;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	box-shadow: var(--bl-shadow-lg, 0 10px 30px rgba(11, 44, 90, .10));
	padding: 8px;
}
.bl-form .bl-select__search {
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: var(--bl-radius, 10px);
	margin-bottom: 6px;
}
.bl-select__list { max-height: 260px; overflow-y: auto; }
.bl-select__group {
	padding: 8px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bl-muted, #6B7280);
}
.bl-select__opt {
	padding: 8px 10px;
	font-size: 14.5px;
	border-radius: 6px;
	cursor: pointer;
}
.bl-select__opt:hover { background: var(--bl-soft, #F6F8FB); }
.bl-select__opt.is-on {
	background: var(--bl-navy, #0B2C5A);
	color: #fff;
}
.bl-select__empty {
	margin: 0;
	padding: 10px;
	font-size: 13.5px;
	color: var(--bl-muted, #6B7280);
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 560px) {
	.bl-form__cell--w50,
	.bl-form__cell--w33 { flex: 1 1 100%; }
	.bl-form--tpl-1 { padding: 20px; }
	.bl-form--tpl-2 .bl-form__intro { padding: 18px 20px; }
	.bl-form--tpl-2 .bl-form__grid { padding: 18px 20px; }
	.bl-form--tpl-2 .bl-form__foot { padding: 0 20px 20px; }
	.bl-form__opts--two { grid-template-columns: 1fr; }
	.bl-form__picker { padding: 13px 14px; }
	.bl-form--tpl-4 .bl-form__head { padding: 20px 20px 18px; }
	.bl-form--tpl-4 .bl-form__product { padding: 12px 20px 0; }
	.bl-form--tpl-4 .bl-form__grid { padding: 20px 20px 0; }
	.bl-form--tpl-4 .bl-form__foot { padding: 0 20px 22px; }
}