/* ============================================================
   MULTIVEGETAL — Tabs Skin (V1.1)
   Skin do widget "Abas" (Nested Tabs) do Elementor.

   Desktop (≥ 1025px) : pílulas arredondadas (mesma linguagem do
                        mv-product-tags), ativa preenchida em verde.
   Até 1024px         : sanfona colapsável, linhas arredondadas
                        com chevron em badge circular.

   A conversão em sanfona usa o mecanismo nativo do widget:
   heading e content viram `display: contents`, e o `order` que o
   Elementor já imprime em cada título/painel (--n-tabs-title-order)
   intercala título → conteúdo → título → conteúdo.

   ------------------------------------------------------------
   SOBRE OS !important
   O Elementor gera CSS por widget (.elementor-element-XXXX) com
   especificidade alta, que vencia este skin quando a aba "Estilo"
   tinha valores salvos. As propriedades que o painel controla são
   forçadas aqui — mas sempre lendo de uma variável, então dá para
   customizar por widget sem editar o plugin: basta redefinir a
   variável no "CSS personalizado" do widget. Ex.:

       selector .e-n-tab-title { --mv-ts-title-bg-active: #80967C; }
   ------------------------------------------------------------ */

.e-n-tabs {
	/* --- Tokens do Design System (com fallback embutido) --- */
	--mv-c-primary:      var(--color-primary, #4A5E56);
	--mv-c-primary-dark: var(--color-primary-dark, #374842);
	--mv-c-secondary:    var(--color-secondary, #80967C);
	--mv-c-accent:       var(--color-accent, #D5B68D);
	--mv-c-text:         var(--color-text, #1A1A1A);
	--mv-c-muted:        var(--color-text-muted, #5a5a5a);
	--mv-c-light:        var(--color-text-light, #8a8a8a);
	--mv-c-border:       var(--color-border, #e0ddd8);
	--mv-c-bg-soft:      var(--color-bg-soft, #f8f6f2);
	--mv-c-bg-muted:     var(--color-bg-muted, #f0ede7);
	--mv-font:           var(--font-primary, 'Poppins', sans-serif);
	--mv-trans:          var(--transition-base, 250ms ease);
	--mv-spring:         var(--transition-spring, 300ms cubic-bezier(0.34, 1.56, 0.64, 1));

	/* --- Aparência do título (sobrescrevíveis por widget) --- */
	--mv-ts-title-bg:            #ffffff;
	--mv-ts-title-bg-hover:      var(--mv-c-bg-soft);
	--mv-ts-title-bg-active:     var(--mv-c-primary);

	--mv-ts-title-color:         var(--mv-c-muted);
	--mv-ts-title-color-hover:   var(--mv-c-primary);
	--mv-ts-title-color-active:  #ffffff;

	--mv-ts-title-border:        var(--mv-c-border);
	--mv-ts-title-border-hover:  var(--mv-c-primary);
	--mv-ts-title-border-active: var(--mv-c-primary);

	/* --- Geometria --- */
	--mv-ts-radius-pill: 9999px;
	--mv-ts-radius-row:  16px;
	--mv-ts-gap:         8px;
	--mv-ts-panel-pad:   2px 18px 20px;

	font-family: var(--mv-font);
}

/* ============================================================
   1. DESKTOP — pílulas (≥ 1025px)
   ============================================================ */

@media (min-width: 1025px) {

	.e-n-tabs.e-n-tabs > .e-n-tabs-heading {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--mv-ts-gap);
		border: 0;
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		margin: 0;
		padding: 13px 26px !important;
		background: var(--mv-ts-title-bg) !important;
		border: 1.5px solid var(--mv-ts-title-border) !important;
		border-radius: var(--mv-ts-radius-pill) !important;
		box-shadow: none !important;
		line-height: 1;
		cursor: pointer;
		transition: background-color var(--mv-trans), border-color var(--mv-trans),
		            box-shadow var(--mv-trans), transform var(--mv-trans);
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title .e-n-tab-title-text {
		font-family: var(--mv-font) !important;
		font-size: 0.72rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.1em !important;
		text-transform: uppercase !important;
		line-height: 1 !important;
		white-space: nowrap;
		color: var(--mv-ts-title-color) !important;
		transition: color var(--mv-trans);
	}

	/* ---------- HOVER (inativa) ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title:hover {
		background: var(--mv-ts-title-bg-hover) !important;
		border-color: var(--mv-ts-title-border-hover) !important;
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(74, 94, 86, .12) !important;
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title:hover .e-n-tab-title-text {
		color: var(--mv-ts-title-color-hover) !important;
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title:active {
		transform: translateY(0);
		box-shadow: none !important;
	}

	/* ---------- ATIVA ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"] {
		background: var(--mv-ts-title-bg-active) !important;
		border-color: var(--mv-ts-title-border-active) !important;
		/* Anel dourado interno: assina a aba ativa sem pesar. */
		box-shadow: inset 0 0 0 1px rgba(213, 182, 141, .40),
		            0 6px 18px rgba(74, 94, 86, .22) !important;
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
		color: var(--mv-ts-title-color-active) !important;
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"]:hover {
		background: var(--mv-c-primary-dark) !important;
		border-color: var(--mv-c-primary-dark) !important;
		transform: translateY(-2px);
	}

	/* ---------- FOCO ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title:focus-visible {
		outline: 2px solid var(--mv-c-accent) !important;
		outline-offset: 3px;
	}

	/* Sem chevron no modo pílula. */
	.e-n-tabs.e-n-tabs .e-n-tab-title::after,
	.e-n-tabs.e-n-tabs .e-n-tab-title::before {
		display: none;
	}

	.e-n-tabs.e-n-tabs > .e-n-tabs-content {
		padding-top: clamp(22px, 2.4vw, 32px);
	}
}

/* ============================================================
   2. SANFONA — até 1024px
   ============================================================ */

@media (max-width: 1024px) {

	/* Título e painel passam a ser irmãos diretos de .e-n-tabs;
	   o `order` nativo do widget faz o intercalamento. */
	.e-n-tabs.e-n-tabs {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.e-n-tabs.e-n-tabs > .e-n-tabs-heading,
	.e-n-tabs.e-n-tabs > .e-n-tabs-content {
		display: contents;
	}

	/* ---------- LINHA (título) ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		margin: 10px 0 0 !important;
		padding: 13px 14px 13px 20px !important;
		text-align: left;
		background: var(--mv-ts-title-bg) !important;
		border: 1px solid var(--mv-ts-title-border) !important;
		border-radius: var(--mv-ts-radius-row) !important;
		box-shadow: 0 1px 3px rgba(74, 94, 86, .08), 0 1px 2px rgba(74, 94, 86, .05) !important;
		cursor: pointer;
		transition: background-color var(--mv-trans), border-color var(--mv-trans),
		            box-shadow var(--mv-trans), border-radius var(--mv-trans);
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title:first-child {
		margin-top: 0 !important;
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title .e-n-tab-title-text {
		font-family: var(--mv-font) !important;
		font-size: 0.95rem !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		letter-spacing: -0.01em !important;
		text-transform: none !important;
		color: var(--mv-c-primary-dark) !important;
		transition: color var(--mv-trans);
	}

	/* ---------- CHEVRON EM BADGE CIRCULAR ----------
	   Mesma linguagem das setas do mv-testimonials. */
	.e-n-tabs.e-n-tabs .e-n-tab-title::after {
		content: '';
		display: block;
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 9999px;
		background-color: var(--mv-c-bg-muted);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.6L6 8l3.4-3.4' fill='none' stroke='%234A5E56' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px 12px;
		transition: background-color var(--mv-trans), transform var(--mv-spring);
	}

	/* ---------- HOVER ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title:hover {
		border-color: var(--mv-c-accent) !important;
		box-shadow: 0 8px 22px rgba(74, 94, 86, .12), 0 2px 6px rgba(74, 94, 86, .06) !important;
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title:hover::after {
		background-color: var(--color-accent-subtle, #d5b68d33);
	}

	.e-n-tabs.e-n-tabs .e-n-tab-title:focus-visible {
		outline: 2px solid var(--mv-c-accent) !important;
		outline-offset: 2px;
	}

	/* ---------- LINHA ABERTA ---------- */
	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"] {
		background: var(--mv-c-bg-soft) !important;
		border-color: var(--mv-c-border) !important;
		border-bottom-color: transparent !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		box-shadow: none !important;
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"]::after {
		background-color: var(--mv-c-primary);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.6L6 8l3.4-3.4' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		transform: rotate(180deg);
	}

	/* ---------- PAINEL ABERTO ---------- */
	.e-n-tabs.e-n-tabs .e-n-tabs-content > .e-active {
		margin: 0;
		padding: var(--mv-ts-panel-pad);
		background-color: var(--mv-c-bg-soft);
		border: 1px solid var(--mv-c-border);
		border-top: 0;
		border-bottom-left-radius: var(--mv-ts-radius-row);
		border-bottom-right-radius: var(--mv-ts-radius-row);
		animation: mv-ts-reveal 260ms ease both;
	}

	@keyframes mv-ts-reveal {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: none; }
	}

	/* Filete dourado separando título e conteúdo. */
	.e-n-tabs.e-n-tabs .e-n-tabs-content > .e-active::before {
		content: '';
		display: block;
		width: 34px;
		height: 2px;
		margin-bottom: 14px;
		background: var(--mv-c-accent);
	}

	.e-n-tabs.e-n-tabs .e-n-tabs-content > :not(.e-active) {
		display: none;
	}
}

/* ============================================================
   3. CONTEÚDO — tipografia dentro dos painéis
   O reset global (styles.css) zera os marcadores de lista;
   aqui eles voltam como ponto dourado.
   ============================================================ */

.e-n-tabs .e-n-tabs-content h4,
.e-n-tabs .e-n-tabs-content h5 {
	margin: 22px 0 10px;
	font-family: var(--mv-font);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--mv-c-primary-dark);
}
.e-n-tabs .e-n-tabs-content h4:first-child,
.e-n-tabs .e-n-tabs-content h5:first-child {
	margin-top: 0;
}
.e-n-tabs .e-n-tabs-content h4 b,
.e-n-tabs .e-n-tabs-content h5 b {
	font-weight: 600;
}

.e-n-tabs .e-n-tabs-content p,
.e-n-tabs .e-n-tabs-content li {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--mv-c-muted);
}

.e-n-tabs .e-n-tabs-content p {
	margin: 0 0 12px;
}
.e-n-tabs .e-n-tabs-content p:last-child {
	margin-bottom: 0;
}

.e-n-tabs .e-n-tabs-content strong,
.e-n-tabs .e-n-tabs-content b {
	font-weight: 600;
	color: var(--mv-c-text);
}

/* Listas — marcador dourado no lugar do bullet padrão. */
.e-n-tabs .e-n-tabs-content ul {
	margin: 0 0 14px;
	padding-left: 0;
	list-style: none;
}
.e-n-tabs .e-n-tabs-content ul li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 20px;
}
.e-n-tabs .e-n-tabs-content ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: var(--mv-c-accent);
}
.e-n-tabs .e-n-tabs-content ul li:last-child {
	margin-bottom: 0;
}

/* ============================================================
   4. ACESSIBILIDADE / MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.e-n-tabs.e-n-tabs .e-n-tab-title,
	.e-n-tabs.e-n-tabs .e-n-tab-title::after,
	.e-n-tabs.e-n-tabs .e-n-tab-title .e-n-tab-title-text {
		transition: none;
	}
	.e-n-tabs.e-n-tabs .e-n-tab-title:hover,
	.e-n-tabs.e-n-tabs .e-n-tab-title[aria-selected="true"]:hover {
		transform: none;
	}
	.e-n-tabs.e-n-tabs .e-n-tabs-content > .e-active {
		animation: none;
	}
}