/* Adapt the (theme-agnostic, light) occasions plugin markup to the dark Jonkers
   site chrome. Loaded only on occasions pages, after the plugin's own CSS.
   - Top padding clears the absolutely-positioned overlay header (its height was
     measured per breakpoint: ~198px at 1920, ~168px at 1366, ~140px at 1024;
     on mobile the theme fixes the header and pads the body itself).
   - Everything that the plugin renders on a light background (page, filter bar,
     vehicle cards, dealer panel) is restyled to the brand dark blue #030A12. */

body { background: #030A12; }

main.vwe-occasions { background: #030A12; padding-top: 230px; }
@media (max-width: 1366px) { main.vwe-occasions { padding-top: 200px; } }
@media (max-width: 1024px) { main.vwe-occasions { padding-top: 165px; } }
@media (max-width: 767px)  { main.vwe-occasions { padding-top: 40px; } }

/* Brand palette on top of the plugin's light defaults */
.vwe-occasions {
	--vwe-accent: #2448B0;
	--vwe-accent-2: #1d3a90;
	--vwe-ink: #ffffff;
	--vwe-muted: rgba(255,255,255,.65);
	--vwe-line: rgba(255,255,255,.12);
	--vwe-bg: rgba(255,255,255,.05);
	--vwe-panel: rgba(255,255,255,.05);
}

.vwe-occasions .vwe-head h1 { color: #fff; }
.vwe-occasions .vwe-count { color: rgba(255,255,255,.75); }
.vwe-occasions .vwe-breadcrumb a { color: rgba(255,255,255,.7); }
.vwe-occasions .vwe-breadcrumb a:hover { color: #fff; }
.vwe-occasions .vwe-section h2 { color: #fff; }
.vwe-occasions .vwe-desc { color: rgba(255,255,255,.85); }
.vwe-occasions .vwe-accessoires li { color: rgba(255,255,255,.85); }

/* ---- Filter bar: dark panel with dark inputs ---- */
.vwe-occasions .vwe-filters {
	background: #001530;
	border: 1px solid rgba(255,255,255,.12);
}
.vwe-occasions .vwe-filters label { color: rgba(255,255,255,.65); }
.vwe-occasions .vwe-filters select,
.vwe-occasions .vwe-filters input {
	background: #0b1728;
	color: #fff;
	border: 1px solid rgba(255,255,255,.22);
}
.vwe-occasions .vwe-filters select option { background: #0b1728; color: #fff; }
.vwe-occasions .vwe-filters input::placeholder { color: rgba(255,255,255,.4); }
.vwe-occasions .vwe-reset { color: rgba(255,255,255,.65); }
.vwe-occasions .vwe-reset:hover { color: #fff; }

/* ---- Listing cards: dark blue cards on the dark page ---- */
.vwe-occasions .vwe-vehicle-block {
	background: #001530;
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.vwe-occasions .vwe-vehicle-block:hover { box-shadow: 0 12px 30px rgba(0,0,0,.45); }
/* VWE photos are 4:3 (640x480); the plugin forces 1.8:1 + cover, which crops wheels/roof.
   Use the native ratio and contain so the whole car is always visible. */
.vwe-occasions .vwe-vehicle-block img.thumb {
	background: #0b1728;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	/* The Elementor page CSS (post-2196) pins this img to min/max-width 420px above 1366px,
	   which overflows the 368px grid card and clips the right side. Always fill the card. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.vwe-occasions .vwe-vehicle-block h5.title a { color: #fff; }
.vwe-occasions .vwe-vehicle-block p.title { color: rgba(255,255,255,.6); }
.vwe-occasions .vwe-vehicle-specs .spec { color: rgba(255,255,255,.72); }
.vwe-occasions .vwe-vehicle-price { color: #fff; }
.vwe-occasions .vwe-empty { background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); }

/* ---- Detail right-hand panel: dark translucent card on the dark chrome ---- */
.vwe-occasions .vwe-detail-side {
	background: #001530;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	padding: 28px;
	backdrop-filter: blur(2px);
}
.vwe-occasions .vwe-detail-title { color: #fff; }
.vwe-occasions .vwe-detail-type { color: rgba(255,255,255,.6); }
.vwe-occasions .vwe-detail-price {
	color: #fff;
	font-size: 2rem;
	margin-bottom: 20px;
}
.vwe-occasions .vwe-gallery-main img,
.vwe-occasions .vwe-gallery-thumbs img { background: #0b1728; }

/* spec rows inside the panel: borderless, with soft zebra striping */
.vwe-occasions .vwe-detail-side .vwe-specs { border-collapse: separate; border-spacing: 0; }
.vwe-occasions .vwe-detail-side .vwe-specs th,
.vwe-occasions .vwe-detail-side .vwe-specs td {
	border: 0;
	padding: 9px 12px;
	font-size: .9rem;
}
.vwe-occasions .vwe-detail-side .vwe-specs th { color: rgba(255,255,255,.55); font-weight: 500; }
.vwe-occasions .vwe-detail-side .vwe-specs td { color: #fff; }
.vwe-occasions .vwe-detail-side .vwe-specs tr:nth-child(odd) th { background: rgba(255,255,255,.04); border-radius: 8px 0 0 8px; }
.vwe-occasions .vwe-detail-side .vwe-specs tr:nth-child(odd) td { background: rgba(255,255,255,.04); border-radius: 0 8px 8px 0; }

/* spec table on the dark page background (outside the panel) */
.vwe-occasions .vwe-specs th { color: rgba(255,255,255,.55); }
.vwe-occasions .vwe-specs td { color: #fff; }

/* buttons: filled primary + outline ghost, colours forced so the global
   Elementor link cascade can't blank the text */
.vwe-occasions .vwe-btn {
	background: #2448B0 !important;
	color: #fff !important;
	border: 1px solid #2448B0;
	border-radius: 10px;
	padding: 12px 22px;
	transition: background .15s, border-color .15s, transform .15s;
}
.vwe-occasions .vwe-btn:hover { background: #2f57cf !important; border-color: #2f57cf; transform: translateY(-1px); }
.vwe-occasions .vwe-btn-ghost {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.45);
}
.vwe-occasions .vwe-btn-ghost:hover {
	background: rgba(255,255,255,.12) !important;
	color: #fff !important;
	border-color: #fff;
	transform: translateY(-1px);
}
.vwe-occasions .vwe-cta-row { gap: 12px; margin-bottom: 24px; }
.vwe-occasions .vwe-btn-lg { margin-top: 14px; }

/* ---- Dealer block: dark panel ---- */
.vwe-occasions .vwe-dealer {
	background: #001530;
	border: 1px solid rgba(255,255,255,.12);
}
.vwe-occasions .vwe-dealer p { color: rgba(255,255,255,.85); }
.vwe-occasions .vwe-dealer a { color: #9ec5ff; }

/* Pagination numbers on the dark background */
.vwe-occasions .vwe-pagination .page-numbers { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.22); }
.vwe-occasions .vwe-pagination a.page-numbers:hover { background: rgba(255,255,255,.10); color: #fff; }
.vwe-occasions .vwe-pagination .current { color: #fff; }

/* Price (number) filter fields: match the select fields. Explicit border at
   high specificity so the site's global input styling can't strip them; also
   kills global width:100% and the spinner arrows. */
.vwe-occasions .vwe-filters input[type="number"] {
	width: 150px;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 8px;
	background: #0b1728;
	color: #fff;
	font-size: .95rem;
	-moz-appearance: textfield;
	appearance: textfield;
}
.vwe-occasions .vwe-filters input[type="number"]::-webkit-inner-spin-button,
.vwe-occasions .vwe-filters input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Trade-in form on the dark chrome: dark blue panel, dark fields, and the
   yellow NL plate forced past the site's global input styling ---- */
.vwe-occasions .vwe-inruil {
	background: #001530;
	border: 1px solid rgba(255,255,255,.12);
}
.vwe-occasions .vwe-inruil-intro { color: rgba(255,255,255,.75); }
.vwe-occasions .vwe-kenteken-plate { border-color: rgba(0,0,0,.45); }
/* The site's global input reset strips padding/font-size, which crammed the
   typed plate text and the placeholders against the field edges — force ALL
   metrics here, not just the colours. */
.vwe-occasions .vwe-inruil .vwe-kenteken-input {
	background: #F5B301 !important;
	color: #111 !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 1.7rem !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	padding: 12px 16px !important;
	height: auto !important;
	caret-color: #111;
}
.vwe-occasions .vwe-kenteken-plate:focus-within { box-shadow: 0 0 0 3px rgba(36,72,176,.65); }
.vwe-occasions .vwe-inruil-field input,
.vwe-occasions .vwe-inruil-field textarea {
	background: #0b1728 !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.22) !important;
	border-radius: 8px;
	padding: 12px 14px !important;
	font-size: .95rem !important;
	line-height: 1.4 !important;
	height: auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.vwe-occasions .vwe-inruil-field input:focus,
.vwe-occasions .vwe-inruil-field textarea:focus { border-color: #2448B0 !important; outline: none !important; }
.vwe-occasions .vwe-inruil-field input.vwe-invalid,
.vwe-occasions .vwe-inruil-field textarea.vwe-invalid { border-color: #d33 !important; }
.vwe-occasions .vwe-inruil-field input::placeholder,
.vwe-occasions .vwe-inruil-field textarea::placeholder { color: rgba(255,255,255,.4); }
.vwe-occasions .vwe-inruil-field span,
.vwe-occasions .vwe-inruil-radios legend { color: rgba(255,255,255,.65); }
.vwe-occasions .vwe-inruil-radios label { color: #fff; }
.vwe-occasions .vwe-kenteken-notice { color: rgba(255,255,255,.6); }