/* Header Fixes - Stage 5 Override */

/* Remove blur from topbar */
.topbar {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.topbar::before {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Remove backgrounds/padding from header icons */
.topbar .icon-action {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: auto !important;
}

/* User-chip: add gap between avatar and text */
.user-chip {
	gap: 8px;
}

/* Ensure search field stays opaque */
.top-search {
	background: rgba(255, 255, 255, 0.96) !important;
}

.top-search input {
	background: transparent;
}

/* Filter heading with icon */
.camping-filter-heading {
	display: flex;
	align-items: center;
	gap: 5px;
}

.camping-filter-heading img {
	width: 42px;
	height: 42px;
	display: block;
	flex: 0 0 24px;
}

/* View switch: remove backgrounds, set icon size 42×42 */
.aside-view-switch {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.view-buttons {
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}

.view-buttons button {
	position: relative;
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--line);
	transition: all 0.2s;
}

.view-buttons button:hover {
	background: rgba(255, 255, 255, 0.9);
}

.view-buttons button.active {
	background: var(--blue);
	border-color: var(--blue);
}

.view-buttons button img {
	width: 42px;
	height: 42px;
	display: block;
	flex: 0 0 42px;
	pointer-events: none;
}

/* View button tooltip */
.view-button-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	padding: 6px 10px;
	background: #101921;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 6px;
	z-index: 1000;
	transition: 
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;
}

.view-button-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #101921;
}

.view-buttons button:hover .view-button-tooltip,
.view-buttons button:focus-visible .view-button-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Stage 5 header final overrides */
.topbar::before {
	content: none !important;
	display: none !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	opacity: 0 !important;
}

/* Mobile: hide view switch and filter heading */
@media (max-width: 767px) {
	.aside-view-switch {
		display: none !important;
	}
	
	.camping-filter-heading {
		display: none !important;
	}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.view-button-tooltip {
		transition: none !important;
	}
}