/**
 * MD WPBakery Elements — Testimonial Carousel Styles
 *
 * Crossfade carousel: CSS grid stacking keeps the container sized to the
 * tallest slide — no JS height measurements needed.
 *
 * @package MD_WPBakery_Elements
 */

/* ── Container ───────────────────────────────────────────────────────────── */
.md-tc-container {
	width: 100%;
}

/* ── Carousel row (arrows + viewport) ────────────────────────────────────── */
.md-tc-carousel {
	display:     flex;
	align-items: center;
	gap:         8px;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */
.md-tc-arrow {
	background:  none;
	border:      none;
	cursor:      pointer;
	padding:     6px;
	color:       var(--md-tc-arrow-color, #bbb);
	font-size:   14px;
	flex-shrink: 0;
	line-height: 1;
	transition:  color .15s;
}

.md-tc-arrow:hover {
	color: var(--md-tc-accent, #E40739);
}

/* ── Viewport — grid stacking ────────────────────────────────────────────── */
.md-tc-viewport {
	display:   grid;
	flex:      1;
	min-width: 0;
}

/* ── Slides ──────────────────────────────────────────────────────────────── */
.md-tc-slide {
	grid-area:      1 / 1;
	display:        flex;
	gap:            16px;
	align-items:    flex-start;
	opacity:        0;
	visibility:     hidden;
	pointer-events: none;
	transition:     opacity .4s ease, visibility 0s linear .4s;
}

.md-tc-slide--active {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
	transition:     opacity .4s ease, visibility 0s linear 0s;
}

@media only screen and (max-width: 768px){
	.md-tc-slide {
		flex-direction: column;
}
}

/* ── Meta column (logo + stars) ──────────────────────────────────────────── */
.md-tc-meta {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            6px;
	flex-shrink:    0;
}

.md-tc-logo {
	width:      var(--md-tc-logo-size, 40px);
	height:     var(--md-tc-logo-size, 40px);
	object-fit: contain;
	display:    block;
	border: 0.5px solid #ccc;
}

/* ── Stars ───────────────────────────────────────────────────────────────── */
.md-tc-stars {
	display: flex;
	gap:     2px;
}

.md-tc-star {
	width:  16px;
	height: 16px;
}

.md-tc-star--full  { fill: var(--md-tc-star-color,  var(--md-tc-accent, #E40739)); }
.md-tc-star--empty { fill: #e0e0e0; }

/* ── Content column ──────────────────────────────────────────────────────── */
.md-tc-content {
	flex:      1;
	min-width: 0;
}

.md-tc-text {
	font-size:   var(--md-tc-text-size, 14px);
	color:       var(--md-tc-text-color, #444);
	line-height: 1.6;
	margin:      0 0 10px;
	font-style: italic;
}

.md-tc-author {
	font-size:   var(--md-tc-author-size, 14px);
	font-weight: 700;
	color:       var(--md-tc-author-color, #111);
	margin:      0;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */
.md-tc-dots {
	display:         flex;
	justify-content: center;
	gap:             6px;
	margin-top:      14px;
}

.md-tc-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	border:        none;
	background:    #ddd;
	cursor:        pointer;
	padding:       0;
	transition:    background .2s ease, transform .2s ease;
	flex-shrink:   0;
}

.md-tc-dot--active {
	background: var(--md-tc-dot-color, var(--md-tc-accent, #E40739));
	transform:  scale(1.25);
}