/* Best Lombard cabinet — modern UI, brand-aligned (#7c2633, Roboto). */
.bl-cabinet {
	--blc-brand: #7c2633;
	--blc-brand-dark: #641d28;
	--blc-brand-soft: #f7edef;
	--blc-ink: #1f1f1f;
	--blc-text: #56585c;
	--blc-muted: #9a9ba0;
	--blc-line: #ececee;
	--blc-surface: #ffffff;
	--blc-bg: #f6f6f7;
	--blc-ok: #2e7d51;
	--blc-danger: #c0392b;
	--blc-radius: 16px;
	--blc-radius-sm: 11px;
	--blc-shadow: 0 6px 26px rgba(20, 20, 20, 0.07);
	--blc-shadow-brand: 0 10px 26px rgba(124, 38, 51, 0.16);

	width: 100%;
	margin: 0 auto;
	font-family: Roboto, system-ui, -apple-system, sans-serif;
	color: var(--blc-text);
	-webkit-font-smoothing: antialiased;
}

/* Forms stay a comfortable narrow column, centered, even on wide screens. */
.blc-steps,
.blc-auth,
.blc-pay,
.blc-result {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* The cabinet uses the full content width of the site. Contracts are always
   one column: tiling them two-up made the layout jump whenever one opened. */
.blc-cab {
	width: 100%;
}

.blc-contracts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

.bl-cabinet *,
.bl-cabinet *::before,
.bl-cabinet *::after {
	box-sizing: border-box;
}

.bl-cabinet svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Stepper ---------- */
.blc-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 26px;
	max-width: 420px;
}

.blc-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: var(--blc-muted);
}

.blc-step__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--blc-line);
	font-size: 14px;
	font-weight: 600;
	transition: all 0.25s ease;
}

.blc-step__label {
	font-size: 12px;
	font-weight: 500;
}

.blc-step.is-active .blc-step__dot {
	background: var(--blc-brand);
	border-color: var(--blc-brand);
	color: #fff;
	box-shadow: var(--blc-shadow-brand);
}

.blc-step.is-active .blc-step__label {
	color: var(--blc-brand);
}

.blc-step.is-done .blc-step__dot {
	background: var(--blc-brand-soft);
	border-color: var(--blc-brand);
	color: var(--blc-brand);
}

.blc-step__bar {
	flex: 1;
	height: 2px;
	max-width: 60px;
	margin-bottom: 20px;
	background: var(--blc-line);
	border-radius: 2px;
	transition: background 0.25s ease;
}

.blc-step__bar.is-done {
	background: var(--blc-brand);
}

/* ---------- Auth card ---------- */
.blc-auth {
	background: var(--blc-surface);
	border-radius: var(--blc-radius);
	box-shadow: var(--blc-shadow);
	padding: 34px 32px;
	text-align: center;
}

.blc-auth__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	padding: 15px;
	border-radius: 50%;
	color: var(--blc-brand);
	background: var(--blc-brand-soft);
}

.blc-auth__title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--blc-ink);
}

.blc-auth__sub {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--blc-muted);
}

/* Keep the masked phone in one piece: it broke as "xxx-xx-" / "43". */
.blc-auth__sub b {
	white-space: nowrap;
}

/* Which SMS to use when the client asked for a code more than once. */
.blc-auth__note {
	margin: -8px 0 16px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--blc-muted);
	text-align: center;
}

.blc-auth .blc__label {
	text-align: left;
}

/* ---------- Fields ---------- */
.blc__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--blc-ink);
}

.blc__input {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--blc-line);
	border-radius: var(--blc-radius-sm);
	background: #fcfcfc;
	font-size: 16px;
	font-family: inherit;
	color: var(--blc-ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.blc__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--blc-brand);
	box-shadow: 0 0 0 4px rgba(124, 38, 51, 0.08);
}

.blc__input--code {
	letter-spacing: 14px;
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	padding-left: 30px;
}

/* reCAPTCHA: the widget is a fixed 304x78 cross-origin iframe whose contents
   do not reflow, so stretching it would just add blank space. Instead the frame
   is sized like the other fields and the widget is scaled into it (see
   fitCaptcha() in app.js). */
.blc-captcha {
	margin: 16px 0 4px;
}

.blc-captcha__frame {
	position: relative;
	overflow: hidden;
	border: 1.5px solid var(--blc-line);
	border-radius: var(--blc-radius-sm);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blc-captcha__widget {
	position: absolute;
	top: 0;
	left: 0;
	width: 304px;
	height: 78px;
	transform-origin: top left;
}

.blc-captcha.is-done .blc-captcha__frame {
	border-color: var(--blc-brand);
	box-shadow: 0 0 0 4px rgba(124, 38, 51, 0.07);
}

.blc-captcha__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--blc-muted);
	transition: color 0.2s ease;
}

.blc-captcha.is-done .blc-captcha__hint {
	color: var(--blc-brand);
	font-weight: 500;
}

.blc-captcha__ok {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

/* ---------- Buttons ---------- */
.blc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 18px;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--blc-radius-sm);
	background: linear-gradient(135deg, var(--blc-brand), var(--blc-brand-dark));
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.blc__btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: var(--blc-shadow-brand);
}

.blc__btn:active:not(:disabled) {
	transform: translateY(0);
}

.blc__btn:disabled {
	background: #d9d9dc;
	cursor: not-allowed;
}

.blc__btn--ghost {
	background: transparent;
	border: 1.5px solid var(--blc-brand);
	color: var(--blc-brand);
}

.blc__btn--ghost:hover:not(:disabled) {
	background: var(--blc-brand-soft);
	box-shadow: none;
}

.blc__link {
	display: inline-block;
	margin-top: 14px;
	padding: 4px 8px;
	background: none;
	border: 0;
	color: var(--blc-brand);
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.blc__link:hover {
	opacity: 0.7;
}

.blc__alert {
	/* Server messages may carry a second line, e.g. "or visit a branch";
	   each line is its own paragraph, so this is only a safety net. */
	white-space: pre-line;
	margin-bottom: 18px;
	padding: 12px 16px;
	background: #fdecea;
	border-left: 3px solid var(--blc-danger);
	border-radius: 8px;
	color: #a5281b;
	font-size: 14px;
	text-align: left;
}

.blc__alert-line {
	margin: 0;
}

.blc__alert-line + .blc__alert-line {
	margin-top: 4px;
}

/* ---------- Cabinet head ---------- */
.blc-cab__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.blc-cab__user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.blc-cab__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--blc-brand), var(--blc-brand-dark));
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.blc-cab__hi {
	display: block;
	font-size: 12px;
	color: var(--blc-muted);
}

.blc-cab__name {
	font-size: 16px;
	color: var(--blc-ink);
}

.blc-cab__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.blc-cab__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--blc-ink);
}

/* ---------- Contract accordion ---------- */
.blc-contract {
	background: var(--blc-surface);
	border: 1px solid var(--blc-line);
	border-radius: var(--blc-radius);
	box-shadow: var(--blc-shadow);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blc-contract.is-open {
	border-color: #dcbdc2;
	box-shadow: 0 8px 30px rgba(124, 38, 51, 0.1);
}

/* Header row: checkbox on the left, the clickable header fills the rest. */
.blc-contract__row {
	display: flex;
	align-items: stretch;
}

.blc-contract__pick {
	display: flex;
	align-items: center;
	padding-left: 18px;
	cursor: pointer;
}

/* Brand checkbox (also used in the summary bar). */
.blc-check {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid #cfd0d4;
	border-radius: 6px;
	background: #fff;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.blc-check:hover {
	border-color: #b98f96;
}

.blc-check:checked {
	background: var(--blc-brand);
	border-color: var(--blc-brand);
}

.blc-check:checked::after {
	content: "";
	width: 6px;
	height: 11px;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.blc-check:focus-visible {
	outline: 2px solid var(--blc-brand);
	outline-offset: 2px;
}

.blc-checkline {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--blc-text);
	cursor: pointer;
}

.blc-contract.is-picked {
	border-color: #e3c6cb;
}

.blc-contract__sum {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--blc-ink);
	white-space: nowrap;
}

.blc-contract:not(.is-picked) .blc-contract__sum {
	color: var(--blc-muted);
	font-weight: 500;
	text-decoration: line-through;
}

/* Clickable header (collapsed row) */
.blc-contract__head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}

.blc-contract__head:hover {
	background: #fbf6f7;
}

.blc-contract__ico {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 10px;
	border-radius: 12px;
	color: var(--blc-brand);
	background: var(--blc-brand-soft);
}

.blc-contract__id {
	flex: 1 1 auto;
	min-width: 0;
}

.blc-contract__num {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--blc-ink);
}

.blc-contract__item {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--blc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.blc-contract__overdue {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 20px;
	background: #fdecea;
	color: var(--blc-danger);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.blc-contract__overdue span {
	width: 14px;
	height: 14px;
}

.blc-contract__chevron {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--blc-muted);
	transition: transform 0.3s ease, color 0.2s ease;
}

.blc-contract.is-open .blc-contract__chevron {
	transform: rotate(180deg);
	color: var(--blc-brand);
}

/* Expanding body (animated height) */
.blc-contract__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.blc-contract.is-open .blc-contract__body {
	grid-template-rows: 1fr;
}

.blc-contract__body-inner {
	overflow: hidden;
	padding: 0 20px;
}

/* Expanded card: facts on the left, the action panel on the right. */
.blc-contract__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 18px 0 20px;
	border-top: 1px solid var(--blc-line);
}

@media (min-width: 900px) {
	.blc-contract__grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 32px;
		align-items: start;
	}
}

/* Left column — contract facts, two-up so the width carries information. */
/* Left column: facts on top, term scale pinned to the bottom edge so the
   column lines up with the payment panel instead of trailing off. */
.blc-contract__left {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-height: 100%;
}

/* Facts read as invoice lines: label left, value right, thin rules between.
   Capped in width so they don't stretch across the whole card. */
.blc-facts {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 460px;
}

/* Wide screens: two columns of rows, so the space between the ledger and the
   payment panel is filled by content instead of a gap. */
@media (min-width: 900px) {
	.blc-facts {
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
		max-width: none;
	}

	/* Each column keeps its own rules — no dangling border at a column break. */
	.blc-fact:first-child,
	.blc-fact:nth-child(2) {
		padding-top: 0;
	}
}

.blc-fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--blc-line);
}

.blc-fact:first-child {
	padding-top: 0;
}

.blc-fact:last-child {
	border-bottom: 0;
}

/* Term scale — deliberately narrow, not stretched across the card. */
.blc-term {
	max-width: 340px;
	margin-top: auto;
}

.blc-term__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--blc-text);
}

.blc-term__dates {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--blc-text);
}

.blc-term__row strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--blc-brand);
}

.blc-term.is-overdue .blc-term__row strong {
	color: var(--blc-danger);
}

.blc-term__bar {
	height: 5px;
	border-radius: 4px;
	background: var(--blc-line);
	overflow: hidden;
}

.blc-term__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--blc-brand), var(--blc-brand-dark));
	transition: width 0.4s ease;
}

.blc-term.is-overdue .blc-term__bar span {
	background: linear-gradient(90deg, #e05646, var(--blc-danger));
}

.blc-fact span {
	font-size: 13px;
	color: var(--blc-muted);
}

.blc-fact b {
	font-size: 15px;
	font-weight: 600;
	color: var(--blc-ink);
	white-space: nowrap;
}

.blc-fact b.is-danger {
	color: var(--blc-danger);
}

/* Right column — the only place with a price and a button. */
.blc-paybox {
	border: 1px solid #e7d6d9;
	border-radius: var(--blc-radius-sm);
	background: linear-gradient(160deg, #fdf9fa, var(--blc-brand-soft));
	padding: 20px;
	text-align: center;
}

.blc-paybox__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--blc-brand);
}

.blc-paybox__amount {
	margin: 6px 0 2px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: var(--blc-ink);
}

.blc-paybox__note {
	margin: 0;
	font-size: 13px;
	color: var(--blc-text);
}

.blc-paybox__ops {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
	text-align: left;
}

.blc-paybox .blc__btn {
	margin-top: 16px;
}

/* Muted helper row — a reference figure, not an alternative total. */
.blc-fact--aside span,
.blc-fact--aside b {
	color: var(--blc-muted);
	font-weight: 500;
}

/* Tablet band: the card is a single column here, so the payment panel reads
   better as a footer strip than as a full-width banner. */
@media (min-width: 620px) and (max-width: 899px) {
	.blc-paybox {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 240px;
		align-items: center;
		gap: 8px 24px;
		text-align: left;
	}

	.blc-paybox__label,
	.blc-paybox__amount,
	.blc-paybox__note {
		grid-column: 1;
	}

	.blc-paybox__amount {
		margin: 2px 0;
	}

	.blc-paybox .blc__btn {
		grid-column: 2;
		grid-row: 1 / 4;
		margin-top: 0;
	}

	.blc-paybox__hint {
		grid-column: 1 / -1;
	}
}

.blc-paybox__hint {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--blc-muted);
}

/* ---------- Operation chips (inside the payment panel) ---------- */
.blc-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border: 1.5px solid var(--blc-line);
	border-radius: var(--blc-radius-sm);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.blc-chip:hover {
	border-color: #d3aeb4;
}

.blc-chip input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--blc-line);
	border-radius: 50%;
	transition: all 0.2s ease;
}

.blc-chip.is-active {
	border-color: var(--blc-brand);
	background: var(--blc-brand-soft);
}

.blc-chip.is-active input {
	border-color: var(--blc-brand);
	border-width: 6px;
}

.blc-chip__title {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--blc-ink);
}

.blc-chip__amount {
	font-size: 15px;
	font-weight: 700;
	color: var(--blc-brand);
}

/* ---------- Pay (Portmone) ---------- */
.blc-pay {
	background: var(--blc-surface);
	border-radius: var(--blc-radius);
	box-shadow: var(--blc-shadow);
	padding: 34px 32px;
	text-align: center;
}

.blc-pay__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 20px;
	background: var(--blc-brand-soft);
	color: var(--blc-brand);
	font-size: 13px;
	font-weight: 600;
}

.blc-pay__badge span {
	width: 18px;
	height: 18px;
}

.blc-pay__label {
	margin: 22px 0 4px;
	font-size: 13px;
	color: var(--blc-muted);
}

.blc-pay__amount {
	margin: 0 0 6px;
	font-size: 40px;
	font-weight: 700;
	color: var(--blc-ink);
	letter-spacing: -0.5px;
}

.blc-pay__desc {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--blc-text);
}

/* ---------- Result ---------- */
.blc-result {
	background: var(--blc-surface);
	border-radius: var(--blc-radius);
	box-shadow: var(--blc-shadow);
	padding: 40px 32px;
	text-align: center;
}

.blc-result__icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 20px;
	padding: 18px;
	border-radius: 50%;
	color: #fff;
	animation: blc-pop 0.35s ease;
}

.blc-result.is-ok .blc-result__icon {
	background: linear-gradient(135deg, #34a06a, #2e7d51);
}

.blc-result.is-fail .blc-result__icon {
	background: linear-gradient(135deg, #e05646, var(--blc-danger));
}

.blc-result__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: var(--blc-ink);
}

.blc-result__sub {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--blc-muted);
}

/* ---------- Sticky summary (total + the single pay button) ---------- */
.blc-summary {
	position: sticky;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 18px;
	padding: 14px 18px 14px 22px;
	background: #fff;
	border: 1px solid #e3c6cb;
	border-radius: var(--blc-radius);
	box-shadow: 0 12px 34px rgba(124, 38, 51, 0.16);
}

.blc-summary.is-empty {
	border-color: var(--blc-line);
	box-shadow: var(--blc-shadow);
}

.blc-summary__info {
	flex: 1 1 auto;
	min-width: 0;
}

.blc-summary__count {
	display: block;
	font-size: 14px;
	color: var(--blc-ink);
}

.blc-summary__hint {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--blc-muted);
}

.blc-summary__total {
	flex: 0 0 auto;
	text-align: right;
}

.blc-summary__total span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--blc-brand);
}

.blc-summary__total strong {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--blc-ink);
}

.blc-summary__btn {
	flex: 0 0 auto;
	width: auto;
	min-width: 220px;
	margin-top: 0;
}

.blc-pay__list {
	list-style: none;
	margin: 6px 0 10px;
	padding: 0;
	font-size: 14px;
	color: var(--blc-text);
}

.blc-pay__list li {
	display: inline-block;
	margin: 3px 4px;
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--blc-brand-soft);
	color: var(--blc-brand);
	font-weight: 500;
}

/* ---------- Maintenance ---------- */
.blc-maintenance {
	max-width: 460px;
	margin: 0 auto;
	padding: 40px 32px;
	background: var(--blc-surface);
	border-radius: var(--blc-radius);
	box-shadow: var(--blc-shadow);
	text-align: center;
}

.blc-maintenance__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	padding: 16px;
	border-radius: 50%;
	color: var(--blc-brand);
	background: var(--blc-brand-soft);
}

.blc-maintenance__title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 700;
	color: var(--blc-ink);
}

.blc-maintenance__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--blc-muted);
}

.blc-maintenance__phone {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--blc-brand);
}

/* ---------- Loading overlay ---------- */
.blc {
	position: relative;
}

.blc-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	border-radius: var(--blc-radius);
	backdrop-filter: blur(1px);
}

.blc-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--blc-brand-soft);
	border-top-color: var(--blc-brand);
	border-radius: 50%;
	animation: blc-spin 0.7s linear infinite;
}

/* Result screen: waiting / unknown states */
.blc-result.is-wait .blc-result__icon {
	background: var(--blc-brand-soft);
	color: var(--blc-brand);
}

.blc-result__icon--wait {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.blc-result__ref {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--blc-muted);
}

.blc-result__ref b {
	color: var(--blc-ink);
}

.blc-spinner--inline {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	border-width: 2px;
}

/* ---------- Animations ---------- */
@keyframes blc-spin {
	to { transform: rotate(360deg); }
}

@keyframes blc-pop {
	0% { transform: scale(0.5); opacity: 0; }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

.blc-fade-enter-active,
.blc-fade-leave-active {
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.blc-fade-enter-from {
	opacity: 0;
	transform: translateY(10px);
}

.blc-fade-leave-to {
	opacity: 0;
	transform: translateY(-8px);
}

/* ---------- Mobile ---------- */
/* Mobile */
@media (max-width: 600px) {
	.blc-auth,
	.blc-pay,
	.blc-result {
		padding: 26px 20px;
	}

	/* At phone width the collapsed row cannot fit icon + number + chip + sum
	   on one line: the contract number was squeezed to 38px and clipped
	   mid-digits. Give the number the whole first line, move the chip and the
	   amount to a second one. */
	.blc-contract__head {
		gap: 11px;
		row-gap: 10px;
		flex-wrap: wrap;
		padding: 15px 14px 15px 12px;
	}

	.blc-contract__id {
		flex: 1 1 calc(100% - 49px);
	}

	.blc-contract__num {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.blc-contract__overdue {
		margin-left: 49px;
	}

	.blc-contract__sum {
		margin-left: auto;
	}

	.blc-contract__chevron {
		margin-left: 10px;
	}

	.blc-contract__pick {
		padding-left: 14px;
	}

	.blc-contract__sum {
		font-size: 14px;
	}

	.blc-summary {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		bottom: 8px;
		padding: 14px 16px;
	}

	.blc-summary__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
	}

	.blc-summary__btn {
		width: 100%;
		min-width: 0;
	}

	.blc-contract__ico {
		width: 38px;
		height: 38px;
		padding: 9px;
	}

	.blc-contract__body-inner {
		padding: 0 16px;
	}

	.blc-contract__grid {
		gap: 16px;
		padding: 16px 0 18px;
	}

	.blc-facts {
		max-width: none;
	}

	.blc-paybox {
		padding: 18px 16px;
	}

	.blc-paybox__amount {
		font-size: 28px;
	}

	.blc-chip {
		padding: 12px 14px;
	}

	.blc-step__label {
		display: none;
	}

	.blc-step__bar {
		margin-bottom: 0;
	}

	.blc-pay__amount {
		font-size: 34px;
	}
}

/* Very narrow phones: keep the term scale from crowding its labels. */
@media (max-width: 360px) {
	.blc-term__row {
		flex-direction: column;
		gap: 2px;
	}
}

/* Receipt link sits above the main button on the result screen. */
.blc-result__receipt {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	text-decoration: none;
}

/* "Session: 9:58" next to the logout button. */
.blc-cab__session {
	display: flex;
	align-items: center;
	gap: 14px;
}

.blc-cab__timer {
	font-size: 13px;
	font-weight: 600;
	color: var(--blc-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.blc-cab__timer.is-soon {
	color: var(--blc-danger);
}

@media (max-width: 600px) {
	.blc-cab__session {
		gap: 10px;
	}

	.blc-cab__timer {
		font-size: 12px;
	}
}