/* GEEKS carousel controls — arrows and dots for a carousel elsewhere on the page.

   Only what the widgets cannot say through their own controls lives here: the
   boxes they are built from, and the states the handler writes. Every size and
   colour is the author's, through the panel. */

.elementor-widget-geeks-carousel-navigation .geeks-cc-arrows,
.elementor-widget-geeks-carousel-pagination .geeks-cc-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

/* The buttons own nothing but their shape: no browser chrome, and a size that
   follows the icon until the author says otherwise. */
.elementor-widget-geeks-carousel-navigation .geeks-cc-arrow,
.elementor-widget-geeks-carousel-pagination .geeks-cc-dot {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	transition-property: color, background-color, border-color, opacity, width, height, box-shadow;
	transition-timing-function: ease;
}

.elementor-widget-geeks-carousel-navigation .geeks-cc-arrow svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
}

.elementor-widget-geeks-carousel-navigation .geeks-cc-arrow i {
	font-size: inherit;
}

/* AT THE END OF THE RUN. Dimming is the author's opacity; hiding is this.
   `disabled` is set by the handler either way, so a reader cannot press an
   arrow with nowhere to go even while it is still visible. */
.elementor-widget-geeks-carousel-navigation.geeks-cc-ends-hide .geeks-cc-arrow.is-off {
	opacity: 0;
	pointer-events: none;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-dot {
	/* A floor, so a dot is visible before the author sizes it. */
	height: 10px;
	width: 10px;
	background-color: currentColor;
	border-radius: 50%;
	opacity: .35;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-dot.is-active {
	opacity: 1;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-dot:disabled {
	cursor: default;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-fraction {
	align-items: baseline;
	display: inline-flex;
	gap: .25em;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-bar {
	background-color: rgba( 0, 0, 0, .12 );
	overflow: hidden;
	position: relative;
}

.elementor-widget-geeks-carousel-pagination .geeks-cc-bar-fill {
	background-color: currentColor;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: width .2s ease;
	width: 0;
}

/* NOTHING TO DRIVE.
   A control whose carousel has not arrived, or whose carousel has too few
   slides to scroll, takes itself out of the page rather than standing there
   dead. In the editor it stays visible — an author needs to see the widget they
   just dropped, even before its carousel exists. */
.elementor-widget-geeks-carousel-navigation.geeks-cc-empty,
.elementor-widget-geeks-carousel-pagination.geeks-cc-empty,
.elementor-widget-geeks-carousel-navigation.geeks-cc-locked,
.elementor-widget-geeks-carousel-pagination.geeks-cc-locked {
	display: none;
}

.elementor-editor-active .elementor-widget-geeks-carousel-navigation.geeks-cc-empty,
.elementor-editor-active .elementor-widget-geeks-carousel-pagination.geeks-cc-empty,
.elementor-editor-active .elementor-widget-geeks-carousel-navigation.geeks-cc-locked,
.elementor-editor-active .elementor-widget-geeks-carousel-pagination.geeks-cc-locked {
	display: block;
	opacity: .4;
}

/* THE FILTER.

   BOTH FORMS ARE PRINTED AND ONE IS SHOWN. Which one an author wants is a
   per-device setting, and the device is not something the server knows — the
   page may be cached for every device at once. So the choice writes which of
   these variables each box reads, and here is what each one means. A custom
   property cannot be branched on in CSS and a class cannot be written per
   device; this can. */
.elementor-widget-geeks-carousel-filter {
	--geeks-cc-as-buttons-buttons: flex;
	--geeks-cc-as-buttons-select: none;
	--geeks-cc-as-dropdown-buttons: none;
	--geeks-cc-as-dropdown-select: block;
}

.elementor-widget-geeks-carousel-filter .geeks-cc-buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: inherit;
}

.elementor-widget-geeks-carousel-filter .geeks-cc-select {
	display: none;
	max-width: 100%;
}

.elementor-widget-geeks-carousel-filter .geeks-cc-term {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
	margin: 0;
	padding: .4em .9em;
	transition-property: color, background-color, border-color, box-shadow;
	transition-timing-function: ease;
}

.elementor-widget-geeks-carousel-filter .geeks-cc-term:disabled {
	cursor: default;
	opacity: .4;
}

/* A FILTER WITH NOTHING IT CAN DO.
   Its carousel loops, and a loop cannot take fetched slides. Out of the page
   rather than sitting there ignoring presses — and visible in the editor, where
   the author needs to see the widget they are holding and why it says nothing. */
.elementor-widget-geeks-carousel-filter.geeks-cc-cannot {
	display: none;
}

.elementor-editor-active .elementor-widget-geeks-carousel-filter.geeks-cc-cannot {
	display: block;
	opacity: .4;
}

/* A carousel that came back with nothing. The words are the author's, carried
   on the widget, so the stylesheet only has to make room for them. */
.elementor-widget-geeks-carousel-filter.geeks-cc-nothing .geeks-cc-list::after {
	content: attr( data-geeks-cc-nothing );
	display: block;
	flex-basis: 100%;
	opacity: .7;
	padding-block-start: .5em;
}

/* While the slides are being fetched the carousel says so, and anything reading
   it waits rather than flickering through an empty frame. */
.elementor-widget-geeks-loop-carousel.geeks-lc-filtering .elementor-loop-container {
	opacity: .55;
	transition: opacity .15s ease;
}