/* Braz Posts Cards — Busca (lupa + overlay) */

/* ── Wrapper / alinhamento ────────────────────── */
.bpc-search {
	display: flex;
	align-items: center;
}

/* ── Botão da lupa ────────────────────────────── */
.bpc-search__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background-color: #3d3d3d;
	color: #ffffff;
	cursor: pointer;
	line-height: 1;
	transition:
		background-color 0.2s ease,
		color            0.2s ease,
		box-shadow       0.2s ease;
}

/* O ícone não captura cliques — o botão pai recebe sempre */
.bpc-search__icon,
.bpc-search__trigger i,
.bpc-search__trigger svg {
	pointer-events: none;
}

.bpc-search__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bpc-search__trigger i  { font-size: 20px; }
.bpc-search__trigger svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Overlay ──────────────────────────────────── */
.bpc-search__overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	animation: bpc-search-fade 0.2s ease;
}

/* .is-open sobrepõe o hidden/display:none */
.bpc-search__overlay.is-open {
	display: flex;
}

@keyframes bpc-search-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Caixa central ────────────────────────────── */
.bpc-search__box {
	position: relative;
	width: 50%;
	max-width: 600px;
}

.bpc-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	font-size: 20px;
	color: #222222;
	background-color: #ffffff;
	border: none;
	border-radius: 8px;
	outline: none;
}

/* ── Botão fechar ─────────────────────────────── */
.bpc-search__close {
	position: absolute;
	top: -42px;
	right: 0;
	padding: 0;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

/* ── Responsivo ───────────────────────────────── */
@media (max-width: 767px) {
	.bpc-search__box { width: 90%; }
}