/**
 * EMPOLAS B2B registration form styles (0.3.2 UI refresh, widened in 0.12.8).
 * All rules are scoped under .empolas-b2b-register so WooCommerce and theme
 * forms are never affected. Uses EMPOLAS theme tokens with safe fallbacks.
 */

.empolas-b2b-register {
	/* 0.12.8: the form used to be capped at 760 px, which left the two-column
	   grid narrow on desktop while the page around it ran full width. The cap
	   is a maximum, not a width — with `width: 100%` and horizontal padding the
	   layout still shrinks freely on small screens. */
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	font-size: 16px;
	color: var(--empolas-ink, #111827);
	box-sizing: border-box;
}

.empolas-b2b-register *,
.empolas-b2b-register *::before,
.empolas-b2b-register *::after {
	box-sizing: border-box;
}

/* --- Section cards --------------------------------------------------- */

.empolas-b2b-register fieldset.empolas-b2b-card {
	border: 1px solid var(--empolas-border, #d8e1ea);
	border-radius: var(--empolas-radius, 10px);
	background: var(--empolas-surface, #f5f8fb);
	padding: 24px;
	margin: 0 0 32px 0;
	min-inline-size: 0;
}

.empolas-b2b-register .empolas-b2b-card legend {
	color: var(--empolas-blue, #0e4176);
	font-size: 1.25em;
	font-weight: 700;
	padding: 0 8px;
	margin-left: -8px;
}

.empolas-b2b-register .empolas-b2b-card__hint {
	margin: 4px 0 20px 0;
	color: var(--empolas-muted, #4b5563);
}

/* --- Grid layout ------------------------------------------------------ */

.empolas-b2b-register .empolas-b2b-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}

.empolas-b2b-register .empolas-b2b-field--full {
	grid-column: 1 / -1;
}

.empolas-b2b-register .empolas-b2b-field {
	margin: 0;
	min-width: 0;
}

/* --- Labels and inputs ------------------------------------------------ */

.empolas-b2b-register .empolas-b2b-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.empolas-b2b-register .empolas-b2b-field input[type="text"],
.empolas-b2b-register .empolas-b2b-field input[type="email"],
.empolas-b2b-register .empolas-b2b-field input[type="tel"] {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font-size: 16px;
	color: var(--empolas-ink, #111827);
	background: var(--empolas-white, #ffffff);
	border: 1px solid var(--empolas-border, #d8e1ea);
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	box-sizing: border-box;
}

.empolas-b2b-register input:focus-visible,
.empolas-b2b-register button:focus-visible,
.empolas-b2b-register a:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 2px;
}

.empolas-b2b-register .empolas-b2b-field--error input {
	border-color: var(--empolas-red, #c61618);
}

.empolas-b2b-register .empolas-b2b-field__error {
	display: block;
	margin-top: 4px;
	color: var(--empolas-red, #c61618);
}

/* Red, not blue (0.12.23): the asterisk marks an obligation, and red is what
   the rest of the form already uses for "this needs your attention" — the field
   error message below it is the same colour. */
.empolas-b2b-register .empolas-b2b-required {
	color: var(--empolas-red, #c61618);
}

/* --- Notices ---------------------------------------------------------- */

.empolas-b2b-register .empolas-b2b-notice {
	border-radius: var(--empolas-radius, 10px);
	padding: 14px 18px;
	margin: 0 0 24px 0;
	border: 1px solid var(--empolas-border, #d8e1ea);
}

.empolas-b2b-register .empolas-b2b-notice--error {
	border-color: var(--empolas-red, #c61618);
	background: #fdf2f2;
}

.empolas-b2b-register .empolas-b2b-notice--success {
	border-color: var(--empolas-green, #92c72f);
	background: #f4fae8;
}

/* --- Delivery address cards ------------------------------------------- */

.empolas-b2b-register .empolas-b2b-delivery-block {
	border: 1px solid var(--empolas-border, #d8e1ea);
	border-radius: var(--empolas-radius, 10px);
	background: var(--empolas-white, #ffffff);
	padding: 20px;
	margin: 0 0 20px 0;
}

.empolas-b2b-register .empolas-b2b-delivery-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.empolas-b2b-register .empolas-b2b-delivery-block__title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--empolas-blue, #0e4176);
}

/* --- Buttons ---------------------------------------------------------- */

.empolas-b2b-register .empolas-b2b-button-secondary,
.empolas-b2b-register .empolas-b2b-remove-address {
	display: inline-block;
	min-height: 44px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	background: transparent;
	color: var(--empolas-blue, #0e4176);
	border: 2px solid var(--empolas-blue, #0e4176);
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.empolas-b2b-register .empolas-b2b-button-secondary:hover,
.empolas-b2b-register .empolas-b2b-remove-address:hover {
	background: var(--empolas-blue, #0e4176);
	color: var(--empolas-white, #ffffff);
}

.empolas-b2b-register .empolas-b2b-remove-address {
	min-height: 40px;
	padding: 6px 14px;
	font-size: 15px;
}

/* The submit button is the one control themes reliably restyle: a theme rule
   like `.woocommerce button[type="submit"]` outranks a single class, which is
   how the button ended up in the theme's own colours. Repeating the class and
   qualifying by element raises specificity above those rules without resorting
   to `!important`, and the colours are stated on the button and its states so
   no inherited link/button colour can leak in. */
.empolas-b2b-register button.empolas-b2b-submit.empolas-b2b-submit {
	display: inline-block;
	min-height: 52px;
	padding: 14px 36px;
	font-size: 17px;
	font-weight: 700;
	color: var(--empolas-white, #ffffff);
	background: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	background-color: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	border: 0;
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.empolas-b2b-register button.empolas-b2b-submit.empolas-b2b-submit:hover,
.empolas-b2b-register button.empolas-b2b-submit.empolas-b2b-submit:focus,
.empolas-b2b-register button.empolas-b2b-submit.empolas-b2b-submit:active {
	color: var(--empolas-white, #ffffff);
	background-color: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	filter: brightness(0.92);
}

.empolas-b2b-register button.empolas-b2b-submit:disabled,
.empolas-b2b-register button.empolas-b2b-submit[aria-busy="true"] {
	opacity: 0.65;
	cursor: progress;
}

/* --- Responsive ------------------------------------------------------- */

/* Wider viewports get a third column; the shared `--full` span still stretches
   across whatever number of columns is active, so no field can be orphaned. */
@media (min-width: 1024px) {
	.empolas-b2b-register .empolas-b2b-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.empolas-b2b-register {
		padding: 0 12px;
	}

	.empolas-b2b-register .empolas-b2b-grid {
		grid-template-columns: 1fr;
	}

	.empolas-b2b-register fieldset.empolas-b2b-card {
		padding: 16px;
	}

	.empolas-b2b-register .empolas-b2b-delivery-block {
		padding: 14px;
	}

	.empolas-b2b-register .empolas-b2b-delivery-block__head {
		flex-wrap: wrap;
	}

	.empolas-b2b-register button.empolas-b2b-submit.empolas-b2b-submit {
		display: block;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.empolas-b2b-register * {
		transition: none !important;
	}
}

/* --- Wizard (0.12.13) -------------------------------------------------- */

/* Steps render visible and the script hides all but the current one. If the
   script never runs the applicant keeps the whole form, so nothing here may
   hide a step by itself. */
.empolas-b2b-register .empolas-b2b-step {
	margin: 0;
}

.empolas-b2b-register .empolas-b2b-step[hidden] {
	display: none;
}

.empolas-b2b-register .empolas-b2b-step:focus {
	outline: none;
}

.empolas-b2b-register .empolas-b2b-step:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 4px;
}

/* The step heading, its counter and its hint were removed in 0.12.23 — the
   progress indicator above the form already names the step. Their rules are
   deleted rather than left behind as dead selectors. */

/* --- Progress indicator ------------------------------------------------ */

.empolas-b2b-register .empolas-b2b-progress {
	margin: 0 0 24px 0;
}

.empolas-b2b-register .empolas-b2b-progress__list {
	display: grid;
	/* Equal columns so the bar cannot reflow when a step gains its error note. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.empolas-b2b-register .empolas-b2b-progress__item {
	margin: 0;
}

.empolas-b2b-register .empolas-b2b-progress__button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	text-align: left;
	font: inherit;
	font-size: 15px;
	color: var(--empolas-muted, #4b5563);
	background: transparent;
	border: 0;
	/* The state line: colour alone never carries meaning. */
	border-top: 4px solid var(--empolas-border, #d8e1ea);
	border-radius: 0;
	cursor: pointer;
}

.empolas-b2b-register .empolas-b2b-progress__button:disabled {
	cursor: default;
	opacity: 0.75;
}

.empolas-b2b-register .empolas-b2b-progress__button:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 2px;
}

.empolas-b2b-register .empolas-b2b-progress__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	border-radius: 50%;
	background: var(--empolas-border, #d8e1ea);
	color: var(--empolas-ink, #111827);
	font-size: 14px;
	font-weight: 700;
}

.empolas-b2b-register .empolas-b2b-progress__label {
	font-weight: 600;
	line-height: 1.3;
}

.empolas-b2b-register .empolas-b2b-progress__state {
	font-size: 13px;
	font-weight: 700;
	color: var(--empolas-red, #c61618);
}

.empolas-b2b-register .empolas-b2b-progress__item.is-done .empolas-b2b-progress__button {
	border-top-color: var(--empolas-green, #92c72f);
	color: var(--empolas-ink, #111827);
}

.empolas-b2b-register .empolas-b2b-progress__item.is-done .empolas-b2b-progress__number {
	background: var(--empolas-green, #92c72f);
}

.empolas-b2b-register .empolas-b2b-progress__item.is-current .empolas-b2b-progress__button {
	border-top-color: var(--empolas-blue, #0e4176);
	color: var(--empolas-blue, #0e4176);
}

.empolas-b2b-register .empolas-b2b-progress__item.is-current .empolas-b2b-progress__number {
	background: var(--empolas-blue, #0e4176);
	color: var(--empolas-white, #ffffff);
}

.empolas-b2b-register .empolas-b2b-progress__item.has-error .empolas-b2b-progress__button {
	border-top-color: var(--empolas-red, #c61618);
}

.empolas-b2b-register .empolas-b2b-progress__item.has-error .empolas-b2b-progress__number {
	background: var(--empolas-red, #c61618);
	color: var(--empolas-white, #ffffff);
}

/* --- Step navigation --------------------------------------------------- */

/* Back on the left, Continue on the right — the same on every step (0.12.28).
   Until now both buttons simply sat next to each other at the left edge, so
   "Zpět" and "Pokračovat" were adjacent and the applicant had to read them to
   tell them apart. Separating them puts the two directions of travel on the two
   sides of the form, which is the arrangement people already expect. */
.empolas-b2b-register .empolas-b2b-step__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 32px 0;
}

/* `margin-left: auto` rather than `justify-content: space-between`, because the
   first step has no Back button. With space-between a lone Continue would sit
   at the *left* edge — the one place it must never be — while auto margin puts
   it right whether or not it has a neighbour. On the last step, where only Back
   remains, nothing pushes it and it stays left. */
.empolas-b2b-register .empolas-b2b-step__nav .empolas-b2b-button-next {
	margin-left: auto;
}

/* Both buttons in the row are the same height, so the pair reads as one control
   rather than two unrelated ones; the shared secondary button style is 44px and
   is left alone because it is used elsewhere at that size. */
.empolas-b2b-register .empolas-b2b-step__nav .empolas-b2b-button-secondary {
	min-height: 48px;
}

.empolas-b2b-register .empolas-b2b-step__nav[hidden] {
	display: none;
}

/* Continue is the primary action of a step and matches the final submit, so the
   applicant never has to wonder which button moves them forward. */
.empolas-b2b-register button.empolas-b2b-button-next {
	display: inline-block;
	min-height: 48px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 700;
	color: var(--empolas-white, #ffffff);
	background-color: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	border: 0;
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.empolas-b2b-register button.empolas-b2b-button-next:hover,
.empolas-b2b-register button.empolas-b2b-button-next:focus,
.empolas-b2b-register button.empolas-b2b-button-next:active {
	color: var(--empolas-white, #ffffff);
	filter: brightness(0.92);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 780px) {
	.empolas-b2b-register .empolas-b2b-progress__list {
		/* Two rows of two instead of four cramped columns; the labels stay
		   readable rather than wrapping to one word per line. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.empolas-b2b-register .empolas-b2b-progress__list {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.empolas-b2b-register .empolas-b2b-progress__button {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		border-top: 0;
		/* On one column a left rule reads as a list marker rather than a broken
		   progress bar. */
		border-left: 4px solid var(--empolas-border, #d8e1ea);
		padding: 8px 12px;
	}

	.empolas-b2b-register .empolas-b2b-progress__item.is-done .empolas-b2b-progress__button {
		border-left-color: var(--empolas-green, #92c72f);
	}

	.empolas-b2b-register .empolas-b2b-progress__item.is-current .empolas-b2b-progress__button {
		border-left-color: var(--empolas-blue, #0e4176);
	}

	.empolas-b2b-register .empolas-b2b-progress__item.has-error .empolas-b2b-progress__button {
		border-left-color: var(--empolas-red, #c61618);
	}

	/* Kept as a row on small screens too (0.12.28). Stacking them used to put
	   Continue above Back, which reversed the left/right relationship the rest
	   of the wizard teaches and made the pair inconsistent at exactly the width
	   where a mis-tap costs the most. Both labels are one short word, so a row
	   fits comfortably; Back takes only the space it needs and Continue takes
	   the rest, which also makes the primary action the bigger target. */
	.empolas-b2b-register .empolas-b2b-step__nav {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}

	.empolas-b2b-register .empolas-b2b-step__nav .empolas-b2b-button-secondary {
		flex: 0 1 auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	.empolas-b2b-register .empolas-b2b-step__nav .empolas-b2b-button-next {
		flex: 1 1 auto;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Step guidance (0.12.15): advice about the step, not an error and not a field
   label, so it reads as a calm note rather than a warning. */
.empolas-b2b-register .empolas-b2b-step__guidance {
	margin: 0 0 20px 0;
	padding: 12px 14px;
	border-left: 4px solid var(--empolas-blue, #0e4176);
	border-radius: calc(var(--empolas-radius, 10px) - 6px);
	background: var(--empolas-surface, #f5f8fb);
	color: var(--empolas-ink, #111827);
	line-height: 1.5;
}

/* --- ARES lookup and "same as billing" (0.12.18) ----------------------- */

/* Rendered hidden and revealed by the script: a button that cannot work must
   not be offered. */
.empolas-b2b-register .empolas-b2b-ares[hidden] {
	display: none;
}

.empolas-b2b-register .empolas-b2b-ares {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: end;
}

.empolas-b2b-register .empolas-b2b-ares__status {
	color: var(--empolas-muted, #4b5563);
	line-height: 1.4;
}

.empolas-b2b-register .empolas-b2b-same-address {
	padding: 12px 14px;
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	background: var(--empolas-surface, #f5f8fb);
	border: 1px solid var(--empolas-border, #d8e1ea);
}

.empolas-b2b-register .empolas-b2b-same-address label {
	display: inline;
	font-weight: 700;
}

.empolas-b2b-register .empolas-b2b-same-address .empolas-b2b-card__hint {
	display: block;
	margin-top: 4px;
	color: var(--empolas-muted, #4b5563);
}

/* Copied fields stay visible and posted, just not editable. */
.empolas-b2b-register .empolas-b2b-field input[readonly] {
	background: var(--empolas-surface, #f5f8fb);
	color: var(--empolas-muted, #4b5563);
}

/* Restored draft notice (0.12.19). */
.empolas-b2b-register .empolas-b2b-draft-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	border-color: var(--empolas-blue, #0e4176);
	background: var(--empolas-surface, #f5f8fb);
}

.empolas-b2b-register .empolas-b2b-draft-notice__discard {
	min-height: 40px;
	padding: 6px 14px;
	font: inherit;
	font-weight: 600;
	color: var(--empolas-blue, #0e4176);
	background: transparent;
	border: 2px solid var(--empolas-blue, #0e4176);
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	cursor: pointer;
}

.empolas-b2b-register .empolas-b2b-draft-notice__discard:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 2px;
}

/* --- Form heading (0.12.23) -------------------------------------------- */

/* Centred: it is the title of the page as far as the applicant is concerned,
   and the progress indicator directly beneath it is centred too. */
.empolas-b2b-register > .empolas-b2b-form > h2,
.empolas-b2b-register .empolas-b2b-wizard > h2 {
	text-align: center;
	margin: 0 0 20px 0;
}

/* --- Signed-in notice (0.12.23) ---------------------------------------- */

/* A visitor who is already signed in cannot register again. The message used to
   be a bare paragraph, which read like a dead end; it is now a panel that also
   offers the two places they were probably heading for. */
.empolas-b2b-register .empolas-b2b-register__signed-in {
	max-width: 640px;
	margin: 32px auto;
	padding: 28px 24px;
	text-align: center;
	border: 1px solid var(--empolas-border, #d8e1ea);
	border-radius: var(--empolas-radius, 10px);
	background: var(--empolas-surface, #f5f8fb);
}

.empolas-b2b-register .empolas-b2b-register__signed-in-text {
	margin: 0 0 20px 0;
	font-size: 1.1em;
	line-height: 1.5;
	color: var(--empolas-text, #1f2933);
}

.empolas-b2b-register .empolas-b2b-register__signed-in-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

/* The links are actions, so they look like the form's buttons rather than like
   body copy. `--primary` marks the catalogue as the likelier destination. */
.empolas-b2b-register .empolas-b2b-register__signed-in-actions .empolas-b2b-button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--empolas-radius, 10px);
	border: 1px solid var(--empolas-border, #d8e1ea);
	background: #fff;
	color: var(--empolas-text, #1f2933);
	font-weight: 600;
	text-decoration: none;
}

.empolas-b2b-register .empolas-b2b-register__signed-in-actions .empolas-b2b-button--primary {
	background: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	border-color: var(--empolas-commerce-green, var(--empolas-green, #92c72f));
	color: #fff;
}

.empolas-b2b-register .empolas-b2b-register__signed-in-actions .empolas-b2b-button:hover,
.empolas-b2b-register .empolas-b2b-register__signed-in-actions .empolas-b2b-button:focus-visible {
	text-decoration: underline;
}

/* --- Step 1: the ARES prefill shortcut (0.12.30) ------------------------- */

/* Visually a helper above the form, not the first of its fields: IČO is
   optional and the grid below is ordered required-first, so the shortcut needs
   to read as a separate offer rather than as the field an applicant must start
   with. */
.empolas-b2b-register .empolas-b2b-prefill {
	margin: 0 0 24px 0;
	padding: 16px 18px;
	border: 1px dashed var(--empolas-border, #d8e1ea);
	border-radius: var(--empolas-radius, 10px);
	background: var(--empolas-surface, #f5f8fb);
}

.empolas-b2b-register .empolas-b2b-prefill__lead {
	margin: 0 0 14px 0;
	color: var(--empolas-muted, #4b5563);
	line-height: 1.5;
}

/* --- Step 3: delivery defaults to billing (0.12.30) ---------------------- */

.empolas-b2b-register .empolas-b2b-delivery-default {
	margin: 0 0 12px 0;
	line-height: 1.5;
}

/* Emphasised in 0.12.31: this is the only thing on the step an applicant may
   need to act on, and as muted body text it read as a footnote to the sentence
   above it. It is now a panel in the brand blue — the same colour as the word
   that opens it — so the option is found without being hunted for. Only the
   presentation changed; the disclosure and the posted field are untouched. */
.empolas-b2b-register .empolas-b2b-delivery-other__summary {
	display: block;
	padding: 14px 16px;
	margin: 0 0 4px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--empolas-blue, #0e4176);
	background: var(--empolas-white, #ffffff);
	border: 2px solid var(--empolas-blue, #0e4176);
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.empolas-b2b-register .empolas-b2b-delivery-other__summary:hover {
	background: var(--empolas-surface, #f5f8fb);
}

/* The default marker competes with the words that are the actual control. */
.empolas-b2b-register .empolas-b2b-delivery-other__summary::-webkit-details-marker {
	display: none;
}

.empolas-b2b-register .empolas-b2b-delivery-other__summary::marker {
	content: '';
}

.empolas-b2b-register .empolas-b2b-delivery-other__toggle {
	color: var(--empolas-blue, #0e4176);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.empolas-b2b-register .empolas-b2b-delivery-other__summary:hover .empolas-b2b-delivery-other__toggle,
.empolas-b2b-register .empolas-b2b-delivery-other__summary:focus-visible .empolas-b2b-delivery-other__toggle {
	text-decoration: none;
}

.empolas-b2b-register .empolas-b2b-delivery-other__summary:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 2px;
}

.empolas-b2b-register .empolas-b2b-delivery-other[open] > .empolas-b2b-delivery-other__summary {
	margin-bottom: 16px;
}

/* --- Step 4: the last step is one reassuring sentence (0.12.30) ---------- */

/* Centred and larger: this step has no fields, so the message is the content
   rather than a caption above something else. */
.empolas-b2b-register .empolas-b2b-finish__lead {
	margin: 8px 0 12px 0;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--empolas-blue, #0e4176);
}

.empolas-b2b-register .empolas-b2b-finish__note {
	margin: 0 0 28px 0;
	text-align: center;
	color: var(--empolas-muted, #4b5563);
	line-height: 1.5;
}

/* The submit sits where "Pokračovat" sat on every previous step, so the
   forward action never moves. Same mechanism as the step navigation: an auto
   left margin rather than a justification, so it is right-aligned whether or
   not anything shares the row. */
.empolas-b2b-register .empolas-b2b-finish__submit {
	display: flex;
	margin: 0 0 8px 0;
}

.empolas-b2b-register .empolas-b2b-finish__submit .empolas-b2b-submit {
	margin-left: auto;
}

@media (max-width: 480px) {
	.empolas-b2b-register .empolas-b2b-finish__lead {
		font-size: 18px;
	}

	/* Full width on a phone: it is the primary action of the whole form. */
	.empolas-b2b-register .empolas-b2b-finish__submit .empolas-b2b-submit {
		display: block;
		width: 100%;
	}
}

/* --- The finish step needs air above it (0.12.31) ------------------------ */

/* The progress indicator sits directly above the steps with 24px beneath it.
   On the last step there are no fields between that bar and the centred
   message, so the two read as one block and the message looks like a caption
   for the step numbering rather than the step's own content. The other steps
   open with a card that provides the separation themselves, which is why only
   this one needs it stated. */
.empolas-b2b-register #empolas-b2b-step-finish {
	margin-top: 32px;
}

@media (max-width: 480px) {
	.empolas-b2b-register #empolas-b2b-step-finish {
		margin-top: 24px;
	}
}