/* Atlas Sport — the compare chip in the header.
 * Loads site-wide, paired with atlas-compare.js. The chip itself reuses the
 * header's .atlas-hd__quote classes; this file only adds what the header
 * cannot know about: the chip stays glued to the quote-list chip it follows,
 * and its counter has its own classes so atlas-header.js's cart-count sync
 * (which rewrites every .atlas-hd__quotecount / .atlas-hd__quotedot) leaves
 * it alone.
 */

.atlas-ce-chip {
	flex: 0 0 auto !important;
	margin-left: 10px;
	white-space: nowrap;
}

/* The quote chip stops stretching while the compare chip stands next to it;
   without this the two share a flex row 50/50 and end up at opposite ends. */
.atlas-hd__quote:has(+ .atlas-ce-chip),
.atlas-hd__quoteicon:has(+ .atlas-ce-chip) {
	flex: 0 1 auto !important;
}

/* Mobile header row (search + quote chip, 50/50): while the compare chip is
   active the search form steps aside and the two chips split the row instead,
   so everything fits at phone widths. */
.atlas-hd__mobilerow:has(.atlas-ce-chip) .atlas-hd__search--mobile,
.atlas-hd__mobilerow:has(.atlas-ce-chip) .atlas-hd__search {
	display: none !important;
}
.atlas-hd__mobilerow:has(.atlas-ce-chip) > .atlas-hd__quote,
.atlas-hd__mobilerow > .atlas-ce-chip {
	flex: 1 1 0 !important;
	min-width: 0;
	margin-left: 0;
}

/* Sticky bar on phones: the right cluster (search, quote icon, burger) has no
   room for a fourth control, so while the compare chip is active the search
   button steps aside there too, and the cluster's own gap does the spacing. */
.atlas-hd__stickyright .atlas-ce-chip { margin-left: 0; }

@media (max-width: 992px) {
	.atlas-hd__stickyright:has(.atlas-ce-chip) .atlas-hd__iconbtn {
		display: none !important;
	}
}

/* Counter: same look as .atlas-hd__quotecount, own class. */
.atlas-ce-chipcount {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hd-lime, #7cc242);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* Icon variant: the counter becomes the corner dot, like .atlas-hd__quotedot. */
.atlas-ce-chipdot {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	font-size: 12px;
}