/**
 * DG Category Carousel — estilos del front.
 *
 * El desplazamiento es scroll horizontal nativo con scroll-snap: tiene tope
 * real en ambos extremos, sin loop ni clones. Todo lo configurable pasa por
 * custom properties para que Elementor pueda sobreescribirlas por widget.
 */

.dg-cc {
	--dg-cc-bubble-size: 88px;
	--dg-cc-gap: 12px;
	--dg-cc-radius: 50%;
	--dg-cc-image-scale: 70%;
	--dg-cc-bubble-bg: #1f6b33;
	--dg-cc-bubble-text: #ffffff;
	--dg-cc-active-ring: #111111;
	--dg-cc-active-ring-width: 3px;
	--dg-cc-inactive-opacity: 1;
	--dg-cc-edge-fade: 24px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Elementor anida flex (columna > widget-wrap > widget-container) hasta
	   llegar acá. Sin min-width:0 en ESTE nivel, el ancho mínimo que exige el
	   contenido de .dg-cc-track (las burbujas) se propaga hacia arriba y
	   desborda la página, aunque el track ya tenga su propio min-width:0. */
	min-width: 0;
	max-width: 100%;
	/* Red de seguridad: en algunas versiones de Safari, -webkit-overflow-
	   scrolling:touch + flex + scroll-snap en .dg-cc-track sigue pintando el
	   contenido que se sale del contenedor aunque el scroll interno funcione
	   bien. Recortamos acá, un nivel más arriba, para que nunca desborde la
	   página aunque el bug de scroll en sí no dependa de esto. */
	overflow: hidden;
}

/* --- Track --- */

.dg-cc-track {
	display: flex;
	gap: var(--dg-cc-gap);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	padding: 4px var(--dg-cc-edge-fade) 4px 0;
}

.dg-cc-track::-webkit-scrollbar {
	display: none;
}

/* Durante el arrastre con mouse desactivamos snap y smooth para que el
   movimiento siga al puntero sin pelearse con el navegador. */
.dg-cc.is-dragging .dg-cc-track {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.dg-cc.is-dragging .dg-cc-item {
	pointer-events: none;
}

/* --- Ítem --- */

.dg-cc-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.dg-cc-item:focus-visible {
	outline: 2px solid var(--dg-cc-active-ring);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Algunos temas ponen `button:hover`/`:focus` con fondo propio (ej. #c36).
   Esa regla empata o gana en especificidad a `.dg-cc-item` sola, así que acá
   reforzamos con el wrapper `.dg-cc` para no depender del orden de carga. */
.dg-cc .dg-cc-item:hover,
.dg-cc .dg-cc-item:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

/* --- Burbuja --- */

/* Del tamaño exacto del círculo, sin overflow:hidden: así el contador puede
   asomar en la esquina sin que el recorte circular de la burbuja se lo coma. */
.dg-cc-bubble-wrap {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	width: var(--dg-cc-bubble-size);
	height: var(--dg-cc-bubble-size);
}

.dg-cc-bubble {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--dg-cc-radius);
	/* -override la pone el control "Fondo"/"Texto" de cada burbuja (Elementor
	   la resuelve él mismo, así funciona también con Colores Globales). Sin
	   override cae en la base: color de la categoría o el default del plugin. */
	background-color: var(--dg-cc-bubble-bg-override, var(--dg-cc-bubble-bg));
	color: var(--dg-cc-bubble-text-override, var(--dg-cc-bubble-text));
	overflow: hidden;
	opacity: var(--dg-cc-inactive-opacity);
	box-shadow: inset 0 0 0 0 var(--dg-cc-active-ring);
	transition: box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.dg-cc-item.is-active .dg-cc-bubble {
	opacity: 1;
	box-shadow: inset 0 0 0 var(--dg-cc-active-ring-width) var(--dg-cc-active-ring);
}

.dg-cc-item:hover .dg-cc-bubble {
	opacity: 1;
}

/* Orden de prioridad al pasar el mouse: hover de la burbuja > hover general
   del widget > color base de la burbuja (con o sin override). */
.dg-cc-item:hover .dg-cc-bubble,
.dg-cc-item:focus .dg-cc-bubble {
	background-color: var(--dg-cc-bubble-hover-bg-override, var(--dg-cc-bubble-hover-bg, var(--dg-cc-bubble-bg-override, var(--dg-cc-bubble-bg))));
}

.dg-cc-item:hover .dg-cc-label,
.dg-cc-item:focus .dg-cc-label {
	color: var(--dg-cc-bubble-hover-text-override, var(--dg-cc-bubble-hover-text, var(--dg-cc-bubble-text-override, var(--dg-cc-bubble-text))));
}

.dg-cc-image {
	width: var(--dg-cc-image-scale);
	height: var(--dg-cc-image-scale);
	object-fit: contain;
	pointer-events: none;
}

/* --- Etiquetas --- */

.dg-cc-label {
	display: block;
	line-height: 1.1;
	text-align: center;
}

.dg-cc--label-inside .dg-cc-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--dg-cc-bubble-text-override, var(--dg-cc-bubble-text));
}

/* Cuando hay imagen y etiqueta adentro, la etiqueta se apoya sobre la imagen. */
.dg-cc--label-inside .dg-cc-image + .dg-cc-label {
	background: linear-gradient(to top, rgb(0 0 0 / 35%), transparent 60%);
	align-items: flex-end;
}

/* "Sin etiqueta" sin imagen cargada: mostramos el texto igual, con el mismo
   estilo que la etiqueta "Dentro de la burbuja", para que no quede vacía. */
.dg-cc-label--fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--dg-cc-bubble-text-override, var(--dg-cc-bubble-text));
}

.dg-cc--label-below .dg-cc-label {
	max-width: calc(var(--dg-cc-bubble-size) + 16px);
	font-size: 0.8125rem;
}

.dg-cc-count {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 5px;
	border-radius: 999px;
	background: rgb(255 255 255 / 90%);
	color: #111;
	font-size: 0.6875rem;
	line-height: 1.2;
	font-weight: 600;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dg-cc-count--top-right {
	top: 4px;
	right: 4px;
}

.dg-cc-count--top-left {
	top: 4px;
	left: 4px;
}

.dg-cc-count--bottom-right {
	bottom: 4px;
	right: 4px;
}

.dg-cc-count--bottom-left {
	bottom: 4px;
	left: 4px;
}

/* --- Flechas (solo escritorio) --- */

.dg-cc-arrow {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 90%);
	color: #111;
	box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
	cursor: pointer;
}

.dg-cc-arrow svg {
	width: 20px;
	height: 20px;
}

.dg-cc-arrow[hidden] {
	display: none;
}

@media (min-width: 1025px) and (hover: hover) {
	.dg-cc-arrow:not([hidden]) {
		display: flex;
	}

	.dg-cc-track {
		cursor: grab;
	}
}

/* --- Estados de la grilla --- */

.dg-cc-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Aplicado por el JS sobre los loop items que no entran en el filtro. */
.dg-cc-hidden {
	display: none !important;
}

.dg-cc-empty {
	grid-column: 1 / -1;
	width: 100%;
	padding: 32px 16px;
	text-align: center;
}

/* Atenuado mientras llega la respuesta AJAX. */
.dg-cc-target-loading {
	opacity: 0.45;
	transition: opacity 120ms ease;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dg-cc-track {
		scroll-behavior: auto;
	}

	.dg-cc-bubble,
	.dg-cc-target-loading {
		transition: none;
	}
}