/* ---- Brand colours, sampled from the T1 brochure's spec table ---- */
:root {
	--jvm-brand-teal: #40a6ab;
	--jvm-header-grey: #9c9c9c;
	--jvm-zebra-grey: #d9dada;
}

/* ---- Specs tabs ---- */
.jvm-specs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2em; }
.jvm-specs-tab {
	padding: 8px 18px;
	border: 1px solid var(--jvm-brand-teal);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-weight: 600;
}
/* Was "background: currentColor; color: #fff;" - currentColor resolved to the
   #fff also being set in the same rule, so the active tab became white text on
   a white background (invisible). Use the brand teal explicitly instead. */
.jvm-specs-tab.is-active { background: var(--jvm-brand-teal); border-color: var(--jvm-brand-teal); color: #fff; }
.jvm-specs-panel { display: none; }
.jvm-specs-panel.is-active { display: block; }
.jvm-specs-category {
	margin: 1.5em 0 0;
	padding: 8px 10px;
	background: var(--jvm-brand-teal);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9em;
	font-weight: 700;
}
.jvm-specs-table { width: 100%; border-collapse: collapse; }
.jvm-specs-table th, .jvm-specs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.jvm-specs-table th { font-weight: 400; width: 55%; }
.jvm-specs-table tbody tr:nth-child(even) { background: var(--jvm-zebra-grey); }
.jvm-yes { color: #1a7f37; font-weight: 700; }
.jvm-no { opacity: 0.4; }

/* ---- Offer card ---- */
.jvm-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 1em 0; }
.jvm-offer-row dt { font-size: 0.75em; text-transform: uppercase; opacity: 0.65; margin: 0; }
.jvm-offer-row dd { font-size: 1.1em; font-weight: 700; margin: 0; }
/* Zebra-striped to match the original jt.webdev.net.za offer pages: the
   first row (and every alternate one after it) gets an alt background,
   set as --jvm-offer-alt-bg inline per offer from the colour picker on the
   Offers admin screen (Jetour Vehicles > Offers). Falls back to #a3a3a3,
   sampled from that same live page, if nothing's been picked yet. */
.jvm-offer-highlights { list-style: none; margin: 0; padding: 0; }
.jvm-offer-highlights li { padding: 5px; }
.jvm-offer-highlights li:nth-child(odd) { background-color: var(--jvm-offer-alt-bg, #a3a3a3); }
.jvm-offer-terms summary { cursor: pointer; font-weight: 600; margin-top: 1em; }

/* ---- Brochure link / Book a Test Drive link ---- */
/* [jvm_brochure] and [jvm_test_drive] share this base look so they read as a
   matched pair wherever they're placed side by side on a static page (per
   Justin's placement request - see class-jvm-shortcodes.php). The test-drive
   link gets a filled brand-teal treatment on top, since it's the primary
   conversion action of the two and should stand out slightly - same
   treatment as .jvm-360-cta-primary below for the [jvm_360] CTA row. */
.jvm-brochure-link {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid currentColor;
	text-decoration: none;
	font-weight: 600;
	box-sizing: border-box;
	max-width: 100%;
}
.jvm-test-drive-link {
	border-color: var(--jvm-brand-teal);
	background: var(--jvm-brand-teal);
	color: #fff;
	transition: filter 0.2s ease;
}
/* Already filled by default (it's the primary action of the pair), so hover
   just darkens slightly rather than inverting to outline - inverting would
   read as de-emphasising it on hover, the opposite of what hover should do. */
.jvm-test-drive-link:hover { filter: brightness(0.9); }

/* ---- Compare tool ---- */
/* Matches the .jvm-specs-* look (same --jvm-brand-teal / --jvm-zebra-grey
   variables defined at the top of this file): teal header/category bars,
   zebra-striped rows. The specs table resets its zebra stripe at the start
   of every category because each category is its own separate <table>;
   here all categories share one <table> (so a comparison can be selected
   once and read straight down), so tbody tr:nth-child(even) counts across
   category-row <tr>s too - visually still a clean alternating stripe, just
   not guaranteed to start light at every category boundary the way the
   specs page's separate-tables approach does. */
.jvm-compare-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.jvm-compare-select {
	flex: 1 1 220px;
	padding: 8px 12px;
	border: 1px solid var(--jvm-brand-teal);
	background: #fff;
	color: inherit;
	font-family: "HarmonyOS Sans", sans-serif;
	font-size: 16px;
}
.jvm-compare-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 1.5em; flex-wrap: wrap; }
.jvm-compare-actions button {
	background: transparent;
	border: 1px solid var(--jvm-brand-teal);
	color: inherit;
	padding: 8px 18px;
	font-weight: 600;
	font-family: "HarmonyOS Sans", sans-serif;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.jvm-compare-actions button:hover { background: var(--jvm-brand-teal); color: #fff; }
.jvm-compare-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.jvm-compare-hint { opacity: 0.7; }
.jvm-compare-table-wrap { overflow-x: auto; }
.jvm-compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.jvm-compare-table th, .jvm-compare-table td { padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: left; }
.jvm-compare-table thead th {
	background: var(--jvm-brand-teal);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9em;
	font-weight: 700;
}
.jvm-compare-table tbody th { font-weight: 400; }
.jvm-compare-table tbody tr:nth-child(even) { background: var(--jvm-zebra-grey); }
.jvm-compare-category-row td {
	background: var(--jvm-brand-teal);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9em;
	font-weight: 700;
}
/* Same specificity as the nth-child zebra rule above (0,2,2) and declared
   after it, so a diff row's tint always wins the tie instead of getting
   silently overridden by the zebra stripe on even rows. */
.jvm-compare-table tbody tr.jvm-compare-diff { background: rgba(255, 196, 0, 0.12); }
.jvm-compare-swatches { margin-top: 4px; display: flex; flex-wrap: wrap; }
.jvm-swatch-sm { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 3px; border: 1px solid rgba(0,0,0,0.15); }

/* ---- 360 viewer (exterior rotate + interior pan) ---- */
/* Deliberately NOT trying to inherit height from a Bricks ancestor, in
   either CSS (percentage heights need a definite-height ancestor Bricks
   doesn't reliably provide) or JS (measuring "my parent's rendered box" is
   circular when that parent is itself just an unstyled wrapper that grows
   to fit US - that's what caused this to balloon past 100dvh: with no cap
   of its own, a 16:9 stage at full section WIDTH can easily want to be
   taller than the viewport, and "copy my parent's height" just locked that
   oversized number in).

   Instead: default to 100dvh, which is a hard, unconditional ceiling - this
   component can never be taller than the visible screen, full stop, no
   matter what Bricks does or doesn't stretch. If it should match a smaller
   section (e.g. your 90dvh container), set --jvm-360-height on that
   section via Bricks custom CSS: --jvm-360-height: 90dvh;
   --jvm-360-top-offset compensates for a fixed/sticky header overlapping
   the top of the section, e.g. --jvm-360-top-offset: 90px; (default 0). */
.jvm-360 {
	--jvm-360-height: 100dvh;
	--jvm-360-top-offset: 0px;
	height: var(--jvm-360-height);
	max-height: var(--jvm-360-height);
	padding: calc(30px + var(--jvm-360-top-offset)) 20px 30px;
	text-align: center;
	background: #f5f5f5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 0;
	overflow: hidden;
}
.jvm-360-tabs { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; flex-shrink: 0; }
.jvm-360-tab {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 2px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.5);
	font-family: "HarmonyOS Sans", sans-serif;
}
.jvm-360-tab.is-active { color: #1a1a1a; font-weight: 600; }

/* Row now holds up to three CTAs (Specification / Download Brochure / Book a
   Test Drive - see class-jvm-360.php); flex-wrap plus centered rows keeps it
   readable at every width. box-sizing:border-box on .jvm-360-cta stops the
   border+padding pushing a button wider than a shrunk mobile allowance. */
.jvm-360-cta-row { display: flex; justify-content: center; align-items: center; gap: 16px; row-gap: 12px; flex-wrap: wrap; margin-bottom: 30px; flex-shrink: 0; max-width: 100%; }
.jvm-360-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 44px;
	border: 1px solid #1a1a1a;
	border-radius: 4px;
	box-sizing: border-box;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-family: "HarmonyOS Sans", sans-serif;
	white-space: nowrap;
}
.jvm-360-cta:hover { background: #1a1a1a; color: #fff; }
/* Book a Test Drive is the primary action of the three, so it's filled by
   default instead of waiting for hover - same reasoning as .jvm-test-drive-link
   above, which this mirrors for consistency between the two placements. */
.jvm-360-cta-primary { background: var(--jvm-brand-teal); border-color: var(--jvm-brand-teal); color: #fff; transition: filter 0.2s ease; }
.jvm-360-cta-primary:hover { background: var(--jvm-brand-teal); filter: brightness(0.9); color: #fff; }

/* Panels: only .is-active is shown - same toggle pattern as .jvm-specs-panel,
   so switching Exterior/Interior never shifts the tabs/CTA row above it.
   min-height:0 is what lets this flex item shrink below its content size
   instead of forcing .jvm-360 taller than the section around it. */
.jvm-360-panel { display: none; width: 100%; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; justify-content: center; }
.jvm-360-panel.is-active { display: flex; }

/* aspect-ratio is a starting preference; flex:1 1 auto lets this fill
   whatever room .jvm-360's own hard-capped height (see above) actually
   leaves for it, growing or shrinking as needed - safe to do now that the
   interior view's starting position (below) no longer depends on this
   stage matching any particular shape. min-height:180px is a floor so it
   never collapses to a sliver on a very short section. */
.jvm-360-stage {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 180px;
	aspect-ratio: 16 / 9;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;
	overflow: hidden;
	background: #e3e3e0;
	border-radius: 4px;
}
.jvm-360-stage:active { cursor: grabbing; }
.jvm-360-stage.jvm-360-stage-static { cursor: default; }
.jvm-360-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
.jvm-360-frame.is-active { opacity: 1; }

/* z-index:2 is deliberate, not decorative: frontend.js appends frame <img>
   elements into the stage AFTER this hint div already exists in the markup
   (see renderStage()), so without an explicit stacking order the frames -
   painted later in DOM order - would sit on top of and hide the hint
   entirely once a vehicle image loads in. */
.jvm-360-hint {
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 13px;
	letter-spacing: 0.5px;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.jvm-360-hint.is-hidden { opacity: 0; }

.jvm-360-colours { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; flex-shrink: 0; }
.jvm-360-colour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
}
.jvm-360-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.jvm-360-colour.is-active .jvm-360-swatch { border-color: #1a1a1a; transform: scale(1.12); }
.jvm-360-colour-name { font-size: 12px; color: #444; opacity: 0; transition: opacity 0.2s ease; }
.jvm-360-colour:hover .jvm-360-colour-name,
.jvm-360-colour:focus-visible .jvm-360-colour-name { opacity: 1; }

/* The panorama is painted as this element's own CSS background rather than
   a child <img>, specifically so it can use background-repeat:repeat-x -
   that's what makes an endless horizontal spin possible (the browser tiles
   the image seamlessly at any background-position, however far it's been
   dragged in either direction) which a positioned/transformed <img> child
   fundamentally cannot do (it has real edges - drag it far enough and you
   just run out of image).

   background-size and background-position are both computed and set from
   JS (frontend.js) rather than fixed here, since they depend on the zoom
   level (interior_zoom, adjustable per model) and the photo's own aspect
   ratio - locked to the stage's own WIDTH (one loop = {zoom}x the stage
   width), deliberately NOT the stage's height, since the admin preview (a
   fixed 480x270 box) and the live stage (shaped by Bricks' flex layout,
   which doesn't reliably keep the aspect-ratio hint below) don't reliably
   share the same aspect ratio - sizing off height showed a different zoom
   level in each place. */
.jvm-360-interior-stage {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 180px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	background-color: #e3e3e0;
	background-repeat: repeat-x;
	border-radius: 4px;
	touch-action: none;
}
.jvm-360-interior-stage:active { cursor: grabbing; }

/* ---- 360 viewer: mobile/tablet ---- */
/* Smaller gaps and padding free up more of a short mobile viewport for the
   actual image/panorama, which is what the space budget is tightest for on
   a phone. Nothing here changes the desktop layout above 640px. */
@media (max-width: 640px) {
	.jvm-360 { padding-left: 12px; padding-right: 12px; }
	.jvm-360-tabs { gap: 18px; margin-bottom: 12px; }
	.jvm-360-tab { font-size: 13px; }
	.jvm-360-cta-row { gap: 8px; row-gap: 10px; margin-bottom: 16px; }
	.jvm-360-cta { height: 46px; padding: 0 22px; font-size: 11px; letter-spacing: 1px; }
	.jvm-360-colours { gap: 10px; margin-top: 16px; }
	.jvm-360-swatch { width: 26px; height: 26px; }
	.jvm-360-colour-name { font-size: 10px; }
	.jvm-360-hint { bottom: 12px; padding: 6px 14px; font-size: 11px; }
}

/* Narrow phones (iPhone SE and similar, ~360-390px wide): three CTAs at the
   640px sizing above can still be tight two-per-row, so trim padding/tracking
   a bit further. Still comfortably tappable (>44px height retained). */
@media (max-width: 400px) {
	.jvm-360-cta { padding: 0 16px; font-size: 10px; letter-spacing: 0.6px; }
	.jvm-360-tab { font-size: 12px; }
}

/* [jvm_brochure] / [jvm_test_drive] used standalone (outside [jvm_360], e.g.
   on the Specifications page per the placement note above): stack full-width
   and centered below this width so two full-length labels never get clipped
   or forced onto one cramped line by whatever Bricks wrapper they're in. */
@media (max-width: 480px) {
	.jvm-brochure-link { display: block; width: 100%; text-align: center; padding: 10px 14px; font-size: 0.95em; }
}

/* ---- 360 viewer: mobile landscape (short-height phones, e.g. a phone
   rotated sideways) ---- */
/* The max-width rules above only catch portrait phones - a phone in
   landscape is typically 600-930px WIDE but only ~320-430px TALL, the
   opposite shape, so width-based breakpoints never fire for it even though
   it's the tightest case for vertical room: tabs + CTA row + colour swatches
   all compete with the stage image for the same capped 100dvh. This targets
   short viewports by height/orientation instead of width, and trims the
   chrome around the stage rather than the stage itself, so the
   exterior/interior image keeps as much of that room as possible. */
@media (max-height: 500px) and (orientation: landscape) {
	.jvm-360 { padding-top: calc(14px + var(--jvm-360-top-offset)); padding-bottom: 14px; padding-left: 12px; padding-right: 12px; }
	.jvm-360-tabs { margin-bottom: 8px; }
	.jvm-360-tab { font-size: 12px; padding: 4px 2px; }
	.jvm-360-cta-row { gap: 8px; row-gap: 6px; margin-bottom: 10px; }
	.jvm-360-cta { height: 38px; padding: 0 16px; font-size: 10px; letter-spacing: 0.5px; }
	.jvm-360-stage, .jvm-360-interior-stage { min-height: 110px; }
	.jvm-360-colours { gap: 8px; margin-top: 10px; }
	.jvm-360-swatch { width: 22px; height: 22px; }
	.jvm-360-colour-name { font-size: 9px; }
	.jvm-360-hint { bottom: 8px; padding: 4px 12px; font-size: 10px; }
}

/* ------------------------------------------------------------------
 * [jvm_compare] on phones: stacked layout instead of a 600px table
 * that scrolls sideways. Each spec name gets its own line with the
 * vehicles' values side by side beneath it (2, 3 or 4 vehicles), and
 * the vehicle-name header row sticks below the fixed site header.
 * Set --jvm-compare-sticky-top on :root if the header height changes.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.jvm-compare-table-wrap { overflow-x: visible; }
	.jvm-compare-table { min-width: 0; display: block; }
	.jvm-compare-table thead, .jvm-compare-table tbody { display: block; }
	.jvm-compare-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jvm-compare-table tr:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jvm-compare-table tr:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jvm-compare-table th, .jvm-compare-table td { display: block; min-width: 0; border-bottom: 0; overflow-wrap: anywhere; }
	.jvm-compare-table tbody tr { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
	.jvm-compare-table tbody th { grid-column: 1 / -1; padding: 10px 10px 2px; font-size: 13px; opacity: 0.75; }
	.jvm-compare-table tbody td { padding: 2px 10px 10px; font-weight: 600; }
	.jvm-compare-table tbody .jvm-compare-category-row td { grid-column: 1 / -1; padding: 10px; font-weight: 700; }
	.jvm-compare-table thead { position: sticky; top: var(--jvm-compare-sticky-top, 75px); z-index: 5; }
	.jvm-compare-table thead th:first-child { display: none; }
	.jvm-compare-table thead th { padding: 10px; font-size: 12px; line-height: 1.3; }
}
@media (max-width: 782px) {
	/* Logged-in users: the WordPress admin bar pushes the site header down. */
	.admin-bar .jvm-compare-table thead { top: calc(var(--jvm-compare-sticky-top, 75px) + 46px); }
}