/*
Theme Name: Fifties F&F Era
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Fifties Automotive
Description: Out Run / Sega Mega Drive arcade cabinet inspired restyle.
Version: 2.0.4
Text Domain: fifties-fnf-child
*/

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Press+Start+2P&family=Share+Tech+Mono&display=swap");

:root {
	--arcade-night: #0b0428;
	--arcade-night-mid: #1a0a3e;
	--arcade-purple: #2d1b69;
	--arcade-sun-1: #ff6b35;
	--arcade-sun-2: #ff2d95;
	--arcade-sun-3: #ffd700;
	--arcade-cyan: #00f0ff;
	--arcade-magenta: #ff6ad5;
	--arcade-pink: #ff2d95;
	--arcade-text: #e8e6ff;
	--arcade-grid: rgba(0, 240, 255, 0.22);
	--arcade-bezel: #1a1a2e;
	--arcade-chrome: #c0c8d8;
	--arcade-glow-cyan: rgba(0, 240, 255, 0.45);
	--arcade-glow-magenta: rgba(255, 45, 149, 0.45);

	/* Legacy aliases used by Elementor globals */
	--fnf-primary: var(--arcade-pink);
	--fnf-secondary: var(--arcade-night);
	--fnf-accent: var(--arcade-cyan);
	--fnf-text: var(--arcade-text);
	--fnf-chrome: var(--arcade-chrome);
	--fnf-glow: var(--arcade-glow-magenta);
}

/* ── CRT scanlines + road grid atmosphere ── */
body {
	position: relative;
	background:
		linear-gradient(180deg, transparent 0%, rgba(11, 4, 40, 0.4) 55%, rgba(11, 4, 40, 0.95) 100%),
		linear-gradient(180deg, #1a0533 0%, #2d1b69 35%, #4a1942 55%, #1a0533 100%);
	background-color: var(--arcade-night);
	color: var(--arcade-text);
	min-height: 100vh;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.12) 2px,
		rgba(0, 0, 0, 0.12) 4px
	);
	opacity: 0.35;
}

body::after {
	content: "";
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 45vh;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(180deg, transparent 0%, rgba(11, 4, 40, 0.6) 30%),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 49px,
			var(--arcade-grid) 49px,
			var(--arcade-grid) 50px
		),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 29px,
			var(--arcade-grid) 29px,
			var(--arcade-grid) 30px
		);
	transform: perspective(300px) rotateX(55deg);
	transform-origin: center bottom;
	opacity: 0.5;
}

body > *:not(.elementor-location-header):not(.elementor-location-footer) {
	position: relative;
	z-index: 1;
}

/* ── Typography ── */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-theme-site-title .elementor-heading-title,
body h1,
body h2,
body h3 {
	font-family: "Orbitron", "Arial Black", sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--arcade-text) !important;
	text-shadow:
		0 0 8px var(--arcade-glow-cyan),
		0 0 20px rgba(0, 240, 255, 0.25),
		2px 2px 0 var(--arcade-purple);
}

body,
body .elementor-widget-text-editor,
body .elementor-widget-nav-menu .elementor-item,
body .elementor-button {
	font-family: "Share Tech Mono", "Courier New", monospace !important;
}

/* ── Arcade cabinet header bezel ── */
body .elementor-location-header {
	position: relative;
	z-index: 1000;
	isolation: isolate;
	border-bottom: 3px solid var(--arcade-cyan) !important;
	box-shadow:
		0 0 20px var(--arcade-glow-cyan),
		0 0 40px var(--arcade-glow-magenta),
		inset 0 -2px 0 var(--arcade-magenta),
		0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

body .elementor-location-header,
body .elementor-location-header .e-con,
body .elementor-location-header .elementor-element-a0ba124 {
	background: linear-gradient(180deg, #12122a 0%, #0a0a18 100%) !important;
	background-color: #0a0a18 !important;
}

body .elementor-location-header .elementor-element-a0ba124 {
	max-height: 170px;
	overflow: visible;
	border-bottom: 2px solid var(--arcade-magenta) !important;
}

body .elementor-location-header .elementor-element-a0ba124.elementor-sticky--active {
	z-index: 1001 !important;
	width: 100% !important;
	max-height: none;
	overflow: visible;
	background: linear-gradient(180deg, #12122a 0%, #0a0a18 100%) !important;
	background-color: #0a0a18 !important;
	box-shadow:
		0 0 20px var(--arcade-glow-cyan),
		0 4px 24px rgba(0, 0, 0, 0.85) !important;
}

/* Out Run sunset stripe promo bar */
body .elementor-location-header .elementor-element-be9b461,
body .elementor-location-header .elementor-element-be9b461 > .e-con,
body .elementor-location-header .elementor-element-be9b461 .e-con {
	background: linear-gradient(
		90deg,
		var(--arcade-sun-1) 0%,
		var(--arcade-sun-2) 35%,
		var(--arcade-sun-3) 55%,
		var(--arcade-sun-2) 75%,
		var(--arcade-purple) 100%
	) !important;
	background-color: transparent !important;
	box-shadow: 0 0 16px rgba(255, 107, 53, 0.4) !important;
}

body .elementor-location-header .elementor-element-f61313b .elementor-heading-title {
	color: #ffffff !important;
	font-family: "Press Start 2P", monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.15em;
	text-shadow:
		2px 2px 0 #1a0533,
		0 0 12px rgba(255, 255, 255, 0.6) !important;
}

/* ── Footer arcade panel ── */
body .elementor-location-footer {
	border-top: 3px solid var(--arcade-magenta) !important;
	box-shadow:
		0 0 20px var(--arcade-glow-magenta),
		inset 0 2px 0 var(--arcade-cyan) !important;
}

body .elementor-location-footer,
body .elementor-location-footer .e-con {
	background: linear-gradient(180deg, #0a0a18 0%, #12122a 100%) !important;
	background-color: #0a0a18 !important;
}

body .elementor-location-header .elementor-button,
body .elementor-location-header .elementor-widget-button .elementor-button,
body .elementor-location-header .elementor-heading-title {
	color: #ffffff !important;
	fill: #ffffff !important;
}

body .elementor-location-footer .elementor-heading-title {
	font-family: "Press Start 2P", monospace !important;
	font-size: 11px !important;
	color: var(--arcade-cyan) !important;
	text-shadow: 0 0 10px var(--arcade-glow-cyan) !important;
}

body .elementor-location-footer .elementor-nav-menu .elementor-item,
body .elementor-location-footer .elementor-icon-list-text {
	color: var(--arcade-text) !important;
	fill: var(--arcade-text) !important;
}

body .elementor-location-footer .elementor-nav-menu .elementor-item:hover,
body .elementor-location-footer .elementor-nav-menu .elementor-item:focus {
	color: var(--arcade-sun-3) !important;
	fill: var(--arcade-sun-3) !important;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

/* ── Arcade cabinet buttons ── */
body .elementor-button,
body .elementor-widget-button .elementor-button {
	background: linear-gradient(180deg, #3a3a5c 0%, #1a1a2e 45%, #0d0d1a 100%) !important;
	border: 2px solid var(--arcade-cyan) !important;
	border-radius: 4px !important;
	box-shadow:
		0 0 12px var(--arcade-glow-cyan),
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -3px 0 rgba(0, 0, 0, 0.5),
		0 4px 0 #0a0a18 !important;
	color: var(--arcade-cyan) !important;
	font-family: "Press Start 2P", monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 0 8px var(--arcade-glow-cyan);
	transition: transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
}

body .elementor-button:hover,
body .elementor-widget-button .elementor-button:hover {
	background: linear-gradient(180deg, #ff2d95 0%, #cc1a6e 50%, #8b1050 100%) !important;
	border-color: var(--arcade-sun-3) !important;
	color: #ffffff !important;
	box-shadow:
		0 0 20px var(--arcade-glow-magenta),
		0 0 40px rgba(255, 45, 149, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 2px 0 #0a0a18 !important;
	transform: translateY(2px);
}

body .elementor-button:active,
body .elementor-widget-button .elementor-button:active {
	transform: translateY(4px);
	box-shadow:
		0 0 8px var(--arcade-glow-magenta),
		inset 0 2px 4px rgba(0, 0, 0, 0.5),
		0 0 0 #0a0a18 !important;
}

/* ── Nav links ── */
body .elementor-widget-nav-menu .elementor-item {
	color: var(--arcade-text) !important;
}

body .elementor-widget-nav-menu .elementor-item:hover,
body .elementor-widget-nav-menu .elementor-item.elementor-item-active {
	color: var(--arcade-cyan) !important;
	text-shadow: 0 0 8px var(--arcade-glow-cyan);
}

/* ── Car cards & content panels (arcade HUD screens) ── */
body .borderbox,
body .elementor-location-single > .e-con,
body .elementor-location-archive > .e-con {
	background: linear-gradient(180deg, rgba(26, 10, 62, 0.92) 0%, rgba(11, 4, 40, 0.98) 100%) !important;
	border: 2px solid var(--arcade-cyan) !important;
	border-radius: 4px !important;
	box-shadow:
		0 0 16px var(--arcade-glow-cyan),
		inset 0 0 30px rgba(0, 240, 255, 0.04),
		0 8px 32px rgba(0, 0, 0, 0.5) !important;
	overflow: hidden;
}

body .borderbox:hover {
	border-color: var(--arcade-magenta) !important;
	box-shadow:
		0 0 24px var(--arcade-glow-magenta),
		inset 0 0 40px rgba(255, 45, 149, 0.06),
		0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Loop card inner layout — keep text inside the box */
body .borderbox.e-con-boxed {
	--content-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body .borderbox > .e-con-inner {
	width: 100%;
	max-width: 100%;
	padding: 20px !important;
	box-sizing: border-box;
}

body .borderbox .e-con.e-child {
	--width: 100% !important;
	--content-width: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

body .borderbox .e-con-boxed > .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box !important;
}

body .borderbox .elementor-element-b6a02da,
body .borderbox .elementor-element-f2e5dc4,
body .borderbox .elementor-element-7c8abe6,
body .borderbox .elementor-element-e0a8f64 {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body .borderbox .elementor-element-b6a02da > .e-con-inner,
body .borderbox .elementor-element-f2e5dc4 > .e-con-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

body .borderbox .elementor-element-def0af6.elementor-element,
body .borderbox .elementor-element-a287ffc.elementor-element,
body .borderbox .elementor-element-d5b5599.elementor-element,
body .borderbox .elementor-element-02a8fa6.elementor-element {
	--flex-shrink: 1 !important;
	flex-shrink: 1 !important;
}

body .borderbox .elementor-element-def0af6 {
	flex: 1 1 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

body .borderbox .elementor-element-a287ffc {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	text-align: right !important;
	margin-top: -2px !important;
}

body .borderbox .elementor-widget-heading .elementor-widget-container {
	max-width: 100%;
	overflow: hidden;
}

body .borderbox .elementor-element-d5b5599 {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

body .borderbox .elementor-element-02a8fa6 {
	flex: 0 0 auto !important;
	text-align: right !important;
}

body .borderbox .elementor-element-e0a8f64,
body .borderbox .elementor-element-cbf80d8 {
	width: 100% !important;
	max-width: 100% !important;
}

/* Loop card price / title neon */
body .borderbox .elementor-widget-heading {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body .borderbox .elementor-heading-title {
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0.03em !important;
	color: var(--arcade-sun-3) !important;
	text-shadow:
		0 0 8px rgba(255, 215, 0, 0.5),
		0 0 16px rgba(255, 107, 53, 0.25) !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
	line-height: 1.35 !important;
}

body .borderbox .elementor-element-def0af6 .elementor-heading-title {
	font-size: 15px !important;
}

body .borderbox .elementor-element-e0a8f64 .elementor-heading-title {
	font-size: 20px !important;
}

body .borderbox .elementor-element-f2e5dc4 {
	border: 1px solid rgba(0, 240, 255, 0.35) !important;
	border-radius: 4px !important;
	background: rgba(0, 240, 255, 0.04) !important;
	margin-top: 8px !important;
	padding: 10px 12px !important;
}

body .borderbox .elementor-widget-image img {
	width: 100% !important;
	max-width: 100% !important;
}

/* ── Logo glow ── */ */
body .elementor-widget-image img,
body .custom-logo,
body .elementor-widget-theme-site-logo img {
	filter: drop-shadow(0 0 12px var(--arcade-glow-magenta)) drop-shadow(0 0 24px rgba(0, 240, 255, 0.15));
}

body .elementor-location-header .elementor-widget-image img,
body .elementor-location-header .elementor-widget-theme-site-logo img,
body .elementor-location-header .custom-logo {
	max-height: 150px !important;
	width: auto !important;
	max-width: 300px !important;
	height: auto !important;
}

/* ── Body text ── */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-icon-list .elementor-icon-list-text {
	color: rgba(232, 230, 255, 0.88) !important;
}

/* ── Hero section ── */
body .elementor-page-10 .e-con:first-of-type,
body .elementor-page-10 .elementor-element:first-child .e-con {
	position: relative;
}

body .elementor-page-10 .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.4rem, 4vw, 2.8rem) !important;
}

/* ── Load more button ── */
body .elementor-widget-loop-grid .elementor-button,
body .e-loop__load-more .elementor-button {
	background: linear-gradient(180deg, #ff6b35 0%, #ff2d95 100%) !important;
	border-color: var(--arcade-sun-3) !important;
	color: #ffffff !important;
}

/* ── Social icons footer ── */
body .elementor-location-footer .elementor-social-icon {
	background: rgba(0, 240, 255, 0.1) !important;
	border: 1px solid var(--arcade-cyan) !important;
	box-shadow: 0 0 8px var(--arcade-glow-cyan);
}

body .elementor-location-footer .elementor-social-icon i,
body .elementor-location-footer .elementor-social-icon svg {
	color: var(--arcade-cyan) !important;
	fill: var(--arcade-cyan) !important;
}

/* ── Form inputs (contact page) ── */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body textarea,
body select {
	background: rgba(11, 4, 40, 0.9) !important;
	border: 2px solid var(--arcade-cyan) !important;
	color: var(--arcade-text) !important;
	font-family: "Share Tech Mono", monospace !important;
	box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
}

body input:focus,
body textarea:focus,
body select:focus {
	border-color: var(--arcade-magenta) !important;
	box-shadow: 0 0 12px var(--arcade-glow-magenta);
	outline: none;
}

/* ── Mobile: smaller pixel font on buttons ── */
@media (max-width: 767px) {
	body .elementor-button,
	body .elementor-widget-button .elementor-button {
		font-size: 8px !important;
		padding: 12px 10px !important;
	}

	body .elementor-location-header .elementor-element-f61313b .elementor-heading-title {
		font-size: 7px !important;
	}

	/* Header logo: centered and small enough to fit between the buttons */
	body .elementor-location-header .elementor-element-e3b7eb4 {
		width: 34% !important;
		align-items: center !important;
	}

	body .elementor-location-header .elementor-element-e3b7eb4 .elementor-element-e50e375 {
		width: 100% !important;
		text-align: center !important;
	}

	body .elementor-location-header .elementor-element-e3b7eb4 .elementor-element-e50e375 img,
	body .elementor-location-header .elementor-element-e3b7eb4 .custom-logo {
		width: 115px !important;
		max-width: 115px !important;
		max-height: none !important;
		margin: 0 auto !important;
	}

	/* Side padding on the "Over ons" page content */
	body .elementor-element-3e315dd {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}