/*
 * EmMemoria — Payments CSS
 * Paleta: #2D4A3E verde escuro · #4A7C6F verde médio · #F5F0E8 bege
 *          #C9A96E dourado · #5C4A3A marrom · #8B6F4E marrom claro
 *
 * Cobre: planos.php e minha-conta-pagamentos.php
 */

/* ==========================================================================
   1. PÁGINA DE PLANOS
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */

.emmemoria-planos-section {
	background: #F5F0E8;
	padding: 60px 20px 80px;
	box-sizing: border-box;
}

.emmemoria-planos-container {
	max-width: 960px;
	margin: 0 auto;
}

/* --- Cabeçalho ------------------------------------------------------------ */

.emmemoria-planos-header {
	text-align: center;
	margin-bottom: 52px;
}

.emmemoria-planos-header h1 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 2rem;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0 0 14px;
	line-height: 1.3;
}

.emmemoria-planos-header p {
	font-family: sans-serif;
	font-size: 17px;
	color: #5C4A3A;
	margin: 0;
	line-height: 1.5;
}

/* --- Grid ----------------------------------------------------------------- */

.emmemoria-planos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
	align-items: stretch;
}

/* --- Card base ------------------------------------------------------------ */

.emmemoria-card {
	background: #fff;
	border-radius: 12px;
	padding: 0;
	box-shadow: 0 2px 16px rgba(45, 74, 62, 0.08);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.emmemoria-card-body {
	padding: 36px 28px 20px;
	flex: 1;
}

.emmemoria-card-rodape {
	padding: 0 28px 32px;
}

/* --- Card destacado (Memória) --------------------------------------------- */

.emmemoria-card-destaque {
	border: 2px solid var(--emm-oliva-escuro);
}

/* --- Espaço extra quando há badge ----------------------------------------- */

.emmemoria-card-com-badge .emmemoria-card-body {
	padding-top: 52px;
}

/* --- Badge ---------------------------------------------------------------- */

.emmemoria-badge {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background: #2D4A3E;
	color: #F5F0E8;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 16px;
	border-radius: 0 0 8px 0;
	white-space: nowrap;
}

.emmemoria-badge-secundario {
	background: #C9A96E;
	color: #fff;
}

/* --- Nome do plano -------------------------------------------------------- */

.emmemoria-card-nome {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.35rem;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0 0 14px;
}

/* --- Preço ---------------------------------------------------------------- */

.emmemoria-card-preco {
	margin-bottom: 20px;
	line-height: 1;
}

.emmemoria-preco-valor {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 32px;
	color: #2D4A3E;
	font-weight: normal;
}

.emmemoria-preco-periodo {
	font-family: sans-serif;
	font-size: 14px;
	color: #8B6F4E;
	margin-left: 3px;
}

/* --- Lista de benefícios -------------------------------------------------- */

.emmemoria-card-beneficios {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}

.emmemoria-card-beneficios li {
	font-family: sans-serif;
	font-size: 15px;
	color: #5C4A3A;
	padding: 6px 0 6px 22px;
	position: relative;
	border-bottom: 1px solid #f2ede6;
	line-height: 1.45;
}

.emmemoria-card-beneficios li:last-child {
	border-bottom: none;
}

.emmemoria-card-beneficios li::before {
	content: '✓';
	color: #4A7C6F;
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* --- Botões --------------------------------------------------------------- */

.emmemoria-btn-plano-link,
.emmemoria-btn-acao {
	display: block;
	width: 100%;
	padding: 14px 20px;
	background: #2D4A3E;
	color: #F5F0E8;
	border: none;
	border-radius: 6px;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease;
	box-sizing: border-box;
	margin-top: auto;
}

/* Cor/sublinhado explícitos nos 4 pseudo-estados — .emmemoria-btn-plano-link
   é um <a> (botões "Assinar"/"Comprar" em /planos), sujeito ao azul/
   sublinhado padrão do navegador em :visited sem esta regra. Não afeta
   .emmemoria-btn-acao, que é sempre <button>. */
.emmemoria-btn-plano-link:link,
.emmemoria-btn-plano-link:visited,
.emmemoria-btn-plano-link:active {
	color: #F5F0E8;
	text-decoration: none;
}

.emmemoria-btn-plano-link:hover,
.emmemoria-btn-plano-link:focus,
.emmemoria-btn-acao:hover,
.emmemoria-btn-acao:focus {
	background: #4A7C6F;
	color: #F5F0E8;
	text-decoration: none;
}

.emmemoria-btn-acao[disabled],
.emmemoria-btn-acao:disabled {
	background: #ccc;
	cursor: not-allowed;
	opacity: 1;
}

.emmemoria-btn-acao[disabled]:hover {
	background: #ccc;
}

/* --- Aviso sem memorial --------------------------------------------------- */

.emmemoria-aviso-sem-memorial {
	font-family: sans-serif;
	font-size: 13px;
	color: #8B6F4E;
	text-align: center;
	margin: 8px 0 0;
	line-height: 1.4;
}

.emmemoria-aviso-sem-memorial a {
	color: #2D4A3E;
}

/* --- Tabela comparativa de recursos (25/07/2026) --------------------------- */

.emmemoria-tabela-comparativa {
	max-width: 720px;
	margin: 56px auto 0;
}

.emmemoria-tabela-titulo {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.5rem;
	font-weight: normal;
	color: #2D4A3E;
	text-align: center;
	margin: 0 0 24px;
}

.emmemoria-tabela-comparativa table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 16px rgba(45, 74, 62, 0.08);
}

.emmemoria-tabela-comparativa th,
.emmemoria-tabela-comparativa td {
	font-family: sans-serif;
	font-size: 14px;
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid #f2ede6;
}

.emmemoria-tabela-comparativa thead th {
	color: #2D4A3E;
	font-weight: 700;
	background: #F5F0E8;
}

.emmemoria-tabela-comparativa th[scope="row"] {
	text-align: left;
	font-weight: 400;
	color: #5C4A3A;
}

.emmemoria-tabela-comparativa .emmemoria-tabela-recurso {
	text-align: left;
}

.emmemoria-tabela-comparativa tbody tr:last-child th,
.emmemoria-tabela-comparativa tbody tr:last-child td {
	border-bottom: none;
	font-weight: 600;
	color: #2D4A3E;
}

.emmemoria-tabela-check {
	color: #4A7C6F;
	font-weight: bold;
	font-size: 16px;
}

.emmemoria-tabela-traco {
	color: #C9BEB0;
	font-size: 16px;
}

.emmemoria-tabela-nota {
	font-family: sans-serif;
	font-size: 13px;
	color: #8B6F4E;
	text-align: center;
	margin: 12px 0 0;
}

/* ==========================================================================
   2. MODAL DE ENDEREÇO E SELETOR DE MEMORIAL
   ========================================================================== */

/* --- Overlay -------------------------------------------------------------- */

.emmemoria-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.50);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.emmemoria-modal.ativo {
	display: flex;
}

/* --- Caixa do modal ------------------------------------------------------- */

/* .emmemoria-modal é display:flex — sem min-width:0, o item flex nunca
   encolhe abaixo do conteúdo mais largo (ex: <select> do seletor de memorial
   com nomes longos), ignorando o width:90% em telas estreitas e cortando as
   laterais. Mesmo padrão já usado em .emmemoria-field-linha (auth.css) e nos
   campos flex de media-painel.css. */
.emmemoria-modal-box {
	background: #fff;
	border-radius: 12px;
	box-sizing: border-box;
	padding: 40px;
	max-width: 480px;
	width: 90%;
	min-width: 0;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.emmemoria-modal-box h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0 0 24px;
	line-height: 1.3;
}

/* --- Grupos de campo ------------------------------------------------------ */

.emmemoria-form-grupo {
	margin-bottom: 16px;
}

.emmemoria-form-grupo label {
	display: block;
	font-family: sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #5C4A3A;
	margin-bottom: 4px;
}

.emmemoria-form-linha {
	display: flex;
	gap: 14px;
}

.emmemoria-form-linha .emmemoria-form-grupo {
	flex: 1;
}

.emmemoria-fg-numero {
	flex: 0 0 110px !important;
}

.emmemoria-fg-estado {
	flex: 0 0 72px !important;
}

/* --- Inputs e selects ----------------------------------------------------- */

.emmemoria-planos-input,
.emmemoria-planos-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: sans-serif;
	font-size: 15px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	transition: border-color 0.18s;
}

.emmemoria-planos-input:focus,
.emmemoria-planos-select:focus {
	border-color: #2D4A3E;
	outline: none;
	box-shadow: 0 0 0 2px rgba(45, 74, 62, 0.12);
}

/* --- Textos de ajuda ----------------------------------------------------- */

.emmemoria-campo-ajuda {
	display: block;
	font-family: sans-serif;
	font-size: 12px;
	color: #8B6F4E;
	margin-top: 4px;
	line-height: 1.3;
}

.emmemoria-opcional {
	font-weight: normal;
	color: #999;
	font-size: 12px;
}

/* --- Ações do modal ------------------------------------------------------- */

.emmemoria-modal-acoes {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.emmemoria-btn-modal-principal {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* área de toque mínima recomendada */
	flex: 1;
	padding: 12px 20px;
	background: #2D4A3E;
	color: #F5F0E8;
	border: none;
	border-radius: 6px;
	font-family: sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	text-align: center;
}

.emmemoria-btn-modal-principal:hover {
	background: #4A7C6F;
}

.emmemoria-btn-modal-principal:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.emmemoria-btn-modal-cancelar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* área de toque mínima recomendada */
	flex: 1;
	padding: 12px 20px;
	background: #fff;
	color: #5C4A3A;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: sans-serif;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
	text-align: center;
	text-decoration: underline;
}

.emmemoria-btn-modal-cancelar:hover {
	background: #F5F0E8;
	border-color: #8B6F4E;
}

/* --- Mensagem de erro do modal -------------------------------------------- */

.emmemoria-modal-erro {
	background: #FEF2F2;
	border: 1px solid #FECACA;
	border-radius: 6px;
	padding: 10px 14px;
	font-family: sans-serif;
	font-size: 14px;
	color: #B91C1C;
	margin-top: 14px;
	display: none;
}

/* ==========================================================================
   3. MINHA CONTA — PAGAMENTOS
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */

.emmpag-page {
	background: #F5F0E8;
	min-height: 60vh;
	padding: 40px 20px 80px;
	box-sizing: border-box;
}

.emmpag-container {
	max-width: 800px;
	margin: 0 auto;
}

/* --- Topo ----------------------------------------------------------------- */

.emmpag-topo {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.emmpag-topo h1 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 28px;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0;
}

.emmpag-link-voltar {
	font-family: sans-serif;
	font-size: 14px;
	color: #4A7C6F;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
}

.emmpag-link-voltar:hover {
	color: #2D4A3E;
	text-decoration: underline;
}

/* --- Seções --------------------------------------------------------------- */

.emmpag-secao {
	margin-bottom: 44px;
}

.emmpag-secao-titulo {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.2rem;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid #DDD5C8;
}

/* --- Estado vazio --------------------------------------------------------- */

.emmpag-vazio {
	font-family: sans-serif;
	font-size: 15px;
	color: #777;
	padding: 16px 0;
}

/* --- Card de status do plano por memorial --------------------------------- */

.emmpag-memorial-card {
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 1px 8px rgba(45, 74, 62, 0.06);
	margin-bottom: 14px;
}

.emmpag-memorial-nome {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.05rem;
	font-weight: normal;
	color: #2D4A3E;
	margin: 0 0 10px;
}

/* --- Link de upgrade ------------------------------------------------------ */

.emmpag-link-upgrade {
	font-family: sans-serif;
	font-size: 14px;
	text-decoration: underline;
}

/* Cor explícita nos 4 pseudo-estados — sem isso, o link "Ver planos" vaza o
   azul padrão do navegador em :visited, mesma classe de bug já corrigida no
   cabeçalho/rodapé institucional. */
.emmpag-link-upgrade,
.emmpag-link-upgrade:link,
.emmpag-link-upgrade:visited,
.emmpag-link-upgrade:active {
	color: #2D4A3E;
}

.emmpag-link-upgrade:hover {
	color: #4A7C6F;
}

/* --- Botão cancelar assinatura ------------------------------------------- */

.emmemoria-btn-cancelar-assinatura {
	font-family: sans-serif;
	font-size: 13px;
	color: var(--emm-erro-texto);
	background: none;
	border: 1px solid var(--emm-erro-borda);
	border-radius: 6px;
	padding: 5px 12px;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s;
}

.emmemoria-btn-cancelar-assinatura:hover {
	background: var(--emm-erro-fundo);
	border-color: #EF9A9A;
}

/* --- Badges --------------------------------------------------------------- */

.emmpag-badge {
	display: inline-block;
	border-radius: 20px;
	padding: 4px 14px;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.emmpag-badge--verde {
	background: #d4edda;
	color: #155724;
	border: 1px solid #b1dfbb;
}

.emmpag-badge--dourado {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffd966;
}

.emmpag-badge--cinza {
	background: #eee;
	color: #555;
	border: 1px solid #ddd;
}

.emmpag-badge--azul {
	background: #E3F2FD;
	color: #0D47A1;
	border: 1px solid #90CAF9;
}

.emmpag-badge--ambar {
	background: #FFF3E0;
	color: #E65100;
	border: 1px solid #FFB74D;
}

.emmpag-badge--vermelho {
	background: var(--emm-erro-fundo);
	color: var(--emm-erro-texto);
	border: 1px solid var(--emm-erro-borda);
}

/* --- Tabela de pagamentos ------------------------------------------------- */

.emmpag-tabela-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	box-shadow: 0 1px 8px rgba(45, 74, 62, 0.07);
}

.emmpag-tabela {
	width: 100%;
	border-collapse: collapse;
	font-family: sans-serif;
	font-size: 14px;
	background: #fff;
}

.emmpag-tabela thead th {
	background: #2D4A3E;
	color: #F5F0E8;
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.emmpag-tabela tbody tr:nth-child(even) td {
	background: #f9f9f9;
}

.emmpag-tabela tbody td {
	padding: 12px 16px;
	color: #333;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.emmpag-tabela tbody tr:last-child td {
	border-bottom: none;
}

/* --- Cards de pedido ------------------------------------------------------ */

.emmpag-pedido-card {
	background: #fff;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 12px;
	box-shadow: 0 1px 8px rgba(45, 74, 62, 0.06);
}

.emmpag-pedido-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.emmpag-pedido-produto {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1rem;
	color: #2D4A3E;
	font-weight: normal;
}

.emmpag-pedido-meta {
	font-family: sans-serif;
	font-size: 14px;
	color: #5C4A3A;
	margin-bottom: 6px;
}

.emmpag-pedido-meta strong {
	color: #2D4A3E;
}

.emmpag-pedido-endereco {
	font-family: sans-serif;
	font-size: 14px;
	color: #5C4A3A;
	line-height: 1.6;
	background: #F5F0E8;
	border-radius: 6px;
	padding: 10px 14px;
	margin-top: 10px;
	font-style: normal;
}

/* ==========================================================================
   4. RESPONSIVO
   ========================================================================== */

/* 3 colunas persistem até 768px — evita o "3º card órfão" que ocorria com
   um breakpoint intermediário de 2 colunas entre 769-900px (tablets) */

@media (max-width: 768px) {
	/* Planos */
	.emmemoria-planos-section {
		padding: 40px 14px 60px;
	}

	.emmemoria-planos-header h1 {
		font-size: 1.5rem;
	}

	.emmemoria-planos-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Tabela comparativa — 4 colunas não cabem na tela, scroll horizontal
	   em vez de espremer/quebrar texto (mesmo padrão já usado na barra de
	   abas do painel de gerenciamento, ver .specs/04-frontend.md). */
	.emmemoria-tabela-comparativa {
		overflow-x: auto;
		margin-top: 40px;
	}

	.emmemoria-tabela-comparativa table {
		min-width: 560px;
	}

	/* Modal */
	.emmemoria-modal-box {
		padding: 24px 18px;
	}

	.emmemoria-form-linha {
		flex-direction: column;
		gap: 0;
	}

	.emmemoria-fg-numero,
	.emmemoria-fg-estado {
		flex: none !important;
	}

	.emmemoria-modal-acoes {
		flex-direction: column;
	}

	/* Minha Conta Pagamentos */
	.emmpag-page {
		padding: 28px 14px 60px;
	}

	.emmpag-topo h1 {
		font-size: 22px;
	}

	.emmpag-memorial-card {
		flex-direction: column;
		align-items: flex-start;
	}
}