/* =========================================================================
   ChargeGuild — Design System
   -------------------------------------------------------------------------
   Concept: "Grid & Route" — the visual language of charging infrastructure
   and highway signage rather than a generic SaaS look. Left-aligned
   content, hairline rules instead of drop-shadow cards, a blue-green pair
   drawn from the ChargeGuild logo (Charge Blue as the primary accent,
   Grid Green as a secondary accent used for live/available status), never
   used just for decoration. Numbering is reserved for genuinely sequential
   content (guide steps), not decorative eyebrows.

   Color:
     --cg-ink    #0F2436  deep utility-navy — text, header, footer
     --cg-blue   #1D6FB8  charge blue — primary accent, CTAs, active states
     --cg-green  #2E9E64  grid green — availability / success only
     --cg-bg     #F5F6F3  page background, slightly warm off-white
     --cg-steel  #55707F  secondary text, borders, meta
     --cg-white  #FFFFFF

   Type:
     Display/Headings — Archivo (700/800): a sturdy grotesque with an
       engineered, signage-like character.
     Body/UI — IBM Plex Sans (400/500/600): technical, legible, pairs
       cleanly with Archivo without competing for attention.
   ========================================================================= */

:root {
	--cg-ink: #0F2436;
	--cg-blue: #1D6FB8;
	--cg-blue-dark: #14568F;
	--cg-green: #1FA971;
	--cg-bg: #F5F6F3;
	--cg-steel: #55707F;
	--cg-steel-100: #E4E9E7;
	--cg-white: #FFFFFF;
	--cg-red: #C0432F;

	--cg-font-display: "Archivo", "Arial Black", sans-serif;
	--cg-font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

	--cg-radius: 3px;
	--cg-container: 1180px;
	--cg-gap: 24px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
	margin: 0;
	background: var(--cg-bg);
	color: var(--cg-ink);
	font-family: var(--cg-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding-left: 0; list-style: none; margin: 0; }
h1, h2, h3, h4, h5 {
	font-family: var(--cg-font-display);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 1.7rem + 2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.3rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 72ch; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--cg-blue); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}

.cg-container {
	max-width: var(--cg-container);
	margin: 0 auto;
	padding: 0 24px;
}

.cg-section {
	position: relative;
	padding: 56px 0;
	border-bottom: 1px solid var(--cg-steel-100);
}
.cg-section--tight { padding: 32px 0; }
.cg-section--dark {
	background: var(--cg-ink);
	color: var(--cg-white);
	border-bottom: none;
}
.cg-section--dark h2, .cg-section--dark h3 { color: var(--cg-white); }
.cg-section--dark p { color: #C7D3D8; }

.cg-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	border-bottom: 2px solid var(--cg-ink);
	padding-bottom: 14px;
}
.cg-section--dark .cg-section__head { border-bottom-color: var(--cg-blue); }
.cg-section__head h2 { margin: 0; }
.cg-section__head a { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons ---------- */
.cg-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--cg-radius);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
}
.cg-btn--primary { background: var(--cg-blue); color: var(--cg-ink); }
.cg-btn--primary:hover { background: var(--cg-blue-dark); }
.cg-btn--dark { background: var(--cg-ink); color: var(--cg-white); }
.cg-btn--dark:hover { background: #16324a; }
.cg-btn--outline { background: transparent; border-color: var(--cg-ink); color: var(--cg-ink); }
.cg-btn--outline:hover { background: var(--cg-ink); color: var(--cg-white); }
.cg-btn--on-dark { background: transparent; border-color: var(--cg-white); color: var(--cg-white); }
.cg-btn--on-dark:hover { background: var(--cg-white); color: var(--cg-ink); }
.cg-btn--full { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.cg-header {
	background: var(--cg-white);
	border-bottom: 1px solid var(--cg-steel-100);
	position: sticky;
	top: 0;
	z-index: 50;
}
.cg-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
	max-width: var(--cg-container);
	margin: 0 auto;
}
.cg-logo {
	font-family: var(--cg-font-display);
	font-weight: 800;
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--cg-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.cg-logo__mark {
	background: linear-gradient(135deg, var(--cg-blue) 25%, var(--cg-green) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cg-logo img { max-height: 40px; width: auto; }

.cg-nav { display: flex; }
.cg-nav ul { display: flex; gap: 2px; align-items: center; }
.cg-nav a {
	display: block;
	padding: 10px 14px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cg-ink);
	border-radius: var(--cg-radius);
}
.cg-nav a:hover { background: var(--cg-bg); }
.cg-nav .current-menu-item > a { color: var(--cg-steel); background: var(--cg-bg); }

.cg-header__actions { display: flex; align-items: center; gap: 10px; }
.cg-menu-toggle {
	display: none;
	background: none;
	border: 2px solid var(--cg-ink);
	border-radius: var(--cg-radius);
	padding: 8px 10px;
}
.cg-menu-toggle span, .cg-menu-toggle::before, .cg-menu-toggle::after {
	display: block; width: 20px; height: 2px; background: var(--cg-ink); margin: 4px 0; content: "";
}

/* ---------- Breadcrumbs ---------- */
.cg-breadcrumbs { background: var(--cg-white); border-bottom: 1px solid var(--cg-steel-100); }
.cg-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; max-width: var(--cg-container); margin: 0 auto; padding: 12px 24px; font-size: 0.85rem; color: var(--cg-steel); }
.cg-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--cg-steel); }
.cg-breadcrumbs a { text-decoration: none; color: var(--cg-steel); }
.cg-breadcrumbs a:hover { text-decoration: underline; }
.cg-breadcrumbs [aria-current="page"] { color: var(--cg-ink); font-weight: 600; }

/* ---------- Hero ---------- */
.cg-hero {
	background: var(--cg-ink);
	color: var(--cg-white);
	padding: 72px 0 96px;
	position: relative;
	overflow: hidden;
}
.cg-hero::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -20%;
	width: 620px;
	height: 620px;
	border: 60px solid rgba(29,111,184,0.12);
	border-radius: 50%;
}
.cg-hero::before {
	content: "";
	position: absolute;
	right: 6%;
	top: 8%;
	width: 280px;
	height: 280px;
	border: 34px solid rgba(31,169,113,0.16);
	border-radius: 50%;
	z-index: 0;
}
.cg-hero__inner { max-width: var(--cg-container); margin: 0 auto; padding: 0 24px; position: relative; }
.cg-hero__eyebrow { color: var(--cg-green); font-weight: 700; margin-bottom: 10px; }
.cg-hero h1 { color: var(--cg-white); max-width: 14ch; }
.cg-hero__sub { color: #C7D3D8; max-width: 52ch; font-size: 1.1rem; }

.cg-hero-search {
	display: flex;
	gap: 0;
	background: var(--cg-white);
	border-radius: var(--cg-radius);
	overflow: hidden;
	max-width: 620px;
	margin-top: 28px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.cg-hero-search input[type="text"] {
	flex: 1;
	border: 0;
	padding: 16px 18px;
	font-size: 1rem;
	color: var(--cg-ink);
}
.cg-hero-search select {
	border: 0;
	border-left: 1px solid var(--cg-steel-100);
	padding: 0 12px;
	color: var(--cg-steel);
	background: var(--cg-white);
}
.cg-hero-search .cg-btn { border-radius: 0; padding: 16px 26px; }
.cg-hero__stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.cg-hero__stat b { display: block; font-family: var(--cg-font-display); font-size: 1.7rem; color: var(--cg-green); }
.cg-hero__stat span { color: #C7D3D8; font-size: 0.9rem; }

/* ---------- Grids ---------- */
.cg-grid { display: grid; gap: var(--cg-gap); align-items: start; }
.cg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cg-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
	.cg-grid--3, .cg-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.cg-grid--2, .cg-grid--3, .cg-grid--4 { grid-template-columns: 1fr; }
}

/* Used for blog/guide card rows: fixed-ish card widths that CENTER as a
   group instead of stretching to fill the row or clinging to one side
   when there are fewer cards than would fill it. Flexbox rather than
   grid's auto-fit here specifically because it centers a partial last
   row (1-2 cards) — auto-fit would still stretch or left-align those. */
.cg-grid--blog { display: flex; flex-wrap: wrap; justify-content: center; }
.cg-grid--blog > * { flex: 0 1 340px; min-width: 280px; }

/* ---------- Station cards ---------- */
.cg-station-card {
	background: var(--cg-white);
	border: 1px solid var(--cg-steel-100);
}
.cg-station-card__media { position: relative; display: block; aspect-ratio: 3/2; background: var(--cg-steel-100); overflow: hidden; }
.cg-station-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cg-station-card__media-fallback {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--cg-ink), #1c3f5c);
}
.cg-badge {
	position: absolute; top: 10px; left: 10px;
	background: var(--cg-ink); color: var(--cg-white);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
	padding: 4px 9px; border-radius: var(--cg-radius);
}
.cg-badge--speed { background: var(--cg-blue); color: var(--cg-ink); }
.cg-badge--available { background: var(--cg-green); color: var(--cg-white); }
.cg-badge--warning { background: var(--cg-red); color: var(--cg-white); }
.cg-station-card__body { padding: 16px; }
.cg-station-card__top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cg-station-card__title { margin: 0 0 4px; font-size: 1.05rem; }
.cg-station-card__title a { text-decoration: none; }
.cg-station-card__title a:hover { text-decoration: underline; }
.cg-station-card__location { color: var(--cg-steel); font-size: 0.88rem; margin-bottom: 10px; }
.cg-station-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.82rem; color: var(--cg-steel); border-top: 1px solid var(--cg-steel-100); padding-top: 10px; }
.cg-station-card__price { margin-left: auto; font-weight: 600; color: var(--cg-ink); }
.cg-station-card__rating { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cg-station-card__rating-count { font-size: 0.78rem; color: var(--cg-steel); }

.cg-stars { color: var(--cg-green); letter-spacing: 1px; font-size: 0.9rem; }
.cg-star--empty { color: var(--cg-steel-100); }

/* ---------- City / network tiles ---------- */
.cg-tile {
	display: flex; align-items: flex-end;
	min-height: 140px;
	padding: 16px;
	background: var(--cg-ink);
	color: var(--cg-white);
	text-decoration: none;
	position: relative;
	background-size: cover;
	background-position: center;
}
.cg-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,36,54,0.15), rgba(15,36,54,0.85)); }
.cg-tile__label { position: relative; font-family: var(--cg-font-display); font-weight: 700; font-size: 1.1rem; }
.cg-tile__count { position: relative; display: block; font-size: 0.8rem; color: #C7D3D8; }

.cg-network-tile {
	border: 1px solid var(--cg-steel-100);
	background: var(--cg-white);
	padding: 22px;
	text-decoration: none;
	color: var(--cg-ink);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cg-network-tile:hover { border-color: var(--cg-ink); }
.cg-network-tile h3 { margin: 0; }
.cg-network-tile__meta { color: var(--cg-steel); font-size: 0.85rem; }
.cg-network-tile__logo { display: flex; align-items: center; height: 44px; margin-bottom: 4px; }
.cg-network-tile__logo img { max-height: 100%; max-width: 140px; width: auto; height: auto; object-fit: contain; }
.cg-network-tile__logo-fallback {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: var(--cg-radius);
	background: var(--cg-ink); color: var(--cg-blue);
	font-family: var(--cg-font-display); font-weight: 800; font-size: 1.2rem;
}

/* ---------- Network logo slider ---------- */
.cg-logo-slider { position: relative; }
.cg-logo-slider__viewport {
	overflow: hidden;
	cursor: grab;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.cg-logo-slider__viewport.is-dragging { cursor: grabbing; }
.cg-logo-slider__track {
	display: flex;
	gap: 16px;
	padding: 2px 2px 14px;
	will-change: transform;
}
.cg-logo-slide {
	flex: 0 0 auto;
	width: 220px;
	height: 128px;
	background: var(--cg-white);
	border: 1px solid var(--cg-steel-100);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-decoration: none;
	transition: border-color 0.15s ease;
	-webkit-user-drag: none;
	user-select: none;
}
.cg-logo-slide:hover { border-color: var(--cg-ink); }
.cg-logo-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.cg-logo-slide__label {
	font-weight: 700;
	font-size: 1rem;
	color: var(--cg-ink);
	text-align: center;
}
.cg-logo-slider__nav {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 4px;
}
.cg-logo-slider__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--cg-ink);
	background: var(--cg-white);
	color: var(--cg-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}
.cg-logo-slider__btn:hover { background: var(--cg-ink); color: var(--cg-white); }
.cg-logo-slider__btn:disabled { opacity: 0.35; cursor: default; }
.cg-logo-slider__btn:disabled:hover { background: var(--cg-white); color: var(--cg-ink); }
@media (max-width: 600px) {
	.cg-logo-slide { width: 168px; height: 108px; }
}

/* ---------- Filters (directory sidebar) ---------- */
.cg-directory { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: flex-start; }
@media (max-width: 860px) { .cg-directory { grid-template-columns: 1fr; } }
.cg-filters {
	border: 1px solid var(--cg-steel-100);
	background: var(--cg-white);
	padding: 20px;
	position: sticky;
	top: 90px;
}
.cg-filters__group { border: 0; padding: 0; margin: 0 0 16px; }
.cg-filters__group legend { font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.cg-filters select {
	width: 100%; padding: 10px; border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); background: var(--cg-white);
}
.cg-filters__reset { display: inline-block; margin-top: 10px; font-size: 0.85rem; text-decoration: underline; color: var(--cg-steel); }

.cg-results-count { color: var(--cg-steel); margin-bottom: 18px; }

/* ---------- Station detail ---------- */
.cg-station-hero {
	background: var(--cg-white);
	border-bottom: 1px solid var(--cg-steel-100);
	padding: 40px 0;
}
.cg-station-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
@media (max-width: 900px) { .cg-station-hero__grid { grid-template-columns: 1fr; } }
.cg-station-hero__photo { aspect-ratio: 16/10; background: var(--cg-steel-100); overflow: hidden; }
.cg-station-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Marketplace product page only (single-accessory.php): smaller title, and a
   square, uncropped photo frame so the whole product is visible. Station pages
   keep the rules above. */
.cg-product-title { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.3; margin-bottom: 14px; }
.cg-station-hero__photo--product { aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; background: var(--cg-white); border: 1px solid var(--cg-steel-100); display: flex; align-items: center; justify-content: center; }
.cg-station-hero__photo--product img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.cg-station-hero__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cg-fact-list { border-top: 1px solid var(--cg-steel-100); margin-top: 18px; }
.cg-fact-list__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cg-steel-100); }
.cg-fact-list__label { color: var(--cg-steel); font-weight: 500; }
.cg-fact-list__value { font-weight: 600; text-align: right; }

.cg-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
/* Post FAQ accordion (single.php) */
.cg-faq { margin-top: 40px; }
.cg-faq__item { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); margin-bottom: 10px; background: var(--cg-white); }
.cg-faq__item summary { cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 700; line-height: 1.4; list-style: none; position: relative; }
.cg-faq__item summary::-webkit-details-marker { display: none; }
.cg-faq__item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--cg-blue); }
.cg-faq__item[open] summary::after { content: "\2212"; }
.cg-faq__item[open] summary { border-bottom: 1px solid var(--cg-steel-100); }
.cg-faq__item summary:focus-visible { outline: 2px solid var(--cg-blue); outline-offset: 2px; }
.cg-faq__answer { padding: 16px 20px 4px; }
.cg-faq__answer p:last-child { margin-bottom: 1.3em; }
.cg-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cg-steel-100); }
.cg-article__tags .cg-chip:hover { border-color: var(--cg-blue); color: var(--cg-blue); }
.cg-chip { border: 1px solid var(--cg-steel-100); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; color: var(--cg-steel); }
a.cg-chip { text-decoration: none; }
a.cg-chip:hover { border-color: var(--cg-ink); color: var(--cg-ink); }
.cg-chip--on-dark { border-color: rgba(255,255,255,0.3); color: #C7D3D8; }

/* ---------- Network hub page ---------- */
.cg-network-hero__logo { margin-bottom: 20px; }
.cg-network-hero__logo img { max-height: 56px; width: auto; background: var(--cg-white); padding: 8px 14px; border-radius: var(--cg-radius); }
.cg-stat-table { width: 100%; border-collapse: collapse; }
.cg-stat-table th, .cg-stat-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--cg-steel-100); font-size: 0.92rem; }
.cg-stat-table th { color: var(--cg-steel); font-weight: 600; }
.cg-stat-table td:last-child, .cg-stat-table th:last-child { text-align: right; }
.cg-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
@media (max-width: 700px) { .cg-capability-grid { grid-template-columns: repeat(2, 1fr); } }
.cg-capability { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.cg-capability__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.cg-capability__icon--yes { background: var(--cg-green); color: var(--cg-white); }
.cg-capability__icon--no { background: var(--cg-steel-100); color: var(--cg-steel); }

.cg-map-embed { width: 100%; aspect-ratio: 16/9; background: var(--cg-steel-100); display: flex; align-items: center; justify-content: center; color: var(--cg-steel); border: 1px solid var(--cg-steel-100); }

/* ---------- Live maps (Leaflet) ---------- */
.cg-map-live {
	width: 100%;
	border: 1px solid var(--cg-steel-100);
	background: var(--cg-steel-100);
}
.cg-map-live--preview { aspect-ratio: 21/9; min-height: 320px; }
.cg-map-live--station { aspect-ratio: 16/9; min-height: 260px; }
.cg-map-live--network { aspect-ratio: 21/9; min-height: 360px; }
.cg-map-live--fullscreen { width: 100%; height: 100%; border: 0; }
.cg-map-pin { background: transparent; border: none; }
.leaflet-popup-content-wrapper { border-radius: var(--cg-radius); }
.cg-map-popup { font-family: var(--cg-font-body); font-size: 0.9rem; line-height: 1.4; }
.cg-map-popup a { color: var(--cg-ink); font-weight: 600; }

.cg-report-link { font-size: 0.85rem; color: var(--cg-steel); text-decoration: underline; }

/* ---------- Reviews / comments ---------- */
.cg-review { border-top: 1px solid var(--cg-steel-100); padding: 20px 0; }
.cg-review__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cg-review__author { font-weight: 700; }
.cg-review__date { color: var(--cg-steel); font-size: 0.82rem; }
.comment-form-rating select { padding: 10px; border: 1px solid var(--cg-steel-100); }

/* ---------- Reviews & ratings (stations + marketplace products) ---------- */
.cg-reviews { margin-top: 8px; }
.cg-reviews__summary { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; padding: 20px 24px; background: var(--cg-white); border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); margin-bottom: 20px; }
.cg-reviews__score { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cg-reviews__avg { font-family: var(--cg-font-display); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--cg-ink); }
.cg-reviews__score .cg-stars { font-size: 1.15rem; }
.cg-reviews__bars { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; max-width: 420px; display: grid; gap: 6px; }
.cg-reviews__bars li { display: grid; grid-template-columns: 56px 1fr 32px; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--cg-steel); margin: 0; padding: 0; }
.cg-reviews__bar { display: block; height: 8px; background: var(--cg-steel-100); border-radius: 4px; overflow: hidden; }
.cg-reviews__bar > span { display: block; height: 100%; background: var(--cg-green); }
.cg-reviews__bar-count { text-align: right; }
.cg-reviews__toolbar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.88rem; margin-bottom: 4px; }
.cg-reviews__sort { color: var(--cg-steel); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.cg-reviews__sort:hover { color: var(--cg-blue); }
.cg-reviews__sort.is-active { color: var(--cg-ink); font-weight: 600; border-bottom-color: var(--cg-blue); }
.cg-review__title { font-weight: 700; margin: 0 0 4px; }
.cg-review__text p { margin-bottom: 0.8em; }
.cg-review__text p:last-child { margin-bottom: 0; }
.cg-review__reply { margin: 12px 0 0 18px; padding: 10px 14px; background: var(--cg-bg); border-left: 3px solid var(--cg-blue); font-size: 0.95rem; }
.cg-review__reply p { margin-bottom: 0.5em; }
.cg-review__reply p:last-child { margin-bottom: 0; }
.cg-review__reply-label { font-weight: 700; font-size: 0.82rem; color: var(--cg-steel); }
.cg-reviews__pager { margin-top: 18px; }
.cg-reviews__pager .page-numbers { display: inline-block; padding: 6px 12px; margin-right: 4px; border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); text-decoration: none; font-size: 0.9rem; }
.cg-reviews__pager .page-numbers.current { background: var(--cg-ink); color: var(--cg-white); border-color: var(--cg-ink); }
.cg-reviews__form-wrap { margin-top: 32px; padding: 24px; background: var(--cg-white); border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); scroll-margin-top: 90px; }
.cg-reviews__form-wrap h3 { margin-top: 0; }
.cg-reviews .cg-stacked-form textarea { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 10px 12px; font-family: var(--cg-font-body); font-size: 0.95rem; resize: vertical; }
.cg-review-form { max-width: 560px; }

/* Star picker: radios in DOM order 5..1, shown reversed so hovering/choosing N lights stars 1..N with no JavaScript */
.cg-rate-input { border: 0; padding: 0; margin: 0; }
.cg-rate-input legend { font-size: 0.85rem; font-weight: 600; color: var(--cg-steel); padding: 0; margin-top: 10px; }
.cg-rate-input__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.cg-rate-input__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-rate-input__stars label { margin: 0; padding: 0 2px; cursor: pointer; font-size: 2rem; line-height: 1.1; }
.cg-rate-input__stars label::before { content: "\2605"; color: var(--cg-steel-100); transition: color .1s; }
.cg-rate-input__stars input:checked ~ label::before,
.cg-rate-input__stars label:hover::before,
.cg-rate-input__stars label:hover ~ label::before { color: var(--cg-green); }
.cg-rate-input__stars input:focus-visible + label { outline: 3px solid var(--cg-blue); outline-offset: 2px; border-radius: 3px; }
#respond input[type="text"], #respond input[type="email"], #respond input[type="url"], #respond textarea {
	width: 100%; padding: 12px; border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); margin-bottom: 12px;
}

/* ---------- Blog / Guides ---------- */
.cg-post-card { border: 1px solid var(--cg-steel-100); background: var(--cg-white); text-align: left; }
.cg-post-card__media { aspect-ratio: 16/10; background: var(--cg-steel-100); overflow: hidden; display: block; }
.cg-post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-post-card__body { padding: 20px; }
.cg-post-card__cat { color: var(--cg-blue); background: var(--cg-ink); display: inline-block; padding: 3px 9px; font-size: 0.75rem; font-weight: 700; border-radius: var(--cg-radius); margin-bottom: 12px; }
.cg-post-card h3 { font-size: 1.35rem; }
.cg-post-card h3 a { text-decoration: none; }
.cg-post-card h3 a:hover { text-decoration: underline; }
.cg-post-card__excerpt { color: var(--cg-steel); font-size: 1rem; line-height: 1.65; }
.cg-post-card__meta { font-size: 0.85rem; color: var(--cg-steel); border-top: 1px solid var(--cg-steel-100); padding-top: 10px; margin-top: 8px; }

/* ---------- Marketplace product cards ---------- */
.cg-product-card { background: var(--cg-white); border: 1px solid var(--cg-steel-100); display: flex; flex-direction: column; }
.cg-product-card__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--cg-steel-100); overflow: hidden; }
.cg-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cg-product-card__media-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; color: var(--cg-steel-100); }
.cg-product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cg-product-card__cat { font-size: 0.75rem; color: var(--cg-steel); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.cg-product-card__title { font-size: 1rem; margin: 0; line-height: 1.35; }
.cg-product-card__title a { text-decoration: none; }
.cg-product-card__title a:hover { text-decoration: underline; }
.cg-product-card__footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cg-steel-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-product-card__price { font-family: var(--cg-font-display); font-weight: 700; font-size: 1.05rem; }
.cg-affiliate-disclosure { font-size: 0.78rem; color: var(--cg-steel); border-top: 1px solid var(--cg-steel-100); margin-top: 28px; padding-top: 16px; }

.cg-article { max-width: 74ch; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; }
.cg-article p { margin-bottom: 1.3em; }
.cg-article h2 { margin-top: 1.6em; }
.cg-article img { margin: 1.2em 0; }
.cg-article blockquote { border-left: 4px solid var(--cg-blue); margin: 1.5em 0; padding: 0.2em 0 0.2em 20px; color: var(--cg-steel); }

/* Restore bullets/numbers inside written content. The theme-wide reset
   (`ul, ol { list-style: none; padding-left: 0 }`) strips list markers
   everywhere so nav menus and card lists render cleanly — but it also
   stripped them from blog posts, pages, and guides. The WordPress editor
   doesn't load that reset, which is why lists looked fine while editing
   and vanished once published. The theme's own component lists
   (.cg-bullet-list) are excluded so they keep their custom styling. */
.cg-article ul:not(.cg-bullet-list),
.cg-article ol { margin: 0 0 1.3em; padding-left: 1.6em; }
.cg-article ul:not(.cg-bullet-list) { list-style: disc; }
.cg-article ol { list-style: decimal; }
.cg-article ul:not(.cg-bullet-list) ul { list-style: circle; margin-bottom: 0; }
.cg-article ul:not(.cg-bullet-list) ul ul { list-style: square; }
.cg-article ol ol { list-style: lower-alpha; margin-bottom: 0; }
.cg-article ul:not(.cg-bullet-list) li,
.cg-article ol li { margin-bottom: 0.45em; padding-left: 0.2em; }
.cg-article ul:not(.cg-bullet-list) li::marker,
.cg-article ol li::marker { color: var(--cg-blue); }

/* Single post header + featured image: centered header, image sized to
   exactly match the article's own text column ("the post frame") rather
   than the full page width, so the two line up instead of the image
   looking wider/misaligned against a narrower, left-shifted text block. */
.cg-article__header { text-align: left; margin-bottom: 28px; }
.cg-article__header .cg-post-card__cat { margin-bottom: 14px; }
.cg-article__header h1 { margin-top: 0; }
.cg-article__thumb { margin: 0 0 32px; }
.cg-article__thumb img { width: 100%; height: auto; display: block; margin: 0; border-radius: var(--cg-radius); }

.cg-guide-toc { border: 1px solid var(--cg-steel-100); padding: 20px; background: var(--cg-white); }
.cg-guide-toc h2 { font-size: 1rem; margin-bottom: 10px; }
.cg-guide-toc ol { counter-reset: cg-toc; }
.cg-guide-toc li { counter-increment: cg-toc; padding: 6px 0; border-bottom: 1px solid var(--cg-steel-100); }
.cg-guide-toc li::before { content: counter(cg-toc) "."; color: var(--cg-blue); font-weight: 700; margin-right: 8px; }

/* ---------- Business Portal ---------- */
.cg-plan {
	border: 1px solid var(--cg-steel-100);
	background: var(--cg-white);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cg-plan--featured { border: 2px solid var(--cg-ink); }
.cg-plan__price { font-family: var(--cg-font-display); font-size: 2rem; }
.cg-plan ul li { padding: 6px 0; border-top: 1px solid var(--cg-steel-100); font-size: 0.92rem; }
.cg-step-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--cg-steel-100); }
.cg-step-row__num { font-family: var(--cg-font-display); font-size: 1.6rem; color: var(--cg-green); }

/* ---------- Map page ---------- */
.cg-map-page { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 130px); min-height: 520px; }
@media (max-width: 860px) { .cg-map-page { grid-template-columns: 1fr; height: auto; } }
.cg-map-page__list { overflow-y: auto; border-right: 1px solid var(--cg-steel-100); background: var(--cg-white); padding: 16px; }
.cg-map-page__canvas { background: var(--cg-steel-100); position: relative; }
@media (max-width: 860px) { .cg-map-page__canvas { height: 420px; } }
.cg-map-page__canvas .cg-map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--cg-steel); text-align: center; padding: 20px; }

/* ---------- Footer ---------- */
.cg-footer { background: var(--cg-ink); color: #C7D3D8; padding: 56px 0 24px; }
.cg-footer a { color: #C7D3D8; text-decoration: none; }
.cg-footer a:hover { color: var(--cg-white); text-decoration: underline; }
.cg-footer__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
@media (max-width: 1100px) { .cg-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cg-footer__grid { grid-template-columns: repeat(2, 1fr); } }
.cg-footer__sub { color: var(--cg-white); font-size: 0.8rem; font-weight: 600; margin: 16px 0 6px; opacity: 0.75; }
.cg-widget__title { color: var(--cg-white); font-size: 0.95rem; margin-bottom: 12px; }
.cg-widget ul li { padding: 5px 0; }
.cg-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; }
.cg-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

/* ---------- Mobile nav ---------- */
@media (max-width: 900px) {
	.cg-menu-toggle { display: block; }
	.cg-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--cg-white); border-bottom: 1px solid var(--cg-steel-100); display: none; }
	.cg-nav.is-open { display: block; }
	.cg-nav ul { flex-direction: column; align-items: stretch; padding: 8px; gap: 0; }
	.cg-nav a { padding: 12px 14px; }
	.cg-hero-search { flex-direction: column; }
	.cg-hero-search select { border-left: 0; border-top: 1px solid var(--cg-steel-100); }
}

/* ---------- Utility ---------- */
.cg-text-steel { color: var(--cg-steel); }
.cg-mt-0 { margin-top: 0; }
.cg-center { text-align: center; }
.cg-cta-banner {
	position: relative;
	background: linear-gradient(120deg, var(--cg-blue) 0%, var(--cg-green) 100%);
	padding: 44px 0;
	text-align: center;
}
.cg-cta-banner h2 { margin-bottom: 10px; }
.cg-cta-banner p { margin: 0 auto 20px; }

/* =========================================================================
   EV Trip Planner
   ========================================================================= */
.cg-tp { max-width: var(--cg-container); margin: 0 auto; padding: 28px 24px 64px; }

.cg-tp-form {
	background: var(--cg-white);
	border: 1px solid var(--cg-steel-100);
	border-radius: var(--cg-radius);
	padding: 24px;
	margin-bottom: 24px;
}
.cg-tp-form__row { margin-bottom: 16px; }
.cg-tp-form__row--locations { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.cg-tp-form__row--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cg-tp-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.cg-tp-field label { font-size: 0.82rem; font-weight: 600; color: var(--cg-steel); }
.cg-tp-field input[type="text"],
.cg-tp-field input[type="number"],
.cg-tp-field input[type="datetime-local"],
.cg-tp-field select {
	border: 1px solid var(--cg-steel-100);
	border-radius: var(--cg-radius);
	padding: 10px 12px;
	font-family: var(--cg-font-body);
	font-size: 0.95rem;
	background: var(--cg-white);
}
.cg-tp-field--wide { grid-column: 1 / -1; }
.cg-tp-field__locate {
	position: absolute; right: 8px; top: 30px; border: 0; background: none; cursor: pointer; font-size: 1.05rem;
}
.cg-tp-swap {
	border: 1px solid var(--cg-steel-100); background: var(--cg-white); border-radius: 50%;
	width: 38px; height: 38px; cursor: pointer; font-size: 1rem; align-self: center; margin-bottom: 2px;
}
.cg-tp-swap:hover { background: var(--cg-bg); }
.cg-tp-manual-vehicle { border-top: 1px dashed var(--cg-steel-100); padding-top: 14px; margin-bottom: 16px; }
.cg-tp-prefs { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 0 16px; margin-bottom: 14px; }
.cg-tp-prefs summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.cg-tp-prefs[open] summary { border-bottom: 1px solid var(--cg-steel-100); margin-bottom: 14px; }
.cg-tp-check { display: flex; align-items: center; }
.cg-tp-check label { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.cg-tp-note { font-size: 0.78rem; color: var(--cg-steel); }
.cg-tp-note--block { margin: 10px 0 4px; }
.cg-tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-chip--check { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cg-tp-form__submit { margin-top: 6px; }
.cg-tp-status { margin-top: 8px; color: var(--cg-steel); font-size: 0.88rem; min-height: 1.2em; }
.cg-tp-status--error { color: var(--cg-red); font-weight: 600; }

.cg-tp-empty { padding: 40px 0; text-align: center; }

.cg-tp-summary { background: var(--cg-ink); color: var(--cg-white); border-radius: var(--cg-radius); padding: 24px; margin-bottom: 20px; }
.cg-tp-summary__route { color: var(--cg-white); margin: 0 0 14px; font-size: 1.3rem; }
.cg-tp-summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cg-tp-stat { border-left: 3px solid var(--cg-green); padding-left: 10px; }
.cg-tp-stat b { display: block; font-family: var(--cg-font-display); font-size: 1.25rem; }
.cg-tp-stat span { color: #C7D3D8; font-size: 0.78rem; }
.cg-tp-summary__battery { display: flex; gap: 24px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 14px; font-size: 0.9rem; color: #C7D3D8; }
.cg-tp-warning { background: rgba(192,67,47,0.2); border: 1px solid var(--cg-red); color: var(--cg-white); padding: 10px 14px; border-radius: var(--cg-radius); margin-top: 14px; font-size: 0.88rem; }

.cg-tp-map-wrap { margin-bottom: 24px; }
.cg-map-live--tripplanner { aspect-ratio: 21/9; min-height: 380px; }
.cg-tp-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 0.82rem; color: var(--cg-steel); }
.cg-tp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cg-tp-dot--green { background: #1FA971; }
.cg-tp-dot--blue { background: #1D6FB8; }
.cg-tp-dot--red { background: #C0432F; }
.cg-tp-dot--gray { background: #8FA0A8; }

.cg-tp-cols { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }

.cg-tp-timeline { margin-bottom: 32px; }
.cg-tp-tl-node { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 10px 0; }
.cg-tp-tl-node--stop .cg-tp-tl-body { border-left: 3px solid var(--cg-blue); padding-left: 12px; }
.cg-tp-tl-time { font-weight: 700; color: var(--cg-ink); font-size: 0.9rem; }
.cg-tp-tl-body { font-size: 0.92rem; line-height: 1.5; }
.cg-tp-tl-connector { margin-left: 92px; padding: 4px 0 4px 12px; color: var(--cg-steel); font-size: 0.82rem; border-left: 2px dashed var(--cg-steel-100); }

.cg-tp-stops { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.cg-tp-stop { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 18px; background: var(--cg-white); }
.cg-tp-stop__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cg-tp-stop__name { margin: 0; font-size: 1.05rem; }
.cg-tp-stop__network { font-size: 0.82rem; color: var(--cg-blue); font-weight: 700; white-space: nowrap; }
.cg-tp-stop__address { margin: 2px 0 10px; font-size: 0.88rem; }
.cg-tp-stop__battery { display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--cg-font-display); margin-bottom: 10px; }
.cg-tp-stop__arrow { color: var(--cg-green); }
.cg-tp-stop__meta { font-size: 0.85rem; color: var(--cg-steel); margin-bottom: 10px; }
.cg-tp-stop__amenities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cg-tp-stop__alts { border-top: 1px solid var(--cg-steel-100); padding-top: 10px; margin-bottom: 10px; }
.cg-tp-stop__alts summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--cg-steel); }
.cg-tp-alt-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.85rem; }
.cg-tp-alt-table th, .cg-tp-alt-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--cg-steel-100); }
.cg-tp-alt-table .cg-btn { padding: 6px 10px; font-size: 0.78rem; }
.cg-tp-stop__link { font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.cg-tp-stop__link:hover { text-decoration: underline; }

.cg-tp-cost-card, .cg-tp-report {
	background: var(--cg-white); border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius);
	padding: 18px; margin-bottom: 20px;
}
.cg-tp-cost-card h3, .cg-tp-report h3 { margin-top: 0; font-size: 1rem; }
.cg-tp-cost-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cg-tp-cost-inputs label { font-size: 0.8rem; color: var(--cg-steel); display: flex; flex-direction: column; gap: 4px; }
.cg-tp-cost-inputs input { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 8px 10px; }
.cg-tp-cost-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--cg-steel-100); font-size: 0.9rem; }
.cg-tp-cost-row--highlight { color: var(--cg-green); font-weight: 700; }
.cg-tp-report table.cg-stat-table { margin-bottom: 16px; }
.cg-tp-report h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cg-steel); margin: 18px 0 8px; }

@media (max-width: 900px) {
	.cg-tp-cols { grid-template-columns: 1fr; }
	.cg-tp-form__row--locations { grid-template-columns: 1fr; }
	.cg-tp-swap { justify-self: start; }
}

@media print {
	.cg-header, .cg-footer, .cg-breadcrumbs, .cg-tp-form, .cg-tp-map-wrap, #cg-tp-print, .cg-tp-stops details { display: none !important; }
	.cg-tp-cols { grid-template-columns: 1fr; }
}

/* Amazon-style "About This Item" bullet list on the single accessory page */
.cg-bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cg-bullet-list li { position: relative; padding-left: 26px; line-height: 1.55; }
.cg-bullet-list li::before {
	content: "✓"; position: absolute; left: 0; top: 0.05em; color: var(--cg-green); font-weight: 700;
}

/* =========================================================================
   User Accounts — login/register, dashboard, claim & suggestion forms
   ========================================================================= */
.cg-header__account { margin-left: 8px; }
@media (max-width: 900px) { .cg-header__account { margin-left: 0; } }

/* Login / Register (logged-out /account/) */
.cg-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 780px) { .cg-account-grid { grid-template-columns: 1fr; } }
.cg-account-card { background: var(--cg-white); border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 24px; }

.cg-stacked-form { display: flex; flex-direction: column; gap: 6px; }
.cg-stacked-form label { font-size: 0.85rem; font-weight: 600; color: var(--cg-steel); margin-top: 10px; }
.cg-stacked-form input[type="text"],
.cg-stacked-form input[type="email"],
.cg-stacked-form input[type="password"] {
	border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 10px 12px; font-family: var(--cg-font-body); font-size: 0.95rem;
}
.cg-stacked-form .cg-btn { margin-top: 16px; }
.cg-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; color: var(--cg-ink) !important; font-size: 0.88rem !important; }
.cg-form-link { display: block; text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--cg-steel); text-decoration: underline; }
.cg-form-hint { font-size: 0.78rem; color: var(--cg-steel); margin: 2px 0 0; }
.cg-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Sign-up entry point: header button, and /account/?form=register putting the sign-up card first */
.cg-header__signup { white-space: nowrap; }
@media (max-width: 480px) { .cg-header__account { display: none; } }
.cg-account-grid--signup-first .cg-account-card--signup { order: -1; }
.cg-account-card--profile { max-width: 520px; }

/* Dashboard (logged-in /account/) */
.cg-account-section { margin-top: 36px; }
.cg-account-section h2 { margin-bottom: 12px; }
.cg-account-table { border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); overflow: hidden; }
.cg-account-row {
	display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--cg-steel-100);
	flex-wrap: wrap; background: var(--cg-white);
}
.cg-account-row:last-child { border-bottom: none; }
.cg-account-row > span:first-child { flex: 1; min-width: 160px; font-weight: 600; }

.cg-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.cg-pill--pending { background: #FFF4E0; color: #96650B; }
.cg-pill--approved { background: rgba(31,169,113,0.15); color: var(--cg-green); }
.cg-pill--rejected { background: rgba(192,67,47,0.12); color: var(--cg-red); }

/* Claim / Suggest-an-edit boxes on the single station page */
.cg-owner-box { background: var(--cg-bg); border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 22px; }
.cg-owner-box h2 { font-size: 1.1rem; }

.cg-inline-form { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cg-inline-form__row { display: flex; flex-direction: column; gap: 5px; }
.cg-inline-form__row--wide { grid-column: 1 / -1; }
.cg-inline-form label { font-size: 0.82rem; font-weight: 600; color: var(--cg-steel); }
.cg-inline-form input, .cg-inline-form select, .cg-inline-form textarea {
	border: 1px solid var(--cg-steel-100); border-radius: var(--cg-radius); padding: 9px 11px; font-family: var(--cg-font-body); font-size: 0.92rem; background: var(--cg-white);
}
.cg-inline-form textarea { resize: vertical; }
.cg-inline-form .cg-btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
@media (max-width: 640px) { .cg-inline-form { grid-template-columns: 1fr; } }

/* Shared form notices (errors/success), used on account + claim + suggestion forms */
.cg-form-notice { border-radius: var(--cg-radius); padding: 12px 16px; margin-bottom: 14px; font-size: 0.88rem; }
.cg-form-notice ul { margin: 0; padding-left: 18px; }
.cg-form-notice--error { background: rgba(192,67,47,0.08); border: 1px solid var(--cg-red); color: var(--cg-red); }
.cg-form-notice--success { background: rgba(31,169,113,0.08); border: 1px solid var(--cg-green); color: #146B47; }
.cg-form-notice--pending { background: #FFF4E0; border: 1px solid #E0A83B; color: #7A5308; padding: 12px 16px; border-radius: var(--cg-radius); font-size: 0.88rem; }

/* ---------- EV Catalogue (archive, landing pages, vehicle pages) ---------- */
.cg-ev-examples { font-size: 0.9rem; margin-top: 10px; }
.cg-ev-examples a { margin-right: 12px; }

/* Cards — photo is contained, not cropped, so the whole car shows */
.cg-ev-card { background: var(--cg-white); border: 1px solid var(--cg-steel-100); display: flex; flex-direction: column; }
.cg-ev-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--cg-bg); overflow: hidden; }
.cg-ev-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cg-ev-card__media-fallback { font-size: 2.4rem; color: var(--cg-steel); }
.cg-ev-card__year { position: absolute; top: 10px; left: 10px; }
.cg-ev-card__body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cg-ev-card__make { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cg-steel); }
.cg-ev-card__title { margin: 0; font-size: 1.1rem; }
.cg-ev-card__title a { text-decoration: none; }
.cg-ev-card__title a:hover { text-decoration: underline; }
.cg-ev-card__sub { margin: 0 0 8px; font-size: 0.85rem; color: var(--cg-steel); }
.cg-ev-card__specs { list-style: none; margin: 0 0 14px; padding: 10px 0 0; border-top: 1px solid var(--cg-steel-100); display: grid; gap: 4px; font-size: 0.88rem; }
.cg-ev-card__specs li { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0; }
.cg-ev-card__specs span { color: var(--cg-steel); }
.cg-ev-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-ev-card__price { font-weight: 700; font-size: 0.92rem; }

/* Vehicle page hero */
.cg-ev-hero { padding: 36px 0 28px; border-bottom: 1px solid var(--cg-steel-100); }
.cg-ev-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .cg-ev-hero__grid { grid-template-columns: 1fr; gap: 24px; } }
.cg-ev-hero__photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--cg-bg); border: 1px solid var(--cg-steel-100); overflow: hidden; }
.cg-ev-hero__photo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cg-ev-hero__eyebrow { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cg-steel); }
.cg-ev-hero h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; margin-bottom: 18px; }
.cg-ev-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cg-ev-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--cg-steel-100); border: 1px solid var(--cg-steel-100); margin: 0; }
.cg-ev-stats > div { background: var(--cg-white); padding: 12px 14px; }
.cg-ev-stats dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cg-steel); }
.cg-ev-stats dd { margin: 2px 0 0; font-family: var(--cg-font-display); font-weight: 800; font-size: 1.15rem; color: var(--cg-ink); }

/* Specifications and trims */
.cg-ev-general { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 8px; }
.cg-ev-specgroup h3, .cg-ev-specgroup h4 { margin: 0 0 8px; font-size: 1rem; }
.cg-ev-specs { margin: 0; }
.cg-ev-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--cg-steel-100); font-size: 0.93rem; }
.cg-ev-specs dt { color: var(--cg-steel); }
.cg-ev-specs dd { margin: 0; font-weight: 600; text-align: right; }
.cg-ev-trims-heading { margin-top: 32px; }
.cg-ev-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cg-ev-years[hidden] { display: none; }
.cg-ev-years button[aria-pressed="true"] { background: var(--cg-ink); color: var(--cg-white); border-color: var(--cg-ink); }
.cg-ev-trimcard { background: var(--cg-white); border: 1px solid var(--cg-steel-100); margin-bottom: 10px; }
.cg-ev-trimcard[hidden] { display: none; }
.cg-ev-trimcard > summary { cursor: pointer; padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; list-style: none; position: relative; padding-right: 48px; }
.cg-ev-trimcard > summary::-webkit-details-marker { display: none; }
.cg-ev-trimcard > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--cg-blue); }
.cg-ev-trimcard[open] > summary::after { content: "\2212"; }
.cg-ev-trimcard[open] > summary { border-bottom: 1px solid var(--cg-steel-100); }
.cg-ev-trimcard__name { font-weight: 700; }
.cg-ev-trimcard__chips { color: var(--cg-steel); font-size: 0.9rem; }
.cg-ev-trimcard__body { padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* Charging panels and CTA band */
.cg-ev-panel { background: var(--cg-white); border: 1px solid var(--cg-steel-100); padding: 22px; }
.cg-ev-panel h3 { margin-top: 0; }
.cg-ev-note { font-size: 0.82rem; margin-top: 10px; }
.cg-ev-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.cg-ev-cta p { margin-bottom: 0; max-width: 62ch; }

/* ---------- EV tools: comparison + charge time calculator ---------- */
.cg-ev-card__compare { display: block; padding: 0 16px 14px; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.cg-ev-card__compare:hover { text-decoration: underline; }

.cg-ev-compare-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.cg-ev-compare-picker select { min-width: 220px; padding: 10px 12px; border: 1px solid var(--cg-steel-100); background: var(--cg-white); font: inherit; }
.cg-ev-compare-links { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cg-ev-compare-links li { margin: 0; padding: 0; }

.cg-ev-compare { --cg-label-w: 190px; background: var(--cg-white); border: 1px solid var(--cg-steel-100); }
.cg-ev-compare__head, .cg-ev-compare__row { display: grid; grid-template-columns: var(--cg-label-w) repeat(var(--cg-cols, 2), minmax(0, 1fr)); }
.cg-ev-compare__head { border-bottom: 2px solid var(--cg-steel-100); }
.cg-ev-compare__vehicle { padding: 18px 16px; text-align: center; border-left: 1px solid var(--cg-steel-100); }
.cg-ev-compare__photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--cg-bg); margin-bottom: 10px; overflow: hidden; }
.cg-ev-compare__photo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cg-ev-compare__name { margin: 0 0 6px; font-size: 1.05rem; }
.cg-ev-compare__name a { text-decoration: none; }
.cg-ev-compare__links { margin: 0; font-size: 0.82rem; }
.cg-ev-compare__sectiontitle { margin: 0; padding: 10px 16px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--cg-bg); color: var(--cg-steel); border-top: 1px solid var(--cg-steel-100); }
.cg-ev-compare__row { border-top: 1px solid var(--cg-steel-100); }
.cg-ev-compare__label { padding: 12px 16px; font-size: 0.9rem; color: var(--cg-steel); }
.cg-ev-compare__cell { padding: 12px 16px; font-weight: 600; text-align: center; border-left: 1px solid var(--cg-steel-100); }
.cg-ev-compare__cell.is-best { background: rgba(0, 168, 107, 0.09); color: var(--cg-ink); }
.cg-ev-compare__best { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--cg-green); color: var(--cg-white); border-radius: 2px; vertical-align: middle; }
@media (max-width: 700px) {
	.cg-ev-compare { --cg-label-w: 1fr; }
	.cg-ev-compare__head { grid-template-columns: repeat(var(--cg-cols, 2), minmax(0, 1fr)); }
	.cg-ev-compare__corner { display: none; }
	.cg-ev-compare__vehicle { padding: 12px 8px; }
	.cg-ev-compare__row { grid-template-columns: repeat(var(--cg-cols, 2), minmax(0, 1fr)); }
	.cg-ev-compare__label { grid-column: 1 / -1; padding: 8px 12px 0; font-size: 0.8rem; }
	.cg-ev-compare__cell { padding: 4px 8px 12px; font-size: 0.9rem; border-left: 0; }
	.cg-ev-compare__cell::before { content: attr(data-vehicle); display: block; font-size: 0.68rem; font-weight: 400; color: var(--cg-steel); }
}

.cg-calc { background: var(--cg-white); border: 1px solid var(--cg-steel-100); padding: 24px; max-width: 760px; }
.cg-calc__vehiclebox { margin-bottom: 18px; }
.cg-calc__vehiclebox > label, .cg-calc__grid label, .cg-calc__levels legend { display: block; font-size: 0.85rem; font-weight: 600; color: var(--cg-steel); margin-bottom: 4px; }
.cg-calc input[type="number"], .cg-calc select { width: 100%; padding: 10px 12px; border: 1px solid var(--cg-steel-100); background: var(--cg-white); font: inherit; }
.cg-calc__custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.cg-calc__custom[hidden] { display: none; }
.cg-calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 20px; align-items: start; }
.cg-calc__levels { border: 0; padding: 0; margin: 0; }
.cg-calc__levels label { display: block; font-weight: 400; color: var(--cg-ink); margin: 4px 0; }
.cg-calc__power-wrap[hidden] { display: none; }
.cg-calc__result { margin-top: 22px; padding: 18px 20px; background: var(--cg-bg); border-left: 4px solid var(--cg-green); }
.cg-calc__label { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cg-steel); }
.cg-calc__time { margin: 2px 0 6px; font-family: var(--cg-font-display); font-weight: 800; font-size: 2rem; line-height: 1.15; color: var(--cg-ink); }
.cg-calc__detail, .cg-calc__note { margin: 0 0 4px; font-size: 0.92rem; }
.cg-calc__disclaimer { margin: 14px 0 0; font-size: 0.78rem; }

/* ---------- EV pricing + charging cost ---------- */
.cg-ev-pricehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px; margin-bottom: 20px; }
.cg-ev-pricehead__price { margin: 0; font-family: var(--cg-font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.1; color: var(--cg-ink); }
.cg-ev-pricehead__range { margin: 0 0 6px; }
.cg-ev-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cg-ev-variant { background: var(--cg-white); border: 1px solid var(--cg-steel-100); padding: 20px; }
.cg-ev-variant__badges { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-ev-variant__badges .cg-badge { position: static; }
.cg-ev-variant__name { margin: 0 0 4px; font-size: 1.05rem; }
.cg-ev-variant__price { margin: 0; font-family: var(--cg-font-display); font-weight: 800; font-size: 1.7rem; color: var(--cg-ink); }
.cg-ev-variant__dest { margin: 2px 0 12px; font-size: 0.85rem; }
.cg-ev-variant .cg-ev-specs { margin-top: 12px; }

.cg-cost .cg-calc__levels label { font-weight: 400; }
.cg-cost__gas { margin-top: 16px; }
.cg-cost__gas summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--cg-blue); }
.cg-cost__gas .cg-calc__grid { margin-top: 12px; }
.cg-cost__results { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--cg-steel-100); border: 1px solid var(--cg-steel-100); }
.cg-cost__stat { background: var(--cg-bg); padding: 16px 18px; }
.cg-cost__value { margin: 2px 0 2px; font-family: var(--cg-font-display); font-weight: 800; font-size: 1.8rem; line-height: 1.15; color: var(--cg-ink); }
.cg-cost__sub { margin: 0; font-size: 0.85rem; color: var(--cg-steel); }
.cg-cost__compare { margin: 14px 0 0; font-weight: 600; }
.cg-cost__message { margin: 8px 0 0; font-size: 0.9rem; }

/* ---------- EV Tools hub ---------- */
.cg-ev-hub-back { margin: 0 0 8px; font-size: 0.88rem; }
.cg-section--dark .cg-ev-hub-back a { color: var(--cg-white); opacity: 0.85; }
.cg-tool-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--cg-white); border: 1px solid var(--cg-steel-100); color: var(--cg-ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.cg-tool-card:hover, a.cg-tool-card:focus-visible { border-color: var(--cg-blue); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.cg-tool-card.is-soon { background: var(--cg-bg); border-style: dashed; color: var(--cg-steel); }
.cg-tool-card__icon { font-size: 1.8rem; line-height: 1; }
.cg-tool-card__title { margin: 6px 0 0; font-size: 1.1rem; }
.cg-tool-card__desc { margin: 0; flex: 1; font-size: 0.93rem; color: var(--cg-steel); }
.cg-tool-card__foot { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cg-tool-card__open { font-weight: 700; font-size: 0.9rem; color: var(--cg-blue); }
.cg-tool-card__meta { font-size: 0.8rem; color: var(--cg-steel); }

/* ---------- Homepage: EV Catalogue section ---------- */
.cg-home-ev__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.cg-home-ev__chip { display: inline-block; padding: 7px 14px; border: 1px solid var(--cg-steel-100); border-radius: 999px; background: var(--cg-white); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--cg-ink); }
.cg-home-ev__chip:hover, .cg-home-ev__chip:focus-visible { border-color: var(--cg-blue); color: var(--cg-blue); }

/* ---------- Charger Investment Calculator ---------- */
.cg-inv { max-width: 980px; }
.cg-inv__group { border: 0; padding: 0; margin: 0 0 22px; }
.cg-inv__group > legend { font-family: var(--cg-font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; padding: 0; }
.cg-inv__hint { display: block; margin-top: 3px; font-size: 0.74rem; font-weight: 400; color: var(--cg-steel); line-height: 1.35; }
.cg-inv__result { margin-top: 8px; padding: 22px; background: var(--cg-bg); border-left: 4px solid var(--cg-green); }
.cg-inv__headline { margin: 2px 0 4px; font-family: var(--cg-font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.2; color: var(--cg-ink); }
.cg-inv__sub { margin: 0 0 18px; color: var(--cg-steel); }
.cg-inv__h3 { margin: 24px 0 8px; font-size: 1rem; }
.cg-inv__chart { position: relative; display: flex; gap: 4px; height: 200px; margin: 10px 0 30px; }
.cg-inv__chart::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--cg-steel); }
.cg-inv__col { position: relative; flex: 1; min-width: 0; }
.cg-inv__bar { position: absolute; left: 14%; right: 14%; min-height: 1px; }
.cg-inv__bar.is-pos { bottom: 50%; background: var(--cg-green); }
.cg-inv__bar.is-neg { top: 50%; background: #d64545; }
.cg-inv__yr { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 0.72rem; color: var(--cg-steel); }
.cg-inv__notes { margin: 14px 0 0; padding-left: 18px; font-size: 0.9rem; }
.cg-inv__notes li { margin-bottom: 6px; }
.cg-inv .cg-calc__grid label { font-size: 0.82rem; }