/**
 * As telas de cadastro — o modal que entrega o livro.
 *
 * Esta e a unica tela do site onde alguem digita dados pessoais, e e o ultimo
 * passo antes de levar o livro. Se ela parecer estranha ou improvisada, a pessoa
 * desiste ali.
 *
 * Consome os tokens declarados em `biblioteca.css`, que vivem no `:root`
 * justamente por causa deste arquivo: o modal e anexado ao <body>, fora de
 * `.bca-biblio`, e nao herdaria nada se os tokens estivessem no wrapper. Ainda
 * assim todo `var()` tem valor de reserva — se por qualquer motivo so este CSS
 * carregar, o modal continua legivel em vez de sair sem cor.
 *
 * Sao tres telas na mesma caixa:
 *   1. cadastro completo   (`.bca-retirada__form`)
 *   2. confirmacao de quem ja e conhecido do aparelho (`--curto`)
 *   3. livro liberado      (`.bca-retirada__pronto`)
 */

/* A rolagem do fundo fica travada enquanto o modal esta aberto. */
html.bca-modal-aberto {
	overflow: hidden;
}

/* ── A moldura ──────────────────────────────────────────────────────────── */

.bca-retirada {
	position: fixed;
	inset: 0;
	/*
	 * 100010, e não 99999: o "CSS adicional" gravado no Customizer põe o
	 * cabeçalho em `z-index: 99999`. Empatado, quem ganha é quem vem depois no
	 * documento — hoje o modal, por sorte, porque é acrescentado ao `body` na
	 * hora de abrir. Um número acima tira a decisão da sorte.
	 */
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var( --bca-texto-fonte, system-ui, -apple-system, 'Segoe UI', sans-serif );
	font-size: 16px;
	line-height: 1.55;
	color: var( --bca-tinta, #1f2417 );
}

/* O desfoque vai aqui, e nao na caixa: este elemento nao rola. Numa caixa que
   rola, `backdrop-filter` obriga o navegador a recompor o fundo a cada quadro e
   engasga em celular fraco. */
.bca-retirada__fundo {
	position: absolute;
	inset: 0;
	background: rgba( 24, 28, 18, 0.62 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	animation: bca-retirada-fundo 200ms ease both;
}

.bca-retirada__caixa {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: min( 90vh, 760px );
	/* `dvh` acompanha a barra do navegador de celular, que aparece e some com a
	   rolagem; com `vh` sozinho a caixa pode ficar mais alta que a area util e o
	   botao de enviar cai fora da tela. Navegador sem `dvh` fica com o `vh` da
	   linha acima. */
	max-height: min( 90dvh, 760px );
	padding: 32px 28px 28px;
	overflow-y: auto;
	/* A linha quente no topo da caixa marca a caixa como nossa sem roubar
	   contraste do texto. Ela e background, e nao um ::before absoluto: a caixa e
	   o proprio contêiner de rolagem, e um filho absoluto rolaria junto com o
	   conteudo e sumiria assim que a pessoa descesse no formulario. Fundo de
	   elemento com rolagem fica preso na borda. */
	background-color: var( --bca-superficie, #ffffff );
	background-image: linear-gradient(
		90deg,
		var( --bca-realce, #ffd936 ),
		var( --bca-acento, #dab200 ) 55%,
		var( --bca-estrutura, #536942 )
	);
	background-repeat: no-repeat;
	background-size: 100% 5px;
	border: 1px solid var( --bca-borda, rgba( 83, 105, 66, 0.18 ) );
	border-radius: 22px;
	box-shadow: 0 24px 70px rgba( 24, 28, 18, 0.32 );
	animation: bca-retirada-entra 280ms cubic-bezier( 0.16, 1, 0.3, 1 ) both;
	-webkit-overflow-scrolling: touch;
}

@keyframes bca-retirada-fundo {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bca-retirada-entra {
	from {
		opacity: 0;
		transform: translateY( 16px ) scale( 0.98 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Fechar ─────────────────────────────────────────────────────────────── */

/* Era um "×" de 28px com area de clique de 8px. Agora e um alvo de 40x40 com
   forma propria, que e o minimo utilizavel com o polegar. */
.bca-retirada__fechar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 24px;
	font-family: inherit;
	line-height: 1;
	color: var( --bca-tinta-suave, #5a6350 );
	cursor: pointer;
	background: rgba( 83, 105, 66, 0.08 );
	border: 0;
	border-radius: 50%;
	transition: background-color 150ms ease, color 150ms ease;
}

.bca-retirada__fechar:hover {
	color: var( --bca-tinta, #1f2417 );
	background: rgba( 83, 105, 66, 0.16 );
}

/* ── Textos ─────────────────────────────────────────────────────────────── */

.bca-retirada__titulo {
	margin: 0 44px 8px 0;
	font-family: var( --bca-display, 'Trebuchet MS', system-ui, sans-serif );
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	/* O Astra aplica letter-spacing negativo nos h2 do tema. */
	letter-spacing: normal;
	color: var( --bca-tinta, #1f2417 );
}

.bca-retirada__texto {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.55;
	color: var( --bca-tinta-suave, #5a6350 );
}

/* ── Campos ─────────────────────────────────────────────────────────────── */

.bca-retirada__campo {
	margin-bottom: 16px;
}

.bca-retirada__campo[hidden] {
	display: none;
}

.bca-retirada__campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var( --bca-tinta, #1f2417 );
}

.bca-retirada__campo input,
.bca-retirada__campo select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px; /* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo. */
	color: var( --bca-tinta, #1f2417 );
	background: var( --bca-fundo, #faf8f2 );
	border: 1px solid var( --bca-borda-forte, rgba( 83, 105, 66, 0.34 ) );
	border-radius: 12px;
	transition: border-color 150ms ease, background-color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

/* A seta do select desenhada como SVG embutido: o `appearance: none` acima tira
   a nativa, e sem substituir sobraria um campo sem indicacao de que abre. */
.bca-retirada__campo select {
	padding-right: 40px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

.bca-retirada__campo input::placeholder {
	color: var( --bca-tinta-suave, #5a6350 );
	opacity: 0.7;
}

.bca-retirada__campo input:hover,
.bca-retirada__campo select:hover {
	border-color: var( --bca-acento, #dab200 );
}

.bca-retirada__campo input:focus,
.bca-retirada__campo select:focus {
	background: var( --bca-superficie, #ffffff );
	border-color: var( --bca-acento, #dab200 );
}

/* Mesmo anel de foco da pagina, e nunca `outline: none`. */
.bca-retirada input:focus-visible,
.bca-retirada select:focus-visible,
.bca-retirada button:focus-visible,
.bca-retirada a:focus-visible,
.bca-retirada summary:focus-visible {
	outline: 3px solid var( --bca-acento, #dab200 );
	outline-offset: 2px;
}

/* ── Erro ───────────────────────────────────────────────────────────────── */

.bca-retirada__campo input[aria-invalid="true"],
.bca-retirada__campo select[aria-invalid="true"] {
	background: #fdf4f2;
	border-color: #b3301f;
}

/* #c0392b mede 3,7:1 sobre branco e reprova para texto. Este tom mede 5,3:1. */
.bca-retirada__erro {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.4;
	color: #b3301f;
	min-height: 1em;
}

/* O erro geral e um aviso, nao um rodape: precisa parecer com um. */
.bca-retirada__erro-geral {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fdf4f2;
	border: 1px solid rgba( 179, 48, 31, 0.3 );
	border-radius: 12px;
	min-height: 0;
}

.bca-retirada__erro-geral::before {
	content: '!';
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background: #b3301f;
	border-radius: 50%;
}

.bca-retirada__erro-geral:empty {
	display: none;
}

/* ── Menor de idade ─────────────────────────────────────────────────────── */

/* Vira um bloco clicavel inteiro: a caixinha sozinha e um alvo de 16px, e este
   e o controle que muda o formulario todo. */
.bca-retirada__menor {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 18px;
	padding: 12px 14px;
	background: var( --bca-fundo, #faf8f2 );
	border: 1px solid var( --bca-borda, rgba( 83, 105, 66, 0.18 ) );
	border-radius: 12px;
	transition: border-color 150ms ease;
}

.bca-retirada__menor:hover {
	border-color: var( --bca-acento, #dab200 );
}

.bca-retirada__menor input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var( --bca-acento, #dab200 );
	cursor: pointer;
}

/* O rotulo ocupa a linha inteira: sem isso o unico alvo era a caixinha de 20px
   e as poucas palavras ao lado, num controle que muda o formulario todo. */
.bca-retirada__menor label {
	flex: 1 1 auto;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --bca-tinta, #1f2417 );
	cursor: pointer;
}

/* ── Perfil opcional ────────────────────────────────────────────────────── */

.bca-retirada__perfil {
	margin: 0 0 18px;
	padding: 0 14px;
	background: var( --bca-fundo, #faf8f2 );
	border: 1px solid var( --bca-borda, rgba( 83, 105, 66, 0.18 ) );
	border-radius: 12px;
}

.bca-retirada__perfil > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 13px 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var( --bca-tinta, #1f2417 );
	cursor: pointer;
	list-style: none;
}

/* Some com o triangulo nativo nos dois motores. */
.bca-retirada__perfil > summary::-webkit-details-marker {
	display: none;
}

.bca-retirada__perfil > summary::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var( --bca-tinta-suave, #5a6350 );
	border-bottom: 2px solid var( --bca-tinta-suave, #5a6350 );
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform 180ms ease;
}

.bca-retirada__perfil[open] > summary::after {
	transform: rotate( -135deg ) translate( -2px, -2px );
}

.bca-retirada__perfil[open] > summary {
	border-bottom: 1px solid var( --bca-borda, rgba( 83, 105, 66, 0.18 ) );
	margin-bottom: 14px;
}

.bca-retirada__perfil .bca-retirada__texto {
	margin-bottom: 14px;
	font-size: 13.5px;
}

.bca-retirada__perfil .bca-retirada__campo:last-of-type {
	margin-bottom: 16px;
}

/* ── Campo-isca ─────────────────────────────────────────────────────────── */

/* Fora da tela e fora do leitor de tela, mas preenchivel por robo.
   `display: none` seria pior — muito robo ignora campo escondido assim. */
.bca-retirada__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Consentimento ──────────────────────────────────────────────────────── */

.bca-retirada__consentimento {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --bca-tinta-suave, #5a6350 );
}

.bca-retirada__consentimento a {
	color: var( --bca-acento-txt, #8a6f00 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Botões ─────────────────────────────────────────────────────────────── */

.bca-retirada__enviar,
.bca-retirada__baixar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --bca-tinta, #1f2417 );
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var( --bca-realce, #ffd936 );
	border: 1px solid var( --bca-acento, #dab200 );
	border-radius: 999px;
	box-sizing: border-box;
	transition: transform 150ms cubic-bezier( 0.16, 1, 0.3, 1 ), box-shadow 150ms ease;
}

.bca-retirada__enviar:hover,
.bca-retirada__baixar:hover {
	color: var( --bca-tinta, #1f2417 );
	box-shadow: 0 6px 18px rgba( 218, 178, 0, 0.35 );
	transform: translateY( -1px );
}

.bca-retirada__enviar:active,
.bca-retirada__baixar:active {
	transform: scale( 0.98 );
	box-shadow: none;
}

.bca-retirada__enviar[disabled] {
	cursor: progress;
	opacity: 0.75;
	transform: none;
	box-shadow: none;
}

/* O rotulo ja troca para "Enviando…" no JavaScript. O anel girando ao lado e o
   que separa "esta indo" de "travou" numa conexao ruim. */
.bca-retirada__enviar.esta-enviando::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 31, 36, 23, 0.25 );
	border-top-color: var( --bca-tinta, #1f2417 );
	border-radius: 50%;
	animation: bca-retirada-gira 700ms linear infinite;
}

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

.bca-retirada__secundario {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 10px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var( --bca-tinta-suave, #5a6350 );
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --bca-borda-forte, rgba( 83, 105, 66, 0.34 ) );
	border-radius: 999px;
	box-sizing: border-box;
	transition: border-color 150ms ease, color 150ms ease;
}

.bca-retirada__secundario:hover {
	color: var( --bca-tinta, #1f2417 );
	border-color: var( --bca-acento, #dab200 );
}

/* ── Tela do livro liberado ─────────────────────────────────────────────── */

.bca-retirada__pronto {
	position: relative;
	text-align: center;
}

.bca-retirada__pronto .bca-retirada__titulo {
	margin-right: 0;
}

/* O visto e desenhado com duas bordas giradas, e nao com emoji: emoji muda de
   forma e de cor em cada sistema. */
.bca-retirada__pronto::before {
	content: '';
	display: block;
	width: 64px;
	height: 64px;
	margin: 4px auto 18px;
	background: rgba( 255, 217, 54, 0.32 );
	border: 2px solid var( --bca-acento, #dab200 );
	border-radius: 50%;
	animation: bca-retirada-selo 320ms cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

/* O círculo tem 64px de altura e 4px de margem acima, então o centro dele cai a
   36px do topo de `.bca-retirada__pronto`. O visto tem 21px e é girado em torno
   do próprio centro, logo `top` é 36 − 21/2 ≈ 25px. */
.bca-retirada__pronto::after {
	content: '';
	position: absolute;
	top: 25px;
	left: 50%;
	width: 11px;
	height: 21px;
	border-right: 3px solid var( --bca-tinta, #1f2417 );
	border-bottom: 3px solid var( --bca-tinta, #1f2417 );
	transform: translateX( -50% ) rotate( 45deg );
	animation: bca-retirada-selo 320ms cubic-bezier( 0.16, 1, 0.3, 1 ) 80ms both;
}

@keyframes bca-retirada-selo {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.bca-retirada__pronto .bca-retirada__texto {
	margin-bottom: 22px;
	font-size: 16px;
	font-weight: 600;
	color: var( --bca-tinta, #1f2417 );
}

.bca-retirada__aviso {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --bca-tinta-suave, #5a6350 );
}

/* ── Celular ────────────────────────────────────────────────────────────── */

/* Vira folha presa embaixo: o polegar alcança o botão, e a caixa deixa de ficar
   espremida entre duas margens de 16px numa tela de 375px. */
@media ( max-width: 560px ) {
	.bca-retirada {
		align-items: flex-end;
		padding: 0;
	}

	.bca-retirada__caixa {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		padding: 28px 20px calc( 20px + env( safe-area-inset-bottom, 0px ) );
		border-radius: 22px 22px 0 0;
		animation-name: bca-retirada-sobe;
	}

	.bca-retirada__caixa::before {
		border-radius: 22px 22px 0 0;
	}

	.bca-retirada__titulo {
		font-size: 21px;
	}

	/* 40px passa no desktop com o mouse; no polegar o minimo e 44. */
	.bca-retirada__fechar {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
	}
}

@keyframes bca-retirada-sobe {
	from {
		opacity: 0;
		transform: translateY( 24px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Movimento reduzido ─────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.bca-retirada *,
	.bca-retirada *::before,
	.bca-retirada *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	/* O anel de "enviando" é a exceção: ele existe justamente para mostrar que
	   algo está acontecendo. Fica, mas devagar. */
	.bca-retirada__enviar.esta-enviando::before {
		animation-duration: 1400ms !important;
		animation-iteration-count: infinite !important;
	}
}

/* ── A faixa do topo ganha o azul do logo ───────────────────────────────── */

.bca-retirada__caixa {
	background-image: linear-gradient(
		90deg,
		var( --bca-realce, #ffd936 ),
		var( --bca-acento, #dab200 ) 45%,
		var( --bca-azul, #1e3780 )
	);
}

/* Botão com o apoio do claymorphism, igual ao do resto da página. */
.bca-retirada__enviar,
.bca-retirada__baixar {
	border-width: 2px;
	box-shadow: 0 4px 0 rgba( 154, 125, 0, 0.55 );
}

.bca-retirada__enviar:active,
.bca-retirada__baixar:active {
	transform: translateY( 4px );
	box-shadow: 0 0 0 rgba( 154, 125, 0, 0.55 );
}

/* ── Confete ────────────────────────────────────────────────────────────── */

/*
 * Uma vez, quando o livro é liberado. Quatorze peças em amarelo e no azul do
 * logo, 1,4s, e o JavaScript tira a camada do DOM depois.
 */
.bca-festa {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.bca-festa__peca {
	position: absolute;
	top: -16px;
	left: calc( 6% + var( --i ) * 6.6% );
	width: 9px;
	height: 14px;
	background: var( --bca-realce, #ffd936 );
	border-radius: 2px;
	opacity: 0;
	animation: bca-cai 1400ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
	animation-delay: calc( var( --i ) * 45ms );
}

.bca-festa__peca:nth-child( 3n ) {
	background: var( --bca-azul, #1e3780 );
}

.bca-festa__peca:nth-child( 4n ) {
	width: 7px;
	height: 7px;
	background: var( --bca-acento, #dab200 );
	border-radius: 50%;
}

@keyframes bca-cai {
	0%   { opacity: 0; transform: translateY( 0 ) rotate( 0deg ); }
	10%  { opacity: 1; }
	100% { opacity: 0; transform: translateY( 320px ) rotate( 420deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bca-festa {
		display: none;
	}
}


/* ── Consentimento explícito (versão 2) ──────────────────────────────────── */

.bca-retirada__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 12px;
}

.bca-retirada__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 14px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --bca-azul, #1e3780 );
	text-decoration: none;
	background: var( --bca-azul-fundo, #eef1f9 );
	border: 1px solid var( --bca-azul-borda, rgba( 30, 55, 128, 0.22 ) );
	border-radius: 999px;
}

.bca-retirada__links a:focus-visible {
	outline: 3px solid var( --bca-azul, #1e3780 );
	outline-offset: 2px;
}

.bca-retirada__aceite {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0 12px;
	align-items: start;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid rgba( 83, 105, 66, 0.22 );
	border-radius: 14px;
}

.bca-retirada__aceite input {
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var( --bca-azul, #1e3780 );
}

.bca-retirada__aceite label {
	min-height: 44px;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.bca-retirada__aceite .bca-retirada__erro {
	grid-column: 2;
	margin-top: 4px;
}

/* Vazio, o erro não reserva linha — mas continua no layout (altura zero, e não
   display: none), para o leitor de tela anunciar quando o texto chegar. */
.bca-retirada__aceite .bca-retirada__erro:empty {
	min-height: 0;
	height: 0;
	margin: 0;
}

/* Específico e em destaque para o responsável (LGPD, art. 14, §1º). */
.bca-retirada__aceite--destaque {
	background: #fffaea;
	border: 2px solid var( --bca-realce, #ffd936 );
	border-left-width: 6px;
}

.bca-retirada__aceite--destaque label {
	font-weight: 600;
}