/**
 * CP — Painel de envio de orçamento
 *
 * Desliza sobre o conteúdo do drawer, sem trocar de página: o cliente
 * montou a cesta ali e envia dali.
 */

.rkscp-orc {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: var(--rkscp-drawer-bg, #fff);
	color: var(--rkscp-drawer-fg, #161616);
	transform: translateX(8%);
	opacity: 0;
	transition: transform .22s var(--rkscp-ease, ease), opacity .22s var(--rkscp-ease, ease);
}

.rkscp-orc.is-aberto {
	transform: translateX(0);
	opacity: 1;
}

/* ── Cabeçalho ─────────────────────────────────────────────── */

.rkscp-orc__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--rkscp-line, #e2e2e2);
	flex-shrink: 0;
}

.rkscp-orc__voltar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	border-radius: var(--rkscp-radius, 0);
}

.rkscp-orc__voltar:hover {
	background: var(--rkscp-surface, #f2f2f2);
}

.rkscp-orc__voltar svg {
	width: 18px;
	height: 18px;
}

.rkscp-orc__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

/* ── Formulário ────────────────────────────────────────────── */

/**
 * O formulário deixa de ser a área que rola.
 *
 * Antes ele rolava inteiro, e o botão de enviar ia junto: no celular, com o
 * teclado aberto, o cliente preenchia o último campo e não via mais como
 * continuar. Agora o formulário é a moldura, a etapa visível é a única
 * coisa que rola, e as ações ficam presas embaixo.
 *
 * `min-height: 0` é o que faz funcionar: item de flex tem `min-height:auto`
 * por padrão, então ele se recusa a encolher abaixo do conteúdo e a
 * rolagem nunca aparece — o painel é que estoura.
 */
.rkscp-orc__form {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.rkscp-orc__etapa,
.rkscp-orc__codigo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 24px;
	/* Rolagem presa ao painel: sem isto, chegar ao fim da lista continua o
	   movimento na página atrás do drawer. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.rkscp-orc__erro {
	flex-shrink: 0;
	margin: 0 20px;
}

/* Rodapé fixo: ações e nota saem do fluxo que rola. */
.rkscp-orc__acoes {
	flex-shrink: 0;
	padding: 14px 20px 0;
	border-top: 1px solid var(--rkscp-line, #e2e2e2);
}

.rkscp-orc__nota {
	flex-shrink: 0;
	margin: 0;
	padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
}

/* Cabeçalho, passos e cartão de identidade não rolam com o conteúdo. */
.rkscp-orc__passos,
.rkscp-orc__identidade {
	flex-shrink: 0;
}

.rkscp-orc__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}

.rkscp-orc__campo input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-radius, 0);
	font-size: 15px;
	font-weight: 400;
	background: var(--rkscp-white, #fff);
	color: inherit;
}

.rkscp-orc__campo input:focus {
	border-color: var(--rkscp-ink-900, #161616);
}

/* Só marca erro depois que o campo foi tocado: pintar de vermelho um
   formulário que a pessoa nem começou a preencher é hostil. */
.rkscp-orc__campo.tem-erro input {
	border-color: var(--rkscp-accent, #d81022);
}

.rkscp-orc__campo small {
	font-size: 12px;
	font-weight: 400;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-orc__erro {
	margin: 0;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--rkscp-accent, #d81022) 10%, transparent);
	color: var(--rkscp-accent, #d81022);
	font-size: 13px;
	border-radius: var(--rkscp-radius, 0);
}

.rkscp-orc__enviar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--rkscp-radius, 0);
	background: var(--rkscp-drawer-cta-bg, #161616);
	color: var(--rkscp-drawer-cta-fg, #fff);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease;
}

.rkscp-orc__enviar:hover {
	opacity: .9;
}

.rkscp-orc__enviar.is-loading {
	pointer-events: none;
}

.rkscp-orc__enviar.is-loading .rkscp-orc__enviar-label {
	opacity: 0;
}

.rkscp-orc__enviar.is-loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: rkscp-orc-girar .6s linear infinite;
}

@keyframes rkscp-orc-girar {
	to { transform: rotate(360deg); }
}

.rkscp-orc__nota {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--rkscp-ink-500, #6b6b6b);
}

/* ── Sucesso ───────────────────────────────────────────────── */

.rkscp-orc__ok {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 24px;
	text-align: center;
}

.rkscp-orc__ok-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--rkscp-ink-900, #161616);
	color: var(--rkscp-white, #fff);
}

.rkscp-orc__ok-icone svg {
	width: 26px;
	height: 26px;
}

.rkscp-orc__ok h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.rkscp-orc__protocolo {
	margin: 0;
	padding: 6px 14px;
	background: var(--rkscp-surface, #f2f2f2);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.rkscp-orc__ok-desc {
	margin: 0;
	font-size: 13px;
	color: var(--rkscp-ink-500, #6b6b6b);
	max-width: 30ch;
}

.rkscp-orc__zap {
	margin-top: 8px;
	padding: 12px 22px;
	border-radius: var(--rkscp-radius, 0);
	background: #25d366;
	color: #0b3d1f;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.rkscp-orc { transition-duration: .01ms; }
	.rkscp-orc__enviar.is-loading::after { animation-duration: 2s; }
}

/* ── Etapas ────────────────────────────────────────────────── */

.rkscp-orc__passos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 24px;
}

/* Sem `flex: 1`: os passos deixam de dividir a largura em partes iguais e
   passam a ocupar só o que o texto pede, centralizados como grupo. */
.rkscp-orc__passo {
	display: flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-orc__passo b {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	flex-shrink: 0;
}

.rkscp-orc__passo.is-atual {
	color: var(--rkscp-ink-900, #161616);
}

.rkscp-orc__passo.is-atual b {
	background: var(--rkscp-ink-900, #161616);
	border-color: var(--rkscp-ink-900, #161616);
	color: #fff;
}

/* Etapa concluída: o número vira check e o cliente lê o progresso sem
   precisar contar. */
.rkscp-orc__passo.is-feito b {
	background: var(--rkscp-ink-900, #161616);
	border-color: var(--rkscp-ink-900, #161616);
	color: transparent;
	position: relative;
}

/* O check cresce junto: mantido em ~28% do círculo, senão ele fica perdido
   no meio do espaço novo. */
.rkscp-orc__passo.is-feito b::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

/* fieldset traz borda e margem próprias em todo navegador; sem zerar, cada
   etapa ganharia uma moldura que ninguém pediu.

   O `padding` **não** entra aqui: quem manda nele é a regra do bloco de
   rolagem, lá em cima. Esta regra zerava o padding e, por vir depois com a
   mesma especificidade, desfazia os 24px de lá — o valor era aplicado e
   sobrescrito no mesmo arquivo. */
.rkscp-orc__etapa {
	border: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	/* Era `height: 100%`. Com o rodapé fixo isso passou a medir a altura
	   toda do formulário, incluindo o espaço das ações — a etapa ficava mais
	   alta que o lugar dela e o fim do conteúdo era cortado. `flex` ocupa o
	   que sobra, que é o que a intenção original queria dizer. */
	align-items: stretch;
	justify-content: center;
}

/* Só a etapa 1 fica centralizada na vertical. Nas outras, com campo
   suficiente para rolar, centralizar deixaria o primeiro campo escondido
   acima da dobra. */
.rkscp-orc__etapa[data-orc-etapa="2"],
.rkscp-orc__etapa[data-orc-etapa="3"] {
	justify-content: flex-start;
}

.rkscp-orc__legenda {
	padding: 0;
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rkscp-ink-500, #6b6b6b);
	text-align: center;
}

.rkscp-orc__linha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	min-width: 0;
}

/* Rua ocupa o espaço que o número não precisa: "1980" numa coluna de
   metade da largura é desperdício, e o nome da rua é que fica truncado. */
.rkscp-orc__linha--rua {
	grid-template-columns: 1fr 84px;
}

/* UF são duas letras — dar meia linha a ela roubaria da cidade. */
.rkscp-orc__linha--cidade {
	grid-template-columns: 1fr 92px;
}

/* select precisa herdar o mesmo desenho do input, senão o navegador
   entrega o widget nativo e a etapa 2 fica com dois visuais. */
.rkscp-orc__campo select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-radius, 0);
	background: var(--rkscp-white, #fff);
	color: var(--rkscp-ink-900, #161616);
	font-size: 15px;
	font-family: inherit;
	line-height: 1.2;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 34px;
}

/* A bandeira precisa de fonte que a desenhe; sem esta pilha o Windows
   mostra as duas letras do código do país no lugar do emoji. */
.rkscp-orc__campo select[name="pais"] {
	font-family: "Twemoji Country Flags", "Noto Color Emoji", "Segoe UI Emoji", inherit;
}

/* UF é seleção curta: seta colada no texto desperdiça menos espaço. */
.rkscp-orc__linha--cidade select {
	padding-right: 26px;
	background-position: right 7px center;
}

.rkscp-orc__campo--cep {
	position: relative;
}

/* Spinner enquanto o CEP é consultado.
   :has() porque quem ganha a classe é o input e quem posiciona é o label —
   animar background-image não giraria nada, imagem de fundo não rotaciona. */
.rkscp-orc__campo--cep:has( input.is-buscando )::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 42px;
	width: 15px;
	height: 15px;
	border: 2px solid var(--rkscp-line, #e2e2e2);
	border-top-color: var(--rkscp-ink-900, #161616);
	border-radius: 50%;
	animation: rkscp-orc-girar .6s linear infinite;
	pointer-events: none;
}

@keyframes rkscp-orc-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.rkscp-orc__campo--cep:has( input.is-buscando )::after { animation-duration: 2s; }
}

.rkscp-orc__campo em {
	font-style: normal;
	font-weight: 400;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-orc__acoes {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rkscp-orc__acoes .rkscp-orc__enviar {
	flex: 1;
	margin: 0;
}

.rkscp-orc__voltar-etapa {
	flex: 0 0 auto;
	padding: 14px 18px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-radius, 0);
	background: transparent;
	color: var(--rkscp-ink-700, #3d3d3d);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.rkscp-orc__voltar-etapa:hover {
	border-color: var(--rkscp-ink-900, #161616);
	color: var(--rkscp-ink-900, #161616);
}

/* ── Etapa 1: identificação ────────────────────────────────── */

/* O ícone é o que dá ao passo 1 o peso de uma tela, e não de um campo
   solto no meio do painel. currentColor para herdar o tom do tema. */
.rkscp-orc__icone {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 4px auto 18px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: 50%;
	color: var(--rkscp-ink-900, #161616);
}

.rkscp-orc__icone svg {
	width: 34px;
	height: 34px;
}

.rkscp-orc__campo--email span:first-child {
	text-align: center;
	font-size: 15px;
}

.rkscp-orc__campo--email input {
	text-align: center;
	font-size: 16px;
}

.rkscp-orc__campo--email small {
	text-align: center;
}

/* Botão do preenchimento automático: discreto de propósito. Quem nunca
   comprou não deve sentir que está deixando de fazer algo. */
.rkscp-orc__auto {
	align-self: center;
	margin-top: 2px;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--rkscp-ink-700, #3d3d3d);
	font-family: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.rkscp-orc__auto:hover {
	color: var(--rkscp-ink-900, #161616);
}

.rkscp-orc__auto:disabled {
	opacity: .5;
	cursor: default;
}

.rkscp-orc__codigo {
	padding: 14px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	background: var(--rkscp-surface, #f2f2f2);
}

.rkscp-orc__codigo-msg {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rkscp-ink-700, #3d3d3d);
}

.rkscp-orc__codigo-msg:empty {
	display: none;
}

.rkscp-orc__digitos {
	display: flex;
	gap: 6px;
}

.rkscp-orc__digitos input {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	padding: 0;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-radius, 0);
	background: var(--rkscp-white, #fff);
	color: var(--rkscp-ink-900, #161616);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.rkscp-orc__digitos input:focus {
	outline: 0;
	/* Sem a sombra interna que dobrava a borda: uma borda escura já diz em
	   qual dígito o cursor está. */
	border-color: var(--rkscp-ink-900, #161616);
}

/* ── Campo travado ─────────────────────────────────────────── */

.rkscp-orc__trava {
	position: relative;
	display: block;
}

/* O lápis some quando o campo está aberto: botão que não faz nada é ruído,
   e depois de destravar não há o que destravar. */
.rkscp-orc__editar {
	position: absolute;
	top: 50%;
	right: 8px;
	display: none;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	border: 0;
	border-radius: var(--rkscp-radius, 0);
	background: none;
	color: var(--rkscp-ink-500, #6b6b6b);
	cursor: pointer;
}

.rkscp-orc__editar svg {
	width: 15px;
	height: 15px;
}

.rkscp-orc__editar:hover {
	color: var(--rkscp-ink-900, #161616);
	background: var(--rkscp-surface, #f2f2f2);
}

.rkscp-orc__campo.is-travado .rkscp-orc__editar {
	display: grid;
}

/* Fundo levemente rebaixado marca "isto veio pronto" sem parecer campo
   desabilitado — desabilitado sugere que não dá para mexer, e dá. */
.rkscp-orc__campo.is-travado input {
	padding-right: 42px;
	background: var(--rkscp-surface, #f2f2f2);
	color: var(--rkscp-ink-700, #3d3d3d);
	cursor: default;
}

.rkscp-orc__campo.is-travado input:focus {
	outline: 0;
	border-color: var(--rkscp-line, #e2e2e2);
	box-shadow: none;
}

/* Aviso único no topo do passo, em vez de repetir "salvo" em cada campo. */
.rkscp-orc.tem-perfil .rkscp-orc__etapa[data-orc-etapa="2"] .rkscp-orc__legenda::after,
.rkscp-orc.tem-perfil .rkscp-orc__etapa[data-orc-etapa="3"] .rkscp-orc__legenda::after {
	content: " — dados do seu último pedido";
	font-weight: 400;
	color: var(--rkscp-ink-500, #6b6b6b);
}

/* Caixinha de manter a sessão. Discreta: a decisão é do cliente, e uma
   opção em destaque empurraria para o lado mais permissivo. */
.rkscp-orc__lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--rkscp-ink-500, #6b6b6b);
	cursor: pointer;
}

.rkscp-orc__lembrar input {
	width: 15px;
	height: 15px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--rkscp-ink-900, #161616);
	cursor: pointer;
}

/* Saída discreta: quem tem o código deve seguir por ele, mas quem perdeu o
   acesso ao e-mail não pode ficar sem conseguir pedir orçamento. */
.rkscp-orc__pular {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rkscp-ink-500, #6b6b6b);
	font-family: inherit;
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.rkscp-orc__pular:hover {
	color: var(--rkscp-ink-900, #161616);
}

/* ── Cartão de identidade ──────────────────────────────────── */

.rkscp-orc__identidade {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 24px 4px;
	padding: 10px 14px;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	background: var(--rkscp-surface, #f2f2f2);
	font-size: 13px;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-orc__identidade strong {
	color: var(--rkscp-ink-900, #161616);
	word-break: break-all;
}

.rkscp-orc__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--rkscp-ink-700, #3d3d3d);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	flex-shrink: 0;
}

.rkscp-orc__link:hover {
	color: var(--rkscp-ink-900, #161616);
}

/* Fora da etapa 1 a caixa de código ocupa o lugar do formulário, então
   precisa do mesmo respiro que os fieldsets têm. */
.rkscp-orc__codigo {
	margin-top: 4px;
}

/* Para quem o código foi. Ocupa o lugar que o campo de e-mail deixou. */
.rkscp-orc__codigo-alvo {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-orc__codigo-alvo strong {
	display: block;
	color: var(--rkscp-ink-900, #161616);
	word-break: break-all;
}

.rkscp-orc__codigo-acoes {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}