/* BikeBarta Compare - Frontend Styles */

.bbc-compare-app {
	margin: 24px 0;
	isolation: isolate; /* contains all internal z-index use (sticky column,
	                        VS badge, search dropdown) so none of it can ever
	                        stack above unrelated page elements like floating
	                        social icons, regardless of the numbers involved */
}

/* ---------- Selectors (interactive mode) ----------
   3 fields, each 25% of the container width (75% total), left-aligned.
   Falls back to full-width stacked fields on mobile. */

.bbc-selectors {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.bbc-selector-slot {
	flex: 0 0 calc(25% - 9px); /* 25% width, minus a share of the gap */
	max-width: calc(25% - 9px);
}

@media (max-width: 640px) {
	.bbc-selectors {
		flex-direction: column;
	}

	.bbc-selector-slot {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.bbc-selector-slot .ts-wrapper {
	width: 100%;
}

.bbc-vehicle-option {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bbc-vehicle-option img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.bbc-vehicle-option .bbc-option-badge {
	font-size: 11px;
	text-transform: uppercase;
	color: #888;
	margin-left: auto;
	padding-left: 8px;
}

/* ---------- Lock info + Clear All ---------- */

.bbc-lock-info {
	font-size: 13px;
	color: #555;
	background: #0b365508;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 0 0 12px;
}

.bbc-clear-all {
	display: inline-block;
	background: none;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #b32d2e;
	cursor: pointer;
	margin-bottom: 16px;
}

.bbc-clear-all:hover {
	background-color: #b32d2e08;
	border-color: #b32d2e;
}

/* ---------- Loading / error states ---------- */

.bbc-loading {
	padding: 24px;
	text-align: center;
	color: #666;
}

.bbc-message {
	padding: 16px;
	border-radius: 6px;
	margin: 12px 0;
}

.bbc-message-error {
	background: #fdecea;
	color: #611a15;
	border: 1px solid #f5c6cb;
}

/* Scroll hint -- only shown on screens narrow enough that the table is
   actually likely to need horizontal scrolling. Sits above the scrollable
   wrapper (not inside it) so it doesn't scroll away with the table. */
.bbc-scroll-hint {
	display: none;
	font-size: 12px;
	color: #888;
	margin: 0 0 6px;
}

@media (max-width: 768px) {
	.bbc-scroll-hint {
		display: block;
	}
}

/* ---------- Table: single table, sticky first column ----------
   Sticky first column + horizontal scroll on mobile. The striping colors
   below are SOLID (no alpha channel at all) rather than semi-transparent --
   with zero transparency involved, there is nothing for scrolling content
   underneath to bleed through, regardless of how any given mobile browser
   handles position:sticky background painting. */

.bbc-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	isolation: isolate; /* same containment as .bbc-compare-app, but scoped
	                        here directly since the fixed shortcode ([bikebarta_compare
	                        ids="..."]) renders this wrapper without that
	                        outer element */
}

.bbc-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 520px; /* forces horizontal scroll on narrow screens instead of squashing */
}

.bbc-compare-table th,
.bbc-compare-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #eaeaea;
}

/* Sticky first column (field labels) */
.bbc-compare-table th.bbc-col-label {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: #fff; /* solid opaque default */
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06); /* visual cue there is more to scroll */
}

.bbc-compare-table td.bbc-col-vehicle {
	min-width: 160px;
	position: relative;
}

/* The Title and Image rows' label cells are always blank -- no text to
   hint at scrolling underneath, so skip the shadow on just those two. */
.bbc-row-title th.bbc-col-label,
.bbc-row-image th.bbc-col-label {
	box-shadow: none;
}

/* Title row */
.bbc-row-title .bbc-vehicle-title-link {
	font-weight: 700;
	font-size: 16px;
	color: #0b3655;
	text-decoration: none;
}

.bbc-row-title .bbc-vehicle-title-link:hover {
	text-decoration: underline;
}

/* Image row */
.bbc-row-image .bbc-vehicle-image {
	width: 100%;
	max-width: 180px;
	height: 130px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* "VS" separator between vehicle images -- :first-of-type (not :first-child)
   because the first sibling in the row is actually the <th> label cell, so
   comparing against "first child" would wrongly match every <td>. */
.bbc-row-image td.bbc-col-vehicle:not(:first-of-type)::before {
	content: "VS";
	font-style: italic;
	font-weight: 700;
	font-size: 13px;
	color: #999;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* Data row striping -- solid colors, no alpha. Precomputed to match the
   visual look of #f4433605 / #0b365505 blended against white, but as flat
   opaque hex so there is no compositing/transparency involved at all. */
.bbc-row-data.bbc-row-odd {
	background-color: #fdf9f8;
}

.bbc-row-data.bbc-row-even {
	background-color: #f8fafb;
}

.bbc-row-data.bbc-row-odd th.bbc-col-label {
	background-color: #fdf9f8;
}

.bbc-row-data.bbc-row-even th.bbc-col-label {
	background-color: #f8fafb;
}

.bbc-value {
	color: #333;
}

/* "View Complete Specs" button row -- styled to match the site's existing
   button design (values below mirror the .brxe-button spec provided),
   with margin-left/right switched to auto + fit-content width so it sits
   as a compact, centered button within its cell rather than stretching
   edge to edge. */
.bbc-row-actions th.bbc-col-label {
	background-color: #fff;
	box-shadow: none;
}

.bbc-view-detail-btn {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	color: #0b3655;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 12px;
	padding-right: 12px;
	background-color: #fff;
	border: 1px solid #0b3655;
	border-radius: 3px;
	align-self: center;
	position: static;
	display: block;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	white-space: normal;
}