/**
 * Estilos do Ecossistema de Calculadoras Goiás Frio
 * Arquitetura Responsiva baseada em CSS Grid e Flexbox.
 *
 * Refatorado em módulos: Variáveis → Layout → Componentes → Formulários → Overrides de tema → Responsivo
 * Compatível com Astra, Spectra e LiteSpeed Cache
 * Sem duplicações, sem chaves soltas.
 */

/* =============================================================
   1. VARIÁVEIS GLOBAIS
   ============================================================= */
:root {
	--gf-dark-blue: #0F172A;
	--gf-light-blue: #42a2d2;
	--gf-light-blue-hover: #3588b3;
	--gf-green: #A9CF46;
	--gf-green-hover: #98be3d;
	--gf-white: #ffffff;
	--gf-bg-light: #f8fafc;
	--gf-text-dark: #334155;
	--gf-placeholder: #94A3B8;
	--gf-border-radius: 12px;
	--gf-transition: all 0.3s ease;
}

/* =============================================================
   2. LAYOUT BASE
   ============================================================= */
.gf-calc-wrapper {
	background-color: transparent;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: inherit; /* Herda a tipografia do Tema Astra */
	width: 100%;
}

.gf-calc-header {
	text-align: center;
	margin-bottom: 30px;
	max-width: 800px;
	color: var(--gf-text-dark);
}

.gf-calc-header h2 {
	color: var(--gf-dark-blue);
	font-size: 28px;
	margin-bottom: 10px;
	font-weight: 700;
}

/* Subtítulo do cabeçalho: cor escura sobre fundo claro da página
   (precisa do prefixo .gf-calc-wrapper para ter especificidade maior
   que a regra global ".gf-calc-wrapper p" logo abaixo) */
.gf-calc-wrapper .gf-calc-header p {
	color: var(--gf-text-dark) !important;
}

.gf-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin-bottom: 30px;
}

.gf-action-area {
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Proteção dos textos globais dentro do wrapper (compatibilidade com Astra/Spectra) */
.gf-calc-wrapper p,
.gf-calc-wrapper label,
.gf-calc-wrapper span:not(#gfValorBtu),
.gf-calc-wrapper .counter-label {
	color: #FFFFFF !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* =============================================================
   3. COMPONENTES — CARDS
   ============================================================= */
.gf-calc-card {
	background-color: var(--gf-dark-blue);
	color: var(--gf-white);
	border-radius: var(--gf-border-radius);
	padding: 24px;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gf-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 15px;
}

.gf-card-header h3 {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--gf-white);
}

.gf-card-header svg {
	fill: var(--gf-light-blue);
	width: 28px;
	height: 28px;
}

.gf-card-desc {
	font-size: 14px;
	color: #cbd5e1;
	margin-bottom: 5px;
}

/* =============================================================
   4. COMPONENTES — TOGGLE (Área Total / Comp. × Largura)
   ============================================================= */
.gf-toggle-container {
	display: flex;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
}

.gf-toggle-btn {
	flex: 1;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF !important;
	background: transparent !important;
	border: none;
	transition: var(--gf-transition);
}

/* Hover suave */
.gf-toggle-btn:hover {
	background: rgba(66, 162, 210, 0.35) !important;
}

/* Estado ativo bem destacado: fundo azul, texto branco */
.gf-toggle-btn.active {
	background: var(--gf-light-blue) !important;
	color: #FFFFFF !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.gf-dimension-inputs {
	display: none;
	gap: 10px;
	align-items: center;
}

.gf-dimension-inputs.active {
	display: flex;
}

.gf-unit {
	font-weight: bold;
	color: var(--gf-white);
}

/* =============================================================
   5. COMPONENTES — SELETOR SOLAR
   ============================================================= */
.gf-solar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gf-solar-option {
	background-color: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 15px 10px;
	text-align: center;
	cursor: pointer;
	transition: var(--gf-transition);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.gf-solar-option svg {
	width: 32px;
	height: 32px;
	color: var(--gf-white);
	transition: var(--gf-transition);
}

.gf-solar-option span {
	font-size: 14px;
	font-weight: 500;
	color: var(--gf-white);
}

.gf-solar-option:hover {
	border-color: var(--gf-light-blue);
	background-color: rgba(66, 162, 210, 0.1);
}

.gf-solar-option.selected {
	border-color: var(--gf-light-blue);
	background-color: var(--gf-light-blue);
}

/* =============================================================
   6. COMPONENTES — CONTADORES (+ / -)
   ============================================================= */
.gf-counter-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.gf-counter-group label {
	flex: 1;
	font-size: 14px;
	line-height: 1.2;
}

/* Container do contador: transparente e mais largo */
.gf-counter-control {
	display: flex;
	align-items: center;
	background: transparent !important;
	border-radius: 8px;
	overflow: hidden;
	width: 160px !important;
}

.gf-counter-btn {
	background: var(--gf-light-blue);
	color: var(--gf-white);
	border: none;
	width: 40px;
	height: 40px;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--gf-transition);
	border-radius: 8px !important; /* Bloqueia o arredondamento padrão do tema Astra */
}

.gf-counter-btn:hover {
	background: var(--gf-light-blue-hover);
}

.gf-input-counter {
	flex: 1 !important;
	width: 100% !important;
	height: 40px !important;
	line-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none;
	border-radius: 0;
	font-weight: bold;
	font-size: 18px !important;
	color: var(--gf-text-dark);
	background: var(--gf-white);
	box-sizing: border-box !important;
}

.gf-input-counter:focus {
	outline: none;
}

/* =============================================================
   7. FORMULÁRIOS — INPUTS, SELECTS E PLACEHOLDERS
   ============================================================= */
.gf-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gf-form-group label {
	font-size: 15px;
	font-weight: 500;
	color: var(--gf-white);
}

.gf-input {
	width: 100%;
	padding: 12px 15px;
	border-radius: 8px;
	border: 1px solid transparent;
	background-color: var(--gf-white);
	color: var(--gf-text-dark);
	font-size: 16px;
	outline: none;
	transition: var(--gf-transition);
	box-sizing: border-box;
}

.gf-input:focus {
	border-color: var(--gf-light-blue);
	box-shadow: 0 0 0 3px rgba(66, 162, 210, 0.3);
}

/* Inputs numéricos e de texto — cor e fundo protegidos mesmo em foco/clique/ativo */
.gf-calc-wrapper input[type="number"],
.gf-calc-wrapper input[type="text"],
.gf-calc-wrapper input[type="number"]:focus,
.gf-calc-wrapper input[type="text"]:focus,
.gf-calc-wrapper input[type="number"]:active,
.gf-calc-wrapper input[type="text"]:active,
.gf-calc-wrapper input[type="number"]:focus-visible,
.gf-calc-wrapper input[type="text"]:focus-visible {
	color: #000000 !important;
	background-color: #FFFFFF !important;
	-webkit-text-fill-color: #000000 !important;
	font-weight: bold !important;
	font-size: 16px !important;
	text-align: center !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Remove as setas dos inputs numéricos e centraliza o texto */
.gf-calc-wrapper input[type="number"]::-webkit-inner-spin-button,
.gf-calc-wrapper input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.gf-calc-wrapper input[type="number"] {
	-moz-appearance: textfield !important;
}

/* Selects — dimensões e cores protegidas contra o tema */
.gf-calc-wrapper select {
	height: 48px !important;
	min-height: 48px !important;
	padding: 8px 12px !important;
	font-size: 15px !important;
	color: #111827 !important;
	background-color: #FFFFFF !important;
}

/* --- Placeholder elegante: some no foco, retorna quando vazio --- */
.gf-calc-wrapper input::placeholder,
.gf-calc-wrapper textarea::placeholder {
	color: var(--gf-placeholder);
	opacity: 1;
	transition: opacity .25s ease, color .25s ease;
}

.gf-calc-wrapper input::-webkit-input-placeholder,
.gf-calc-wrapper textarea::-webkit-input-placeholder {
	color: var(--gf-placeholder);
	opacity: 1;
	transition: opacity .25s ease, color .25s ease;
}

.gf-calc-wrapper input::-moz-placeholder,
.gf-calc-wrapper textarea::-moz-placeholder {
	color: var(--gf-placeholder);
	opacity: 1;
}

.gf-calc-wrapper input:focus::placeholder,
.gf-calc-wrapper textarea:focus::placeholder {
	opacity: 0;
}

.gf-calc-wrapper input:focus::-webkit-input-placeholder,
.gf-calc-wrapper textarea:focus::-webkit-input-placeholder {
	opacity: 0;
}

.gf-calc-wrapper input:focus::-moz-placeholder,
.gf-calc-wrapper textarea:focus::-moz-placeholder {
	opacity: 0;
}

/* =============================================================
   8. COMPONENTES — BOTÃO DE CALCULAR
   ============================================================= */
.gf-btn-calc {
	background-color: var(--gf-green);
	color: var(--gf-white);
	font-size: 18px;
	font-weight: bold;
	padding: 16px 48px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(169, 207, 70, 0.4);
	transition: var(--gf-transition);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gf-btn-calc:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(169, 207, 70, 0.6);
	background-color: var(--gf-green-hover);
}

/* =============================================================
   9. COMPONENTES — RESULTADO
   ============================================================= */
.gf-result-container {
	display: none;
	background: var(--gf-white);
	border: none !important;
	border-radius: var(--gf-border-radius);
	padding: 30px;
	text-align: center;
	width: 100%;
	max-width: 600px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	animation: gfFadeIn 0.5s ease;
}

.gf-result-container.active {
	display: block;
}

.gf-result-title {
	color: #0F172A !important;
	font-size: 20px;
	margin-bottom: 15px;
	margin-top: 0;
	font-weight: 700;
}

.gf-result-value {
	font-size: 48px;
	font-weight: 800;
	color: var(--gf-green);
	margin-bottom: 10px;
	line-height: 1;
}

.gf-result-desc {
	font-size: 14px;
	margin: 0;
}

/* Qualquer parágrafo dentro do container de resultado (fundo branco)
   precisa de especificidade maior que ".gf-calc-wrapper p" (branco),
   senão o texto fica invisível — cobre também o aviso final do card */
.gf-calc-wrapper .gf-result-container p,
.gf-calc-wrapper .gf-result-desc {
	color: #334155 !important;
}

.gf-calc-wrapper .gf-result-container h4 {
	color: #0F172A !important;
}

/* Resultado destacado da Calculadora de Carga Térmica (BTU) */
#gfValorBtu {
	color: var(--gf-green) !important;
	visibility: visible !important;
}

@keyframes gfFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   10. RESPONSIVO
   ============================================================= */
@media (max-width: 768px) {
	.gf-calc-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   11. COMPONENTES — CALCULADORA DE CONSUMO ENERGÉTICO
   ============================================================= */

/* Slider de Fator de Uso */
.gf-slider {
	width: 100%;
	height: 6px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.15);
	outline: none;
	accent-color: var(--gf-green);
	cursor: pointer;
}

/* Ações (Limpar + Calcular lado a lado) */
.gf-consumo-actions {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 600px;
}

.gf-consumo-actions .gf-btn-calc {
	flex: 2;
}

.gf-btn-reset {
	flex: 1;
	background-color: #e5e7eb;
	color: var(--gf-dark-blue);
	font-size: 16px;
	font-weight: 600;
	padding: 16px 24px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: var(--gf-transition);
}

.gf-btn-reset:hover {
	background-color: #d1d5db;
}

/* Grid de resultados (Consumo Mensal / Custo Mensal / Custo Anual) */
.gf-consumo-res-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.gf-consumo-res-card {
	background: var(--gf-bg-light);
	padding: 15px;
	border-radius: var(--gf-border-radius);
	text-align: center;
	border-bottom: 4px solid var(--gf-green);
}

.gf-calc-wrapper .gf-consumo-res-card span {
	display: block;
	font-size: 12px;
	color: #6b7280 !important;
	text-transform: uppercase;
}

.gf-consumo-res-card strong {
	font-size: 22px;
	color: var(--gf-dark-blue);
}

/* Indicador de impacto na conta (Baixo / Médio / Alto) */
.gf-consumo-indicator {
	margin-top: 20px;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	font-weight: 700;
}

/* Dica de economia (foco em conversão para Inverter) */
.gf-calc-wrapper .gf-consumo-tip {
	margin-top: 15px;
	font-size: 14px;
	text-align: center;
	color: var(--gf-dark-blue) !important;
	font-weight: 600;
}

@media (max-width: 600px) {
	.gf-consumo-actions {
		flex-direction: column;
	}
}