﻿/* ------ >>> Carousel / Banner (Közös és Asztali nézet) -------*/

#secHandOver {
	position: relative;
	z-index: 0;
}

	#secHandOver .container {
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

#content {
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 320px;
	overflow: hidden;
}

#SlideWrapper {
	margin-left: auto;
	margin-right: auto;
	display: contents;
}

.slide {
	width: 100%;
}

.carousel-item picture,
.carousel-item picture img {
	width: 100%;
	height: auto;
	display: block;
}

#banner .carousel-item,
#banner #slide1 {
	position: relative;
}

/* Carousel-inner: ne legyen extra margó */
#banner .carousel-inner {
	margin-bottom: 0 !important;
}

/* MÓDOSÍTVA: pointer-events none, hogy a teljes felületű konténer
   ne blokkolja a kattintásokat a képen máshol */
.carousel-controls {
	display: flex;
	flex-direction: row;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none; /* ÚJ */
}

	/* ÚJ: de maguk a gombok maradjanak kattinthatók */
	.carousel-controls .carousel-control-next {
		pointer-events: auto;
	}

/* Balra nyilat teljesen elrejtjük */
#banner .carousel-control-prev {
	display: none !important;
}

/* ---------------------------------------------------------------
   Láthatatlan, de kattintható next gombok.
   Alap/Asztali méret: csak az alsó létezik (10%, jobb alsó sarok).
   A felső gombot asztalon elrejtjük.
--------------------------------------------------------------- */
#banner .carousel-control-next {
	position: absolute !important;
	right: 0;
	bottom: 0;
	top: unset !important;
	width: 10% !important; /* Asztali méret */
	aspect-ratio: 1 / 1 !important;
	opacity: 0;
	cursor: pointer;
	z-index: 10;
	touch-action: manipulation;
	background-color: transparent !important;
}

	/* ÚJ: felső gomb asztalon rejtve */
	#banner .carousel-control-next.top {
		display: none !important;
	}

	/* A next ikon tartalmát elrejtjük globálisan */
	#banner .carousel-control-next .carousel-control-next-icon {
		display: none !important;
	}

/* ---------------------------------------------------------------
   Indicators - Közös és asztali (8.17%) beállítások
--------------------------------------------------------------- */
#banner .carousel-indicators {
	display: flex !important;
	flex-direction: row !important;
	position: absolute !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: 10px !important;
	left: 50% !important;
	right: unset !important;
	top: unset !important;
	transform: translateX(-50%) !important;
	bottom: calc(8.17% - 3px) !important; /* Asztali pozíció */
	gap: 10px;
	gap: clamp(6px, 2vw, 14px); /* Arányos térköz */
	z-index: 15 !important; /* Emeljük a Z-Indexet a nyilak fölé */
	pointer-events: auto !important;
}

	#banner .carousel-indicators button {
		border: none !important; /* BS5 alapértelmezett keret kikapcsolása */
		border-top: unset;
		border-bottom: unset;
		width: 10px !important;
		height: 10px !important;
		border-radius: 50% !important; /* Kör forma kényszerítése */
		background: white !important;
		opacity: 0.5; /* Nem aktív pontok halványsága */
		margin: 0 !important;
		box-shadow: 2px 2px 4px #777;
		flex-shrink: 0;
		text-indent: unset;
		pointer-events: auto !important;
		cursor: pointer !important;
	}

		/* Aktív pont láthatósága */
		#banner .carousel-indicators button.active {
			opacity: 1 !important;
			background: white !important;
		}


/* ------ >>> Mobil nézet (max 700px) -------*/
@media screen and (max-width: 700px) {

	/* Mobilon nagyobb (20%) kattintható terület kell az alsó nyílnak */
	#banner .carousel-control-next.bottom {
		width: 20% !important;
	}

	/* ÚJ: felső gomb mobilon látható (láthatatlanul kattintható),
	   a jobb felső sarokban */
	#banner .carousel-control-next.top {
		display: block !important;
		top: 0 !important;
		bottom: unset !important;
		width: 25% !important; /* Mobilon még nagyobb terület felül */
	}

	/* Mobilon más az alsó arány */
	#banner .carousel-indicators {
		bottom: calc(4.65% - 3px) !important;
	}
}
/* ------ <<< Mobil nézet -------*/

/* ------ <<< Carousel / Banner -------*/
