/**
 * View: compare overlay (OPM — porównanie ofert).
 *
 * Max-3 units side-by-side. Rebuilt from the Figma (node 1:2748) as a clean,
 * token-driven comparison table — NOT the absolute positions from the design.
 * Rows = attributes (with section dividers), columns = units. All values via
 * var(--opm-*); everything scoped under .opm.
 */

/* ----------------------------------------------------------------- Overlay */
.opm.opm-compare {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: var(--opm-space-6);
}
.opm.opm-compare[hidden] { display: none; }

.opm-compare__backdrop {
	position: absolute;
	inset: 0;
	background: var(--opm-color-bg-overlay);
	cursor: pointer;
}

.opm-compare__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(974px, 100%);
	max-height: calc(100vh - var(--opm-space-8));
	background: var(--opm-color-bg);
	box-shadow: var(--opm-shadow-lg);
	overflow: hidden;
}

/* ------------------------------------------------------------------- Close */
.opm-compare__close {
	position: absolute;
	top: var(--opm-space-3);
	right: var(--opm-space-3);
	z-index: 2;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--opm-fs-xl);
	line-height: 1;
	color: var(--opm-color-on-accent);
	background: var(--opm-color-ink);
	border: 0;
	cursor: pointer;
	transition: background var(--opm-duration) var(--opm-ease);
}
.opm-compare__close:hover { background: var(--opm-color-accent); }

/* -------------------------------------------------------------------- Head */
.opm-compare__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--opm-space-4);
	flex-wrap: wrap;
	padding: var(--opm-space-6) var(--opm-space-6) var(--opm-space-4);
	padding-right: calc(var(--opm-space-6) + 40px);
	border-bottom: 1px solid var(--opm-color-border-soft);
}
.opm-compare__title {
	margin: 0;
	font-family: var(--opm-font-sans);
	font-size: var(--opm-fs-xl);
	font-weight: var(--opm-fw-bold);
	color: var(--opm-color-ink);
}
.opm-compare__subtitle {
	margin: var(--opm-space-1) 0 0;
	font-size: var(--opm-fs-xs);
	color: var(--opm-color-ink-muted);
}
.opm-compare__tools {
	display: flex;
	align-items: center;
	gap: var(--opm-space-4);
}
.opm-compare__diff {
	display: inline-flex;
	align-items: center;
	gap: var(--opm-space-2);
	font-size: var(--opm-fs-xs);
	font-weight: var(--opm-fw-bold);
	cursor: pointer;
	user-select: none;
}
.opm-compare__diff input { width: 15px; height: 15px; accent-color: var(--opm-color-accent); cursor: pointer; }
.opm-compare__clear {
	font: inherit;
	font-size: var(--opm-fs-xs);
	color: var(--opm-color-ink-muted);
	background: none;
	border: 0;
	padding: var(--opm-space-1) var(--opm-space-2);
	cursor: pointer;
	text-decoration: underline;
}
.opm-compare__clear:hover { color: var(--opm-color-ink); }

/* ------------------------------------------------------------------- Empty */
.opm-compare__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--opm-space-3);
	padding: var(--opm-space-8) var(--opm-space-6);
	text-align: center;
}
.opm-compare__empty[hidden] { display: none; }
.opm-compare__empty-title {
	margin: 0;
	font-size: var(--opm-fs-lg);
	font-weight: var(--opm-fw-bold);
}
.opm-compare__empty-text {
	margin: 0;
	max-width: 42ch;
	font-size: var(--opm-fs-sm);
	color: var(--opm-color-ink-muted);
}

/* ------------------------------------------------------------- Table shell */
.opm-compare__scroll {
	flex: 1;
	overflow: auto;
	padding: var(--opm-space-4) var(--opm-space-6) var(--opm-space-6);
}
.opm-compare__scroll[hidden] { display: none; }

.opm-compare__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Left rail (attribute labels) */
.opm-compare__rail {
	width: 180px;
	text-align: right;
	vertical-align: middle;
	padding: var(--opm-space-2) var(--opm-space-3);
	font-size: var(--opm-fs-xs);
	font-weight: var(--opm-fw-regular);
	color: var(--opm-color-ink);
	white-space: normal;
}

/* Unit columns */
.opm-compare__col,
.opm-compare__cell {
	width: 245px;
	text-align: center;
	vertical-align: middle;
	padding: var(--opm-space-2) var(--opm-space-3);
	font-size: var(--opm-fs-xs);
}

/* --------------------------------------------------------- Column headers */
.opm-compare__row--head .opm-compare__rail { border-bottom: 1px solid var(--opm-color-border); }
.opm-compare__col {
	position: relative;
	border-bottom: 1px solid var(--opm-color-border);
	padding-top: var(--opm-space-4);
	padding-bottom: var(--opm-space-3);
}
.opm-compare__remove {
	position: absolute;
	top: 0;
	right: var(--opm-space-2);
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--opm-fs-md);
	line-height: 1;
	color: var(--opm-color-ink);
	background: var(--opm-color-bg);
	border: 1px solid var(--opm-color-border);
	cursor: pointer;
	transition: background var(--opm-duration) var(--opm-ease), color var(--opm-duration) var(--opm-ease);
}
.opm-compare__remove:hover { background: var(--opm-color-ink); color: var(--opm-color-bg); }

.opm-compare__col-media {
	display: block;
	width: 100%;
	max-width: 203px;
	height: 96px;
	margin: 0 auto var(--opm-space-2);
	background: var(--opm-color-bg-muted) center / cover no-repeat;
	border-radius: 0;
}
.opm-compare__col-media:empty { background: var(--opm-color-bg-muted); }
.opm-compare__col-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.opm-compare__col-code {
	display: block;
	font-size: var(--opm-fs-xs);
	font-weight: var(--opm-fw-bold);
	margin-bottom: var(--opm-space-1);
}
.opm-compare__col .opm-status { justify-content: center; }

/* Add-offer placeholder column */
.opm-compare__col--add { border-bottom: 1px solid var(--opm-color-border); }
.opm-compare__add {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--opm-space-1);
	font: inherit;
	font-size: var(--opm-fs-xs);
	font-weight: var(--opm-fw-bold);
	color: var(--opm-color-ink-muted);
	background: none;
	border: 0;
	cursor: pointer;
}
.opm-compare__add:hover { color: var(--opm-color-ink); }
.opm-compare__add-plus { font-size: var(--opm-fs-xl); line-height: 1; }

/* ---------------------------------------------------------- Section + rows */
.opm-compare__section-label {
	padding: var(--opm-space-5) var(--opm-space-3) var(--opm-space-2);
	text-align: left;
	font-size: var(--opm-fs-xs);
	font-weight: var(--opm-fw-bold);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--opm-color-ink);
}

.opm-compare__row--head .opm-compare__col,
tbody .opm-compare__row:not(.opm-compare__section) .opm-compare__rail,
tbody .opm-compare__row:not(.opm-compare__section) .opm-compare__cell {
	border-bottom: 1px solid var(--opm-color-border-soft);
}
.opm-compare__cell { color: var(--opm-color-ink); }
.opm-compare__cell--empty { color: var(--opm-color-ink-muted); }

/* Diff highlight — only when "Pokaż różnice" is on and a row's values differ */
.opm-compare.is-diff .opm-compare__row.is-diff .opm-compare__cell {
	background: color-mix(in srgb, var(--opm-color-accent) 14%, transparent);
}
.opm-compare.is-diff .opm-compare__row.is-diff .opm-compare__rail {
	font-weight: var(--opm-fw-bold);
}

/* bool yes/no accents */
.opm-compare__cell[data-opm-bool="true"] { color: var(--opm-color-accent); font-weight: var(--opm-fw-medium); }
.opm-compare__cell[data-opm-bool="false"] { color: var(--opm-color-ink-muted); }

/* ------------------------------------------------------------------- Foot */
.opm-compare__row--foot .opm-compare__cell--foot { padding-top: var(--opm-space-5); }
.opm-compare__cta {
	width: 100%;
	background: var(--opm-color-ink);
	color: var(--opm-color-on-accent);
	border-color: var(--opm-color-ink);
}
.opm-compare__cta:hover { background: var(--opm-color-accent); border-color: var(--opm-color-accent); }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
	.opm.opm-compare { padding: var(--opm-space-3); justify-content: center; }
	.opm-compare__dialog { width: 100%; max-height: calc(100vh - var(--opm-space-6)); }
}
@media (max-width: 640px) {
	.opm-compare__rail { width: 120px; }
	.opm-compare__col, .opm-compare__cell { width: auto; min-width: 130px; }
	.opm-compare__head { padding-right: calc(var(--opm-space-4) + 40px); }
}

/* Figma QA: "Pokaż różnice" = square checkbox (like the contact form). */
.opm-compare__diff input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: 0 0 auto;
  border: 1px solid #000; border-radius: 0; background: #fff; cursor: pointer;
  display: inline-grid; place-content: center;
}
.opm-compare__diff input[type="checkbox"]::before {
  content: ""; width: 7px; height: 7px; background: var(--opm-color-accent, #000);
  transform: scale(0); transition: transform .15s ease;
}
.opm-compare__diff input[type="checkbox"]:checked::before { transform: scale(1); }

/* Send button hover follows the category accent (fallback default). */
.opm-compare__cta:hover,
.opm-compare__cta:focus-visible { background: var(--opm-color-accent, #bababa); border-color: var(--opm-color-accent, #bababa); color: #fff; }