/* =====================================================================
   PEDEJÁ — PÁGINAS INTERNAS DO CLIENTE (bairros, ...)  prefixo pj-
   Fonte e barra de baixo vêm do css/pj-global.css (header.php).
   ===================================================================== */

body.pj-pagina { background: #f4f4f6 !important; }

.pj-pag {
	--pj-txt: #1d1d1f;
	--pj-txt-2: #6e6e73;
	--pj-borda: #ececf0;
	display: block;
	clear: both;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 16px 24px;
	box-sizing: border-box;
	color: var(--pj-txt);
}

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

.pj-pag h1,
.pj-pag h2,
.pj-pag p,
.pj-pag label {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	color: inherit;
	letter-spacing: normal;
}

.pj-pag [hidden] { display: none !important; }

.pj-pag__topo { padding: 4px 4px 16px; }
.pj-pag__titulo { font-size: 22px !important; font-weight: 800 !important; line-height: 1.2; }
.pj-pag__sub { margin-top: 4px !important; font-size: 14px !important; color: var(--pj-txt-2) !important; }

/* ---------- busca ---------- */
.pj-busca {
	position: sticky;
	top: 68px;
	z-index: 5;
	display: flex !important;
	align-items: center;
	gap: 10px;
	height: 50px;
	margin-bottom: 16px !important;
	padding: 0 16px !important;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px -6px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--pj-borda);
	cursor: text;
}

.pj-busca svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--pj-txt-2); }

.pj-busca input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: var(--pj-txt);
	-webkit-appearance: none;
	appearance: none;
}

/* ---------- lista em card ---------- */
.pj-lista-bairros + .pj-lista-bairros { margin-top: 22px; }

.pj-lista-bairros__cidade {
	margin: 0 4px 10px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .6px !important;
	color: var(--pj-txt-2) !important;
}

.pj-card-lista {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 2px 12px -8px rgba(0, 0, 0, .2);
	overflow: hidden;
}

.pj-bairro {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--pj-borda);
}
.pj-bairro:last-child,
.pj-bairro.pj-bairro--ultimo { border-bottom: 0; }

.pj-bairro__icone {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #f4f4f6;
	color: var(--pj-txt-2);
}
.pj-bairro__icone svg { width: 17px; height: 17px; }

.pj-bairro__nome {
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.35;
	word-break: break-word;
}

.pj-bairro__taxa {
	flex-shrink: 0;
	max-width: 45%;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pj-bairro__taxa--valor { color: var(--pj-preco); background: #f4f4f6; }
.pj-bairro__taxa--gratis { color: #11743a; background: #e7f6ec; }
.pj-bairro__taxa--texto { color: var(--pj-txt-2); font-weight: 600; white-space: normal; }

.pj-vazio-busca {
	margin-top: 16px !important;
	padding: 22px 18px !important;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--pj-txt-2) !important;
}