/* bitee Testimonials Slider
 * Nota: as variáveis (--bts-*) são definidas pelo Elementor no contentor do widget.
 * Aqui só são usadas com valor de recurso (var(--x, defeito)) para não se sobreporem.
 */
.bts {
	position: relative;
}

.bts__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.bts__slide {
	display: flex;
	flex-direction: column;
	align-items: var(--bts-justify, center);
	text-align: var(--bts-align, center);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.bts__text {
	display: flex;
	flex-direction: column;
	align-items: var(--bts-justify, center);
	width: 100%;
}

/* Fade: todos os slides na mesma célula; a altura é a do slide mais alto */
.bts--fade .bts__track {
	display: grid;
}
.bts--fade .bts__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bts-duration, 600ms) ease, visibility 0s linear var(--bts-duration, 600ms);
}
.bts--fade .bts__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--bts-duration, 600ms) ease;
}

/* Deslizar */
.bts--slide .bts__track {
	display: flex;
	transition: transform var(--bts-duration, 600ms) ease;
	will-change: transform;
}
.bts--slide .bts__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Conteúdo */
.bts .bts__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-style: italic;
}
.bts .bts__quote::before,
.bts .bts__quote::after {
	content: none;
}
.bts .bts__quote p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.bts__author {
	margin-top: 60px;
}
.bts__media {
	margin: var(--bts-image-gap, 80px) 0 0;
	line-height: 0;
	width: 100%;
	display: flex;
	justify-content: var(--bts-justify, center);
}
/* Só a largura é definida; a altura é sempre automática para a imagem nunca deformar.
   (!important também anula alturas antigas guardadas em versões anteriores do widget) */
.bts .bts__media img {
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto !important;
	max-height: none !important;
	object-fit: initial !important;
}
.bts--image-above .bts__media {
	order: -1;
	margin: 0 0 var(--bts-image-gap, 80px);
}

/* ---------- Imagem centrada na vertical ----------
 * Grelha de 3 linhas: [texto] [imagem] [espaço igual].
 * As duas linhas das pontas têm a mesma altura, por isso a imagem fica no centro.
 */
.bts--center .bts__slide {
	display: grid;
	grid-template-columns: 100%;
	/* --bts-text-h é medido por JS (texto mais alto dos slides): a linha de baixo tem sempre
	   a mesma altura que a do texto, por isso a imagem fica no centro. */
	grid-template-rows: minmax(var(--bts-text-h, 0px), 1fr) auto minmax(var(--bts-text-h, 0px), 1fr);
	justify-items: var(--bts-justify, center);
	min-height: var(--bts-height, 100vh);
	padding-top: var(--bts-safe, 0px);
	padding-bottom: var(--bts-safe, 0px);
}
.bts--center .bts__media {
	grid-row: 2;
	justify-self: stretch;
	margin: 0;
	order: 0;
}
/* Imagem abaixo do texto: texto na linha de cima */
.bts--center.bts--image-below .bts__text {
	grid-row: 1;
	padding-bottom: var(--bts-image-gap, 80px);
}
.bts--center.bts--image-below.bts--text-edge .bts__text { align-self: start; }
.bts--center.bts--image-below.bts--text-near .bts__text { align-self: end; }
/* Imagem acima do texto: texto na linha de baixo */
.bts--center.bts--image-above .bts__text {
	grid-row: 3;
	padding-top: var(--bts-image-gap, 80px);
}
.bts--center.bts--image-above.bts--text-edge .bts__text { align-self: end; }
.bts--center.bts--image-above.bts--text-near .bts__text { align-self: start; }

/* Setas (reset forte para não herdar estilos de botão do tema) */
.bts .bts__arrow {
	position: absolute;
	top: var(--bts-arrow-top, 50%);
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #2b1d14;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}
.bts .bts__arrow:focus {
	background: transparent;
	box-shadow: none;
	outline: none;
}
.bts .bts__arrow:hover {
	background: transparent;
	box-shadow: none;
	color: #dc931a;
}
.bts .bts__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.bts .bts__arrow[disabled] {
	opacity: .3;
	cursor: default;
}
.bts .bts__arrow svg,
.bts .bts__arrow i {
	width: 1em;
	height: 1em;
	font-size: 1em;
	display: block;
}
.bts .bts__arrow svg { fill: none; }
.bts .bts__arrow svg[class*="e-font-icon-svg"] { fill: currentColor; }
.bts__arrow--prev { left: var(--bts-arrow-offset, 40px); }
.bts__arrow--next { right: var(--bts-arrow-offset, 40px); }

/* Pontos */
.bts__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}
.bts--center .bts__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	margin-top: 0;
	z-index: 2;
}
.bts .bts__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: #d8cdbe;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.bts .bts__dot.is-active {
	background-color: #2b1d14;
	transform: scale(1.2);
}
.bts .bts__dot:focus-visible {
	outline: 2px solid #2b1d14;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.bts--hide-arrows-mobile .bts__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bts { --bts-duration: 0ms; }
}