/*
 * Design System - AELITA
 * components/garage.css - global garage primitives.
 *
 * Covers only the garage toggle, the header/drawer entry and the global toast.
 * The page composition lives in garage-page.css and loads on /mij-garag only.
 * All values come from tokens.css; sharp corners only.
 */

/* -------------------------------------------------------------------- */
/* Header link + counter                                                */
/* -------------------------------------------------------------------- */
.a-garage-link {
	position: relative;
	flex: 0 0 auto;
	text-decoration: none;
}

.a-garage-link__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Keep the garage target at 44×44 even on narrow phones where the legacy
 * header shrinks the other icon buttons. The icon itself stays 24px. */
.a-header .a-icon-button.a-garage-link {
	min-width: 44px;
	min-height: 44px;
}

/* Reuse the comparison badge (18×18, round, red) and align it to the icon
 * corner inside the 44px header target. */
.a-garage-link .a-compare-link__count {
	top: -8px;
	right: -9px;
}

/* Keep the four-action header usable on small phones. The legacy header.css
 * rules shrink the logo at <=359px; the extra garage target needs a slightly
 * tighter row as well. */
@media (max-width: 479px) {
	.a-header__actions {
		gap: var(--space-1);
	}

	.a-header__logo-img {
		width: 120px;
		max-width: 120px;
	}

	.a-header .a-icon-button {
		min-width: 40px;
		min-height: 40px;
	}
}

@media (max-width: 359px) {
	.a-header__inner {
		gap: var(--space-1);
	}

	.a-header__logo-img {
		width: 96px;
		max-width: 96px;
	}

	.a-header .a-icon-button {
		min-width: 36px;
		min-height: 36px;
		padding: var(--space-1);
	}
}

/* -------------------------------------------------------------------- */
/* Mobile drawer entry                                                  */
/* -------------------------------------------------------------------- */
.a-mobile-nav__garage {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
	margin: 0 var(--space-4);
	padding: var(--space-3) var(--space-2);
	border-top: var(--border-w) solid var(--border);
	border-bottom: var(--border-w) solid var(--border);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	text-decoration: none;
}

.a-mobile-nav__garage:hover,
.a-mobile-nav__garage:focus {
	color: var(--text-primary);
	text-decoration: none;
}

.a-mobile-nav__garage[aria-current="page"] {
	color: var(--link-hover);
	font-weight: var(--fw-bold);
}

.a-mobile-nav__garage-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--text-secondary);
}

.a-mobile-nav__garage-label {
	min-width: 0;
}

.a-garage-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-inline-start: auto;
	padding: 0;
	border-radius: 50%;
	background-color: var(--c-red-600);
	color: var(--text-on-brand);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1;
	text-align: center;
}

.a-garage-count[hidden] {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Garage toggle (single pages)                                         */
/* -------------------------------------------------------------------- */
.a-garage-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	color: var(--text-secondary);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color var(--dur-press) var(--ease-out),
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out);
}

.a-garage-toggle svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.a-garage-toggle.is-active,
.a-garage-toggle[aria-pressed="true"] {
	color: var(--c-red-600);
	border-color: var(--c-red-600);
}

.a-garage-toggle.is-active .a-garage-icon__door,
.a-garage-toggle[aria-pressed="true"] .a-garage-icon__door {
	fill: currentColor;
}

.a-garage-toggle[aria-busy="true"] {
	opacity: 0.65;
	cursor: progress;
}

.a-garage-toggle:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.a-garage-toggle:hover {
		color: var(--c-red-600);
		border-color: var(--c-red-600);
		background-color: var(--bg-muted);
	}
}

/* Inline variant on single equipment pages. The `.a-button` classes supply
 * typography and the 44px target; these rules make the garage state match the
 * card toggle. */
.a-garage-toggle.a-garage-toggle--inline {
	position: static;
	width: 100%;
	height: auto;
	min-height: 46px;
	padding: var(--space-3) var(--space-5);
	background-color: transparent;
	color: var(--text-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	white-space: normal;
}

.a-garage-toggle.a-garage-toggle--inline svg {
	width: 20px;
	height: 20px;
	color: var(--text-secondary);
}

.a-garage-toggle.a-garage-toggle--inline.is-active,
.a-garage-toggle.a-garage-toggle--inline[aria-pressed="true"] {
	color: var(--c-red-600);
	border-color: var(--c-red-600);
	background-color: var(--bg);
}

.a-garage-toggle.a-garage-toggle--inline.is-active svg,
.a-garage-toggle.a-garage-toggle--inline[aria-pressed="true"] svg {
	color: var(--c-red-600);
}

.a-garage-toggle__label {
	min-width: 0;
}

.a-car-single__cta-row .a-garage-toggle--inline {
	flex: 1 1 100%;
}

.a-moto-single__buy + .a-garage-toggle--inline {
	margin-top: var(--space-3);
}

/* -------------------------------------------------------------------- */
/* Global toast (storage/limit errors)                                  */
/* -------------------------------------------------------------------- */
.a-garage-toast {
	position: fixed;
	inset-inline: var(--space-4);
	bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-toast);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	max-width: 520px;
	margin-inline: auto;
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border);
	border-inline-start: var(--space-1) solid var(--c-red-600);
	background-color: var(--bg-invert);
	color: var(--text-on-brand);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	box-shadow: var(--shadow-overlay);
}

.a-garage-toast[hidden] {
	display: none;
}

.a-garage-toast__text {
	min-width: 0;
}

.a-garage-toast__link {
	color: var(--c-white);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.a-garage-toast__link[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.a-garage-toggle {
		transition-duration: 0.01ms;
	}
}