/* Carvaceous Cars — compare & profile pages */

.cc-page {
	margin: 0;
	background: #fff;
	color: #444;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
	line-height: 1.6;
}

.cc-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header / footer */
.cc-header {
	background: #fff;
	border-bottom: 2px solid #009eef;
	padding: 14px 0;
}
.cc-header .cc-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cc-logo {
	font-size: 24px;
	font-weight: 700;
	color: #fe7404;
	text-decoration: none;
	letter-spacing: 0.5px;
}
.cc-nav a {
	margin-left: 18px;
	color: #009eef;
	text-decoration: none;
	font-weight: 600;
}
.cc-nav a:hover { text-decoration: underline; }
.cc-footer {
	margin-top: 48px;
	border-top: 1px solid #eee;
	padding: 18px 0;
	font-size: 14px;
	color: #888;
}
.cc-footer a { color: #009eef; }

.cc-title { margin: 28px 0 16px; color: #333; }
.cc-error { color: #e02222; font-weight: 600; }
.cc-note { font-size: 14px; color: #888; }

/* Picker */
.cc-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 20px;
}
.cc-picker label span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #666;
	margin-bottom: 4px;
}
.cc-picker select {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	min-width: 180px;
}

/* Buttons */
.cc-btn {
	padding: 8px 16px;
	border: 1px solid #009eef;
	border-radius: 6px;
	background: #fff;
	color: #009eef;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.cc-btn:hover { background: #eaf7ff; }
.cc-btn.is-active {
	background: #009eef;
	color: #fff;
}
.cc-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 18px 0 10px;
}
.cc-control-group { display: flex; gap: 6px; }

/* The stage: container width maps to a fixed number of millimetres,
   so relative car sizes are exact at every viewport width. */
.cc-stage {
	position: relative;
	border-bottom: 3px solid #bbb; /* ground line */
	padding-top: 12px;
	min-height: 120px;
}
.cc-stage.cc-view-side {
	display: flex;
	align-items: flex-end;
}
.cc-car-box { display: block; }
.cc-car-box svg {
	display: block;
	width: 100%;
	height: auto;
}
.cc-view-overlay .cc-car-box {
	position: absolute;
	bottom: 0;
	left: 0;
}
.cc-view-overlay .cc-gap { display: none; }

/* Car colours */
.cc-car-a path, .cc-car-a circle { fill: #009eef; }
.cc-car-b path, .cc-car-b circle { fill: #fe7404; }
.cc-car .cc-hub { fill: #fff !important; }
.cc-view-overlay .cc-car { opacity: 0.72; }

/* Legend */
.cc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 12px 0 6px;
	font-size: 14px;
	font-weight: 600;
}
.cc-key::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 6px;
}
.cc-key-a::before { background: #009eef; }
.cc-key-b::before { background: #fe7404; }

/* Tables */
.cc-table-wrap { overflow-x: auto; }
.cc-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 720px;
	font-size: 15px;
}
.cc-table th, .cc-table td {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
}
.cc-table thead th { border-bottom: 2px solid #009eef; }
.cc-table a { color: #009eef; }

/* Suggestions + archive cards */
.cc-suggestions {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cc-suggestions a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #009eef;
	border-radius: 20px;
	color: #009eef;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.cc-suggestions a:hover { background: #eaf7ff; }

.cc-vehicle-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.cc-vehicle-card {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 16px;
}
.cc-vehicle-link { text-decoration: none; color: #444; }
.cc-vehicle-silhouette { display: block; border-bottom: 2px solid #ccc; margin-bottom: 8px; }
.cc-vehicle-silhouette svg { width: 90%; height: auto; display: block; margin: 0 auto; }
.cc-vehicle-name { display: block; font-weight: 700; color: #009eef; }
.cc-vehicle-dims { display: block; font-size: 13px; color: #888; }

@media (max-width: 600px) {
	.cc-header .cc-wrap { flex-direction: column; gap: 8px; }
	.cc-picker select { min-width: 130px; }
}