/* ==========================================================================
	PARTE 1: CONFIGURAÇÕES INICIAIS E VARIÁVEIS DO SISTEMA
========================================================================== */
:root {
	/* Palete de cores para o Modo Claro (Padrão) */
	--bg-color: #f3f4f6;
	--card-bg: #ffffff;
	--text-main: #2d3748;
	--text-muted: #718096;
	--accent-color: #229ac8;
	--accent-hover: #1c7fa6;
	--dark-footer: #3a3a3a;
	--border-color: #eeeeee;
	--img-bg: #fcfcfc;
}

/* Configuração geral do corpo do site (sem transition para evitar jank no tema) */
body {
	font-family: "Open Sans", sans-serif !important;
	color: var(--text-main);
	background-color: var(--bg-color);
	margin: 0;
	padding: 24px 20px;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

/* Tema Escuro (Slate/Midnight) */
body.dark-mode {
	--bg-color: #0f172a;
	--card-bg: #1e293b; 
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--dark-footer: #020617;
	--border-color: #334155;
	--img-bg: #334155;
}

/* Classe utilitária para ocultar elementos da interface */
.hidden {
	display: none !important;
}

/* Contentor central estrutural da página (removido border-color e background-color da transição) */
.site-card {
	max-width: 1140px;
	margin: 0 auto;
	background-color: var(--card-bg);
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	padding: 0 40px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-color);
}
/* ==========================================================================
	PARTE 2: CABEÇALHO, BLOCOS DE TEXTO E CONTROLOS (IDIOMA / FONTE / TEMA)
========================================================================== */
.intro-text-block, 
.outro-text-block {
	margin-top: 5px;
	color: var(--text-muted);
	font-size: 16px;
	line-height: 1.6;
	white-space: pre-line !important;
}

.outro-text-block {
	margin-bottom: 10px;
}

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 0;
	border-bottom: 1px solid var(--border-color);
	gap: 15px;
}

.header-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.logo-area {
	flex-shrink: 1;
	min-width: 0;
	cursor: pointer;
	position: relative;
}

.logo-area img {
	display: block;
	max-width: 300px;
	width: 100%;
	height: auto;
}

body.dark-mode .logo-area img {
	opacity: 0.95;
}

/* Etiqueta flutuante do Logótipo (Badge) - usa opacity, que é aprovada pela GPU */
.logo-area .home-hover-badge {
	position: absolute;
	top: 100%;
	margin-top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--accent-color);
	color: #ffffff;
	font-family: "Open Sans", sans-serif !important;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
	z-index: 10;
}

.logo-area .home-hover-badge svg {
	width: 13px;
	height: 13px;
	fill: #ffffff;
}

.logo-area .home-hover-badge::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 4px 4px 4px;
	border-style: solid;
	border-color: transparent transparent var(--accent-color) transparent;
}

.logo-area:hover .home-hover-badge {
	opacity: 1;
	visibility: visible;
}

/* Botão do Modo Escuro (removido border-color da transição) */
.theme-toggle-btn {
	background: none;
	border: 1px solid var(--border-color);
	color: var(--text-main);
	padding: 7px 10px;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.theme-toggle-btn:hover {
	background-color: var(--bg-color);
}

/* --- UNIFICAÇÃO: SELETOR DE IDIOMAS E BOTÕES DE TAMANHO DE TEXTO --- */
.lang-selector,
.font-size-toggle {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 5px;
	flex-shrink: 0;
}

.font-size-toggle {
	margin-bottom: 20px;
}

/* Estilo Base (Modo Claro) - CORRIGIDO: apenas background-color animado */
.lang-selector button,
.font-size-toggle button {
	background-color: #f5f5f5;
	border: 1px solid #b0bcce;
	color: #3f4d61 !important;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
	font-weight: bold;
	border-radius: 4px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Hover no Modo Claro (ignora o botão de idioma ativo) */
.lang-selector button:not(.active):hover,
.font-size-toggle button:hover {
	background-color: #eeeeee;
}

/* Estado Ativo do Idioma - CORRIGIDO: sem transição para evitar disparo no load */
.lang-selector button.active {
	background-color: var(--accent-color);
	border-color: var(--accent-hover);
	color: #ffffff !important;
	transition: none;
}

/* Estilo Base (Modo Escuro) partilhado */
body.dark-mode .lang-selector button:not(.active),
body.dark-mode .font-size-toggle button {
	background-color: #1e293b;
	border-color: #475569;
	color: var(--text-muted) !important;
}

/* Hover no Modo Escuro partilhado */
body.dark-mode .lang-selector button:not(.active):hover,
body.dark-mode .font-size-toggle button:hover {
	background-color: #334155;
	color: var(--text-main) !important;
}
/* ==========================================================================
	PARTE 3: CONTEÚDO DINÂMICO E CARDS DE METAIS
========================================================================== */
#dynamic-content {
	display: flex;
	flex-direction: row;
	gap: 30px;
	width: 100%;
	align-items: stretch;
}

.page-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 30px;
	margin-top: 40px;
	align-items: flex-start;
	width: 100%;
	min-height: 200px;
}

.page-image {
	width: 200px !important;
	height: 200px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--img-bg);
	flex-shrink: 0;
}

.page-text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.page-text h2 {
	margin-top: 0;
	color: var(--text-main);
	font-size: 24px;
}

.page-text p {
	color: var(--text-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* Cartões de Metais (PT) */
.page-row.metal-card {
	flex: 1;
	display: flex !important;
	flex-direction: row !important;
	gap: 20px;
	background-color: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	margin-top: 20px !important;
	margin-bottom: 30px !important;
}

.page-row.metal-card .page-text {
	text-align: left !important;
	align-items: flex-start !important;
}

.page-row.metal-card .page-image {
	width: 200px !important;
	height: 200px !important;
	flex-shrink: 0 !important;
}

body.dark-mode .page-row.metal-card {
	background-color: #334155 !important;
	border-color: #343a40 !important;
}

/* Card inferior do Formulário */
.footer-metal-card {
	background-color: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	margin-top: 30px !important;
	margin-bottom: 40px !important;
	width: 100%;
}

body.dark-mode .footer-metal-card {
	background-color: #334155 !important;
	border-color: #343a40 !important;
}

.spacer-line {
	border: 0;
	border-top: 1px solid var(--border-color);
	margin-bottom: 40px;
}

/* ==========================================================================
	PARTE 4: LISTA HORIZONTAL DE CONTACTOS, RESPONSIVIDADE E RODAPÉ
========================================================================== */
.contact-horizontal-list {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 20px !important;
	margin-bottom: 40px !important;
	width: 100% !important;
}

.contact-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 12px !important;
	text-decoration: none !important;
	min-width: 0 !important;
}

.icon-wrapper {
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

.icon-wrapper svg {
	width: 26px !important;
	height: 26px !important;
	fill: var(--accent-color) !important;
	display: block !important;
}

.contact-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-width: 0 !important;
}

.contact-info h3 {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-main);
	margin: 0 0 4px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contact-info p, 
.contact-info a {
	margin: 0;
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap !important;
	text-decoration: none;
}

.contact-info .call-notice {
	font-size: 12px;
	color: var(--text-muted) !important;
	font-weight: normal !important;
	margin-top: 2px;
}

/* Regras Responsivas (Tablets e Telemóveis) */
@media (max-width: 900px) {
	.contact-horizontal-list {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}
	.contact-horizontal-list .contact-item {
		display: flex !important;
		flex-direction: row !important; 
		align-items: flex-start !important; 
		gap: 12px !important;
		width: 100% !important;
	}
	.contact-horizontal-list .icon-wrapper {
		flex-shrink: 0 !important;
		display: block !important;
	}
	.contact-horizontal-list .contact-item:first-child .contact-info p {
		white-space: normal !important;
		line-height: 1.4 !important;
	}
	#dynamic-content {
		flex-direction: column !important;
		width: 100% !important;
	}
}

/* Cabeçalho Mobile Centrado e Ajuste de Margens */
@media (max-width: 576px) {
	body {
		padding: 10px 8px !important;
	}
	.site-card {
		padding: 0 16px !important;
		border-radius: 8px;
	}
	.site-footer {
		margin-left: -16px !important;
		margin-right: -16px !important;
		padding: 20px 16px !important;
	}
	.page-row.metal-card,
	.footer-metal-card {
		padding: 16px !important;
		gap: 14px !important;
	}
	.intro-text-block,
	.outro-text-block,
	.page-text p {
		font-size: 15px;
		line-height: 1.55 !important;
	}
	.site-header {
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 22px 0 !important;
		gap: 14px !important;
	}
	.logo-area {
		width: auto !important;
		flex-shrink: 0 !important;
	}
	.logo-area img {
		width: 66px !important;
		height: 66px !important;
		max-width: none !important;
	}
	.header-controls {
		width: auto !important;
		gap: 8px !important;
	}
	.lang-selector {
		gap: 6px !important;
	}
	.lang-selector button {
		padding: 8px 13px !important;
		font-size: 14px !important;
	}
	.theme-toggle-btn {
		padding: 9px 11px !important;
	}
	.theme-toggle-btn svg {
		width: 20px !important;
		height: 20px !important;
	}
}

@media (max-width: 480px) {
	.logo-area .home-hover-badge {
		display: none !important;
	}
	.page-row.metal-card {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}
	.form-row-inputs {
		flex-direction: column !important;
		gap: 16px !important;
	}
	.btn-opencart-style.btn-embedded-textarea,
	form button[type="submit"],
	form input[type="submit"] {
		padding: 7px 14px !important;
		font-size: 13px !important;
		right: 10px !important;
		top: 180px !important;
	}
}

/* Rodapé */
.site-footer {
	background-color: var(--dark-footer);
	margin-left: -40px;
	margin-right: -40px;
	margin-top: auto;
	padding: 25px 40px;
	text-align: center;
	font-size: 0.8rem;
	color: #f3f4f6;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	box-sizing: border-box;
}
/* ==========================================================================
	PARTE 5: ESTILOS DO FORMULÁRIO DINÂMICO DE CONSULTAS
========================================================================== */
.simple-contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
}

.form-row-inputs {
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
	margin-bottom: 12px;
}

.form-group {
	position: relative;
	flex: 1;
	min-width: 0;
}

.form-group-textarea {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin-bottom: 12px !important;
}

/* Campos de texto - CORRIGIDO: removido border-color da transição */
.contact-input-dinamico {
	width: 100%;
	padding: 12px 12px;
	border-radius: 6px;
	border: 1px solid #b0b0b0;
	font-family: inherit;
	font-size: 14px;
	box-sizing: border-box;
	background-color: var(--card-bg);
	color: var(--text-main);
	background-image: linear-gradient(var(--accent-color), var(--accent-color));
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition: box-shadow 0.2s ease, background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group-textarea textarea.contact-input-dinamico {
	min-height: 220px !important;
	height: 220px !important;
	resize: vertical !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.contact-input-dinamico:focus {
	outline: none !important;
	border-color: var(--accent-color) !important;
	background-size: 100% 2px;
	box-shadow: none !important;
}

.contact-input-dinamico::placeholder {
	color: #a0aec0;
	opacity: 1;
}

body.dark-mode .contact-input-dinamico {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

body.dark-mode .contact-input-dinamico::placeholder {
	color: #94a3b8;
}

/* Botão de envio consolidado */
.btn-opencart-style.btn-embedded-textarea,
form button[type="submit"],
form input[type="submit"] {
	position: absolute !important;
	right: 12px !important;
	top: 175px !important;
	width: auto !important;
	max-width: fit-content !important;
	background-color: var(--accent-color) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 10px 22px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	border-radius: 4px !important;
	z-index: 10 !important;
	transition: background-color 0.2s ease !important;
}

.btn-opencart-style.btn-embedded-textarea:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
	background-color: var(--accent-hover) !important;
}

.contact-input-dinamico.input-error {
	border-color: #ff4d4d !important;
	background-image: linear-gradient(#ff4d4d, #ff4d4d) !important;
}

.error-message {
	color: #ff4d4d;
	font-size: 12px;
	margin-top: 4px;
	display: flex !important;
	gap: 6px !important;
}

/* Dropdown Nativo */
select.generic-select-ticket {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 48px !important;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzRjNTU2NCI+PHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz48L3N2Zz4=") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 26px !important;
}

select.generic-select-ticket:invalid {
	color: #9ca3af !important;
	opacity: 0.75;
}

body.dark-mode select.generic-select-ticket {
	background-color: #1f2937 !important;
	color: #f9fafb !important;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz48L3N2Zz4=") !important;
	color-scheme: dark !important;
}

body.dark-mode select.generic-select-ticket:invalid {
	color: #9ca3af !important;
}

/* ==========================================================================
	PARTE 6: PRIVACIDADE, MODAL E ESCALONAMENTO DE FONTES
========================================================================== */
.privacy-notice {
	font-size: 12px;
	color: var(--text-muted) !important;
	font-weight: normal !important;
	margin: -8px 0 0 0;
	line-height: 1.5;
}

.privacy-notice a {
	color: inherit !important;
	text-decoration: none;
	cursor: pointer;
}

.privacy-notice a:hover {
	text-decoration: underline;
}

.privacy-modal-overlay {
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(15, 23, 42, 0.7);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999; padding: 20px; box-sizing: border-box;
}

.privacy-modal-box {
	background-color: var(--card-bg);
	color: var(--text-main);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	max-width: 600px;
	width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.privacy-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid var(--border-color);
}

/* Título e Botão de Fechar (X) do Modal de Privacidade */
.privacy-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--text-main);
}

/* Botão fechar modal - CORRIGIDO: removidos color e border-color da transição */
.privacy-modal-close {
	background: none;
	border: 1px solid transparent;
	color: var(--text-muted);
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.privacy-modal-close:hover {
	background-color: var(--bg-color);
	color: var(--text-main);
	border-color: var(--border-color);
}

/* Modal Body consolidado */
.privacy-modal-body {
	padding: 20px 24px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

.privacy-modal-body::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Estágios de Escalonamento de Texto */
body.medium-font { font-size: 18.4px !important;  }
body.medium-font .intro-text-block,
body.medium-font .outro-text-block,
body.medium-font .page-text p { font-size: 18.4px !important; }
body.medium-font .page-text h2 { font-size: 27.6px; }

body.large-font { font-size: 20.8px !important; }
body.large-font .intro-text-block,
body.large-font .outro-text-block,
body.large-font .page-text p { font-size: 20.8px !important; }
body.large-font .page-text h2 { font-size: 31.2px; }