/* CUB Nested Carousel Buttons – Styles */

/* ==========================================================================
   MANUELLE HILFSKLASSE (kein JavaScript nötig)
   ==========================================================================
   Einfach am gewünschten Container in Elementor unter "Erweitert" ->
   "CSS-Klassen" den Wert "cub-nescar" eintragen. Reines, statisches CSS –
   läuft dadurch zuverlässig überall, auch im Elementor-EDITOR selbst,
   unabhängig von jeglicher Edit-Mode-Erkennung oder Skript-Timing.
   Optional zusätzlich "cub-nescar-hide-scrollbar" eintragen, um auch die
   Scrollbar dieses Containers auszublenden. */
.cub-nescar {
	overflow-x: auto;
	overflow-y: hidden;
}

.cub-nescar > * {
	flex-shrink: 0;
}

.cub-nescar-hide-scrollbar {
	scrollbar-width: none;      /* Firefox, Chrome 121+ */
	-ms-overflow-style: none;   /* IE / alte Edge */
}

.cub-nescar-hide-scrollbar::-webkit-scrollbar {
	display: none;              /* Chrome, Safari, neues Edge */
	width: 0;
	height: 0;
}

/* ========================================================================== */

/* WICHTIG (Kollisionsschutz):
   Alle Klassennamen tragen bewusst das eindeutige Präfix "cubncb-"
   (statt nur "cub-"), und jede Regel, die Elemente betrifft, die WIR
   selbst im Widget rendern (Wrapper/Buttons), ist zusätzlich fest als
   Nachfahre von ".elementor-widget-nested-carousel-buttons" gescoped.
   Grund: generische Namen wie "wrapper" oder "btn" können mit anderen,
   ähnlich benannten Widgets auf derselben Seite kollidieren (z. B.
   einem eigenen "CUB Teaser"-Widget, das intern zufällig dieselben
   Klassennamen verwendet). Durch die Scope-Bindung an unser eigenes
   Widget können unsere Styles NIE auf fremde Elemente überspringen,
   unabhängig von Namensüberschneidungen. */

/* Wrapper, den das Skript um den Ziel-Container + die Buttons legt.
   Er ist NICHT scrollbar und dient nur als Positionierungs-Rahmen,
   damit die Buttons beim horizontalen Scrollen fix stehen bleiben. */
.cubncb-outer-wrap {
	position: relative;
	width: 100%;
}

/* Der eigentliche Widget-Wrapper von Elementor wird zum Overlay,
   das über dem Ziel-Container liegt, aber selbst nicht mitscrollt.
   Hinweis: Diese Klasse wird von Elementor automatisch aus dem
   internen Widget-Namen "nested-carousel-buttons" generiert und
   bleibt aus Kompatibilitätsgründen unverändert (siehe get_name()
   in class-cub-widget.php).

   Das Overlay-Verhalten gilt NUR, wenn per JS zusätzlich die Klasse
   "cubncb-frontend-mode" gesetzt wurde (Frontend + Vorschau). Im
   Elementor-EDITOR bleibt das Widget ein einfacher Platzhalter. */
.elementor-widget-nested-carousel-buttons.cubncb-frontend-mode {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	pointer-events: none;
	z-index: 20;
}

.elementor-widget-nested-carousel-buttons.cubncb-frontend-mode > .elementor-widget-container {
	width: 100%;
	height: 100%;
	position: relative;
}

/* Editor-Ansicht (Bearbeiten-Modus): schlichter, kompakter Platzhalter
   statt Overlay – zeigt beide Buttons nebeneinander an, ohne die
   Container-Struktur/Größe zu beeinflussen. */
.elementor-widget-nested-carousel-buttons.cubncb-editor-static .cubncb-wrapper {
	position: static;
	height: auto;
	width: auto;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	pointer-events: auto;
}

.elementor-widget-nested-carousel-buttons.cubncb-editor-static .cubncb-btn {
	position: static;
	transform: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
}

/* Ab hier: alles fest gescoped unter unserem eigenen Widget-Wrapper,
   damit nichts auf fremde Elemente mit zufällig gleichem Klassennamen
   wirken kann. */
.elementor-widget-nested-carousel-buttons .cubncb-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.elementor-widget-nested-carousel-buttons .cubncb-btn {
	position: absolute;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: #ffffff;
	color: #111111;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
	padding: 0;
	z-index: 5;
}

.elementor-widget-nested-carousel-buttons .cubncb-btn:hover {
	background-color: #f5f5f5;
}

.elementor-widget-nested-carousel-buttons .cubncb-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.elementor-widget-nested-carousel-buttons .cubncb-btn i {
	font-size: 18px;
	line-height: 1;
}

/* Standardposition: vertikal zentriert, an linkem/rechtem Rand */
.elementor-widget-nested-carousel-buttons .cubncb-prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.elementor-widget-nested-carousel-buttons .cubncb-next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

/* Deaktivierter Zustand am Anfang/Ende des Scrollbereichs: Button und
   zugehöriger Farbverlauf werden komplett ausgeblendet (nicht nur
   abgedunkelt), wenn in diese Richtung nicht mehr gescrollt werden kann. */
.elementor-widget-nested-carousel-buttons .cubncb-btn.cubncb-disabled {
	display: none !important;
	pointer-events: none;
}

/* Farbverlauf hinter dem Button (Rand -> transparent zur Mitte), damit
   der Button auch über wechselndem Bildinhalt gut lesbar bleibt. Farbe
   per Widget-Einstellung "Verlauf-Farbe" über CSS-Variable steuerbar. */
.elementor-widget-nested-carousel-buttons .cubncb-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	max-width: 50%;
	pointer-events: none;
	z-index: 4;
}

.elementor-widget-nested-carousel-buttons .cubncb-fade-left {
	left: 0;
	background: linear-gradient( to right, var( --cubncb-fade-color, rgba(255,255,255,0.9) ), transparent );
}

.elementor-widget-nested-carousel-buttons .cubncb-fade-right {
	right: 0;
	background: linear-gradient( to left, var( --cubncb-fade-color, rgba(255,255,255,0.9) ), transparent );
}

/* Verlauf verschwindet zusammen mit seinem Button am Scroll-Anschlag. */
.elementor-widget-nested-carousel-buttons .cubncb-fade.cubncb-disabled {
	display: none !important;
}

/* Im Editor-Platzhalter braucht es keinen Farbverlauf. */
.elementor-widget-nested-carousel-buttons.cubncb-editor-static .cubncb-fade {
	display: none;
}

/* Wird per JS auf den Ziel-CONTAINER gesetzt (nicht auf unser eigenes
   Widget), wenn "Container automatisch scrollbar machen" aktiv ist.
   Kann daher nicht unter unserem Widget gescoped werden – deshalb hier
   besonders wichtig: eindeutiger Klassenname "cubncb-carousel-container"
   statt eines generischen Namens.
   Entspricht 1:1 der bisherigen manuellen Custom-CSS-Lösung:
     selector { overflow-x: auto; overflow-y: hidden; }
     selector > * { flex-shrink: 0; }
   Bewusst OHNE erzwungenes display:flex / flex-wrap, damit die
   eigenen Layout-/Responsive-Einstellungen des Elementor-Containers
   (z. B. Umbruch auf Mobile) nicht überstimmt werden. */
.cubncb-carousel-container {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
}

.cubncb-carousel-container > * {
	flex-shrink: 0;
}

.cubncb-carousel-container.cubncb-hide-scrollbar {
	scrollbar-width: none !important;      /* Firefox, Chrome 121+ */
	-ms-overflow-style: none !important;   /* IE / alte Edge */
}

.cubncb-carousel-container.cubncb-hide-scrollbar::-webkit-scrollbar,
.cubncb-carousel-container.cubncb-hide-scrollbar::-webkit-scrollbar-thumb,
.cubncb-carousel-container.cubncb-hide-scrollbar::-webkit-scrollbar-track,
.cubncb-carousel-container.cubncb-hide-scrollbar::-webkit-scrollbar-button,
.cubncb-carousel-container.cubncb-hide-scrollbar::-webkit-scrollbar-corner {
	display: none !important;   /* Chrome, Safari, neues Edge */
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}