/* CDW Slider — Frontend (mobile-first) */

.cdw-slider {
	--cdw-w: 100%;
	--cdw-h: 300px;
	--cdw-thumb-w: 150px;
	--cdw-thumb-h: 100px;
	--cdw-thumb-min: 100px;
	--cdw-speed: 600ms;
	--cdw-bg: #000;
	--cdw-arrow-color: #fff;
	--cdw-arrow-bg: rgba(0, 0, 0, 0.4);
	--cdw-dot-color: rgba(255, 255, 255, 0.5);
	--cdw-dot-active: #fff;
	--cdw-caption-bg: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	--cdw-caption-fg: #fff;

	position: relative;
	max-width: var(--cdw-w);
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
}

.cdw-slider * { box-sizing: border-box; }

.cdw-slider:focus { outline: 2px solid #2271b1; outline-offset: 2px; }
.cdw-slider:focus:not(:focus-visible) { outline: none; }

.cdw-slider.cdw-full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.cdw-slider-viewport {
	position: relative;
	/* overflow visível para permitir setas em posição "outside". O clip dos slides
	   acontece em .cdw-slides-clip. */
	overflow: visible;
	width: 100%;
	height: var(--cdw-h, 300px);
	background-color: var(--cdw-bg, #000);
}

.cdw-slides-clip {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Aspect ratio fixo: viewport ganha aspect-ratio e altura automática. */
.cdw-slider:not([data-aspect="auto"]) .cdw-slider-viewport {
	height: auto;
}
.cdw-slider[data-aspect="auto"]:not([data-fit="natural"]) .cdw-slider-viewport {
	height: auto;
	aspect-ratio: var(--cdw-ratio-desktop, 16 / 9);
}
.cdw-slider[data-aspect="16-9"] .cdw-slider-viewport { aspect-ratio: 16 / 9; }
.cdw-slider[data-aspect="4-3"]  .cdw-slider-viewport { aspect-ratio: 4 / 3; }
.cdw-slider[data-aspect="21-9"] .cdw-slider-viewport { aspect-ratio: 21 / 9; }
.cdw-slider[data-aspect="1-1"]  .cdw-slider-viewport { aspect-ratio: 1 / 1; }
.cdw-slider[data-aspect="3-2"]  .cdw-slider-viewport { aspect-ratio: 3 / 2; }

/* Natural: a altura sai do conteúdo. */
.cdw-slider[data-fit="natural"] .cdw-slider-viewport {
	height: auto;
	aspect-ratio: auto;
}

.cdw-slides {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

/* Slide transition: slide */
.cdw-transition-slide .cdw-slides {
	display: flex;
	width: 100%;
	will-change: transform;
}
.cdw-transition-slide .cdw-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	position: relative;
}

/* Slide transition: fade */
.cdw-transition-fade .cdw-slides {
	position: relative;
	width: 100%;
}
.cdw-transition-fade .cdw-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.cdw-transition-fade .cdw-slide.is-active { opacity: 1; }

/* Container do slide — sempre com background configurável.
   Escopado a `.cdw-slider` para não vazar para a lista de slides do admin
   (que usava o mesmo nome de classe). */
.cdw-slider .cdw-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cdw-bg, #000);
	overflow: hidden;
}

.cdw-slider .cdw-slide img {
	image-rendering: auto;
	backface-visibility: hidden;
	transform: translateZ(0);
}
.cdw-slider .cdw-slide picture {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.cdw-slider .cdw-slide picture > img {
	display: block;
	width: 100%;
	height: 100%;
}

/* MODO PADRÃO: contain — mostra imagem inteira, sem cortar. */
.cdw-slider[data-fit="contain"] .cdw-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* MODO cover — preenche tudo, pode cortar. */
.cdw-slider[data-fit="cover"] .cdw-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* MODO natural — altura se ajusta à imagem. */
.cdw-slider[data-fit="natural"] .cdw-slide {
	height: auto;
	flex: 0 0 100%;
}
.cdw-slider[data-fit="natural"] .cdw-slide img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	object-fit: initial;
}
.cdw-slider[data-fit="natural"] .cdw-slide picture {
	height: auto;
}
.cdw-slider[data-fit="natural"] .cdw-slide picture > img {
	height: auto;
}
.cdw-slider[data-fit="natural"].cdw-transition-fade .cdw-slide {
	position: relative;
	inset: auto;
}
.cdw-slider[data-fit="natural"].cdw-transition-fade .cdw-slides {
	display: grid;
}
.cdw-slider[data-fit="natural"].cdw-transition-fade .cdw-slide {
	grid-area: 1 / 1;
}

/* Link wrapping da imagem ocupa todo o slide. */
.cdw-slide-link {
	display: block;
	width: 100%;
	height: 100%;
}
.cdw-slider[data-fit="natural"] .cdw-slide-link {
	height: auto;
}

/* Caption */
.cdw-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 24px 20px;
	background: var(--cdw-caption-bg);
	color: var(--cdw-caption-fg);
	pointer-events: none;
}
.cdw-caption-title {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.2;
	color: inherit;
}
.cdw-caption-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.9;
}

/* ============================================================
   ARROWS — base + 8 estilos visuais + tamanhos + posições
   ============================================================ */

.cdw-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--cdw-arrow-color, #fff);
	background: var(--cdw-arrow-bg, rgba(0,0,0,0.4));
	opacity: 0.9;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	z-index: 10;
}
.cdw-arrow:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.04);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
}
.cdw-arrow:focus-visible { outline: 2px solid var(--cdw-arrow-color, #fff); outline-offset: 2px; }
.cdw-arrow svg { display: block; }

/* Visibilidade */
.cdw-slider[data-arrows-visibility="hover"] .cdw-arrow { opacity: 0; }
.cdw-slider[data-arrows-visibility="hover"]:hover .cdw-arrow,
.cdw-slider[data-arrows-visibility="hover"]:focus-within .cdw-arrow { opacity: 1; }
.cdw-slider[data-arrows-visibility="hidden"] .cdw-arrow { display: none; }

/* Tamanhos */
.cdw-slider[data-arrows-size="small"]  .cdw-arrow { width: 32px; height: 32px; }
.cdw-slider[data-arrows-size="medium"] .cdw-arrow { width: 44px; height: 44px; }
.cdw-slider[data-arrows-size="large"]  .cdw-arrow { width: 56px; height: 56px; }
.cdw-slider[data-arrows-size="xlarge"] .cdw-arrow { width: 72px; height: 72px; }

/* Posição: inside (padrão) */
.cdw-slider[data-arrows-position="inside"] .cdw-arrow.cdw-prev { left: 16px; }
.cdw-slider[data-arrows-position="inside"] .cdw-arrow.cdw-next { right: 16px; }

/* Posição: outside */
.cdw-slider[data-arrows-position="outside"] .cdw-arrow.cdw-prev { left: -60px; }
.cdw-slider[data-arrows-position="outside"] .cdw-arrow.cdw-next { right: -60px; }
@media (max-width: 600px) {
	/* Em telas pequenas, "outside" colapsa para "inside" para evitar setas cortadas. */
	.cdw-slider[data-arrows-position="outside"] .cdw-arrow.cdw-prev { left: 8px; }
	.cdw-slider[data-arrows-position="outside"] .cdw-arrow.cdw-next { right: 8px; }
}

/* === ESTILO: thin (chevron fino, sem fundo) === */
.cdw-slider[data-arrows-style="thin"] .cdw-arrow {
	background: transparent;
}

/* === ESTILO: bold (chevron grosso, sem fundo) === */
.cdw-slider[data-arrows-style="bold"] .cdw-arrow {
	background: transparent;
}

/* === ESTILO: thin-circle === */
.cdw-slider[data-arrows-style="thin-circle"] .cdw-arrow {
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--cdw-arrow-color, #fff);
}

/* === ESTILO: bold-circle === */
.cdw-slider[data-arrows-style="bold-circle"] .cdw-arrow {
	border-radius: 50%;
	background: var(--cdw-arrow-bg, rgba(0,0,0,0.6));
}

/* === ESTILO: square === */
.cdw-slider[data-arrows-style="square"] .cdw-arrow {
	border-radius: 0;
	background: var(--cdw-arrow-bg, rgba(0,0,0,0.6));
}

/* === ESTILO: rounded-square === */
.cdw-slider[data-arrows-style="rounded-square"] .cdw-arrow {
	border-radius: 8px;
	background: var(--cdw-arrow-bg, rgba(0,0,0,0.6));
}

/* === ESTILO: arrow-long === */
.cdw-slider[data-arrows-style="arrow-long"] .cdw-arrow {
	background: transparent;
	width: auto;
	min-width: 36px;
	padding: 6px 10px;
	border-radius: 0;
}

/* === ESTILO: minimal-line === */
.cdw-slider[data-arrows-style="minimal-line"] .cdw-arrow {
	background: transparent;
	border-radius: 0;
}
.cdw-slider[data-arrows-style="minimal-line"] .cdw-arrow.cdw-prev {
	border-left: 2px solid var(--cdw-arrow-color, #fff);
	padding-left: 10px;
}
.cdw-slider[data-arrows-style="minimal-line"] .cdw-arrow.cdw-next {
	border-right: 2px solid var(--cdw-arrow-color, #fff);
	padding-right: 10px;
}

/* ============================================================
   DOTS — base + 6 estilos visuais + tamanhos + posições
   ============================================================ */

.cdw-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 4;
}
.cdw-dots li { line-height: 0; }

/* Posição: inside (sobre o slider) */
.cdw-slider[data-dots-position="inside"] .cdw-slider-viewport > .cdw-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 10;
}

/* Posição: outside (abaixo do slider) */
.cdw-slider[data-dots-position="outside"] > .cdw-dots {
	position: static;
	margin-top: 12px;
	transform: none;
}

.cdw-dot {
	cursor: pointer;
	border: 0;
	padding: 0;
	background: var(--cdw-dot-color, rgba(255,255,255,0.35));
	color: #fff;
	opacity: 0.9;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 4px rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
}
.cdw-dot:hover { opacity: 1; }
.cdw-dot.is-active {
	background: var(--cdw-dot-active, #fff);
	transform: scale(1.12);
	opacity: 1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.cdw-dot:focus-visible { outline: 2px solid var(--cdw-dot-active, #fff); outline-offset: 2px; }

/* Esconde o número por padrão; só aparece no estilo numbered. */
.cdw-dot-num {
	display: none;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
}

/* Tamanhos (genéricos — alguns estilos sobrescrevem) */
.cdw-slider[data-dots-size="small"]  .cdw-dot { width: 6px;  height: 6px; }
.cdw-slider[data-dots-size="medium"] .cdw-dot { width: 10px; height: 10px; }
.cdw-slider[data-dots-size="large"]  .cdw-dot { width: 14px; height: 14px; }

/* === DOT STYLE: circle (default) === */
.cdw-slider[data-dots-style="circle"] .cdw-dot {
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 9999px !important;
	transform-origin: center center;
	background: #8b8b8b !important;
	box-shadow: none !important;
	opacity: 1 !important;
	border: 0 !important;
}
.cdw-slider[data-dots-style="circle"] .cdw-dot.is-active {
	background: #111111 !important;
	box-shadow: none !important;
	transform: scale(1.08);
}
.cdw-slider[data-dots-style="circle"][data-dots-size="small"] .cdw-dot {
	width: 8px !important;
	height: 8px !important;
	min-width: 8px !important;
	min-height: 8px !important;
	max-width: 8px !important;
	max-height: 8px !important;
}
.cdw-slider[data-dots-style="circle"][data-dots-size="large"] .cdw-dot {
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	max-width: 12px !important;
	max-height: 12px !important;
}

/* === DOT STYLE: circle-outline === */
.cdw-slider[data-dots-style="circle-outline"] .cdw-dot {
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--cdw-dot-color, rgba(255,255,255,0.5));
	box-sizing: border-box;
	box-shadow: none;
}
.cdw-slider[data-dots-style="circle-outline"] .cdw-dot.is-active {
	background: var(--cdw-dot-active, #fff);
	border-color: var(--cdw-dot-active, #fff);
}

/* === DOT STYLE: square === */
.cdw-slider[data-dots-style="square"] .cdw-dot { border-radius: 0; }

/* === DOT STYLE: bar === */
.cdw-slider[data-dots-style="bar"] .cdw-dot {
	width: 24px; height: 3px; border-radius: 0;
	border-radius: 2px;
	border-width: 0;
}
.cdw-slider[data-dots-style="bar"][data-dots-size="small"]  .cdw-dot { width: 16px; height: 2px; }
.cdw-slider[data-dots-style="bar"][data-dots-size="large"]  .cdw-dot { width: 32px; height: 4px; }

/* === DOT STYLE: bar-long === */
.cdw-slider[data-dots-style="bar-long"] .cdw-dot {
	width: 40px; height: 4px; border-radius: 2px;
	border-width: 0;
}
.cdw-slider[data-dots-style="bar-long"][data-dots-size="small"] .cdw-dot { width: 28px; height: 3px; }
.cdw-slider[data-dots-style="bar-long"][data-dots-size="large"] .cdw-dot { width: 56px; height: 5px; }

/* === DOT STYLE: numbered === */
.cdw-slider[data-dots-style="numbered"] .cdw-dot {
	width: 28px; height: 28px;
	border-radius: 50%;
}
.cdw-slider[data-dots-style="numbered"][data-dots-size="small"] .cdw-dot { width: 22px; height: 22px; }
.cdw-slider[data-dots-style="numbered"][data-dots-size="large"] .cdw-dot { width: 34px; height: 34px; }
.cdw-slider[data-dots-style="numbered"] .cdw-dot-num {
	display: inline-block;
	color: #fff;
}
.cdw-slider[data-dots-style="numbered"][data-dots-size="small"] .cdw-dot-num { font-size: 10px; }
.cdw-slider[data-dots-style="numbered"][data-dots-size="large"] .cdw-dot-num { font-size: 14px; }

/* Thumbs */
.cdw-thumbs {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
}
.cdw-thumbs li { flex: 0 0 auto; }
.cdw-thumb {
	width: var(--cdw-thumb-w);
	height: var(--cdw-thumb-h);
	border: 2px solid transparent;
	padding: 0;
	background: #f0f0f1;
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
	transition: border-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.7;
}
.cdw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdw-thumb.is-active { border-color: #2271b1; opacity: 1; }
.cdw-thumb:hover { opacity: 1; }

.cdw-thumbs[data-responsive="1"] .cdw-thumb {
	width: clamp(var(--cdw-thumb-min), 18vw, var(--cdw-thumb-w));
	height: auto;
	aspect-ratio: var(--cdw-thumb-w) / var(--cdw-thumb-h);
}

/* ============== TEMAS ============== */

/* Default — definido acima */

/* Minimal */
.cdw-theme-minimal {
	--cdw-caption-bg: rgba(255, 255, 255, 0.92);
	--cdw-caption-fg: #1a1a1a;
}
.cdw-theme-minimal .cdw-arrow { box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.cdw-theme-minimal .cdw-caption {
	left: 16px;
	right: 16px;
	bottom: 16px;
	padding: 14px 18px;
	border-radius: 4px;
}

/* Dark */
.cdw-theme-dark {
	--cdw-caption-bg: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
	--cdw-caption-fg: #fff;
}
.cdw-theme-dark .cdw-slider-viewport { background: #0a0a0a; }
.cdw-theme-dark .cdw-thumb { background: #1a1a1a; opacity: 0.5; }
.cdw-theme-dark .cdw-thumb.is-active { border-color: #fff; opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cdw-transition-slide .cdw-slides,
	.cdw-transition-fade .cdw-slide,
	.cdw-arrow,
	.cdw-dot,
	.cdw-thumb {
		transition: none !important;
	}
}

/* Mobile adjustments */
@media (max-width: 991px) {
	.cdw-slider .cdw-arrow {
		width: 36px;
		height: 36px;
		max-width: 42px;
		max-height: 42px;
	}
	.cdw-arrow-prev { left: 6px; }
	.cdw-arrow-next { right: 6px; }
	.cdw-caption { padding: 18px 14px 14px; }
	.cdw-caption-title { font-size: 16px; }
	.cdw-caption-text { font-size: 12px; }
	.cdw-slider[data-aspect="auto"]:not([data-fit="natural"]) .cdw-slider-viewport {
		aspect-ratio: var(--cdw-ratio-mobile, 16 / 9);
	}
}

/* ============================================================
   Preset visual para estilo "Bolinha sólida"
   (sem bloquear os demais estilos/opções do painel)
   ============================================================ */
.cdw-slider[data-dots-style="circle"] .cdw-dot {
	background: #8b8b8b;
	box-shadow: none;
}
.cdw-slider[data-dots-style="circle"] .cdw-dot.is-active {
	background: #111111;
}