/*
  WPCode → CSS Snippet → UP Moto scroll sekcije
  Insertion: Site Wide Header
  Code Type: CSS

  NE prilepi <style> tagov — samo to vsebino!
*/

:root {
	--upm-layout-max: 1400px;
	--upm-layout-gutter: clamp(24px, 5vw, 88px);
	--upm-header-h: 84px;
	--upm-scrollbar-size: 12px;
	--upm-scrollbar-track: #d8d8d8;
	--upm-scrollbar-thumb: #6f6f6f;
	--upm-scrollbar-thumb-hover: #4f4f4f;
}

/* Scrollbar vedno viden — Safari + Chrome (macOS overlay off) */
html {
	overflow-y: scroll !important;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--upm-scrollbar-thumb) var(--upm-scrollbar-track);
}

html::-webkit-scrollbar {
	width: var(--upm-scrollbar-size);
	height: var(--upm-scrollbar-size);
	-webkit-appearance: none;
	background: var(--upm-scrollbar-track);
}

html::-webkit-scrollbar-track {
	background: var(--upm-scrollbar-track);
}

html::-webkit-scrollbar-thumb {
	background-color: var(--upm-scrollbar-thumb);
	border-radius: 999px;
	border: 2px solid var(--upm-scrollbar-track);
	min-height: 40px;
}

html::-webkit-scrollbar-thumb:hover {
	background-color: var(--upm-scrollbar-thumb-hover);
}

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

@supports (overflow-x: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* Premium zamiki — enoten grid po vseh UP Moto sekcijah */
.upm-header,
.upm-hero,
.upm-showcase,
.upm-models,
.upm-why-wrap,
.upm-cta,
.upm-dealers,
.upm-stats,
.upm-footer {
	--layout-max: var(--upm-layout-max) !important;
	--layout-gutter: var(--upm-layout-gutter) !important;
}

html:not(.lenis) {
	scrollbar-gutter: stable;
}

html.upm-scroll-smooth:not(.lenis) {
	scroll-behavior: smooth;
}

html:not(.lenis) body {
	overflow-y: visible;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
	html,
	body {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
	}

	html {
		overflow-y: scroll !important;
	}

	html.upm-scroll-smooth {
		scroll-behavior: auto;
	}
}

html.upm-safari-native {
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	scrollbar-gutter: stable;
	height: auto !important;
	-webkit-overflow-scrolling: touch;
}

html.upm-safari-native body {
	overflow-x: hidden !important;
	overflow-y: visible !important;
	height: auto !important;
	min-height: 100%;
	position: relative !important;
	touch-action: pan-y !important;
	-webkit-overflow-scrolling: touch;
}

html.upm-safari-native.lenis,
html.upm-safari-native.lenis body,
html.upm-safari-native.lenis.lenis-smooth,
html.upm-safari-native.lenis.lenis-smooth body {
	overflow-y: scroll !important;
	height: auto !important;
}

html.upm-safari-native.upm-hero-intro-lock,
html.upm-safari-native.upm-hero-intro-lock body {
	overflow: auto !important;
	overflow-y: auto !important;
	touch-action: pan-y !important;
	height: auto !important;
	position: relative !important;
}

html.upm-safari-native .upm-hero__pin {
	transform: none;
	-webkit-transform: none;
}

/* Safari: SWM prekrivanje — showcase mora biti NAD fixed hero */
html.upm-safari-native .upm-hero__media {
	z-index: 0 !important;
	transition: none !important;
}

html.upm-safari-native .upm-hero__image {
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

html.upm-safari-native .upm-hero__media.is-past {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

html.upm-safari-native .elementor-section:has(.upm-showcase),
html.upm-safari-native .elementor-element:has(.upm-showcase),
html.upm-safari-native .e-con:has(.upm-showcase),
html.upm-safari-native .upm-showcase {
	z-index: 2 !important;
	isolation: isolate;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

html.upm-safari-native .upm-showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #f5f5f5;
	z-index: 0;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

html.upm-safari-native .upm-showcase__sheet {
	background-color: #f5f5f5 !important;
	z-index: 0;
}

html.upm-safari-native .upm-showcase__inner,
html.upm-safari-native .upm-showcase__nav {
	position: relative;
	z-index: 1;
}

/* Safari: brez belih vrzeli med sekcijami ob scrollu navzgor */
html.upm-safari-native .upm-hero,
html.upm-safari-native .upm-hero__pin {
	background-color: #111111 !important;
}

html.upm-safari-native .upm-showcase {
	margin-top: 0 !important;
	background-color: #f5f5f5 !important;
}

/* Lenis smooth scroll — Chrome / Edge desktop */
html.lenis {
	height: auto;
	overflow-y: scroll !important;
	scrollbar-gutter: stable;
}

html.lenis,
html.lenis body {
	height: auto;
}

html.lenis body {
	overflow: hidden !important;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

html.lenis.lenis-stopped,
html.lenis.lenis-stopped body {
	overflow: hidden !important;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	html.lenis,
	html.lenis.lenis-smooth,
	html.upm-scroll-smooth {
		scroll-behavior: auto !important;
	}
}

.elementor-section:has(.upm-hero),
.elementor-element:has(.upm-hero),
.e-con:has(.upm-hero) {
	margin-block: 0 !important;
	padding-block: 0 !important;
	overflow: visible !important;
	z-index: auto !important;
}

.elementor-7 > .e-con:has(.upm-stats),
.elementor-7 > .e-con:has(.upm-showcase),
.elementor-7 > .e-con:has(.upm-models),
.elementor-7 > .e-con:has(.upm-why-wrap),
.elementor-7 > .e-con:has(.upm-cta),
.elementor-7 > .e-con:has(.upm-dealers),
.elementor-section:has(.upm-stats),
.elementor-section:has(.upm-showcase),
.elementor-section:has(.upm-models),
.elementor-section:has(.upm-why-wrap),
.elementor-section:has(.upm-cta),
.elementor-section:has(.upm-dealers),
.elementor-element:has(.upm-stats),
.elementor-element:has(.upm-showcase),
.elementor-element:has(.upm-models),
.elementor-element:has(.upm-why-wrap),
.elementor-element:has(.upm-cta),
.elementor-element:has(.upm-dealers) {
	position: relative !important;
	z-index: 2 !important;
	margin-block: 0 !important;
	padding-block: 0 !important;
	gap: 0 !important;
	--row-gap: 0px !important;
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	overflow: visible !important;
}

.elementor-7 > .e-con:has(.upm-stats),
.elementor-section:has(.upm-stats),
.elementor-element:has(.upm-stats) {
	z-index: 4 !important;
}

.elementor-7 > .e-con:has(.upm-stats),
.elementor-7 > .e-con:has(.upm-showcase),
.elementor-7 > .e-con:has(.upm-models),
.elementor-7 > .e-con:has(.upm-why-wrap),
.elementor-7 > .e-con:has(.upm-dealers),
.elementor-section:has(.upm-stats),
.elementor-section:has(.upm-showcase),
.elementor-section:has(.upm-models),
.elementor-section:has(.upm-why-wrap),
.elementor-section:has(.upm-dealers) {
	background-color: #f5f5f5 !important;
}

.elementor-7 > .e-con:has(.upm-cta),
.elementor-section:has(.upm-cta) {
	background-color: #ff4c2e !important;
}

.elementor-widget-html:has(.upm-stats) .elementor-widget-container,
.elementor-widget-html:has(.upm-showcase) .elementor-widget-container,
.elementor-widget-html:has(.upm-models) .elementor-widget-container,
.elementor-widget-html:has(.upm-why-wrap) .elementor-widget-container,
.elementor-widget-html:has(.upm-cta) .elementor-widget-container,
.elementor-widget-html:has(.upm-dealers) .elementor-widget-container {
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: inherit !important;
}

.elementor-section:has(.upm-hero) > .elementor-container,
.elementor-section:has(.upm-stats) > .elementor-container,
.elementor-section:has(.upm-showcase) > .elementor-container,
.elementor-section:has(.upm-models) > .elementor-container,
.elementor-section:has(.upm-why-wrap) > .elementor-container,
.elementor-section:has(.upm-cta) > .elementor-container,
.elementor-section:has(.upm-dealers) > .elementor-container,
.elementor-section:has(.upm-hero) .e-con,
.elementor-section:has(.upm-stats) .e-con,
.elementor-section:has(.upm-showcase) .e-con,
.elementor-section:has(.upm-models) .e-con,
.elementor-section:has(.upm-why-wrap) .e-con,
.elementor-section:has(.upm-cta) .e-con,
.elementor-section:has(.upm-dealers) .e-con {
	overflow: visible !important;
}

/* Showcase: brez vodoravnega scrollbara (ATV animacija) */
.elementor-7 > .e-con:has(.upm-showcase),
.elementor-section:has(.upm-showcase),
.elementor-element:has(.upm-showcase),
.elementor-widget-html:has(.upm-showcase) .elementor-widget-container,
.elementor-section:has(.upm-showcase) > .elementor-container,
.elementor-section:has(.upm-showcase) .e-con,
.upm-showcase {
	overflow-x: clip !important;
}

.upm-showcase {
	overflow-y: hidden;
}

.upm-showcase__viewport,
.upm-showcase__media {
	overflow-x: clip;
}

.upm-stats,
.upm-showcase,
.upm-models,
.upm-why-wrap,
.upm-cta,
.upm-dealers {
	position: relative !important;
	z-index: 2 !important;
	margin-block: 0 !important;
	width: 100%;
}

.upm-stats {
	z-index: 4 !important;
	display: none !important; /* zastarel ločen widget — kartice so v why.html */
}

.upm-stats,
.upm-showcase,
.upm-models,
.upm-why-wrap,
.upm-dealers {
	background-color: #f5f5f5 !important;
}

/* Stats tik pod hero — manj lufta do showcase */
.elementor-7 > .e-con:has(.upm-stats) + .e-con:has(.upm-showcase) .upm-showcase,
.elementor-section:has(.upm-stats) + .elementor-section:has(.upm-showcase) .upm-showcase {
	--showcase-pad-top: clamp(72px, 8vw, 96px);
}

.upm-cta {
	background-color: #ff4c2e !important;
}

.upm-hero.is-offscreen,
.upm-hero.is-offscreen *,
.upm-showcase.is-offscreen,
.upm-showcase.is-offscreen *:not(.upm-showcase__nav) {
	animation-play-state: paused !important;
}

.upm-showcase__nav {
	z-index: 10 !important;
	pointer-events: auto !important;
}

.upm-hero.is-offscreen .upm-hero__overlay,
.upm-hero.is-offscreen .upm-hero__dust {
	opacity: 0 !important;
}

/* ─── Elementor Theme Builder HEADER (template 36) ─── */
.elementor-location-header:not(:has(.upm-header)),
.elementor-36:not(:has(.upm-header)) {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000 !important;
	width: 100%;
	background-color: #111111 !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.elementor-location-header:not(:has(.upm-header))::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #111111;
	z-index: -1;
	pointer-events: none;
}

/* Custom .upm-header v HTML widgetu — brez dodatne črne vrste */
.elementor-location-header:has(.upm-header),
.elementor-36:has(.upm-header) {
	position: relative !important;
	top: auto !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	transform: none !important;
	z-index: auto !important;
}

.elementor-location-header:has(.upm-header)::before {
	display: none !important;
}

.elementor-location-header:has(.upm-header) > .e-con,
.elementor-location-header:has(.upm-header) .elementor-container,
.elementor-location-header:has(.upm-header) .e-con-inner,
.elementor-location-header:has(.upm-header) .elementor-widget-wrap {
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.upm-header-spacer {
	display: none !important;
	height: 0 !important;
}

.elementor-36:not(:has(.upm-header)) .elementor-element-4ffec2c {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	align-items: center !important;
	width: min(100%, var(--upm-layout-max)) !important;
	max-width: var(--upm-layout-max) !important;
	margin-inline: auto !important;
	padding: 20px var(--upm-layout-gutter) !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
}

.elementor-36:not(:has(.upm-header)) .elementor-element-ce46ee4 {
	position: relative;
	z-index: 2;
	justify-self: start;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	width: auto !important;
}

.elementor-36:not(:has(.upm-header)) .elementor-element-ce46ee4 img {
	display: block !important;
	width: 137px !important;
	max-width: 137px !important;
	min-width: 0 !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.elementor-36:not(:has(.upm-header)) .elementor-element-f0a6828 {
	justify-self: end;
	width: auto !important;
	max-width: 100%;
}

body:not(.elementor-editor-active) .elementor-7 {
	padding-top: var(--upm-header-h, 84px);
}

@media (max-width: 767px) {
	:root {
		--upm-header-h: 72px;
	}

	body:not(.elementor-editor-active) .elementor-7 {
		padding-top: var(--upm-header-h, 72px);
	}

	.elementor-36:not(:has(.upm-header)) .elementor-element-4ffec2c {
		align-items: center !important;
		min-height: var(--upm-header-h, 72px);
		padding-block: 0 !important;
		padding-inline: var(--upm-layout-gutter) !important;
	}

	.elementor-36:not(:has(.upm-header)) .elementor-element-ce46ee4,
	.elementor-36:not(:has(.upm-header)) .elementor-element-f0a6828,
	.elementor-36:not(:has(.upm-header)) .elementor-element-f0a6828 .elementor-widget-container,
	.elementor-36:not(:has(.upm-header)) .elementor-element-f0a6828 .hfe-nav-menu__toggle {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
	}

	.elementor-36:not(:has(.upm-header)) .elementor-element-ce46ee4 img {
		width: 136px !important;
		max-width: 136px !important;
	}
}

/* ─── Premium gumbi — enoten stil po celotni strani ─── */
.upm-hero__cta,
.upm-models__download,
.upm-showcase__cta,
.upm-why__cta,
.upm-dealers__cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(17, 17, 17, 0.06) !important;
	background: #ff4c2e !important;
	box-shadow: 0 8px 28px rgba(17, 17, 17, 0.08);
	color: #ffffff !important;
	text-decoration: none !important;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s ease,
		color 0.4s ease,
		background 0.4s ease;
	-webkit-tap-highlight-color: transparent;
	font-weight: 400 !important;
}

.upm-hero__cta:hover,
.upm-hero__cta:focus-visible,
.upm-models__download:hover,
.upm-models__download:focus-visible,
.upm-showcase__cta:hover,
.upm-showcase__cta:focus-visible,
.upm-why__cta:hover,
.upm-why__cta:focus-visible,
.upm-dealers__cta:hover,
.upm-dealers__cta:focus-visible {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 76, 46, 0.22) !important;
	box-shadow: 0 24px 56px rgba(17, 17, 17, 0.14) !important;
	background:
		linear-gradient(135deg, rgba(17, 17, 17, 0.2) 0%, transparent 42%),
		#ff4c2e !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	filter: none !important;
	outline: none !important;
}

.upm-hero__cta:focus-visible,
.upm-models__download:focus-visible,
.upm-showcase__cta:focus-visible,
.upm-why__cta:focus-visible,
.upm-dealers__cta:focus-visible {
	outline: 2px solid rgba(255, 76, 46, 0.45) !important;
	outline-offset: 3px;
}

.upm-hero__cta:hover,
.upm-models__download:hover,
.upm-showcase__cta:hover,
.upm-why__cta:hover,
.upm-dealers__cta:hover {
	outline: none !important;
}

.upm-hero__cta:active,
.upm-models__download:active,
.upm-showcase__cta:active,
.upm-why__cta:active,
.upm-dealers__cta:active {
	transform: translateY(-1px);
	transition-duration: 0.12s;
}

/* CTA sekcija — temen gumb na oranžnem ozadju (kontra) */
.upm-cta__button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(17, 17, 17, 0.06) !important;
	background: #111111 !important;
	box-shadow: 0 8px 28px rgba(17, 17, 17, 0.08);
	color: #ffffff !important;
	text-decoration: none !important;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s ease,
		background 0.4s ease;
}

.upm-cta__button:hover,
.upm-cta__button:focus-visible {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 76, 46, 0.22) !important;
	box-shadow: 0 24px 56px rgba(17, 17, 17, 0.14) !important;
	background:
		linear-gradient(135deg, rgba(255, 76, 46, 0.14) 0%, transparent 42%),
		#111111 !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	filter: none !important;
	outline: none !important;
}

/* Preglasi star CSS v Elementor widgetih — vsi oranžni gumbi */
.upm-hero a.upm-hero__cta:hover,
.upm-hero a.upm-hero__cta:focus-visible,
a.upm-models__download:hover,
a.upm-models__download:focus-visible,
.upm-models__download:hover,
.upm-models__download:focus-visible,
a.upm-showcase__cta:hover,
a.upm-showcase__cta:focus-visible,
.upm-showcase__cta:hover,
.upm-showcase__cta:focus-visible,
a.upm-why__cta:hover,
a.upm-why__cta:focus-visible,
.upm-why__cta:hover,
.upm-why__cta:focus-visible,
.upm-dealers__cta:hover,
.upm-dealers__cta:focus-visible,
button.upm-dealers__cta:hover,
button.upm-dealers__cta:focus-visible {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 76, 46, 0.22) !important;
	box-shadow: 0 24px 56px rgba(17, 17, 17, 0.14) !important;
	background:
		linear-gradient(135deg, rgba(17, 17, 17, 0.2) 0%, transparent 42%),
		#ff4c2e !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	filter: none !important;
}

.upm-hero a.upm-hero__cta:hover,
a.upm-models__download:hover,
a.upm-showcase__cta:hover,
a.upm-why__cta:hover,
.upm-models__download:hover,
.upm-showcase__cta:hover,
.upm-why__cta:hover,
.upm-dealers__cta:hover,
button.upm-dealers__cta:hover {
	outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.upm-hero__cta,
	.upm-models__download,
	.upm-showcase__cta,
	.upm-why__cta,
	.upm-dealers__cta,
	.upm-cta__button {
		transition-duration: 0.01ms !important;
	}

	.upm-hero__cta:hover,
	.upm-models__download:hover,
	.upm-showcase__cta:hover,
	.upm-why__cta:hover,
	.upm-dealers__cta:hover,
	.upm-cta__button:hover {
		transform: none;
	}
}
