/*
 * Página "Entre em contato" — shortcode [pcc_contato] (mu-plugin pcc-contato.php).
 * Segue .superdesign/design-system.md: azul #00AAFF é a única cor de ação, verde só
 * para sucesso, nenhum box-shadow (exceto o anel de foco), campos de 48px com raio 8,
 * card branco com hairline e raio 16, pastéis só em áreas pequenas.
 * Carregado só na página que usa o shortcode.
 */

.pcc-contato {
	--pcc-acao: #00AAFF;
	--pcc-acao-hover: #0095e0;
	--pcc-acao-press: #0081c4;
	--pcc-titulo: #222222;
	--pcc-texto: #333333;
	--pcc-muted: #6b7280;
	--pcc-faint: #9aa1ab;
	--pcc-hairline: #f0f0f0;
	--pcc-campo: #e2e5ea;
	--pcc-divisor: #e6eaec;
	--pcc-soft: #fafbfc;
	--pcc-erro: #ef4444;
	--pcc-erro-texto: #dc2626; /* #ef4444 não passa 4,5:1 em texto de 13px */
	--pcc-verde: #22c55e;
	--pcc-verde-texto: #0a9e1a;
	--pcc-lavanda: #DCBDF7;
	--pcc-rosa: #FFE6FA;
	--pcc-foco: 0 0 0 3px rgba(0, 170, 255, .25);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "pedido" "card" "canais";
	gap: 16px;
	margin: 20px auto 56px;
	color: var(--pcc-texto);
	font-size: 16px;
	line-height: 1.65;
}

@media (min-width: 960px) {
	.pcc-contato {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-areas: "intro card" "pedido card" "canais card";
		grid-template-rows: auto auto 1fr;
		column-gap: 64px;
		row-gap: 28px;
		margin-top: 48px;
		align-items: start;
	}
}

.pcc-contato [hidden] { display: none !important; }

.pcc-contato__intro { grid-area: intro; }
.pcc-contato__pedido { grid-area: pedido; }
.pcc-contato__card   { grid-area: card; }
.pcc-contato__canais { grid-area: canais; }

/* ---- Intro ------------------------------------------------------------ */

.pcc-contato .pcc-contato__titulo {
	margin: 0 0 8px;
	color: var(--pcc-titulo);
	font-size: clamp(28px, 4.2vw, 42px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.pcc-contato__lede {
	max-width: 30em;
	margin: 0;
	color: var(--pcc-texto);
	font-size: 16px;
	line-height: 1.55;
}

@media (min-width: 960px) {
	.pcc-contato__lede { font-size: 17px; line-height: 1.65; }
}

/* ---- Faixa "pedido em andamento" (a faixa toda é o link) --------------- */

.pcc-contato .pcc-contato__pedido {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 12px 16px;
	border: 1px solid var(--pcc-hairline);
	border-radius: 12px;
	background: linear-gradient(135deg, #ece7f6 0, #fff7f9 40%, #fff 100%);
	color: var(--pcc-texto);
	text-decoration: none;
	transition: border-color .15s ease;
}

.pcc-contato .pcc-contato__pedido:hover { border-color: var(--pcc-campo); color: var(--pcc-texto); }
.pcc-contato .pcc-contato__pedido:focus-visible { outline: none; border-color: var(--pcc-acao); box-shadow: var(--pcc-foco); }

.pcc-contato__pedido-txt { display: grid; gap: 1px; min-width: 0; }

.pcc-contato__pedido-txt strong {
	color: var(--pcc-titulo);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.pcc-contato__pedido-txt span {
	color: var(--pcc-muted);
	font-size: 13px;
	line-height: 1.4;
}

.pcc-contato__pedido-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--pcc-campo);
	border-radius: 8px;
	background: #fff;
	color: var(--pcc-titulo);
	font-size: 14px;
	font-weight: 600;
	transition: border-color .15s ease;
}

.pcc-contato__pedido:hover .pcc-contato__pedido-btn { border-color: var(--pcc-acao); }

@media (min-width: 960px) {
	.pcc-contato .pcc-contato__pedido { padding: 16px 16px 16px 20px; }
}

/* ---- Outros canais ------------------------------------------------------ */

.pcc-contato__canais {
	display: grid;
	gap: 14px;
	margin: 8px 0 0;
	padding: 0 4px;
}

.pcc-contato__canais dt {
	margin: 0;
	color: var(--pcc-muted);
	font-size: 13px;
	font-weight: 500;
}

.pcc-contato__canais dd {
	margin: 2px 0 0;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.pcc-contato__canais a {
	color: var(--pcc-titulo);
	text-decoration: underline;
	text-decoration-color: var(--pcc-campo);
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease;
}

.pcc-contato__canais a:hover { text-decoration-color: var(--pcc-acao); }

.pcc-contato__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

/* ---- Card do formulário ------------------------------------------------ */

.pcc-contato__card {
	padding: 16px;
	border: 1px solid var(--pcc-hairline);
	border-radius: 16px;
	background: #fff;
}

@media (min-width: 600px) {
	.pcc-contato__card { padding: 28px; }
}

/* A "tela": faixa de uma tela de pintura com cristais. Casas com o símbolo
 * impresso vão recebendo cristais conforme o formulário é preenchido. */
.pcc-tela {
	--cols: 18;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 2px;
	margin: 0 0 20px;
	padding: 8px;
	border: 1px solid var(--pcc-hairline);
	border-radius: 12px;
	background: var(--pcc-soft);
}

@media (min-width: 600px) {
	.pcc-tela { --cols: 24; gap: 3px; padding: 10px; margin-bottom: 24px; }
}

.pcc-tela__casa {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 3px;
	background: #fff;
	color: #b4bac3;
	font-size: 8px;
	line-height: 1;
	overflow: hidden;
}

@media (min-width: 600px) {
	.pcc-tela__casa { font-size: 10px; }
}

.pcc-tela__casa::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 3px;
	background:
		conic-gradient(from 45deg, var(--claro) 0 25%, var(--base) 0 50%, var(--escuro) 0 75%, var(--base) 0);
	opacity: 0;
	transform: scale(.55);
	transition: opacity .18s ease, transform .18s ease;
	transition-delay: var(--atraso, 0ms);
}

.pcc-tela__casa.is-cheia::after { opacity: 1; transform: scale(1); }

.pcc-tela__casa[data-cor="a"] { --claro: #8fdcff; --base: #00AAFF; --escuro: #0081c4; }
.pcc-tela__casa[data-cor="b"] { --claro: #f1e4fc; --base: #DCBDF7; --escuro: #bf94ea; }
.pcc-tela__casa[data-cor="c"] { --claro: #fff6fd; --base: #FFE6FA; --escuro: #f2c4e6; }

/* ---- Campos ------------------------------------------------------------- */

.pcc-contato__form { display: grid; gap: 20px; margin: 0; }

.pcc-f { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; }

.pcc-f-duo { display: grid; gap: 20px; }

@media (min-width: 600px) {
	.pcc-f-duo { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.pcc-contato .pcc-f > label,
.pcc-contato .pcc-f > legend {
	margin: 0;
	padding: 0;
	color: var(--pcc-texto);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.pcc-f__opc { color: var(--pcc-muted); font-weight: 400; }

.pcc-contato .pcc-f input[type="text"],
.pcc-contato .pcc-f input[type="email"],
.pcc-contato .pcc-f input[type="tel"],
.pcc-contato .pcc-f textarea {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--pcc-campo);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--pcc-titulo);
	font: inherit;
	font-size: 16px; /* evita o zoom do iOS */
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pcc-contato .pcc-f textarea {
	height: auto;
	min-height: 148px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

.pcc-contato .pcc-f input::placeholder,
.pcc-contato .pcc-f textarea::placeholder { color: var(--pcc-faint); opacity: 1; }

.pcc-contato .pcc-f input:focus,
.pcc-contato .pcc-f textarea:focus {
	outline: none;
	border-color: var(--pcc-acao);
	box-shadow: var(--pcc-foco);
}

.pcc-contato .pcc-f [aria-invalid="true"] { border-color: var(--pcc-erro); }

.pcc-f__dica { margin: 0; color: var(--pcc-muted); font-size: 13px; line-height: 1.5; }

.pcc-f__rodape { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.pcc-f__conta {
	flex: none;
	color: var(--pcc-muted);
	font-size: 13px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.pcc-f__erro {
	margin: 0;
	color: var(--pcc-erro-texto);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

/* Assunto: linhas de opção (mesmo padrão das opções de frete/pagamento). */
.pcc-f--assunto { border: 0; padding: 0; }
.pcc-contato .pcc-f--assunto legend { margin-bottom: 8px; }

.pcc-chips {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.pcc-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--pcc-campo);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.pcc-contato .pcc-chip { font-size: 15px; font-weight: 500; line-height: 1.3; }

.pcc-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pcc-chip span {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--pcc-titulo);
	line-height: 1.3;
}

.pcc-chip span::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid #c9ced6;
	border-radius: 50%;
	background: #fff;
	transition: border-color .15s ease, border-width .15s ease;
}

.pcc-chip:hover { border-color: #c9ced6; }

.pcc-chip:has(input:checked) {
	border-color: var(--pcc-acao);
	background: rgba(0, 170, 255, .05);
}

.pcc-chip input:checked + span::before {
	border: 5px solid var(--pcc-acao);
}

.pcc-chip:has(input:focus-visible) { box-shadow: var(--pcc-foco); border-color: var(--pcc-acao); }

.pcc-f--assunto[aria-invalid="true"] .pcc-chip { border-color: var(--pcc-erro); }

/* Campos que dependem do assunto. */
.pcc-extra { display: grid; gap: 20px; }

/* Honeypot: fora da tela, invisível para humanos e leitores de tela. */
.pcc-f--mel {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pcc-contato__ts:empty { display: none; }
.pcc-contato__ts { min-height: 0; }

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

.pcc-contato .pcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--pcc-acao);
	border-radius: 8px;
	background: var(--pcc-acao);
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.pcc-contato .pcc-btn:hover { background: var(--pcc-acao-hover); border-color: var(--pcc-acao-hover); color: #fff; }
.pcc-contato .pcc-btn:active { background: var(--pcc-acao-press); border-color: var(--pcc-acao-press); transform: translateY(1px); }
.pcc-contato .pcc-btn:focus-visible { outline: none; box-shadow: var(--pcc-foco); }

.pcc-contato .pcc-btn[aria-busy="true"] { cursor: progress; opacity: .8; }

.pcc-contato .pcc-btn[aria-busy="true"]::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pcc-gira .7s linear infinite;
}

.pcc-contato .pcc-btn--leve {
	width: auto;
	background: #fff;
	border-color: var(--pcc-campo);
	color: var(--pcc-titulo);
}

.pcc-contato .pcc-btn--leve:hover { background: #fff; border-color: var(--pcc-acao); color: var(--pcc-titulo); }
.pcc-contato .pcc-btn--leve:active { background: var(--pcc-soft); border-color: var(--pcc-acao); }

@keyframes pcc-gira { to { transform: rotate(360deg); } }

.pcc-contato__enviar { display: grid; gap: 10px; }

.pcc-contato__lgpd {
	margin: 0;
	color: var(--pcc-muted);
	font-size: 13px;
	text-align: center;
}

.pcc-contato__status:empty { display: none; }

.pcc-contato__status {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(239, 68, 68, .08);
	color: var(--pcc-erro-texto);
	font-size: 14px;
	font-weight: 500;
}

/* ---- Sucesso --------------------------------------------------------------- */

.pcc-contato__ok { padding: 8px 0 4px; outline: none; }

.pcc-contato .pcc-contato__ok h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	color: var(--pcc-titulo);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.pcc-contato__ok h2::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pcc-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.pcc-contato__ok p { margin: 0 0 20px; font-size: 16px; }
.pcc-contato__ok strong { color: var(--pcc-titulo); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
	.pcc-contato *,
	.pcc-contato *::before,
	.pcc-contato *::after {
		transition: none !important;
	}
	.pcc-contato .pcc-btn[aria-busy="true"]::before { animation-duration: 2s; }
}