/* ============================================================================
 * bwc-wizard.css — app-side bits of the Create Listing wizard.
 *
 * The CHROME comes from Bitrix's real wizard component (ui.wizard.css,
 * .sign-wizard*). This file only supplies what that stylesheet leaves to
 * Bitrix's Wizard JS — which an external marketplace app cannot run — plus the
 * final Review step, which is this app's own idea.
 *
 * Deliberately small. If you find yourself restyling .sign-wizard* here, check
 * ui.wizard.css first: it probably already does it.
 * ========================================================================= */

.bwc-wizard-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 24px 32px;
}

/* Bitrix's wizard sits on the portal's grey page background; this app's page is
   white, so it needs a border to read as a surface. */
.sign-wizard {
	border: 1px solid #e6e8ea;
}

/* Step switching. Bitrix's CSS never hides a step — its JS mounts one at a
   time — so the app owns this. */
.sign-wizard__step.--hidden { display: none; }

/* Completed stages are clickable (back only — see the DOMContentLoaded handler
   in add.php; jumping forward would skip validation). */
.sign-wizard__stages_item { cursor: default; }
.sign-wizard__stages_item.--active { cursor: pointer; }

.bwc-wizard-actions {
	display: flex;
	align-items: center;
	gap: 0;
}

.bwc-wizard-count {
	margin-left: auto;
	font-size: 12px;
	color: #a8adb4;
	white-space: nowrap;
}

/* ---- Review step ---- */
.bwc-review-head { margin-bottom: 16px; }
.bwc-review-title { font-size: 16px; font-weight: 600; color: #333; }
.bwc-review-sub { font-size: 12px; color: #a8adb4; margin-top: 2px; }

.bwc-review-card {
	border: 1px solid #e6e8ea;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.bwc-review-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eef2f4;
}

.bwc-review-card-title { font-size: 14px; font-weight: 600; color: #535c69; }

/* Two columns of key/value on a wide slider, one when it's narrow. */
.bwc-review-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	font-size: 13px;
	break-inside: avoid;
}

.bwc-review-card { column-gap: 32px; }

@media (min-width: 900px) {
	.bwc-review-card > .bwc-review-row { column-count: initial; }
	.bwc-review-card { columns: 2; column-gap: 40px; }
	.bwc-review-card-head { column-span: all; }
}

.bwc-review-k {
	flex: 0 0 40%;
	color: #a8adb4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bwc-review-v {
	flex: 1 1 auto;
	color: #535c69;
	font-weight: 500;
	min-width: 0;
	overflow-wrap: anywhere;
}

.bwc-review-empty {
	font-size: 13px;
	color: #a8adb4;
	padding: 4px 0;
}