/* Formularz pomiaru wkładki – Beztroska
   Stylistyka spójna z motywem Elessi: Nunito Sans, czerń/biel/szarości,
   ostre krawędzie, uppercase z rozstrzelonym literowaniem. */

.bpw-wrap,
.bpw-wrap *,
.bpw-wrap *::before,
.bpw-wrap *::after {
	box-sizing: border-box;
}

.bpw-wrap {
	--bpw-black: #0a0808;
	--bpw-ink: #333;
	--bpw-label: #4d4d4d;
	--bpw-muted: #999;
	--bpw-line: #dedede;
	--bpw-line-soft: #ececec;
	--bpw-soft: #f7f7f7;
	--bpw-dim: #8f8f8f;
	--bpw-done: #333;
	--bpw-done-bg: #efefef;
	--bpw-error: #e02b27;
	--bpw-error-soft: #fdf3f3;
	--bpw-font: "Nunito Sans", Arial, Helvetica, sans-serif;
	--bpw-sticky-top: 96px;

	font-family: var(--bpw-font);
	color: var(--bpw-ink);
	max-width: 1140px;
	margin: 0 auto;
}

.bpw-grid {
	display: grid;
	grid-template-columns: minmax(300px, 400px) 1fr;
	gap: clamp(20px, 3vw, 50px);
	/* Kolumny rozciągają się do wysokości rzędu – sticky potrzebuje
	   wysokiego rodzica, w którym może się przesuwać. */
	align-items: stretch;
}

.bpw-col--diagram { min-width: 0; }
.bpw-col--fields { min-width: 0; }

@media (max-width: 900px) {
	.bpw-grid { grid-template-columns: 1fr; }
	.bpw-diagram-sticky { position: static !important; max-height: none !important; }
	.bpw-svg { max-height: 62vh; }
}

/* ------------------------------------------------------------------ */
/* Karta ze schematem                                                  */
/* ------------------------------------------------------------------ */

.bpw-diagram-sticky {
	position: sticky;
	top: var(--bpw-sticky-top);
	max-height: calc(100vh - var(--bpw-sticky-top) - 24px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bpw-line);
	padding: 20px 16px 14px;
}

.bpw-diagram-title {
	margin: 0 4px 12px;
	font-family: var(--bpw-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--bpw-black);
}

.bpw-svg {
	width: 100%;
	height: auto;
	flex: 1 1 auto;
	min-height: 0;
	max-height: calc(100vh - var(--bpw-sticky-top) - 140px);
	display: block;
}

.bpw-diagram-hint {
	margin: 10px 4px 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bpw-muted);
	min-height: 2.9em;
	transition: color 0.2s;
}
.bpw-diagram-hint--active { color: var(--bpw-black); font-weight: 700; }

/* ------------------------------------------------------------------ */
/* SVG                                                                 */
/* ------------------------------------------------------------------ */

.bpw-outline { fill: #fff; stroke: var(--bpw-black); stroke-width: 4; }
.bpw-seam-line { stroke: var(--bpw-black); stroke-width: 3; fill: none; }
.bpw-slot { stroke: var(--bpw-black); stroke-width: 8; stroke-linecap: butt; }
.bpw-slot-tick { stroke: var(--bpw-black); stroke-width: 5; stroke-linecap: butt; }
.bpw-crotch { stroke: var(--bpw-black); stroke-width: 6; stroke-linecap: butt; }
.bpw-strap { stroke: var(--bpw-black); stroke-width: 3; }
.bpw-arrowhead { fill: var(--bpw-dim); }

.bpw-dim { cursor: pointer; }
.bpw-hit { stroke: transparent; stroke-width: 26; fill: none; pointer-events: stroke; }
.bpw-dim-line { stroke: var(--bpw-dim); stroke-width: 3; transition: stroke 0.15s, stroke-width 0.15s; pointer-events: none; }
.bpw-dotted { stroke-dasharray: 7 7; }
.bpw-lbl {
	fill: var(--bpw-dim);
	font: 600 30px/1 "Nunito Sans", Arial, sans-serif;
	text-anchor: middle;
	pointer-events: none;
	transition: fill 0.15s;
}

/* Wymiar zapisany – ciemna, pewna kreska */
.bpw-dim.bpw-done .bpw-dim-line { stroke: var(--bpw-done); stroke-width: 4; }
.bpw-dim.bpw-done .bpw-lbl { fill: var(--bpw-done); font-weight: 700; }

/* Wymiar aktywny – czarna, pulsująca kreska */
.bpw-dim.bpw-active .bpw-dim-line,
.bpw-dim:hover .bpw-dim-line {
	stroke: var(--bpw-black);
	stroke-width: 6;
}
.bpw-dim.bpw-active .bpw-lbl,
.bpw-dim:hover .bpw-lbl { fill: var(--bpw-black); font-weight: 800; }
.bpw-dim.bpw-active .bpw-dim-line { animation: bpw-thread 1.1s ease-in-out infinite; }

@keyframes bpw-thread {
	0%, 100% { stroke-width: 6; }
	50% { stroke-width: 8; }
}
@media (prefers-reduced-motion: reduce) {
	.bpw-dim.bpw-active .bpw-dim-line { animation: none; }
}

/* Przełączanie wersji pasów */
.bpw-version--connected .bpw-v-classic { display: none; }
.bpw-version--classic .bpw-v-connected { display: none; }
.bpw-version--connected .bpw-meas--classic-only { display: none; }

/* ------------------------------------------------------------------ */
/* Sekcje                                                              */
/* ------------------------------------------------------------------ */

.bpw-section {
	border: 1px solid var(--bpw-line);
	background: #fff;
	padding: 26px 28px 20px;
	margin: 0 0 24px;
}

.bpw-section legend {
	font-family: var(--bpw-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--bpw-black);
	padding: 0 12px;
}
.bpw-section legend .bpw-step-no {
	color: var(--bpw-muted);
	margin-right: 8px;
}

/* Pola */
.bpw-field { margin: 0 0 16px; }
.bpw-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bpw-label);
	margin-bottom: 6px;
}
.bpw-field input[type="text"],
.bpw-field input[type="email"],
.bpw-field input[type="tel"],
.bpw-field select,
.bpw-field textarea {
	width: 100%;
	border: 1px solid var(--bpw-line);
	border-radius: 0;
	padding: 10px 12px;
	font-family: var(--bpw-font);
	font-size: 14.5px;
	background: #fff;
	color: var(--bpw-ink);
	transition: border-color 0.15s;
}
.bpw-field input:focus, .bpw-field select:focus, .bpw-field textarea:focus,
.bpw-meas__input input:focus {
	outline: none;
	border-color: var(--bpw-black);
	box-shadow: none;
}
.bpw-field-note { display: block; font-size: 12px; color: var(--bpw-muted); margin-top: 5px; font-weight: 400; }
.bpw-req { color: var(--bpw-error); }

.bpw-field--consent label { font-weight: 400; font-size: 13px; line-height: 1.6; color: var(--bpw-label); }
.bpw-field--consent input { margin-right: 6px; accent-color: var(--bpw-black); }

/* Karty wyboru wersji */
.bpw-version-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .bpw-version-toggle { grid-template-columns: 1fr; } }

.bpw-version-card {
	display: block;
	border: 1px solid var(--bpw-line);
	background: #fff;
	padding: 16px 18px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	position: relative;
}
.bpw-version-card:hover { border-color: var(--bpw-black); }
.bpw-version-card:has(input:checked) {
	border: 1px solid var(--bpw-black);
	background: var(--bpw-soft);
	box-shadow: inset 0 0 0 1px var(--bpw-black);
}
.bpw-version-card input { margin-right: 8px; accent-color: var(--bpw-black); }
.bpw-version-card__title {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--bpw-black);
}
.bpw-version-card__desc { display: block; font-size: 12.5px; color: var(--bpw-muted); margin-top: 5px; line-height: 1.45; }

/* ------------------------------------------------------------------ */
/* Miarka postępu                                                      */
/* ------------------------------------------------------------------ */

.bpw-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 18px;
}
.bpw-progress__bar {
	flex: 1;
	height: 12px;
	border: 1px solid var(--bpw-line);
	background:
		repeating-linear-gradient(90deg,
			transparent 0, transparent 8px,
			rgba(10, 8, 8, 0.12) 8px, rgba(10, 8, 8, 0.12) 9px),
		#fff;
	overflow: hidden;
	position: relative;
}
.bpw-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: var(--bpw-black);
	transition: width 0.35s ease;
}
.bpw-progress__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	white-space: nowrap;
	color: var(--bpw-muted);
}
.bpw-progress__label strong { color: var(--bpw-black); }

/* ------------------------------------------------------------------ */
/* Lista pomiarów                                                      */
/* ------------------------------------------------------------------ */

.bpw-group-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--bpw-muted);
	margin: 22px 0 10px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.bpw-group-title::after { content: ""; flex: 1; border-top: 1px solid var(--bpw-line-soft); }

.bpw-meas-list { display: flex; flex-direction: column; gap: 4px; }

.bpw-meas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1px solid transparent;
	padding: 8px 10px;
	transition: background 0.15s, border-color 0.15s;
	scroll-margin: 130px;
}
.bpw-meas:hover { background: var(--bpw-soft); }
.bpw-meas.bpw-active { background: var(--bpw-soft); border-color: var(--bpw-black); }
.bpw-meas.bpw-done:not(.bpw-active) { background: #fbfbfb; }
.bpw-meas.bpw-error { border-color: var(--bpw-error); background: var(--bpw-error-soft); }

.bpw-meas label { display: flex; align-items: baseline; gap: 12px; margin: 0; cursor: pointer; flex: 1; }
.bpw-meas__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 26px;
	padding: 0 5px;
	border: 1px solid var(--bpw-black);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	background: #fff;
	color: var(--bpw-black);
	transition: background 0.15s, color 0.15s;
	position: relative;
}
.bpw-meas.bpw-active .bpw-meas__key { background: var(--bpw-black); color: #fff; }
.bpw-meas.bpw-done .bpw-meas__key { background: var(--bpw-black); color: #fff; }
.bpw-meas.bpw-done .bpw-meas__key::after {
	content: "✓";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--bpw-black);
	color: var(--bpw-black);
	font-size: 9px;
	line-height: 12px;
	text-align: center;
}
.bpw-meas__desc { font-size: 13.5px; line-height: 1.4; color: var(--bpw-ink); }

.bpw-meas__input { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bpw-meas__input input {
	width: 86px;
	border: 1px solid var(--bpw-line);
	border-radius: 0;
	padding: 9px 11px;
	font-family: var(--bpw-font);
	font-size: 14.5px;
	text-align: right;
	background: #fff;
	color: var(--bpw-ink);
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s;
}
.bpw-meas.bpw-error .bpw-meas__input input { border-color: var(--bpw-error); }
.bpw-unit { font-size: 12.5px; color: var(--bpw-muted); }

/* Honeypot */
.bpw-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; margin: 0; }

/* ------------------------------------------------------------------ */
/* Pływająca miniatura schematu                                        */
/* ------------------------------------------------------------------ */

.bpw-mini {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 9990;
	width: 124px;
	background: #fff;
	border: 1px solid var(--bpw-black);
	padding: 10px 8px 6px;
	box-shadow: 0 10px 30px -12px rgba(10, 8, 8, 0.4);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.bpw-mini.bpw-mini--visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.bpw-mini--open { width: min(280px, calc(100vw - 28px)); cursor: zoom-out; }

.bpw-mini svg { width: 100%; height: auto; max-height: 46vh; display: block; }

.bpw-mini__hint {
	margin: 5px 3px 2px;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--bpw-muted);
	display: none;
}
.bpw-mini--open .bpw-mini__hint { display: block; font-size: 12px; }
.bpw-mini__hint:empty { display: none !important; }
.bpw-mini--highlight .bpw-mini__hint { color: var(--bpw-black); font-weight: 700; }

.bpw-mini__badge {
	position: absolute;
	top: -9px;
	left: 10px;
	background: var(--bpw-black);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 3px 9px;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bpw-mini { transition: opacity 0.2s; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Wysyłka i komunikaty                                                */
/* ------------------------------------------------------------------ */

.bpw-submit-row { margin: 12px 0 8px; }
.bpw-submit {
	display: inline-block;
	width: 100%;
	background: var(--bpw-black);
	color: #fff;
	border: 1px solid var(--bpw-black);
	border-radius: 0;
	padding: 0 30px;
	line-height: 46px;
	font-family: var(--bpw-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.bpw-submit:hover { background: #fff; color: var(--bpw-black); }
.bpw-submit:disabled { opacity: 0.55; cursor: wait; background: var(--bpw-black); color: #fff; }

.bpw-notice {
	padding: 13px 17px;
	margin-bottom: 20px;
	font-size: 13.5px;
}
.bpw-notice--error { background: var(--bpw-error-soft); border: 1px solid var(--bpw-error); color: var(--bpw-error); }

.bpw-success {
	border: 1px solid var(--bpw-black);
	background: #fff;
	padding: 44px 36px;
	text-align: center;
}
.bpw-success h3 {
	margin: 0 0 12px;
	font-family: var(--bpw-font);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--bpw-black);
}
.bpw-success p { color: var(--bpw-label); margin: 0; font-size: 14px; }

/* Wejście sekcji */
@media (prefers-reduced-motion: no-preference) {
	.bpw-col--fields .bpw-section {
		animation: bpw-rise 0.5s ease backwards;
	}
	.bpw-col--fields .bpw-section:nth-child(1) { animation-delay: 0.05s; }
	.bpw-col--fields .bpw-section:nth-child(2) { animation-delay: 0.12s; }
	.bpw-col--fields .bpw-section:nth-child(3) { animation-delay: 0.19s; }
	.bpw-col--fields .bpw-section:nth-child(4) { animation-delay: 0.26s; }
	@keyframes bpw-rise {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}
}