/**
 * Folha de estilos pública para renderização dos componentes EHVE.
 */

/* 1. Reset & Utilitários Básicos dos Componentes */
.ehve-component {
	box-sizing: border-box;
	font-family: inherit;
}

/* 2. Botão Customizado */
.ehve-btn {
	display: inline-block;
	padding: 12px 24px;
	background-color: #3b82f6;
	color: #ffffff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	text-align: center;
}
.ehve-btn:hover {
	background-color: #2563eb;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 3. Cards */
.ehve-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}
.ehve-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.ehve-card-body {
	padding: 20px;
}
.ehve-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

/* 4. FAQ / Accordion */
.ehve-accordion {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}
.ehve-accordion-item {
	border-bottom: 1px solid #e5e7eb;
}
.ehve-accordion-item:last-child {
	border-bottom: none;
}
.ehve-accordion-header {
	background-color: #f9fafb;
	padding: 16px 20px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	user-select: none;
	transition: background-color 0.2s ease;
}
.ehve-accordion-header:hover {
	background-color: #f3f4f6;
}
.ehve-accordion-icon {
	transition: transform 0.3s ease;
}
.ehve-accordion-item.active .ehve-accordion-icon {
	transform: rotate(180deg);
}
.ehve-accordion-content {
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
	background-color: #ffffff;
	color: #4b5563;
}
.ehve-accordion-item.active .ehve-accordion-content {
	max-height: 1000px;
	padding: 16px 20px;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

/* 5. Tabs */
.ehve-tabs-nav {
	display: flex;
	border-bottom: 2px solid #e5e7eb;
	margin-bottom: 15px;
	gap: 10px;
}
.ehve-tab-trigger {
	padding: 10px 20px;
	cursor: pointer;
	font-weight: 600;
	color: #6b7280;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.3s ease;
}
.ehve-tab-trigger:hover {
	color: #3b82f6;
}
.ehve-tab-trigger.active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
}
.ehve-tab-panel {
	display: none;
	animation: ehve-fade-in 0.4s ease forwards;
}
.ehve-tab-panel.active {
	display: block;
}

/* 6. Barras de Progresso */
.ehve-progress-wrapper {
	margin-bottom: 15px;
}
.ehve-progress-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-weight: 600;
}
.ehve-progress-bar {
	background-color: #e5e7eb;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
}
.ehve-progress-fill {
	background-color: #3b82f6;
	height: 100%;
	width: 0;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 7. Contadores */
.ehve-counter {
	text-align: center;
	padding: 20px;
}
.ehve-counter-number {
	font-size: 3rem;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 5px;
}
.ehve-counter-label {
	color: #6b7280;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* 8. Biblioteca de Animações Integrada */
@keyframes ehve-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes ehve-zoom-in {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@keyframes ehve-slide-up {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes ehve-slide-down {
	from { transform: translateY(-30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes ehve-slide-left {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes ehve-slide-right {
	from { transform: translateX(-30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes ehve-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-15px); }
	60% { transform: translateY(-7px); }
}
@keyframes ehve-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Classes utilitárias de animação */
.ehve-animate {
	opacity: 0;
	animation-fill-mode: forwards;
}

.ehve-animate.animated {
	opacity: 1;
}

.ehve-animate-fade { animation-name: ehve-fade-in; }
.ehve-animate-zoom { animation-name: ehve-zoom-in; }
.ehve-animate-slide-up { animation-name: ehve-slide-up; }
.ehve-animate-slide-down { animation-name: ehve-slide-down; }
.ehve-animate-slide-left { animation-name: ehve-slide-left; }
.ehve-animate-slide-right { animation-name: ehve-slide-right; }
.ehve-animate-bounce { animation-name: ehve-bounce; opacity: 1; }
.ehve-animate-rotate { animation-name: ehve-rotate; opacity: 1; }