/* ==========================================================================
   viralEV — CSS layer on top of Divi 5
   Source of truth for colors = Divi Global Colors (ids gcid-vev-*).
   The --vev-* tokens below just alias them (with hex fallbacks) so this file
   never hardcodes a brand color that Divi doesn't also know about.
   Only put here what Divi's builder controls can't express.
   ========================================================================== */

/* ---------- 1. Self-hosted Inter (variable 400–900), Greek + Latin ---------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokens (aliases of Divi Global Colors) ---------- */
:root {
	--vev-electric:      var(--gcid-vev-electric, #008cea);      /* fills, lines, decoration */
	--vev-electric-text: var(--gcid-vev-electric-text, #0076d2); /* text/links/button bg: 4.6:1 on white (#008cea is only 3.5:1) */
	--vev-volt:          var(--gcid-vev-volt, #40d872);
	--vev-volt-deep:     var(--gcid-vev-volt-deep, #005f00);
	--vev-live:          var(--gcid-vev-live, #ee343b);
	--vev-ink:           var(--gcid-vev-ink, #050c13);
	--vev-ink-soft:      var(--gcid-vev-ink-soft, #474e55);
	--vev-bg:            var(--gcid-vev-background, #fbfaf6);
	--vev-surface:       var(--gcid-vev-surface, #ffffff);
	--vev-muted:         var(--gcid-vev-muted, #f0eee9);
	--vev-accent:        var(--gcid-vev-accent, #e2e9f0);
	--vev-border:        var(--gcid-vev-border, #dadee3);

	--vev-radius-sm: 4px;
	--vev-radius-md: 6px;
	--vev-radius:    8px;
	--vev-radius-xl: 12px;
	--vev-radius-2xl: 16px;

	/* Shadows are ink-hued, never pure black. */
	--vev-shadow-soft:     0 1px 2px rgb(5 12 19 / .04), 0 2px 8px -2px rgb(5 12 19 / .06);
	--vev-shadow-elevated: 0 4px 12px rgb(5 12 19 / .08), 0 12px 32px rgb(5 12 19 / .12);
	--vev-shadow-glow:     0 0 0 1px rgb(0 140 234 / .15), 0 8px 32px rgb(0 140 234 / .35);

	--vev-gradient-electric:   linear-gradient(135deg, #008cea, #00be83);
	--vev-gradient-overlay:    linear-gradient(180deg, transparent, rgb(5 12 19 / .4) 50%, rgb(2 7 12 / .95));
	--vev-gradient-instrument: linear-gradient(145deg, #eff2f5, #e4e8ed);

	--vev-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 3. Base typography refinements ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Tight display tracking from the style guide; Divi can't set negative letter-spacing globally. */
h1 { letter-spacing: -.025em; }
h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.015em; }

/* Numbers in data contexts line up (prices, kWh, stats). */
.vev-tnum { font-variant-numeric: tabular-nums; }

/* ---------- 4. Accessibility ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--vev-electric);
	outline-offset: 2px;
	border-radius: var(--vev-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 5. Small utilities used by Divi modules (add via CSS Class field) ---------- */

/* Eyebrow labels: use the Divi Text preset "vev · Eyebrow" (no CSS needed). */

/* Blog module cards: uniform 16:10 thumbnails (style guide editorial ratio).
   Divi's Blog module has no aspect-ratio control, so featured images of mixed
   sizes would give uneven card heights. */
.et_pb_blog_grid .et_pb_image_container img,
.et_pb_posts .et_pb_image_container img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Card hover: lift + image zoom (style guide §components). Put on the module or column. */
.vev-card {
	transition: transform .3s var(--vev-ease), box-shadow .3s var(--vev-ease);
}
.vev-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--vev-shadow-elevated);
}
.vev-card img {
	transition: transform .7s var(--vev-ease);
}
.vev-card:hover img {
	transform: scale(1.06);
}

/* ---------- 6. Header (Theme Builder "vev · Header") ---------- */

/* Sticky header; the 36px ticker scrolls away, the nav bar stays. */
.et-l--header {
	position: sticky;
	top: -36px;
	z-index: 100;
}
body.admin-bar .et-l--header { top: -4px; } /* 32px admin bar − 36px ticker */
/* Divi's #page-container overflow would stop position:sticky from working. */
#page-container { overflow: visible !important; }

/* Glass nav bar: Divi's background control can't do backdrop-filter. */
.vev-glass {
	background-color: rgb(255 255 255 / .82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

@media (max-width: 980px) {
	.vev-hide-tablet { display: none !important; }
}
.et-l--header .et_pb_button { white-space: nowrap; }

/* Headline ticker ([vev_ticker]). */
.vev-ticker {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 36px;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	overflow: hidden;
}
.vev-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.vev-ticker__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vev-live);
	box-shadow: 0 0 0 0 rgb(238 52 59 / .6);
	animation: vev-pulse 2s infinite;
}
.vev-ticker__viewport {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.vev-ticker__track {
	display: flex;
	flex: none;
	gap: 40px;
	margin: 0;
	padding: 0 40px 0 0 !important;
	list-style: none;
	white-space: nowrap;
	animation: vev-marquee 80s linear infinite;
}
.vev-ticker__track li { padding: 0; }
.vev-ticker__track li::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--vev-electric);
	vertical-align: middle;
}
.vev-ticker a { color: rgb(255 255 255 / .82); }
.vev-ticker a:hover, .vev-ticker a:focus-visible { color: #fff; }
.vev-ticker:hover .vev-ticker__track,
.vev-ticker:focus-within .vev-ticker__track { animation-play-state: paused; }
@keyframes vev-marquee { to { transform: translateX(-100%); } }
@keyframes vev-pulse {
	70%  { box-shadow: 0 0 0 8px rgb(238 52 59 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(238 52 59 / 0); }
}
/* With reduced motion the global rule stops the animation; let people scroll instead. */
@media (prefers-reduced-motion: reduce) {
	.vev-ticker__viewport { overflow-x: auto; }
}

/* ---------- 7. Category badges (Blog cards + Post Title meta) ---------- */
/* Divi prints category links as plain text (rel="tag" in Blog cards, rel="category tag"
   in Post Title); the style guide shows tinted badges. Matched on the category URL so a
   renamed category label keeps its color. */
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/"] {
	display: inline-block;
	margin: 2px 0;
	padding: 3px 8px;
	border-radius: var(--vev-radius-sm);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: rgb(0 140 234 / .1);
	color: var(--vev-electric-text) !important;
}
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/fortisi-mpataries/"] { background: #fbedd1; color: #834300 !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/technologia/"]       { background: rgb(64 216 114 / .15); color: var(--vev-volt-deep) !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/mikrokinitikotita/"] { background: #eae7ff; color: #5937af !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/agora-viomichania/"] { background: rgb(5 12 19 / .07); color: var(--vev-ink) !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container, .vev-badges .et_pb_text_inner) a[href*="/category/odigoi/"]            { background: var(--vev-accent); color: var(--vev-ink) !important; }

/* ---------- 8. Article body (Post Content module) ---------- */
.et_pb_post_content img,
.et_pb_title_featured_container img { border-radius: var(--vev-radius-xl); }
/* Featured images arrive in any orientation; keep the hero at the editorial 16:9. */
.et_pb_title_featured_container img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.et_pb_post_content figcaption,
.et_pb_post_content .wp-caption-text { font-size: 14px; color: var(--vev-ink-soft); }

/* ---------- 9. Footer ---------- */
.vev-footer-links ul { list-style: none; margin: 0; padding: 0 !important; }
.vev-footer-links li { margin: 0 0 10px; }
/* A legacy link color from the old layout packs wins over the Text preset's link color here. */
.vev-footer-links a { color: rgb(255 255 255 / .82) !important; }
.vev-footer-links a:hover, .vev-footer-links a:focus-visible { color: #fff !important; }

/* ---------- 10. Homepage (Loop Builder cards) ---------- */
/* Hero: badge and title sit on a dark image overlay. */
/* Beats the generic badge rule (same :is() scope, one class more). */
.vev-hero-card.vev-badges .et_pb_text_inner a[href*="/category/"] { background: var(--vev-electric-text) !important; color: #fff !important; }
.vev-hero-card h2 a { color: #fff; }
.vev-hero-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Side list thumbnails: consistent 4:3 crop. */
.vev-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vev-radius); }
/* Flex child must be allowed to shrink or long Greek titles overflow the sidebar. */
.vev-side-item > .et_pb_group { flex: 1 1 0; min-width: 0; }
.vev-side-item h3 { overflow-wrap: anywhere; }
.vev-side-item h3 a { color: var(--vev-ink); }
.vev-side-item h3 a:hover { color: var(--vev-electric-text); }
/* PlugMeNow map preview: electric glow from the style guide. */
.vev-map-preview img { box-shadow: var(--vev-shadow-glow); }

/* ---------- 11. Static pages ---------- */
/* Long-form legal/about text: comfortable rhythm for headings and lists pasted as HTML. */
.vev-prose h2, .vev-prose h3, .vev-prose h4 { margin: 1.8em 0 .5em; }
.vev-prose p, .vev-prose li { font-size: 17px; line-height: 1.75; }
.vev-prose ul, .vev-prose ol { padding-left: 1.2em; margin-bottom: 1.2em; }
.vev-prose strong { color: var(--vev-ink); }
.et_pb_text_inner ul.vev-link-list { list-style: none !important; margin: 0; padding: 0 !important; }
.vev-link-list li { padding: 10px 0; border-bottom: 1px solid var(--vev-border); }
.vev-link-list li:last-child { border-bottom: 0; }
/* Contact form: inputs and submit in the brand style (the Contact Form module has no brand preset yet). */
.vev-form .et_pb_contact_field input, .vev-form .et_pb_contact_field textarea {
	background: var(--vev-surface) !important; border: 1px solid var(--vev-border) !important; border-radius: var(--vev-radius) !important; color: var(--vev-ink) !important; font-size: 16px !important;
}
.vev-form .et_pb_contact_field input:focus, .vev-form .et_pb_contact_field textarea:focus {
	border-color: var(--vev-electric) !important; box-shadow: 0 0 0 3px rgb(0 140 234 / .15);
}
.vev-form .et_pb_contact_submit {
	background: var(--vev-electric-text) !important; color: #fff !important; border: 0 !important; border-radius: var(--vev-radius) !important;
	padding: 12px 24px !important; font-size: 15px !important; font-weight: 600 !important;
}
.vev-form .et_pb_contact_submit:hover { background: var(--vev-ink) !important; }
.vev-form .et_pb_contact_submit::after { display: none !important; }

/* ---------- 12. Rhythm: patterns, chips, feature cards ---------- */
/* Subtle "instrument" dot grid for muted sections (style guide). Divi's bg color stays underneath. */
.vev-dots {
	background-image: radial-gradient(rgb(5 12 19 / .08) 1px, transparent 1.5px) !important;
	background-size: 20px 20px !important;
}
/* Section chips: the category badge, one size up. */
.vev-chips { line-height: 2.6; }
.vev-chips a[href*="/category/"] { font-size: 12px !important; padding: 8px 14px !important; margin-right: 6px; border-radius: 99px !important; }
.vev-chips a[href*="/category/"]:hover { filter: brightness(.95); }
/* Feature cards: no stray paragraph margin at the bottom. */
.vev-feature .et_pb_text_inner p:last-child { padding-bottom: 0; }
/* Links inside the dark contact card. */
.vev-contact-card .vev-link-list li { border-bottom-color: rgb(255 255 255 / .12); }
/* PlugMeNow embed: the plugin sizes the map to the viewport, which traps touch scrolling on
   phones. Cap it so part of the page always stays reachable around the map. */
#ev-map .plugmenow-iframe {
	height: min(600px, 70vh) !important;
	min-height: 420px;
	border-radius: var(--vev-radius-xl);
}

/* ---------- 13. Tools ([vev_tools], [vev_charge_mini]) ---------- */
/* Layout from the style guide's ChargingCalculator: inputs on the left, dark "instrument"
   read-out on the right with big volt numbers. */
.vev-tools { font-variant-numeric: tabular-nums; }
.vev-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--vev-muted); border-radius: 99px; flex-wrap: wrap; }
.vev-tab { border: 0; background: transparent; padding: 10px 18px; border-radius: 99px; font: 600 15px/1.2 Inter, sans-serif; color: var(--vev-ink-soft); cursor: pointer; }
.vev-tab.is-active { background: var(--vev-surface); color: var(--vev-ink); box-shadow: var(--vev-shadow-soft); }
.vev-panel { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.vev-panel[hidden] { display: none; }
.vev-panel__form { background: var(--vev-surface); border: 1px solid var(--vev-border); border-radius: var(--vev-radius-2xl); padding: 28px; }
.vev-panel__form fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.vev-panel__form fieldset:last-child { margin-bottom: 0; }
.vev-panel__form legend { font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vev-electric-text); margin-bottom: 12px; padding: 0; }
.vev-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.vev-field label { display: block; font: 600 14px/1.3 Inter, sans-serif; color: var(--vev-ink); margin-bottom: 6px; }
.vev-input { display: flex; align-items: center; border: 1px solid var(--vev-border); border-radius: var(--vev-radius); background: var(--vev-surface); }
.vev-input:focus-within { border-color: var(--vev-electric); box-shadow: 0 0 0 3px rgb(0 140 234 / .15); }
.vev-input input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 10px 12px !important; font: 500 16px/1.2 Inter, sans-serif; color: var(--vev-ink); outline: none; box-shadow: none !important; }
.vev-unit { padding: 0 12px; font-size: 13px; color: var(--vev-ink-soft); white-space: nowrap; }
.vev-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.vev-seg__btn { border: 1px solid var(--vev-border); background: var(--vev-surface); border-radius: 99px; padding: 8px 14px; font: 600 14px/1.2 Inter, sans-serif; color: var(--vev-ink); cursor: pointer; }
.vev-seg__btn:hover { background: var(--vev-accent); }
.vev-seg__btn.is-active { background: var(--vev-ink); border-color: var(--vev-ink); color: #fff; }
.vev-panel__out {
	position: sticky; top: 120px;
	background: var(--vev-ink) radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.5px) 0 0 / 18px 18px;
	color: #fff; border-radius: var(--vev-radius-2xl); padding: 28px;
}
.vev-out__label { font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .6); margin: 0 0 8px; padding: 0; }
.vev-out__big { font: 800 44px/1.05 Inter, sans-serif; letter-spacing: -.03em; color: var(--vev-volt); margin: 0 0 20px; padding: 0; }
.vev-out__list { margin: 0; }
.vev-out__list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgb(255 255 255 / .12); }
.vev-out__list dt { color: rgb(255 255 255 / .7); font-size: 14px; }
.vev-out__list dd { margin: 0; font-weight: 700; color: #fff; text-align: right; }
.vev-bars { margin: 0 0 16px; }
.vev-bar { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.vev-bar__label { color: rgb(255 255 255 / .75); }
.vev-bar__track { height: 10px; background: rgb(255 255 255 / .1); border-radius: 99px; overflow: hidden; }
.vev-bar__fill { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .4s var(--vev-ease); }
.vev-bar__fill--ev { background: var(--vev-volt); }
.vev-bar__fill--ice { background: var(--vev-live); }
.vev-bar__val { font-weight: 700; }
.vev-tools__note { margin-top: 20px; font-size: 13px; color: var(--vev-ink-soft); max-width: 760px; }
@media (max-width: 980px) {
	.vev-panel { grid-template-columns: 1fr; }
	.vev-panel__out { position: static; }
}
@media (max-width: 480px) {
	.vev-grid2 { grid-template-columns: 1fr; }
	.vev-out__big { font-size: 36px; }
}
/* Sidebar mini calculator */
.vev-mini .vev-panel--mini { display: block; background: var(--vev-gradient-instrument); border: 1px solid var(--vev-border); border-radius: var(--vev-radius-xl); padding: 20px; }
.vev-mini__title { font: 700 16px/1.3 Inter, sans-serif; color: var(--vev-ink); margin: 0 0 12px; padding: 0; }
.vev-mini .vev-panel__form { background: none; border: 0; padding: 0; }
.vev-mini .vev-seg__btn { padding: 6px 10px; font-size: 13px; }
.vev-mini__out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.vev-mini__out > div { background: var(--vev-ink); color: #fff; border-radius: var(--vev-radius); padding: 10px 12px; }
.vev-mini__out span { display: block; font-size: 12px; color: rgb(255 255 255 / .65); }
.vev-mini__out strong { font-size: 18px; color: var(--vev-volt); font-variant-numeric: tabular-nums; }
.vev-mini__link { font-weight: 600; font-size: 14px; }
.vev-panel__form .vev-seg--where { margin-top: 16px; }

/* ---------- 14. Tools: finishing touches ---------- */
.vev-ico { flex: none; vertical-align: -3px; margin-right: 6px; }
.vev-tab, .vev-seg__btn { display: inline-flex; align-items: center; }
.vev-tab .vev-ico { color: var(--vev-electric-text); }
.vev-tab.is-active .vev-ico { color: var(--vev-electric); }
.vev-seg__btn.is-active .vev-ico { color: var(--vev-volt); }
/* Numbered steps in the form. */
.vev-step {
	display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px;
	border-radius: 50%; background: var(--vev-accent); color: var(--vev-electric-text);
	font-size: 11px; letter-spacing: 0; vertical-align: 1px;
}
/* Battery gauge in the dark read-out. */
.vev-gauge { display: flex; align-items: center; margin: -6px 0 6px; }
.vev-gauge__cell {
	position: relative; flex: 1; height: 26px; border-radius: 7px;
	border: 2px solid rgb(255 255 255 / .35); overflow: hidden;
}
.vev-gauge__base, .vev-gauge__add { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; transition: width .45s var(--vev-ease), left .45s var(--vev-ease); }
.vev-gauge__base { left: 3px; background: rgb(255 255 255 / .22); max-width: calc(100% - 6px); }
.vev-gauge__add { background: linear-gradient(90deg, var(--vev-volt), #00be83); box-shadow: 0 0 12px rgb(64 216 114 / .45); max-width: calc(100% - 6px); }
.vev-gauge__cap { width: 5px; height: 10px; margin-left: 3px; border-radius: 0 2px 2px 0; background: rgb(255 255 255 / .35); }
.vev-gauge__scale { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; font-size: 13px; color: rgb(255 255 255 / .65); font-variant-numeric: tabular-nums; }
.vev-gauge__arrow { color: var(--vev-volt); }
/* Soft fade on the headline figure after a change. */
@keyframes vev-update { from { opacity: .45; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.vev-out__big.is-updating { animation: vev-update .35s var(--vev-ease); }
/* Result panel: a thin electric hairline on top, echoing the feature cards. */
.vev-panel__out { box-shadow: inset 0 3px 0 var(--vev-electric), var(--vev-shadow-elevated); }

/* ---------- 15. FAQ + in-article promo ---------- */
.vev-faq__title { margin-bottom: 16px; }
.vev-faq__item { border-bottom: 1px solid var(--vev-border); }
.vev-faq__item summary {
	cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
	font: 700 18px/1.4 Inter, sans-serif; color: var(--vev-ink);
}
.vev-faq__item summary::-webkit-details-marker { display: none; }
.vev-faq__item summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid var(--vev-electric-text); border-bottom: 2px solid var(--vev-electric-text);
	transform: rotate(45deg); transition: transform .25s var(--vev-ease);
}
.vev-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.vev-faq__item p { margin: 0 0 18px; color: var(--vev-ink-soft); font-size: 16px; line-height: 1.7; max-width: 760px; }
.vev-promo {
	margin: 40px 0 8px; padding: 20px 22px; border-radius: var(--vev-radius-xl);
	background: var(--vev-gradient-instrument); border: 1px solid var(--vev-border);
}
.vev-promo__label { margin: 0 0 10px !important; padding: 0 !important; font: 700 11px/1.4 Inter, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--vev-electric-text) !important; }
.vev-promo__links { display: flex; flex-wrap: wrap; gap: 10px; }
.vev-promo__link {
	display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 99px;
	background: var(--vev-surface); border: 1px solid var(--vev-border);
	font: 600 15px/1.2 Inter, sans-serif; color: var(--vev-ink) !important; text-decoration: none !important;
}
.vev-promo__link:hover { border-color: var(--vev-electric); color: var(--vev-electric-text) !important; }
.vev-promo__link .vev-ico { color: var(--vev-electric-text); }

/* ---------- 16. AI summary box (inc/summary.php) ---------- */
.vev-summary {
	margin: 0 0 32px; border-radius: var(--vev-radius-xl); overflow: hidden;
	background: var(--vev-surface); border: 1px solid var(--vev-border);
	box-shadow: var(--vev-shadow-soft);
}
/* Tinted header strip (carries the electric hairline) so the label reads apart from the points. */
.vev-summary__head {
	display: flex; align-items: center; gap: 10px; padding: 15px 22px 12px;
	list-style: none; font: 400 13px/1.4 Inter, sans-serif; color: var(--vev-ink-soft);
	background: linear-gradient(180deg, #f2f6fa, #eaf0f6);
	box-shadow: inset 0 3px 0 var(--vev-electric);
	border-bottom: 1px solid var(--vev-border);
}
.vev-summary details:not([open]) .vev-summary__head { border-bottom-color: transparent; }
.vev-summary summary { cursor: pointer; }
.vev-summary__icon { background: var(--vev-surface) !important; box-shadow: 0 0 0 1px var(--vev-border); }
.vev-summary summary::-webkit-details-marker { display: none; }
.vev-summary summary:focus-visible { outline-offset: -2px; border-radius: var(--vev-radius-xl); }
.vev-summary__icon {
	display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
	border-radius: var(--vev-radius); background: var(--vev-accent); color: var(--vev-electric-text);
}
.vev-summary__title { font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vev-ink); }
.vev-summary__brand::before { content: "·"; margin-right: 8px; }
.vev-summary__toggle {
	margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; color: var(--vev-electric-text);
}
.vev-summary__toggle::after {
	content: ""; width: 7px; height: 7px; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .25s var(--vev-ease);
}
.vev-summary details[open] .vev-summary__toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.vev-summary details[open] .vev-summary__show,
.vev-summary details:not([open]) .vev-summary__hide { display: none; }
.vev-summary .vev-summary__list { list-style: none; margin: 0; padding: 8px 22px 20px !important; }
.vev-summary .vev-summary__list li {
	position: relative; margin: 0; padding: 10px 0 10px 22px;
	font: 400 16px/1.6 Inter, sans-serif; color: var(--vev-ink);
}
.vev-summary .vev-summary__list li + li { border-top: 1px solid var(--vev-muted); }
.vev-summary .vev-summary__list li::before {
	content: ""; position: absolute; left: 2px; top: calc(10px + .8em - 4px);
	width: 8px; height: 8px; border-radius: 50%; background: var(--vev-gradient-electric);
}
@media (max-width: 767px) {
	.vev-summary__head { padding: 14px 16px 11px; }
	.vev-summary .vev-summary__list { padding: 6px 16px 16px !important; }
	.vev-summary .vev-summary__list li { font-size: 15px; }
	.vev-summary__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media print { .vev-summary__toggle { display: none; } }

/* ---------- 17. Trip calculator ([vev_trip]) ---------- */
/* Reuses the tools panel (section 13); adds the route picker, a route line with numbered
   stops in the dark read-out, and two cards below (stops with map links, tolls table). */
.vev-trip__route { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.vev-input--select select {
	flex: 1; min-width: 0; appearance: none; border: 0; background: transparent;
	padding: 10px 36px 10px 12px; font: 600 16px/1.2 Inter, sans-serif; color: var(--vev-ink); cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--vev-electric-text) 50%), linear-gradient(135deg, var(--vev-electric-text) 50%, transparent 50%);
	background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat;
}
.vev-input--select select:focus { outline: none; }
.vev-trip__swap {
	display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
	border: 1px solid var(--vev-border); border-radius: var(--vev-radius); background: var(--vev-surface);
	font: 600 14px/1 Inter, sans-serif; color: var(--vev-ink); cursor: pointer;
}
.vev-trip__swap:hover { background: var(--vev-accent); }
.vev-trip__swap .vev-ico { color: var(--vev-electric-text); }
.vev-trip__swap[aria-pressed="true"] .vev-ico { transform: scaleX(-1); }
.vev-trip .vev-seg + .vev-seg { margin-top: -4px; }
/* Route line: start and end names, battery-stop dots positioned by km. */
.vev-trip__line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: 13px; color: rgb(255 255 255 / .7); }
.vev-trip__track { position: relative; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--vev-electric), var(--vev-volt)); }
.vev-trip__track::before, .vev-trip__track::after { content: ""; position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.vev-trip__track::before { left: -5px; }
.vev-trip__track::after { right: -5px; }
.vev-trip__dots { position: absolute; inset: 0; }
.vev-trip__dot {
	position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--vev-ink); border: 2px solid var(--vev-volt); color: var(--vev-volt);
	font: 700 11px/1 Inter, sans-serif; transition: left .45s var(--vev-ease);
}
.vev-trip__cmp-label { margin-top: 18px; }
/* Cards under the calculator. */
.vev-trip__details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.vev-trip__card { background: var(--vev-surface); border: 1px solid var(--vev-border); border-radius: var(--vev-radius-2xl); padding: 24px 28px; }
.vev-trip__h { display: flex; align-items: center; font: 700 18px/1.3 Inter, sans-serif; color: var(--vev-ink); margin: 0 0 14px; padding: 0; }
.vev-trip__h .vev-ico { color: var(--vev-electric-text); }
.vev-trip__stops { list-style: none; margin: 0; padding: 0 !important; }
.vev-trip__stop { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--vev-muted); }
.vev-trip__stop:first-child { border-top: 0; padding-top: 0; }
.vev-trip__stop--none { display: block; color: var(--vev-ink-soft); }
.vev-trip__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vev-ink); color: var(--vev-volt); font: 700 13px/1 Inter, sans-serif; }
.vev-trip__stop-title { margin: 0 !important; padding: 0 !important; font-weight: 700; color: var(--vev-ink); }
.vev-trip__stop-meta { margin: 2px 0 0 !important; padding: 0 !important; font-size: 14px; color: var(--vev-ink-soft); }
.vev-trip__map { font-weight: 600; font-size: 14px; white-space: nowrap; }
.vev-trip__tolls { width: 100%; border-collapse: collapse; font-size: 15px; border: 0 !important; margin: 0 !important; }
.vev-trip__tolls th, .vev-trip__tolls td { padding: 8px 0 !important; border: 0 !important; border-top: 1px solid var(--vev-muted) !important; text-align: left; }
.vev-trip__tolls thead th { border-top: 0 !important; font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--vev-ink-soft); }
.vev-trip__tolls td:last-child, .vev-trip__tolls th:last-child { text-align: right; }
.vev-trip__tolls td a { color: var(--vev-ink-soft); }
.vev-trip__tolls tfoot th, .vev-trip__tolls tfoot td { font-weight: 700; color: var(--vev-ink); border-top: 2px solid var(--vev-border) !important; }
.vev-trip__hint { margin: 14px 0 0 !important; padding: 0 !important; font-size: 13px; line-height: 1.55; color: var(--vev-ink-soft); }
@media (max-width: 980px) {
	.vev-trip__details { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.vev-trip__route { grid-template-columns: 1fr; }
	.vev-trip__card { padding: 20px; }
	.vev-trip__stop { grid-template-columns: auto 1fr; }
	.vev-trip__map { grid-column: 2; }
}
/* Last stretch past the last charger (village destinations). */
.vev-trip__lastleg { margin-top: 4px; padding: 16px; border-radius: var(--vev-radius-xl); background: var(--vev-gradient-instrument); }
.vev-trip__lastleg[hidden] { display: none; }
.vev-trip__lastleg .vev-field { margin-bottom: 14px; }
.vev-trip__lastleg .vev-seg__btn { background: var(--vev-surface); }
.vev-trip__lastleg .vev-seg__btn.is-active { background: var(--vev-ink); }
.vev-trip__lead { margin: 0 0 12px !important; padding: 0 !important; font-size: 14px; color: var(--vev-ink-soft); }
.vev-trip__warn { margin: 4px 0 0 !important; padding: 10px 12px !important; border-radius: var(--vev-radius); background: rgb(64 216 114 / .12); color: #fff; font-size: 14px; line-height: 1.5; border-left: 3px solid var(--vev-volt); }
.vev-trip__warn.is-bad { background: rgb(238 52 59 / .16); border-left-color: var(--vev-live); }
.vev-trip__stop--hub .vev-trip__num { background: var(--vev-volt); color: var(--vev-ink); }
.vev-trip__fix { margin-top: 8px !important; }
.vev-out__list > div[hidden] { display: none; }
.vev-trip__stop-where { margin: 2px 0 0 !important; padding: 0 !important; font-size: 13px; color: var(--vev-ink-soft); }

/* ---------- 18. Google Play badge (Image module, class vev-playbadge) ---------- */
/* The official badge has built-in clear space; centre it against the buttons in a row and
   drop the inline-image gap so the visible badge lines up with a 50px button. */
.vev-playbadge { align-self: center; }
/* Under a button in a column (homepage band): align with the button's left edge instead of centring. */
.vev-playbadge.vev-playbadge--stack { align-self: flex-start; margin-top: 4px; }
.vev-playbadge img { display: block; }
.vev-footer__tm { margin-top: 6px; font-size: 12px; opacity: .7; }

/* ---------- 19. Trip calculator: destination search (combobox) ---------- */
.vev-combo { position: relative; }
.vev-combo .vev-input input { width: 100%; }
.vev-combo__list {
	position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto;
	margin: 0; padding: 6px !important; list-style: none; background: var(--vev-surface);
	border: 1px solid var(--vev-border); border-radius: var(--vev-radius); box-shadow: var(--vev-shadow-elevated);
}
.vev-combo__list[hidden] { display: none; }
.vev-combo__opt { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--vev-radius-sm); cursor: pointer; }
.vev-combo__opt.is-active, .vev-combo__opt:hover { background: var(--vev-accent); }
.vev-combo__name { font-weight: 600; color: var(--vev-ink); }
.vev-combo__where { font-size: 13px; color: var(--vev-ink-soft); }
.vev-combo__hint { margin: 8px 0 0 !important; padding: 0 !important; font-size: 13px; color: var(--vev-ink-soft); }
.vev-trip__stop--leg .vev-trip__num { background: var(--vev-accent); color: var(--vev-electric-text); }
.vev-trip__unverified { font-size: 12px; color: var(--vev-ink-soft); }
/* Alternative last-charger towns (the calculator picks the quickest; these switch to another). */
.vev-trip__alts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vev-muted); }
.vev-trip__alts[hidden] { display: none; }
.vev-trip__alts-title { margin: 0 0 8px !important; padding: 0 !important; font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--vev-ink-soft); }
.vev-trip__alt {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0 0 8px; padding: 10px 12px;
	border: 1px solid var(--vev-border); border-radius: var(--vev-radius); background: var(--vev-surface); cursor: pointer; text-align: left;
}
.vev-trip__alt:hover { border-color: var(--vev-electric); }
.vev-trip__alt-name { font: 600 15px/1.3 Inter, sans-serif; color: var(--vev-ink); }
.vev-trip__alt-meta { font-size: 13px; color: var(--vev-ink-soft); }

/* ---------- 20. Credits (Aismartly) ---------- */
.vev-tools__credit { margin-top: 10px !important; font-size: 13px; color: var(--vev-ink-soft); }
.vev-tools__credit a { color: var(--vev-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.vev-tools__credit a:hover { color: var(--vev-electric-text); }

/* ---------- 21. Header fit on narrow desktops (981–1439px) ---------- */
/* Logo + menu + search + button need ~1310px; the row is 90% of the viewport (max 1280px), so the
   button overflowed and caused a horizontal scrollbar. Tighten the menu, then drop the search field. */
@media (min-width:981px) and (max-width:1439px){
 .et-l--header .et-menu > li { padding-left:8px !important; padding-right:8px !important; }
 .et-l--header .et-menu > li > a { font-size:14px !important; }
 .et-l--header .et_pb_row--with-menu .et_pb_search { width:160px !important; max-width:160px !important; flex:0 0 160px !important; }
 .et-l--header .et_pb_button { padding:10px 14px !important; font-size:14px !important; }
}
@media (min-width:981px) and (max-width:1279px){
 .et-l--header .et_pb_row--with-menu .et_pb_search { display:none !important; }
}
@media (min-width:981px) and (max-width:1099px){
 .et-l--header .et-menu > li { padding-left:5px !important; padding-right:5px !important; }
 .et-l--header .et-menu > li > a { font-size:13px !important; }
 .et-l--header .et_pb_button { padding:8px 10px !important; font-size:13px !important; }
}