/**
 * Bike listing — discovery vs showroom layout (paired with listing-bike.view.php).
 *
 * @package NewTechPrice
 */

.ntp-bike-listing__layout--discovery {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ntp-section-gap);
}

/**
 * Mobile: filter column is first in the DOM for the desktop rail, but it also
 * holds the sidebar spotlight — without reordering, "Popular picks" appears above
 * the catalog hero. Pull main content above the filter column on small viewports only.
 */
@media (max-width: 767.98px) {
	.ntp-bike-listing__layout--discovery .ntp-bike-listing__content {
		order: 1;
	}

	.ntp-bike-listing__layout--discovery .ntp-bike-listing__filter-column {
		order: 2;
	}
}

@media (min-width: 768px) {
	.ntp-bike-listing__layout--discovery .ntp-bike-listing__content,
	.ntp-bike-listing__layout--discovery .ntp-bike-listing__filter-column {
		order: 0;
	}

	.ntp-bike-listing__layout--discovery {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}

	.ntp-bike-listing__layout--discovery .ntp-bike-listing__filter-column {
		flex: 0 0 18rem;
		width: 18rem;
		max-width: 18rem;
		min-width: 0;
	}

	.ntp-bike-listing__layout--discovery .ntp-bike-listing__content {
		flex: 1 1 0%;
		min-width: 0;
		width: auto;
	}
}

.ntp-bike-listing__layout--showroom {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ntp-bike-listing__layout--showroom .ntp-bike-listing__content {
	width: 100%;
	max-width: 100%;
}

.ntp-bike-listing__filter-column {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 768px) {
	.ntp-bike-listing__filter-column {
		contain: layout;
	}
}

@media (min-width: 768px) {
	.ntp-bike-listing__sidebar {
		position: sticky;
		top: 6rem;
		align-self: start;
		max-height: none;
		overflow: visible;
		z-index: var(--ntp-z-raised, 10);
	}
}

.ntp-bike-listing__content {
	position: relative;
	min-width: 0;
}

/* Horizontal inset: global .ntp-container (max(gutter, safe-area)). */

/* Light reserve during AJAX filter swaps (parity with mobile listing). */
.ntp-bike-listing__main-ui-shell {
	min-height: 8rem;
}

@media (min-width: 768px) {
	.ntp-bike-listing__main-ui-shell {
		min-height: 10rem;
	}
}

@media (min-width: 1024px) {
	.ntp-bike-listing--catalog .ntp-bike-listing__main-ui-shell {
		min-height: 0;
	}
}

/**
 * Mobile filter sheet — opens from the left; markup is portaled in wp_footer (after #ntp-app closes)
 * so theme overflow-x-clip cannot affect this fixed layer.
 */
#ntp-bike-filter-drawer {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	min-width: 0;
	z-index: var(--ntp-z-overlay-dim, 40);
	pointer-events: none;
}

#ntp-bike-filter-drawer .ntp-bike-filter-drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: color-mix(in srgb, var(--ntp-text-color, #2f3542) 45%, transparent);
	opacity: 0;
	transition: opacity 0.28s ease;
}

[data-theme='dark'] #ntp-bike-filter-drawer .ntp-bike-filter-drawer__backdrop {
	background-color: color-mix(in srgb, var(--ntp-bg-color, #0f172a) 70%, #000 30%);
}

#ntp-bike-filter-drawer .ntp-bike-filter-drawer__panel {
	/* Right “peek” of backdrop (~3dvw, min 12px). Safe-area: padding only — do not also subtract from width. */
	--ntp-bike-drawer-right-gutter: 1dvw;
	position: absolute;
	left: 0;
	/* Full-height left sheet must sit inside the visible frame (notch / status bar / home indicator). */
	top: env(safe-area-inset-top, 0px);
	bottom: env(safe-area-inset-bottom, 0px);
	z-index: 1;
	width: calc(96dvw - var(--ntp-bike-drawer-right-gutter));
	max-width: calc(96dvw - var(--ntp-bike-drawer-right-gutter));
	min-width: 0;
	padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	overflow-x: hidden;
	border-right: 1px solid color-mix(in srgb, var(--ntp-border-color, #dfe4ea) 70%, transparent);
	border-radius: 0 1rem 1rem 0;
	box-shadow:
		8px 0 40px color-mix(in srgb, var(--ntp-text-color, #2f3542) 12%, transparent),
		0 0 0 1px color-mix(in srgb, var(--ntp-border-color, #dfe4ea) 35%, transparent);
	transform: translate3d(-105%, 0, 0);
	transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}

[data-theme='dark'] #ntp-bike-filter-drawer .ntp-bike-filter-drawer__panel {
	border-right-color: color-mix(in srgb, var(--ntp-border-color, #334155) 65%, transparent);
	box-shadow:
		12px 0 48px color-mix(in srgb, #000 55%, transparent),
		0 0 0 1px color-mix(in srgb, var(--ntp-border-color, #334155) 40%, transparent);
}

html.ntp-bike-filter-drawer-open #ntp-bike-filter-drawer {
	pointer-events: auto;
}

html.ntp-bike-filter-drawer-open #ntp-bike-filter-drawer .ntp-bike-filter-drawer__backdrop {
	opacity: 1;
}

html.ntp-bike-filter-drawer-open #ntp-bike-filter-drawer .ntp-bike-filter-drawer__panel {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	#ntp-bike-filter-drawer .ntp-bike-filter-drawer__backdrop,
	#ntp-bike-filter-drawer .ntp-bike-filter-drawer__panel {
		transition-duration: 0.01ms;
	}
}

@media (min-width: 768px) {
	#ntp-bike-filter-drawer {
		display: none !important;
	}
}

.ntp-bike-listing__grid--products[aria-busy='true'] {
	opacity: 0.65;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Phase 5: isolate card layout/paint without affecting LCP policy on first tiles */
.ntp-bike-listing__grid--products > .ntp-bike-card {
	contain: layout style;
}

/* --------------------------------------------------------------------------
 * List layout (preference: localStorage via bike-listing-view-layout.js)
 * -------------------------------------------------------------------------- */
.ntp-bike-listing__grid--list.ntp-bike-listing__grid--products {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.ntp-bike-listing__grid--list.ntp-bike-listing__grid--products {
		gap: 1rem;
	}
}

.ntp-bike-listing__grid--list .ntp-bike-card {
	width: 100%;
	max-width: 100%;
}

.ntp-bike-listing__grid--list .ntp-bike-card > a.js-spa-link {
	flex-direction: row;
	align-items: stretch;
}

.ntp-bike-listing__grid--list .ntp-bike-card > a.js-spa-link > div:first-child {
	width: 7rem;
	min-width: 7rem;
	max-width: 7rem;
	flex-shrink: 0;
	align-self: stretch;
}

@media (min-width: 640px) {
	.ntp-bike-listing__grid--list .ntp-bike-card > a.js-spa-link > div:first-child {
		width: 8.5rem;
		min-width: 8.5rem;
		max-width: 8.5rem;
	}
}

.ntp-bike-listing__grid--list .ntp-bike-card > a.js-spa-link > div:first-child img {
	height: 100%;
	min-height: 4.5rem;
	object-fit: contain;
}

.ntp-bike-listing__grid--list .ntp-bike-card > a.js-spa-link > div:last-child {
	flex: 1 1 0%;
	min-width: 0;
	justify-content: flex-start;
}

.ntp-bike-listing__grid--list .ntp-bike-skeleton {
	flex-direction: row;
	align-items: stretch;
}

.ntp-bike-listing__grid--list .ntp-bike-skeleton > div:first-child {
	width: 7rem;
	min-width: 7rem;
	max-width: 7rem;
	flex-shrink: 0;
	aspect-ratio: auto;
	min-height: 4.5rem;
}

@media (min-width: 640px) {
	.ntp-bike-listing__grid--list .ntp-bike-skeleton > div:first-child {
		width: 8.5rem;
		min-width: 8.5rem;
		max-width: 8.5rem;
	}
}

.ntp-bike-listing__grid--list .ntp-bike-skeleton > div:last-child {
	flex: 1 1 0%;
	min-width: 0;
}

html.ntp-bike-filter-drawer-open {
	overflow: hidden;
}

/* Filter drawer footer (mirrors mobile listing drawer chrome; bike listing does not load listing-mobile.css). */
@media (max-width: 767.98px) {
	.ntp-compare-tray {
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
		box-sizing: border-box;
	}
}

.ntp-filter-drawer-footer {
	padding: 1rem;
	padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--ntp-bg-color, #fff) 98%, transparent),
		color-mix(in srgb, var(--ntp-surface-color, #f1f2f6) 95%, transparent)
	);
	border-top: 1px solid color-mix(in srgb, var(--ntp-border-color, #dfe4ea) 55%, transparent);
	box-shadow: 0 -8px 28px color-mix(in srgb, var(--ntp-text-color, #2f3542) 5%, transparent);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

[data-theme='dark'] .ntp-filter-drawer-footer {
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--ntp-bg-color, #0f172a) 98%, transparent),
		color-mix(in srgb, var(--ntp-surface-color, #1e293b) 95%, transparent)
	);
	border-top-color: color-mix(in srgb, var(--ntp-border-color, #334155) 55%, transparent);
	box-shadow: 0 -8px 28px color-mix(in srgb, var(--ntp-bg-color, #0f172a) 45%, transparent);
}

/*
 * Bike left sheet: panel uses top/bottom safe-area — footer must not add a second home-indicator pad.
 * (Mobile bottom drawer keeps max(1rem, env) on .ntp-filter-drawer-footer in listing-mobile.css.)
 */
#ntp-bike-filter-drawer .ntp-filter-drawer-footer {
	padding-bottom: 1rem;
}

.ntp-compare-tray.ntp-compare-tray--drawer-open {
	transform: translateY(100%);
	pointer-events: none;
}

/* Active filter chips (JS injects .ntp-active-filter-tag; mirrors mobile listing). */
.ntp-active-filter-tag {
	flex-shrink: 0;
	max-width: min(85dvw, 16rem);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--ntp-text-color, #2f3542) 6%, transparent);
}

.ntp-active-filter-tag span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	[data-ntp-active-filters-wrap].ntp-listing-active-filters--mobile-strip {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	[data-ntp-active-filters].ntp-listing-active-filters__host {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 0.5rem;
		padding-bottom: 0.125rem;
		scrollbar-width: none;
	}

	[data-ntp-active-filters].ntp-listing-active-filters__host::-webkit-scrollbar {
		display: none;
	}

	[data-ntp-active-filters].ntp-listing-active-filters__host .ntp-active-filter-tag {
		scroll-snap-align: start;
	}
}

/* Choose Bikes By — one row, neutral tabs; active = solid red (matches live badge) */
.ntp-bike-choose-by__pill.ntp-bike-choose-by__pill--is-active {
	background-color: rgb(220 38 38) !important;
	border-color: rgb(220 38 38) !important;
	color: #fff !important;
	box-shadow: none;
}

.ntp-bike-choose-by__pill.ntp-bike-choose-by__pill--is-active:hover {
	background-color: rgb(185 28 28) !important;
	border-color: rgb(185 28 28) !important;
	color: #fff !important;
}

/* Brand tiles — strip / sheet / lobby (bike listing does not load listing-mobile.css) */
.ntp-bike-listing-brand-logo,
.ntp-bike-listing-brand-logo--compact {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.ntp-bike-listing-brand-tile:focus-visible {
	outline: 2px solid var(--ntp-primary-color, #0a1931);
	outline-offset: 2px;
}

[data-theme='dark'] .ntp-bike-listing-brand-tile:not(.ntp-bike-listing-brand-tile--disabled) {
	box-shadow: 0 1px 3px color-mix(in srgb, var(--ntp-bg-color, #0f172a) 25%, transparent);
}

.ntp-bike-choose-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--ntp-z-floating, 50);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem;
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
	.ntp-bike-choose-sheet {
		justify-content: center;
		padding: 1.5rem;
	}
}

.ntp-bike-choose-sheet.hidden {
	display: none !important;
}

.ntp-bike-choose-sheet__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: color-mix(in srgb, var(--ntp-text-color, #2f3542) 42%, transparent);
}

[data-theme='dark'] .ntp-bike-choose-sheet__backdrop {
	background: color-mix(in srgb, var(--ntp-bg-color, #0f172a) 55%, #000 45%);
}

.ntp-bike-choose-sheet__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 28rem;
	animation: ntp-bike-choose-sheet-in 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	.ntp-bike-choose-sheet__panel {
		animation: none;
	}
}

@keyframes ntp-bike-choose-sheet-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

html.ntp-bike-choose-sheet-open {
	overflow: hidden;
}