/* ── Defaults (CSS vars) ─────────────────────────────────────────────────── */
.mdcode-content-tabs {
	--mdct-active-bg:    #fff5f6;
	--mdct-default-bg:   #ffffff;
	--mdct-title-color:  #e91e31;
	--mdct-icon-color:   #71A9FF;
	--mdct-icon-size:    60px;
	--mdct-image-height: 584px;
}

/* ── Container ───────────────────────────────────────────────────────────── */
.mdcode-content-tabs {
	display: flex;
	flex-direction: row;
	position: relative;
	overflow: hidden;
	text-align: left;
}

/* ── Tab nav (coluna esquerda) ────────────────────────────────────────────── */
.mdcode-content-tabs .uc_tab_nav {
	width: 50%;
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	flex-shrink: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mdcode-content-tabs .uc_tab_nav > li {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ── Botão da aba ─────────────────────────────────────────────────────────── */
.mdcode-content-tabs .ue-tab-btn {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	/* padding-left = 20px original + 10px reservado para o pseudo-elemento */
	padding: 10px 20px 10px 30px;
	margin-top: 24px;
	text-decoration: none;
	background-color: var(--mdct-default-bg);
	color: #000000;
	transition: background-color 0.3s ease;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

/* Borda esquerda animada via pseudo-elemento (scaleY top→bottom) */
.mdcode-content-tabs .ue-tab-btn::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	background-color: var(--e-global-color-secondary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.mdcode-content-tabs .r-tabs-state-active .ue-tab-btn,
.mdcode-content-tabs .ue-tab-btn:hover {
	background-color: var(--mdct-active-bg);
}

.mdcode-content-tabs .r-tabs-state-default .ue-tab-btn:hover::before {
	transform: scaleX(1);
}

/* ── Ícone ───────────────────────────────────────────────────────────────── */
.mdcode-content-tabs .ue-graphic-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	overflow: visible;
	margin-right: 0.5em;
	align-self: center;
	border-radius: 100px;
	flex-shrink: 0;
}

.mdcode-content-tabs .ue-ge-icon {
	font-size: var(--mdct-icon-size);
	color: var(--mdct-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mdcode-content-tabs .ue-ge-icon svg,
.mdcode-content-tabs .ue-ge-icon img,
.mdcode-content-tabs .ue-ge-icon i {
	height: 1em;
	width: 1em;
}

/* Força fill dos SVGs a herdar a cor do ícone escolhida no admin.
   SVGs inline costumam ter fill hardcoded nos elementos internos;
   currentColor resolve para o color: var(--mdct-icon-color) do pai. */
.mdcode-content-tabs .ue-ge-icon svg,
.mdcode-content-tabs .ue-ge-icon svg * {
	fill: currentColor;
}

/* ── Texto da aba ─────────────────────────────────────────────────────────── */
.mdcode-content-tabs .tab-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mdcode-content-tabs .tab-title {
	color: var(--mdct-title-color);
	font-size: 1.25em;
	font-weight: 600;
	line-height: normal;
	text-align: start;
}

.mdcode-content-tabs .tab-description {
	color: #000000;
	font-size: 1.125em;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
	line-height: normal;
	text-align: start;
}

/* ── Painéis de imagem (coluna direita) ───────────────────────────────────── */
.mdcode-content-tabs .panel-container {
	flex: 1;
	background-color: #ffffff;
}

.mdcode-content-tabs .tab-container.panes {
	display: none;
	overflow: hidden;
	clear: both;
}

.mdcode-content-tabs .tab-container.panes.r-tabs-state-active {
	display: flex;
	height: 100%;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.mdcode-content-tabs .ue-item-image {
	width: 100%;
}

.mdcode-content-tabs .ue-item-image img {
	width: 100%;
	display: block;
	height: var(--mdct-image-height);
	object-fit: contain;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.mdcode-content-tabs {
		flex-direction: column;
	}

	.mdcode-content-tabs .uc_tab_nav {
		width: 100%;
	}

	.mdcode-content-tabs .panel-container {
		width: 100%;
	}

	.mdcode-content-tabs .ue-item-image img {
		max-width: 60%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
	}

	.mdcode-content-tabs .tab-container {
		align-content: center !important;
	}
}