/**
 * Vehicle Picker -- sticky header bar + inline shortcode styles.
 *
 * Uses theme.json CSS custom properties for all color/spacing/typography tokens.
 * Mobile-first responsive with compact bar + expand overlay.
 *
 * @package Cool_Bear_Core
 * @since   0.7.0
 */

/* === Sticky Bar === */
/* 2026-06-06 decompression: the bar was height-locked at 56px while its
   content (label + 44px select) needed ~62px — everything crushed. The bar
   now sizes to content with real breathing room, the redundant visible
   labels are dropped in the bar variant (each select's placeholder already
   names the field; labels stay for screen readers), selects share the row
   width evenly, and the bar is centred with a max width instead of running
   edge-to-edge. */

.cb-vehicle-picker-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

/* === Dropdowns container === */

.cb-vp-dropdowns {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	max-width: 980px;
}

.cb-vp-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

/* === Labels === */
/* Visible labels are redundant with the select placeholders in the slim
   bar — keep them in the accessibility tree only. */

.cb-vp-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* === Select elements === */

.cb-vp-select {
	height: 46px;
	padding: 8px 14px;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	font-size: 0.95rem;
	font-family: inherit;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
	appearance: auto;
	width: 100%;
	min-width: 0;
}

.cb-vp-select:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--border));
}

.cb-vp-select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.cb-vp-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* === Find parts button === */

.cb-vp-find {
	height: 46px;
	padding: 0 28px;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	border-radius: 6px;
	white-space: nowrap;
	transition: opacity 150ms ease-out;
}

.cb-vp-find:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* === Clear + Change links === */

.cb-vp-selected {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.cb-vp-has-vehicle .cb-vp-selected {
	display: flex;
}

.cb-vp-compact {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
}

.cb-vp-clear {
	color: var(--wp--preset--color--destructive);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.cb-vp-clear:hover {
	text-decoration: underline;
}

.cb-vp-change {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.cb-vp-change:hover {
	text-decoration: underline;
}

/* === Selected state: hide dropdowns, show compact === */

.cb-vp-has-vehicle .cb-vp-dropdowns {
	display: none;
}

.cb-vp-has-vehicle.cb-vp-changing .cb-vp-dropdowns {
	display: flex;
}

.cb-vp-has-vehicle.cb-vp-changing .cb-vp-selected {
	display: none;
}

/* === Mobile toggle (hidden on desktop) === */

.cb-vp-mobile-toggle {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	background: none;
	border: none;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
	flex: 1;
	justify-content: space-between;
}

.cb-vp-chevron {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	transition: transform 150ms ease-out;
}

.cb-vp-expanded .cb-vp-chevron {
	transform: rotate(180deg);
}

/* === Inline shortcode styles === */

.cb-vehicle-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-end;
}

.cb-vehicle-picker .cb-vp-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-vehicle-picker .cb-vp-field label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cb-vehicle-picker .cb-vp-select {
	height: 44px;
	padding: 8px 16px;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	min-width: 160px;
}

/* === Mobile responsive (< 768px) === */

@media (max-width: 767px) {
	.cb-vehicle-picker-bar {
		padding: 10px var(--wp--preset--spacing--30);
	}

	/* Hide dropdowns and selected state by default on mobile */
	.cb-vehicle-picker-bar .cb-vp-dropdowns,
	.cb-vehicle-picker-bar .cb-vp-selected {
		display: none;
	}

	/* Show mobile toggle */
	.cb-vp-mobile-toggle {
		display: flex;
	}

	/* Expanded overlay */
	.cb-vehicle-picker-bar.cb-vp-expanded {
		position: fixed;
		inset: 0;
		z-index: 200;
		height: auto;
		background: rgba(13, 13, 15, 0.95);
		flex-direction: column;
		padding: var(--wp--preset--spacing--40);
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-dropdowns {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-field {
		width: 100%;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-select {
		width: 100%;
		min-width: unset;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-find {
		width: 100%;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-selected {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
	}

	/* Shortcode: stack vertically on mobile */
	.cb-vehicle-picker {
		flex-direction: column;
	}

	.cb-vehicle-picker .cb-vp-field {
		width: 100%;
	}

	.cb-vehicle-picker .cb-vp-select {
		width: 100%;
		min-width: unset;
	}
}

/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
	.cb-vp-select,
	.cb-vp-find,
	.cb-vp-chevron {
		transition: none;
	}
}

/* ─── a11y: loading + accessible error/retry (Deploy-3 jxn) ─────────────────── */
.cb-vp-dropdowns[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}
.cb-vp-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	background: rgba(200, 16, 46, 0.08);
	color: var(--wp--preset--color--accent, #c8102e);
	font-size: 0.85rem;
	line-height: 1.4;
}
.cb-vp-error__msg {
	flex: 1 1 auto;
}
.cb-vp-error__retry {
	flex: none;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.cb-vp-error__retry:hover,
.cb-vp-error__retry:focus {
	background: var(--wp--preset--color--accent, #c8102e);
	color: #fff;
}