/*
 * UniAdvisor -- Barra de busca/refino de bolsas (.refine-bar)
 *
 * Tokens e classes .refine-* copiados LITERALMENTE do protótipo
 * aprovado (uniadvisor-busca-bolsas.html) -- mesma paleta indigo,
 * mesmas fontes (Sora/Inter, carregadas via functions.php), mesmos
 * --radius/--shadow. Usado em 2 lugares (mesmo componente PHP, ver
 * inc/bolsas/barra-busca-bolsas.php):
 * - Home (.busca-bolsas-hero-nova) -- estilo 'hero', card de entrada.
 * - /bolsas/ (.busca-bolsas-page) -- estilo 'refine', barra fina sob
 *   o título (é o que a .refine-bar do protótipo foi desenhada pra
 *   ser: editar filtro sem sair da página de resultado).
 *
 * Só o CONTORNO/posição do .refine-bar muda entre os dois estilos
 * (.refine-bar-hero vs .refine-bar-refine) -- os segmentos internos
 * são idênticos nos dois.
 */

.busca-bolsas-page,
.busca-bolsas-hero-nova{
	--ink:#1C1730;
	--ink-soft:#5B5570;
	--ink-faint:#8B85A0;
	--indigo:#4338CA;
	--indigo-dark:#362DA0;
	--indigo-100:#EEECFB;
	--indigo-50:#F7F6FD;
	--success:#178A4C;
	--success-bg:#E9F8EF;
	--amber:#B7791F;
	--amber-bg:#FFF6E5;
	--amber-line:#F0D28A;
	--border:#E7E4F0;
	--border-soft:#F0EEF7;
	--bg:#FBFAFD;
	--card-bg:#FFFFFF;
	--radius-lg:16px;
	--radius-md:12px;
	--radius-sm:8px;
	--shadow-card:0 1px 2px rgba(28,23,48,0.04), 0 1px 1px rgba(28,23,48,0.03);
	--shadow-hover:0 8px 24px rgba(28,23,48,0.08);
	--font-display:'Sora', sans-serif;
	--font-body:'Inter', sans-serif;
	font-family:var(--font-body);
	color:var(--ink);
}

/* ============ .refine-bar -- classes copiadas do protótipo ============ */

.refine-bar{
	--ink:#1C1730;
	--ink-soft:#5B5570;
	--ink-faint:#8B85A0;
	--indigo:#4338CA;
	--indigo-dark:#362DA0;
	--indigo-100:#EEECFB;
	--indigo-50:#F7F6FD;
	--border:#E7E4F0;
	--radius-md:12px;
	--shadow-card:0 1px 2px rgba(28,23,48,0.04), 0 1px 1px rgba(28,23,48,0.03);
	--shadow-hover:0 8px 24px rgba(28,23,48,0.08);
	--font-display:'Sora', sans-serif;
	--font-body:'Inter', sans-serif;
	font-family:var(--font-body);
	display:inline-flex;
	flex-wrap:wrap;
	align-items:stretch;
	background:#fff;
	border:1px solid var(--border);
	border-radius:14px;
	box-shadow:var(--shadow-card);
	padding:4px;
	gap:0;
}
.refine-seg{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:1px;
	padding:8px 34px 8px 14px;
	border-radius:10px;
	cursor:pointer;
	min-width:130px;
}
.refine-seg:hover{background:var(--indigo-50);}
.refine-seg.open{background:var(--indigo-50);}
.refine-label{
	font-size:11px;
	font-weight:600;
	color:var(--ink-faint);
	text-transform:uppercase;
	letter-spacing:.03em;
}
.refine-value{
	font-size:13.5px;
	font-weight:700;
	color:var(--ink);
	font-family:var(--font-body);
}
.refine-chevron{
	position:absolute;
	right:12px; top:50%;
	transform:translateY(-50%);
	color:var(--ink-faint);
	transition:transform .15s ease;
}
.refine-seg.open .refine-chevron{transform:translateY(-50%) rotate(180deg); color:var(--indigo);}
.refine-divider{
	width:1px;
	background:var(--border-soft, var(--border));
	margin:6px 2px;
}
.refine-dropdown{
	display:none;
	position:absolute;
	top:calc(100% + 8px);
	left:0;
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-hover);
	padding:6px;
	min-width:220px;
	max-height:280px;
	overflow-y:auto;
	z-index:20;
}
.refine-seg.open .refine-dropdown{display:block;}
.refine-option{
	display:block;
	width:100%;
	text-align:left;
	background:none;
	border:none;
	padding:9px 10px;
	border-radius:8px;
	font-size:13.5px;
	color:var(--ink-soft);
	font-family:var(--font-body);
	cursor:pointer;
}
.refine-option:hover{background:var(--bg, #fbfafd); color:var(--ink);}
.refine-option.selected{background:var(--indigo-50); color:var(--indigo); font-weight:600;}
.refine-submit{
	display:flex;
	align-items:center;
	gap:7px;
	background:var(--indigo);
	color:#fff;
	border:none;
	padding:0 20px;
	border-radius:10px;
	font-size:13.5px;
	font-weight:700;
	font-family:var(--font-body);
	margin-left:6px;
	cursor:pointer;
}
.refine-submit:hover{background:var(--indigo-dark);}

.refine-seg-busca .refine-dropdown-busca{min-width:280px;}
.refine-search-input{
	width:100%;
	border:1px solid var(--border);
	border-radius:8px;
	padding:9px 11px;
	font-size:13.5px;
	font-family:var(--font-body);
	margin-bottom:6px;
}
.refine-search-input:focus{outline:2px solid var(--indigo); outline-offset:1px;}
.refine-loading{padding:9px 10px; font-size:13px; color:var(--ink-faint);}

@media (max-width:680px){
	.refine-bar{width:100%;}
	.refine-seg{min-width:0; flex:1 1 40%;}
	.refine-divider{display:none;}
	.refine-submit{width:100%; margin:6px 4px 2px; justify-content:center; padding:11px 20px;}
}

/* ============ Estilo 'hero' (home) -- card de entrada ============ */

.busca-bolsas-hero-nova{
	background:linear-gradient(135deg, var(--indigo) 0%, #6C5CE7 130%);
	border-radius:var(--radius-lg);
	padding:44px 32px 32px;
	color:#fff;
	text-align:center;
}
.busca-bolsas-hero-nova h2{
	font-family:var(--font-display);
	font-size:26px;
	font-weight:700;
	margin:0 0 8px;
	text-wrap:balance;
	color:#fff;
}
.busca-bolsas-hero-nova .bbh-sub{
	color:rgba(255,255,255,.82);
	font-size:14.5px;
	margin:0 0 26px;
}
/*
 * A .refine-bar "de verdade" (linha única com divisores) foi desenhada
 * pra caber numa barra LARGA -- funciona bem em /bolsas/, onde tem a
 * largura inteira da página. A coluna do hero da home é só metade da
 * largura do site (.hero-grid é 2 colunas), estreita demais pra 4
 * segmentos + botão numa linha só -- forçar isso quebrava feio em 2x2
 * (bug real, reportado com print). Aqui o estilo 'hero' vira uma GRADE
 * 2x2 deliberada, cada segmento como sua própria caixa com borda --
 * mesmos tokens/fontes, forma diferente de propósito, não conserto de
 * última hora.
 */
.busca-bolsas-hero-nova .refine-bar{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	width:100%;
	max-width:480px;
	margin:0 auto;
	text-align:left;
	background:transparent;
	border:none;
	box-shadow:none;
	padding:0;
}
.busca-bolsas-hero-nova .refine-seg{
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:10px 32px 10px 14px;
	min-width:0;
}
.busca-bolsas-hero-nova .refine-seg:hover,
.busca-bolsas-hero-nova .refine-seg.open{
	background:var(--indigo-50);
	border-color:var(--indigo-100);
}
.busca-bolsas-hero-nova .refine-divider{display:none;}
.busca-bolsas-hero-nova .refine-submit{
	grid-column:1 / -1;
	width:100%;
	justify-content:center;
	margin-left:0;
	padding:13px;
}

@media (max-width:420px){
	.busca-bolsas-hero-nova .refine-bar{grid-template-columns:1fr;}
}

/* ============ Estilo 'refine' (/bolsas/) -- barra fina ============ */

.busca-bolsas-page .refine-bar-refine{margin-bottom:24px;}