/**
 * Form Manager — visitor-facing form styles (3 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).
 */

.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 {
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	color: var(--bl-muted, #6B7280);
	cursor: pointer;
}
.bl-form__cell--consent input { width: auto; margin-top: 3px; }

.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);
}

/* ---- 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; }
}