/*
 * Raquete por Perto: o visual da marca e o layout comum das páginas. As fontes, as cores, os espaços e os cantos
 * seguem os tokens da identidade visual (tokens.json). Os componentes (rpp-botao, rpp-selo e rpp-card) ficam em
 * componentes.css, uma cópia do bundle.css da identidade visual.
 *
 * O celular vem primeiro: a navegação fica presa no pé da tela, como nos esboços. A partir de 768px de largura, ela
 * sobe para o cabeçalho.
 */

@font-face {
	font-family: "Sofia Sans";
	src: url("../fontes/SofiaSans-VF.woff2") format("woff2");
	font-weight: 1 1000;
	font-display: swap;
}

@font-face {
	font-family: "Sofia Sans Extra Condensed";
	src: url("../fontes/SofiaSansExtraCondensed-VF.woff2") format("woff2");
	font-weight: 1 1000;
	font-display: swap;
}

:root {
	/* Cores */
	--saibro: #be4f27;
	--pinho: #0f3b2e;
	--bola: #dcf14b;
	--giz: #eef2ee;
	--branco: #ffffff;
	--musgo: #4e6b60;
	--divisor: #d5ddd8;
	--texto-sobre-saibro: var(--branco);
	--texto-sobre-bola: var(--pinho);

	/* Fontes: display nos títulos e preços, texto no resto */
	--font-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	--font-texto: "Sofia Sans", system-ui, sans-serif;

	/* Espaços */
	--espaco-1: 8px;
	--espaco-2: 16px;
	--espaco-3: 24px;
	--espaco-4: 40px;

	/* Cantos */
	--raio-selo: 4px;
	--raio-card: 12px;
	--raio-pilula: 999px;

	/* Layout */
	--largura-maxima: 1120px;
	--altura-navegacao: 64px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Estilo corpo, sobre o fundo giz */
body {
	margin: 0;
	background: var(--giz);
	color: var(--pinho);
	font-family: var(--font-texto);
	font-size: 16px;
	line-height: 24px;
}

/* Estilos titulo-1, titulo-2 e titulo-3, só com a primeira letra maiúscula */
h1,
h2,
h3 {
	margin: 0;
	font-family: var(--font-display);
}

h1 {
	font-size: 40px;
	line-height: 42px;
	font-weight: 800;
}

h2 {
	font-size: 28px;
	line-height: 30px;
	font-weight: 800;
}

h3 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}

img {
	max-width: 100%;
}

/* Foco do teclado: anel sólido de 2px em pinho, afastado 2px do elemento */
:focus-visible {
	outline: 2px solid var(--pinho);
	outline-offset: 2px;
}

.icone {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Cabeçalho: a logo e, na tela larga, a navegação */
.cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espaco-2);
	padding: var(--espaco-2);
	background: var(--branco);
	border-bottom: 1px solid var(--divisor);
}

.cabecalho-logo img {
	display: block;
	width: 150px;
	height: auto;
}

/* Navegação principal: no celular, presa no pé da tela. A página atual fica em saibro, com uma barra em cima. */
.navegacao {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: var(--altura-navegacao);
	background: var(--branco);
	border-top: 1px solid var(--divisor);
}

.navegacao a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--musgo);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	text-decoration: none;
}

.navegacao a[aria-current="page"] {
	color: var(--saibro);
	box-shadow: inset 0 3px 0 var(--saibro);
}

body:has(.navegacao) {
	padding-bottom: var(--altura-navegacao);
}

/* Conteúdo da página, centralizado na tela larga */
.conteudo {
	max-width: var(--largura-maxima);
	margin: 0 auto;
	padding: var(--espaco-3) var(--espaco-2) var(--espaco-4);
}

/* Coluna estreita, para as páginas de formulário, como a de entrar */
.conteudo-estreito {
	max-width: 528px;
}

.introducao {
	margin: var(--espaco-1) 0 var(--espaco-3);
	color: var(--musgo);
}

/* Formulários, como no esboço do anunciar: rótulo em cima, campo branco com borda musgo, dica e erro embaixo */
.formulario {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
}

.formulario[hidden] {
	display: none;
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.campo[hidden] {
	display: none;
}

.campo label {
	font-weight: 600;
}

.campo input,
.campo select {
	width: 100%;
	height: 48px;
	padding: 0 var(--espaco-2);
	border: 1px solid var(--musgo);
	border-radius: var(--raio-card);
	background-color: var(--branco);
	color: var(--pinho);
	font: inherit;
}

.campo input::placeholder {
	color: var(--musgo);
	opacity: 1;
}

/* O select troca a seta do sistema pela seta em pinho. A opção longa, como o encordoamento com a descrição, termina em
   reticências */
.campo select {
	appearance: none;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 20px;
}

/* Campo com erro: borda em saibro, mais grossa, e a mensagem embaixo, no lugar da dica */
.campo [aria-invalid="true"] {
	border-color: var(--saibro);
	box-shadow: inset 0 0 0 1px var(--saibro);
}

.campo [aria-invalid="true"] ~ .dica {
	display: none;
}

.dica,
.campo-erro {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
}

.dica {
	color: var(--musgo);
	font-weight: 500;
}

.campo-erro {
	font-weight: 700;
}

/* Erro do formulário que não é de um campo, como "E-mail ou senha incorretos." */
.aviso-formulario {
	margin: 0;
	padding: 12px var(--espaco-2);
	border: 1px solid var(--saibro);
	border-radius: var(--raio-card);
	background: var(--branco);
	font-weight: 600;
}

/* Botão com cara de link, em pinho sublinhado */
.botao-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pinho);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.campo .botao-link {
	align-self: flex-start;
}

.troca {
	margin: 0;
	text-align: center;
}

/* Continuar com Google, separado do formulário por um "ou" */
.google {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
	margin-bottom: var(--espaco-3);
}

.google[hidden] {
	display: none;
}

.botao-google {
	display: flex;
	justify-content: center;
	min-height: 44px;
}

.divisor-ou {
	display: flex;
	align-items: center;
	gap: var(--espaco-2);
	margin: 0;
	color: var(--musgo);
	font-size: 13px;
	line-height: 18px;
}

.divisor-ou::before,
.divisor-ou::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--divisor);
}

.conta-google {
	margin: 0;
}

/* Some da tela, mas continua para o leitor de tela e para o JavaScript */
.visualmente-escondido {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* O título que recebe o foco ao trocar de passo não ganha o anel de foco */
[tabindex="-1"]:focus {
	outline: none;
}

a.rpp-botao {
	text-decoration: none;
}

/* O display do componente não pode vencer o atributo hidden */
.rpp-botao[hidden] {
	display: none;
}

.botao-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-card);
	background: none;
	color: var(--pinho);
	cursor: pointer;
}

fieldset.campo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

fieldset.campo legend {
	margin-bottom: 6px;
	padding: 0;
	font-weight: 600;
}

/* Pílulas: escolhas como o esporte e as etiquetas. A escolhida fica em pinho. */
.pilulas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1);
}

/* O radio e o checkbox somem, mas ficam dentro da pílula: sem o position relative, os da linha que rola vazariam
   para fora dela e alargariam a página */
.pilula,
.segmentos label {
	position: relative;
}

.pilula input,
.segmentos input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pilula span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 var(--espaco-2);
	border: 1px solid var(--musgo);
	border-radius: var(--raio-pilula);
	background: var(--branco);
	cursor: pointer;
}

.pilula input:checked + span {
	border-color: var(--pinho);
	background: var(--pinho);
	color: var(--branco);
}

.icone-check {
	display: none;
	width: 18px;
	height: 18px;
}

.pilula input:checked + span .icone-check {
	display: block;
}

/* Na edição do anúncio, o esporte e a categoria ficam travados (RN01): o escolhido fica, e os outros apagam */
.pilula input:disabled + span {
	cursor: default;
}

.pilula input:disabled:not(:checked) + span {
	opacity: 0.45;
}

.campo select[name="idCategoria"]:disabled {
	opacity: 1;
	background-color: var(--giz);
	color: var(--pinho);
	cursor: default;
}

/* Segmentos: uma escolha entre poucas opções, como o estado de conservação */
.segmentos {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	padding: 4px;
	border: 1px solid var(--musgo);
	border-radius: var(--raio-card);
	background: var(--branco);
}

.segmentos span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 8px;
	cursor: pointer;
}

.segmentos input:checked + span {
	background: var(--pinho);
	color: var(--branco);
}

.pilula input:focus-visible + span,
.segmentos input:focus-visible + span {
	outline: 2px solid var(--pinho);
	outline-offset: 2px;
}

fieldset[aria-invalid="true"] .pilula span,
fieldset[aria-invalid="true"] .segmentos {
	border-color: var(--saibro);
}

/* Campo com prefixo (R$) ou sufixo (g) dentro da caixa */
.entrada {
	position: relative;
}

.entrada-prefixo,
.entrada-sufixo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--musgo);
	pointer-events: none;
}

.entrada-prefixo {
	left: var(--espaco-2);
}

.entrada-sufixo {
	right: var(--espaco-2);
}

.campo .entrada-com-prefixo input {
	padding-left: 48px;
}

.campo .entrada-com-sufixo input {
	padding-right: 40px;
}

.campos-lado-a-lado {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Cartão branco sobre o giz, com a borda divisor */
.cartao {
	margin: 0;
	padding: var(--espaco-2);
	border: 1px solid var(--divisor);
	border-radius: var(--raio-card);
	background: var(--branco);
}

/* Lista de detalhes: o nome em musgo à esquerda e o valor em pinho à direita, com linhas entre eles */
.lista-detalhes div {
	display: flex;
	justify-content: space-between;
	gap: var(--espaco-2);
	padding: 12px 0;
	border-bottom: 1px solid var(--divisor);
}

.lista-detalhes div:first-child {
	padding-top: 0;
}

.lista-detalhes div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.lista-detalhes dt {
	color: var(--musgo);
}

.lista-detalhes dd {
	margin: 0;
	text-align: right;
}

/* Detalhe de texto longo, como a descrição na revisão do anunciar: o texto vai embaixo do nome */
.lista-detalhes .detalhe-longo {
	flex-direction: column;
	gap: 4px;
}

.lista-detalhes .detalhe-longo dd {
	text-align: left;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.lista-avisos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}

.lista-avisos li {
	display: flex;
	gap: 12px;
}

/* Anunciar em 3 passos (telas 5 a 7). No celular, a página ocupa a tela toda, sem o cabeçalho do site: a barra do
   topo tem o fechar ou o voltar, e os botões ficam presos no pé da tela. */
body.pagina-foco {
	padding-bottom: 0;
}

.pagina-foco .cabecalho {
	display: none;
}

.anunciar {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	padding-bottom: 0;
}

.barra-passos {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	margin: calc(-1 * var(--espaco-3)) calc(-1 * var(--espaco-2)) var(--espaco-2);
	padding: 6px var(--espaco-1);
	border-bottom: 1px solid var(--divisor);
	background: var(--branco);
}

.barra-passos-titulo {
	margin: 0;
	font-weight: 600;
	text-align: center;
}

.progresso {
	margin-bottom: var(--espaco-3);
}

.progresso[hidden] {
	display: none;
}

.progresso-rotulo {
	margin: 0 0 var(--espaco-1);
	color: var(--musgo);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.progresso-barras {
	display: flex;
	gap: var(--espaco-1);
}

.progresso-barras span {
	flex: 1;
	height: 6px;
	border-radius: var(--raio-pilula);
	background: var(--divisor);
}

.progresso-barras .feita {
	background: var(--pinho);
}

.passo {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.passo[hidden] {
	display: none;
}

.passo p {
	margin: 0;
}

/* Título dos passos, no estilo titulo-2 */
.titulo-passo {
	font-size: 28px;
	line-height: 30px;
}

.passo .introducao {
	margin: 0;
}

.grade-fotos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: var(--espaco-1) 0 0;
	padding: 0;
	list-style: none;
}

.grade-fotos > li {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--raio-card);
}

.foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.foto-capa {
	position: absolute;
	bottom: var(--espaco-1);
	left: var(--espaco-1);
	padding: 2px var(--espaco-1);
	border-radius: var(--raio-selo);
	background: var(--pinho);
	color: var(--branco);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
}

.foto-remover {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-pilula);
	background: var(--branco);
	color: var(--pinho);
	cursor: pointer;
}

.foto-remover .icone {
	width: 20px;
	height: 20px;
}

.foto-adicionar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	border: 2px dashed var(--musgo);
	border-radius: var(--raio-card);
	background: var(--branco);
	color: var(--pinho);
	font: inherit;
	cursor: pointer;
}

.foto-adicionar .icone {
	width: 28px;
	height: 28px;
}

.foto-preparando,
.foto-vaga {
	border: 2px dashed var(--divisor);
}

.foto-preparando {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--musgo);
	font-size: 13px;
}

.dados-tecnicos {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.dados-tecnicos[hidden],
.dados-tecnicos .campo[hidden] {
	display: none;
}

.dados-tecnicos h2 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}

.dados-tecnicos .dica {
	margin-top: calc(-1 * var(--espaco-1));
}

.previa {
	width: 100%;
	max-width: 240px;
	margin: 0 auto;
}

.acoes-passo {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: auto calc(-1 * var(--espaco-2)) 0;
	padding: var(--espaco-2);
	border-top: 1px solid var(--divisor);
	background: var(--branco);
}

.acoes-passo[hidden] {
	display: none;
}

/* Espaço entre o fim do passo e a barra dos botões */
.anunciar .passo:not([hidden]) {
	margin-bottom: var(--espaco-4);
}

/* Busca (tela 1). O cabeçalho e o topo da busca formam uma área branca só, como no esboço. */
.pagina-busca .cabecalho {
	border-bottom: 0;
}

.chip-cidade {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 44px;
	padding: 0 var(--espaco-2) 0 12px;
	border: 1px solid var(--pinho);
	border-radius: var(--raio-pilula);
	background: var(--branco);
	color: var(--pinho);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.chip-cidade .icone {
	width: 20px;
	height: 20px;
}

#chip-cidade-texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topo-busca {
	padding: var(--espaco-1) var(--espaco-2) var(--espaco-3);
	border-bottom: 1px solid var(--divisor);
	background: var(--branco);
}

.topo-busca h1 {
	margin-bottom: var(--espaco-3);
}

.busca-texto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 640px;
}

.busca-texto label {
	font-weight: 500;
}

.entrada-com-icone .icone {
	position: absolute;
	top: 50%;
	left: var(--espaco-2);
	transform: translateY(-50%);
	color: var(--musgo);
	pointer-events: none;
}

.busca-texto input {
	width: 100%;
	height: 56px;
	padding: 0 var(--espaco-2) 0 52px;
	border: 1px solid var(--musgo);
	border-radius: var(--raio-card);
	background: var(--branco);
	color: var(--pinho);
	font: inherit;
}

.busca-texto input::placeholder {
	color: var(--musgo);
	opacity: 1;
}

.filtros {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: var(--espaco-4);
}

.filtro-esporte {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* No celular, os esportes ficam numa linha que rola para o lado */
.pilulas-rolagem {
	flex-wrap: nowrap;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--espaco-2));
	padding: 2px var(--espaco-2) 4px;
	scrollbar-width: none;
}

.pilulas-rolagem::-webkit-scrollbar {
	display: none;
}

.pilulas-rolagem .pilula {
	flex: none;
}

.filtros-linha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1);
}

.chip-select,
.chip-botao {
	height: 44px;
	padding: 0 var(--espaco-2);
	border: 1px solid var(--musgo);
	border-radius: var(--raio-pilula);
	background-color: var(--branco);
	color: var(--pinho);
	font: inherit;
	cursor: pointer;
}

/* O filtro escolhido fica em pinho, como a pílula escolhida */
.chip-select {
	appearance: none;
	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='%230f3b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.chip-select.ativo {
	border-color: var(--pinho);
	background-color: var(--pinho);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	color: var(--branco);
}

.chip-select option,
.ordem option {
	background: var(--branco);
	color: var(--pinho);
}

.chip-botao {
	display: inline-flex;
	align-items: center;
	gap: var(--espaco-1);
}

.chip-botao[hidden] {
	display: none;
}

.chip-botao .icone {
	width: 20px;
	height: 20px;
}

/* O botão Filtros fica em pinho quando está ativo um filtro que só aparece no painel, como a marca ou o encordoamento */
.chip-botao.ativo {
	border-color: var(--pinho);
	background-color: var(--pinho);
	color: var(--branco);
}

/* No painel, os filtros que só valem na raquete de tênis: marca, modelo e encordoamento */
.filtros-tenis {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
}

.filtros-tenis[hidden] {
	display: none;
}

.resultados-cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espaco-1) var(--espaco-2);
	margin-bottom: var(--espaco-3);
}

/* No celular, o título fica sozinho na linha, e o Criar alerta e a ordem, embaixo dele */
.resultados-cabecalho h2 {
	flex: 1 1 100%;
}

.resultados-cabecalho .ordem {
	margin-left: auto;
}

.ordem {
	appearance: none;
	padding: var(--espaco-1) 28px var(--espaco-1) var(--espaco-1);
	border: 0;
	border-radius: var(--raio-card);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 18px;
	color: var(--pinho);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* Os cards em grade: 2 por linha no celular */
.grade-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--espaco-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.grade-cards > li {
	display: flex;
}

.grade-cards .rpp-card {
	flex: 1;
}

.grade-cards .rpp-card-titulo {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Enquanto a busca nova não chega, a lista anterior fica apagada */
.grade-cards[aria-busy="true"] {
	opacity: 0.5;
}

/* Anúncio reservado continua na busca com a faixa Reservado (UC06 A2) */
.selo-reservado {
	background: var(--musgo);
	color: var(--branco);
}

/* Nos favoritos, o coração em saibro, num círculo branco por cima da foto, tira o anúncio da lista */
.favorito {
	position: relative;
}

.botao-desfavoritar {
	position: absolute;
	top: var(--espaco-1);
	right: var(--espaco-1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--divisor);
	border-radius: 50%;
	background: var(--branco);
	color: var(--saibro);
	cursor: pointer;
}

.botao-desfavoritar .icone {
	width: 22px;
	height: 22px;
}

.botao-desfavoritar:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.aviso-busca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espaco-1);
	text-align: center;
}

.aviso-busca[hidden] {
	display: none;
}

.aviso-busca p {
	margin: 0;
}

.aviso-busca-titulo {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}

.aviso-busca-acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espaco-1);
	margin-top: var(--espaco-1);
}

.ver-mais {
	display: flex;
	margin: var(--espaco-3) auto 0;
}

/* Convite para instalar o app: no celular, o botão fica embaixo do texto */
.convite-app {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 44px;
	grid-template-areas:
		"icone texto fechar"
		"botao botao botao";
	align-items: center;
	gap: 12px;
	margin-bottom: var(--espaco-3);
}

.convite-app[hidden] {
	display: none;
}

.convite-app img {
	grid-area: icone;
	display: block;
}

.convite-app-texto {
	grid-area: texto;
}

.convite-app-texto p {
	margin: 0;
}

.convite-app-titulo {
	font-weight: 600;
}

.convite-app .rpp-botao {
	grid-area: botao;
}

.convite-app .botao-icone {
	grid-area: fechar;
}

.passos-instalar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-left: var(--espaco-3);
}

/* Painéis (a cidade da busca e os filtros): no celular, sobem do pé da tela */
.painel {
	width: 100%;
	max-width: 100%;
	max-height: 92dvh;
	margin: auto 0 0;
	padding: var(--espaco-2) var(--espaco-2) var(--espaco-3);
	border: 0;
	border-radius: 16px 16px 0 0;
	background: var(--giz);
	color: var(--pinho);
}

.painel::backdrop {
	background: rgb(15 59 46 / 45%);
}

.painel-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-right: calc(-1 * var(--espaco-1));
}

.painel-cabecalho h2 {
	font-size: 28px;
	line-height: 30px;
}

.painel-acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.painel-texto {
	margin: 0;
}

.campo textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px var(--espaco-2);
	border: 1px solid var(--musgo);
	border-radius: var(--raio-card);
	background: var(--branco);
	color: var(--pinho);
	font: inherit;
	resize: vertical;
}

.botao-icone[hidden] {
	display: none;
}

/* Estilo legenda: bairro, distância e data, em musgo */
.legenda {
	margin: 0;
	color: var(--musgo);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
}

/* Página do anúncio (tela 2). No celular, como no anunciar: sem o cabeçalho do site, com a barra do topo, e as fotos de
   ponta a ponta, passando com o dedo. */
.anuncio {
	padding-top: 0;
}

.barra-anuncio {
	display: grid;
	grid-template-columns: 44px 1fr 44px 44px;
	align-items: center;
	margin: 0 calc(-1 * var(--espaco-2));
	padding: 6px var(--espaco-1);
	border-bottom: 1px solid var(--divisor);
	background: var(--branco);
}

#botao-compartilhar {
	grid-column: 3;
}

#botao-favoritar {
	grid-column: 4;
}

#botao-favoritar[aria-pressed="true"] {
	color: var(--saibro);
}

.anuncio-carregando {
	margin: var(--espaco-4) 0;
	color: var(--musgo);
	text-align: center;
}

.anuncio #nao-encontrado {
	margin-top: var(--espaco-3);
}

.anuncio-conteudo {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
}

.anuncio-conteudo[hidden] {
	display: none;
}

.galeria {
	position: relative;
	margin: 0 calc(-1 * var(--espaco-2));
	background: var(--divisor);
}

.galeria-fotos {
	display: flex;
	aspect-ratio: 4 / 3;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.galeria-fotos::-webkit-scrollbar {
	display: none;
}

/* A foto aparece inteira, sem corte, porque o comprador quer ver o item todo */
.galeria-fotos img {
	flex: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: start;
}

.galeria-contador {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 2px 10px;
	border-radius: var(--raio-pilula);
	background: var(--pinho);
	color: var(--branco);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
}

.galeria-botao {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-pilula);
	background: rgb(255 255 255 / 90%);
	color: var(--pinho);
	transform: translateY(-50%);
	cursor: pointer;
}

.galeria-botao[hidden] {
	display: none;
}

.galeria-anterior {
	left: 12px;
}

.galeria-proxima {
	right: 12px;
}

/* Na tela de toque, as fotos passam com o dedo, sem os botões */
@media (pointer: coarse) {
	.galeria-botao {
		display: none;
	}
}

.anuncio-info {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.anuncio-selos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1);
}

.anuncio-selos:empty {
	display: none;
}

.anuncio-info h1 {
	font-size: 28px;
	line-height: 30px;
}

/* Estilo preco */
.anuncio-preco {
	margin: 0;
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 28px;
	font-weight: 800;
}

.etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.etiquetas:empty {
	display: none;
}

.etiqueta {
	padding: 6px 14px;
	border: 1px solid var(--pinho);
	border-radius: var(--raio-pilula);
	background: var(--branco);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.anuncio-secao {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--espaco-1);
}

.anuncio-secao[hidden] {
	display: none;
}

.anuncio-secao h2 {
	font-size: 20px;
	line-height: 24px;
}

/* A descrição mantém as quebras de linha do vendedor */
.descricao {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.vendedor {
	display: flex;
	align-items: center;
	gap: var(--espaco-2);
}

.vendedor p {
	margin: 0;
}

.vendedor-nome {
	font-weight: 600;
}

.avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pinho);
	color: var(--branco);
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
}

.seguranca {
	display: flex;
	gap: 12px;
	border: 1.5px solid var(--pinho);
}

.seguranca p {
	margin: 0;
}

.seguranca-titulo {
	font-weight: 600;
}

.acoes-anuncio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espaco-3);
	margin-top: var(--espaco-1);
}

.acoes-anuncio[hidden] {
	display: none;
}

.aviso-dono {
	margin: 0;
}

.aviso-dono a {
	color: var(--saibro);
	font-weight: 600;
}

/* Perfil (tela 3). No celular, a página começa pelo topo do perfil, sem a logo, e a navegação continua no pé da tela */
@media (max-width: 767px) {
	.pagina-sem-logo .cabecalho {
		padding: 0;
		border: 0;
	}

	.pagina-sem-logo .cabecalho-logo {
		display: none;
	}
}

.perfil-topo {
	display: flex;
	align-items: center;
	gap: var(--espaco-2);
	padding: var(--espaco-3) var(--espaco-2);
	border-bottom: 1px solid var(--divisor);
	background: var(--branco);
}

.perfil-topo[hidden] {
	display: none;
}

.perfil-topo h1 {
	font-size: 32px;
	line-height: 34px;
}

.perfil-topo p {
	margin: 0;
}

.perfil-local {
	color: var(--musgo);
}

.avatar-grande {
	width: 72px;
	height: 72px;
	font-size: 32px;
}

/* A foto de perfil preenche o círculo do avatar */
.avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* No perfil, a foto é um botão que abre o painel para trocar, com a câmera no canto */
.avatar-botao {
	position: relative;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.avatar-camera {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--divisor);
	border-radius: 50%;
	background: var(--branco);
	color: var(--pinho);
}

.avatar-camera .icone {
	width: 16px;
	height: 16px;
}

/* O nome e o local ocupam o meio do topo, e o lápis fica no canto, como no esboço */
.perfil-quem {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

.botao-editar-perfil {
	flex: none;
	align-self: flex-start;
	border: 1px solid var(--pinho);
	border-radius: 50%;
}

/* No painel da conta: a situação da localização, os botões de usar e tirar e o link da senha */
.localizacao-situacao {
	font-weight: 600;
}

.localizacao-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--espaco-2);
}

.painel-link {
	align-self: center;
}

.perfil-conteudo {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
}

.perfil-conteudo[hidden] {
	display: none;
}

/* Avaliação pendente (UC09), como no esboço: a pergunta à esquerda e o botão Avaliar à direita */
.pendentes {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.pendentes[hidden] {
	display: none;
}

.pendente {
	display: flex;
	align-items: center;
	gap: var(--espaco-2);
}

.pendente-textos {
	flex: 1;
	min-width: 0;
}

.pendente-textos p {
	margin: 0;
	overflow-wrap: anywhere;
}

.pendente .rpp-botao {
	flex: none;
}

.cota {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cota-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espaco-1) var(--espaco-2);
}

.cota-topo h2 {
	font-size: 20px;
	line-height: 24px;
}

.cota-topo p {
	margin: 0;
}

.barra-cota {
	height: 10px;
	overflow: hidden;
	border-radius: var(--raio-pilula);
	background: var(--divisor);
}

.barra-cota span {
	display: block;
	height: 100%;
	background: var(--pinho);
}

/* Abas do perfil, como no esboço: no celular, uma faixa branca de ponta a ponta. A aba atual fica em pinho, sublinhada
   em saibro. */
/* Nos celulares mais estreitos, as abas rolam para o lado, como os esportes da busca */
.abas {
	display: flex;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--espaco-2));
	padding: 0 var(--espaco-1);
	border-top: 1px solid var(--divisor);
	border-bottom: 1px solid var(--divisor);
	background: var(--branco);
	scrollbar-width: none;
}

.abas::-webkit-scrollbar {
	display: none;
}

.aba {
	flex: none;
	height: 48px;
	padding: 0 var(--espaco-1);
	border: 0;
	background: none;
	color: var(--musgo);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.aba:hover,
.aba[aria-selected="true"] {
	color: var(--pinho);
}

/* A sublinha é um fundo, e não uma sombra interna, que deixa um risco nas laterais quando a tela está em escala */
.aba[aria-selected="true"] {
	background: linear-gradient(var(--saibro), var(--saibro)) bottom / 100% 3px no-repeat;
}

.secao-perfil {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.secao-perfil[hidden] {
	display: none;
}

.meus-anuncios,
.avaliacoes,
.alertas {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* As notificações neste aparelho, no alto da aba Alertas */
.aviso-notificacoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.aviso-notificacoes[hidden] {
	display: none;
}

.aviso-notificacoes p {
	flex: 1 1 200px;
	margin: 0;
}

/* Um alerta: o que ele procura, os outros filtros, a área e as ações */
.alerta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.alerta p {
	margin: 0;
}

.alerta .meu-anuncio-acoes {
	margin-top: 12px;
}

.meu-anuncio {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
}

.meu-anuncio-resumo {
	display: flex;
	gap: var(--espaco-2);
	color: inherit;
	text-decoration: none;
}

.meu-anuncio-resumo img {
	flex: none;
	width: 96px;
	height: 72px;
	border-radius: var(--espaco-1);
	background: var(--giz);
	object-fit: cover;
}

.meu-anuncio-resumo p {
	margin: 0;
}

.meu-anuncio-titulo {
	font-size: 20px;
	line-height: 24px;
}

.meu-anuncio-preco {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 28px;
	font-weight: 800;
}

/* A situação do anúncio, com a bolinha da cor do esboço: pinho no ativo, saibro no reservado e musgo no resto */
.situacao {
	display: flex;
	align-items: center;
	gap: var(--espaco-1);
	font-size: 14px;
	line-height: 20px;
}

.situacao::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--musgo);
}

.situacao-ativo::before {
	background: var(--pinho);
}

.situacao-reservado::before,
.situacao-removido::before {
	background: var(--saibro);
}

.meu-anuncio-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1);
}

.acao {
	height: 44px;
	padding: 0 var(--espaco-2);
}

.acao-mais {
	width: 44px;
	padding: 0;
}

/* Avaliação recebida: o selo positiva (pinho) ou negativa (saibro) e quem avaliou, o comentário, a venda e a data */
.avaliacao {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-1);
}

.avaliacao-topo {
	display: flex;
	align-items: center;
	gap: var(--espaco-1);
}

.avaliacao-autor {
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.avaliacao-comentario {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.selo-positiva {
	background: var(--pinho);
	color: var(--branco);
}

.selo-negativa {
	background: var(--saibro);
	color: var(--texto-sobre-saibro);
}

.sair {
	align-self: center;
	margin-top: var(--espaco-2);
}

/* Lista de escolhas com o radio à mostra, como os compradores do vender */
.lista-opcoes {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--divisor);
	border-radius: var(--raio-card);
	background: var(--branco);
}

.lista-opcoes label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px var(--espaco-2);
	border-bottom: 1px solid var(--divisor);
	cursor: pointer;
}

.lista-opcoes label:last-child {
	border-bottom: 0;
}

.lista-opcoes input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--pinho);
}

.lista-acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Faixa com o erro ou o aviso (mostrarErro e mostrarMensagem, em api.js), acima da navegação */
.faixa-aviso {
	position: fixed;
	right: var(--espaco-2);
	bottom: calc(var(--altura-navegacao) + var(--espaco-2));
	left: var(--espaco-2);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--espaco-1);
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 8px 12px var(--espaco-2);
	background: var(--pinho);
	color: var(--branco);
	border-radius: var(--raio-card);
}

.faixa-aviso[hidden] {
	display: none;
}

.faixa-aviso p {
	flex: 1;
	margin: 0;
}

.faixa-aviso button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-card);
	background: none;
	color: inherit;
	cursor: pointer;
}

.faixa-aviso :focus-visible {
	outline-color: var(--branco);
}

/* Tela larga: a navegação sobe para o cabeçalho, e a página atual ganha a barra embaixo */
@media (min-width: 768px) {
	.cabecalho {
		min-height: var(--altura-navegacao);
		padding: 0 max(var(--espaco-3), calc((100% - var(--largura-maxima)) / 2 + var(--espaco-3)));
	}

	.cabecalho-logo img {
		width: 176px;
	}

	.navegacao {
		position: static;
		display: flex;
		align-self: stretch;
		height: auto;
		background: none;
		border-top: 0;
	}

	.navegacao a {
		flex-direction: row;
		gap: var(--espaco-1);
		padding: 0 var(--espaco-2);
		font-size: 16px;
		line-height: 24px;
	}

	.navegacao a:not([aria-current="page"]):hover {
		color: var(--pinho);
	}

	.navegacao a[aria-current="page"] {
		box-shadow: inset 0 -3px 0 var(--saibro);
	}

	body:has(.navegacao) {
		padding-bottom: 0;
	}

	.conteudo {
		padding: var(--espaco-4) var(--espaco-3);
	}

	.faixa-aviso {
		bottom: var(--espaco-3);
	}

	/* No anunciar, a tela larga mostra o cabeçalho do site, e os botões seguem o fim do passo */
	.pagina-foco .cabecalho {
		display: flex;
	}

	.anunciar {
		min-height: 0;
		padding-bottom: var(--espaco-4);
	}

	.barra-passos {
		grid-template-columns: 44px 1fr;
		margin: 0 0 var(--espaco-2) -12px;
		padding: 0;
		border-bottom: 0;
		background: none;
	}

	.barra-passos-titulo {
		text-align: left;
	}

	.acoes-passo {
		position: static;
		margin: 0;
		padding: 0;
		border-top: 0;
		background: none;
	}

	/* Na busca, a cidade fica ao lado da logo, os esportes quebram linha e a grade ganha 3 colunas */
	.chip-cidade {
		margin-right: auto;
		margin-left: var(--espaco-3);
	}

	.topo-busca {
		padding: var(--espaco-1) max(var(--espaco-3), calc((100% - var(--largura-maxima)) / 2 + var(--espaco-3)))
			var(--espaco-4);
	}

	.pilulas-rolagem {
		flex-wrap: wrap;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.grade-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--espaco-3);
	}

	.painel {
		max-width: 480px;
		margin: auto;
		padding: var(--espaco-3);
		border-radius: var(--raio-card);
	}

	/* No anúncio, as fotos ficam ao lado dos dados e acompanham a rolagem */
	.barra-anuncio {
		margin: 0 0 var(--espaco-2) -12px;
		padding: 0;
		border-bottom: 0;
		background: none;
	}

	.anuncio {
		padding-top: var(--espaco-3);
	}

	.anuncio-conteudo {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--espaco-4);
	}

	.galeria {
		position: sticky;
		top: var(--espaco-3);
		margin: 0;
		overflow: hidden;
		border-radius: var(--raio-card);
	}

	/* No perfil, o topo segue a largura do conteúdo, as abas ficam só com a linha embaixo, e as listas ganham 2 colunas */
	.perfil-topo {
		padding: var(--espaco-4) max(var(--espaco-3), calc((100% - var(--largura-maxima)) / 2 + var(--espaco-3)));
	}

	.abas {
		margin: 0;
		padding: 0;
		border-top: 0;
		background: none;
	}

	.meus-anuncios,
	.avaliacoes,
	.alertas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.convite-app {
		grid-template-columns: 48px minmax(0, 1fr) auto 44px;
		grid-template-areas: "icone texto botao fechar";
	}

	.resultados-cabecalho h2 {
		flex: 1 1 0;
	}

	.resultados-cabecalho .ordem {
		margin-left: 0;
	}

	.aba {
		padding: 0 var(--espaco-2);
	}
}

/* Tela bem larga: 4 cards por linha */
@media (min-width: 1100px) {
	.grade-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}