/* ==========================================================================
   Lista de Resultados - Widget Elementor
   Variaveis CSS definidas via selectors dos controlos de Estilo do widget
   (ver includes/class-lre-widget.php), aplicadas pelo Elementor no wrapper
   exterior "{{WRAPPER}}" (o elemento .elementor-element-{id}, ANTES/fora
   de .lre-widget).

   IMPORTANTE (corrigido - controlos de estilo sem efeito): os valores por
   omissao de cada variavel sao dados apenas no ponto de uso, via
   var(--nome, valor-omissao) - NUNCA redeclarados aqui em ".lre-widget".
   Se fossem redeclarados em ".lre-widget" (um descendente do wrapper do
   Elementor), essa redeclaracao local ganhava sempre ao valor herdado do
   wrapper, e o controlo de estilo no editor deixava de ter qualquer
   efeito visivel - foi exatamente o bug reportado nos controlos de
   tipografia/cor dos botoes e no gutter dos resultados.
   ========================================================================== */

/* ".lre-widget" e um container vertical (coluna) com 1 filho direto:
   ".lre-widget__row" (coluna de filtros + resultados lado a lado). A
   barra de pesquisa (".lre-search-bar") vive DENTRO da coluna de
   filtros (".lre-filters"), como bloco proprio por cima do titulo/
   acordeoes - ver nota em ".lre-search-bar" abaixo. */
.lre-widget {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

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

/* --------------------------------------------------------------------
   Layout geral: coluna de filtros (20%) + resultados (80%) - secao 4.1
   -------------------------------------------------------------------- */

.lre-widget__row {
	display: flex;
	align-items: flex-start;
	gap: var(--lre-gutter, 24px);
	width: 100%;
}

.lre-filters {
	display: flex;
	flex-direction: column;
	flex: 0 0 20%;
	max-width: 20%;
	background-color: var(--lre-filters-bg, transparent);
	padding: 16px;
}

.lre-results {
	flex: 1 1 80%;
	max-width: 80%;
	min-width: 0;
}

@media (max-width: 767px) {
	.lre-widget__row {
		flex-direction: column;
	}

	.lre-filters,
	.lre-results {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* --------------------------------------------------------------------
   Pesquisa - secao 5
   -------------------------------------------------------------------- */

.lre-filters__title {
	margin: 0 0 16px;
	font-size: 1.1em;
	font-weight: 600;
}

/* Barra de pesquisa - bloco proprio DENTRO da coluna de filtros
   (".lre-filters"), por cima do titulo/acordeoes, tal como pedido.
   Rotulo visivel por cima, input e botão "Pesquisar" lado a lado por
   baixo. Largura/posicionamento controlaveis no painel de Estilo
   (default: 100% de largura, alinhada a esquerda - ver
   estilo_pesquisa_largura/posicao); ".lre-filters" e flex-column, por
   isso o "align-self" continua a funcionar quando a largura da barra e
   inferior a 100%. */
.lre-search-bar {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	align-self: flex-start;
	margin-bottom: 20px;
}

.lre-search__label {
	font-weight: 600;
}

.lre-search__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.lre-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid #d0d5dd;
}

.lre-search__row .lre-btn {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------
   Acordeao de filtros - secao 4.3
   -------------------------------------------------------------------- */

.lre-accordions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.lre-accordion {
	border: 1px solid #e4e7ec;
	overflow: hidden; /* para o raio dos cantos recortar o fundo do titulo */
	transition: border-color 0.15s ease;
}

/* Cor da borda do acordeao por estado (normal/hover/pressed). O grupo de
   controlo "Borda" do Elementor ja define estilo/espessura/cor a
   "{{WRAPPER}} .lre-accordion" (especificidade 0-2-0); a regra "normal"
   abaixo usa ".lre-widget" duplicado (0-3-0) para vencer essa regra de
   forma previsivel independentemente da ordem de carregamento do CSS,
   tal como ja acontece nas restantes secoes deste ficheiro. O estado
   "pressed" usa a classe "is-expanded", replicada no wrapper pelo JS
   (e tambem no render() do PHP, para o estado inicial "abertos") a
   partir do aria-expanded do titulo - evita depender de :has(). */
.lre-widget.lre-widget .lre-accordion {
	border-color: var(--lre-accordion-border-color, #e4e7ec);
}

.lre-widget .lre-accordion:hover {
	border-color: var(--lre-accordion-border-color-hover, var(--lre-accordion-border-color, #e4e7ec));
}

.lre-widget .lre-accordion.is-expanded {
	border-color: var(--lre-accordion-border-color-pressed, var(--lre-accordion-border-color, #e4e7ec));
}

.lre-accordion__title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border: 0;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

/* Especificidade extra (0-2-0) necessaria para vencer regras globais de
   <button> que alguns temas/Kits do Elementor definem (ex.:
   ".elementor-kit-X button { background-color: ...; color: ...; }" tem
   especificidade 0-1-1, mais alta que ".lre-accordion__title" sozinho a
   0-1-0 - sem isto o titulo do acordeao herdava a cor global de botao do
   tema em vez de ficar transparente/com a cor do texto). */
.lre-widget .lre-accordion__title {
	background: var(--lre-accordion-bg, transparent);
	color: var(--lre-accordion-color, inherit);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lre-widget .lre-accordion__title:hover {
	background: var(--lre-accordion-bg-hover, var(--lre-accordion-bg, transparent));
	color: var(--lre-accordion-color-hover, var(--lre-accordion-color, inherit));
}

.lre-widget .lre-accordion__title[aria-expanded="true"] {
	background: var(--lre-accordion-bg-pressed, var(--lre-accordion-bg, transparent));
	color: var(--lre-accordion-color-pressed, var(--lre-accordion-color, inherit));
}

.lre-accordion__title:focus-visible {
	outline: 2px solid #1d2939;
	outline-offset: -2px;
}

.lre-accordion__arrow {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--lre-arrow-color, currentColor);
	border-bottom: 2px solid var(--lre-arrow-color, currentColor);
	transform: rotate(45deg);
	transition: transform 0.2s ease, border-color 0.15s ease;
	flex: 0 0 auto;
}

/* Cor da seta por estado - mesmo padrao ja usado para o fundo/texto do
   titulo do acordeao (--lre-accordion-*). "hover"/"pressed" tem fallback
   para o valor "normal" quando nao definidos explicitamente. */
.lre-accordion__title:hover .lre-accordion__arrow {
	border-right-color: var(--lre-arrow-color-hover, var(--lre-arrow-color, currentColor));
	border-bottom-color: var(--lre-arrow-color-hover, var(--lre-arrow-color, currentColor));
}

.lre-accordion__title[aria-expanded="true"] .lre-accordion__arrow {
	border-right-color: var(--lre-arrow-color-pressed, var(--lre-arrow-color, currentColor));
	border-bottom-color: var(--lre-arrow-color-pressed, var(--lre-arrow-color, currentColor));
}

.lre-accordion__title[aria-expanded="true"] .lre-accordion__arrow {
	transform: rotate(-135deg);
}

.lre-accordion__panel {
	padding: 12px 14px;
}

/* PEDIDO (Emanuel): texto de instrucao editavel no topo de cada bloco de
   filtro (lista, lista multipla, calendario ou mapa). Opcional - so
   aparece se o campo "Texto de instrucao" do bloco tiver conteudo. */
.lre-accordion__instrucao {
	margin: 0 0 10px;
	font-size: 0.9em;
	color: #667085;
}

.lre-accordion__panel--calendar,
.lre-accordion__panel--map {
	height: auto;
}

.lre-choice-filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* A pesquisa fica sempre visivel, fora da area com scroll - so a lista
   de opcoes (".lre-choice-list") tem altura fixa com scroll interno
   (era antes aplicado ao painel do acordeao inteiro, o que faria a
   pesquisa desaparecer ao fazer scroll pela lista). */
.lre-choice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
}

.lre-choice-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.lre-choice-list input:focus-visible {
	outline: 2px solid #1d2939;
	outline-offset: 2px;
}

.lre-choice-list__empty {
	color: #667085;
	font-style: italic;
}

/* --------------------------------------------------------------------
   Pesquisa dentro da lista (filtro de selecao multipla) - melhoria
   pedida pelo Emanuel: filtra as opcoes visiveis a medida que se
   escreve, em JS puro (ver initChoiceSearch em lre-widget.js).
   CORRECAO (pedida pelo Emanuel): o texto do campo era um "placeholder"
   (some ao escrever); passou a ser uma label sempre visivel por cima
   do input, com texto editavel no painel do widget. */
.lre-choice-search__label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 0.9em;
}

.lre-choice-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	font: inherit;
}

.lre-choice-search__input:focus-visible {
	outline: 2px solid #1d2939;
	outline-offset: 1px;
}

.lre-choice-search__empty {
	color: #667085;
	font-style: italic;
	margin: 0;
}

/* --------------------------------------------------------------------
   Checkbox custom (lista de selecao multipla) - melhoria 4.
   "appearance: none" + pseudo-elemento para desenhar o icone de check,
   com controlo total sobre tamanho/cor/borda via variaveis CSS.
   -------------------------------------------------------------------- */

.lre-checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: var(--lre-checkbox-size, 18px);
	height: var(--lre-checkbox-size, 18px);
	flex: 0 0 auto;
	margin: 0;
	position: relative;
	cursor: pointer;
	background-color: var(--lre-checkbox-bg, #fff);
	border: var(--lre-checkbox-border-width, 1px) solid var(--lre-checkbox-border-color, #d0d5dd);
	border-radius: var(--lre-checkbox-radius, 4px);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lre-checkbox:hover {
	border-color: var(--lre-checkbox-border-color-hover, #98a2b3);
}

.lre-checkbox:checked {
	background-color: var(--lre-checkbox-bg-checked, #1d2939);
	border-color: var(--lre-checkbox-border-color-checked, #1d2939);
}

/* Icone de check centrado com "left/top: 50% + translate(-50%,-50%)":
   ao contrario de offsets percentuais fixos (o que estava antes e nao
   ficava centrado, sobretudo com tamanhos de checkbox diferentes do
   default), esta tecnica centra a CAIXA do pseudo-elemento no centro da
   checkbox antes de rodar, o que funciona corretamente com qualquer
   --lre-checkbox-size. O translateY extra (-58% em vez de -50%) compensa
   o facto de o "V" ocupar visualmente mais espaco na metade inferior da
   sua caixa delimitadora do que na superior, uma vez rodado 45deg. */
.lre-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32%;
	height: 55%;
	border: solid var(--lre-checkbox-check-color, #fff);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -58%) rotate(45deg);
}

/* --------------------------------------------------------------------
   Radio custom (lista de selecao unica) - melhoria 5.
   -------------------------------------------------------------------- */

.lre-radio {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: var(--lre-radio-size, 18px);
	height: var(--lre-radio-size, 18px);
	flex: 0 0 auto;
	margin: 0;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--lre-radio-bg, #fff);
	border: var(--lre-radio-border-width, 1px) solid var(--lre-radio-border-color, #d0d5dd);
	transition: border-color 0.15s ease;
}

.lre-radio:hover {
	border-color: var(--lre-radio-border-color-hover, #98a2b3);
}

.lre-radio:checked {
	border-color: var(--lre-radio-border-color-checked, #1d2939);
}

.lre-radio:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 55%;
	height: 55%;
	border-radius: 50%;
	background-color: var(--lre-radio-fill-color, #1d2939);
	transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------
   Acoes (Pesquisar / Limpar filtros)
   -------------------------------------------------------------------- */

.lre-filters__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.lre-btn {
	padding: 10px 18px;
	border: 1px solid transparent;
	cursor: pointer;
	font: inherit;
}

/* Idem nota acima: especificidade extra (0-2-0) so nas propriedades de
   cor/fundo, para vencer a regra global de <button> do tema/Kit do
   Elementor (0-1-1) - era exatamente isto que fazia os controlos de Estilo
   "Cor do botao (normal/hover)" parecerem nao ter efeito nenhum: a
   variavel CSS estava correta (confirmado via inspecao ao vivo), mas quem
   a lia (".lre-btn { background-color: var(...) }") tinha especificidade
   insuficiente para vencer a regra do tema. As restantes propriedades
   (tipografia, borda, raio) ja sao aplicadas pelo proprio Elementor com
   "{{WRAPPER}} .lre-btn" (tambem 0-2-0) e nao foram tocadas aqui. */
.lre-widget .lre-btn {
	background-color: var(--lre-btn-bg, #1d2939);
	color: #fff;
}

.lre-widget .lre-btn:hover {
	background-color: var(--lre-btn-bg-hover, #0f1621);
}

.lre-btn:focus-visible {
	outline: 2px solid #1d2939;
	outline-offset: 2px;
}

/* Botao "Pesquisar" como icone-botao (lupa) - classe propria
   ".lre-btn--icon", NAO ".lre-btn--primary" (essa e partilhada com o
   botao "Aplicar filtros" na coluna de filtros - usar .lre-btn--primary
   aqui afetaria os dois). Padding simetrico para ficar quadrado em vez
   do padding retangular por omissao (10px 18px) e altura a acompanhar o
   campo de pesquisa via "align-items: stretch" em ".lre-search__row". */
.lre-btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	line-height: 0;
}

.lre-btn__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* Estado desativado enquanto ha um pedido em curso (ver showLoading() em
   lre-widget.js) - evita pedidos sobrepostos por duplo clique. */
.lre-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Cores do botao secundario totalmente independentes do primario - ver
   controlos "Botão secundário (Limpar filtros)" no painel de Estilo.
   O grupo "Borda (estilo e espessura)" desse painel exclui de proposito
   o campo de cor (ver register_style_pesquisa_section() no PHP), por
   isso a cor da borda tem sempre uma unica fonte de verdade aqui - sem
   isso, as duas regras ficavam com a mesma especificidade (0-2-0) e o
   resultado dependia, de forma imprevisivel, da ordem de carregamento
   do CSS. ".lre-widget.lre-widget" (classe duplicada, 0-3-0) e uma
   segunda camada de protecao para o caso de o Elementor alguma vez
   voltar a emitir uma cor de borda por essa via. */
.lre-widget.lre-widget .lre-btn--secondary {
	background-color: transparent;
	color: var(--lre-btn-secondary-color, #1d2939);
	border-color: var(--lre-btn-secondary-color, #1d2939);
}

.lre-widget.lre-widget .lre-btn--secondary:hover {
	background-color: var(--lre-btn-secondary-bg-hover, #1d2939);
	color: #fff;
	/* Cor da borda no hover independente da cor normal - ver controlo
	   "Cor da borda (hover)" no painel de Estilo. */
	border-color: var(--lre-btn-secondary-border-hover, var(--lre-btn-secondary-color, #1d2939));
}

.lre-btn--load-more {
	display: block;
}

/* Cor totalmente independente do botao "Pesquisar" (que, sem isto,
   herdava o fundo/hover de ".lre-widget .lre-btn" por partilhar a classe
   base ".lre-btn"). ".lre-btn.lre-btn--load-more" (0-3-0) garante que
   estas regras vencem ".lre-widget .lre-btn" (0-2-0) independentemente
   da ordem de carregamento do CSS - mesma logica de especificidade usada
   em todo o resto deste ficheiro. */
.lre-widget .lre-btn.lre-btn--load-more {
	background-color: var(--lre-btn-load-more-bg, #1d2939);
	color: #fff;
}

.lre-widget .lre-btn.lre-btn--load-more:hover {
	background-color: var(--lre-btn-load-more-bg-hover, #0f1621);
}

/* --------------------------------------------------------------------
   Tablador "Proximos eventos" / "Eventos anteriores" - pedido do Emanuel.
   Fica no topo de ".lre-results", antes dos chips/contador. Todas as
   variaveis tem fallback no ponto de uso (nunca redeclaradas em
   ".lre-widget"), mesma convencao do resto do ficheiro.
   -------------------------------------------------------------------- */

.lre-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lre-tab-gap, 8px);
	margin-bottom: var(--lre-tab-margin-bottom, 16px);
}

.lre-tabs__btn {
	cursor: pointer;
	font: inherit;
	padding: 8px 16px;
	border-width: var(--lre-tab-border-width, 1px);
	border-style: solid;
	border-radius: var(--lre-tab-radius, 6px);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* CORRECAO (reportada pelo Emanuel): a cor de fundo/texto/borda do estado
   "normal" nao tinha efeito nenhum ao mudar no painel de Estilo. Mesma
   causa raiz ja documentada acima para ".lre-btn" e ".lre-accordion__title":
   ".lre-tabs__btn" sozinho (0-1-0) perde para a regra global de <button>
   que alguns temas/Kits do Elementor definem (".elementor-kit-X button
   { background-color: ...; color: ...; }", 0-1-1). ".lre-widget
   .lre-tabs__btn" (0-2-0) resolve, tal como nos outros botoes do plugin. */
.lre-widget .lre-tabs__btn {
	background-color: var(--lre-tab-bg, transparent);
	color: var(--lre-tab-color, #1d2939);
	border-color: var(--lre-tab-border-color, #d0d5dd);
}

.lre-widget .lre-tabs__btn:hover {
	background-color: var(--lre-tab-bg-hover, #f2f4f7);
	color: var(--lre-tab-color-hover, var(--lre-tab-color, #1d2939));
	border-color: var(--lre-tab-border-color-hover, var(--lre-tab-border-color, #d0d5dd));
}

.lre-widget .lre-tabs__btn.is-active {
	background-color: var(--lre-tab-bg-active, #1d2939);
	color: var(--lre-tab-color-active, #fff);
	border-color: var(--lre-tab-border-color-active, #1d2939);
}

/* --------------------------------------------------------------------
   Resultados - secao 7
   -------------------------------------------------------------------- */

.lre-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.lre-chips:empty {
	display: none;
}

.lre-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

/* Mesma correcao de especificidade (0-2-0) dos botoes/acordeao: .lre-chip
   e um <button>, por isso precisa de vencer a regra global de botao do
   tema/Kit do Elementor - ver nota completa acima em ".lre-widget .lre-btn".
   Controlos de Estilo: secao "Chips de Filtros". */
.lre-widget .lre-chip {
	background: var(--lre-chip-bg, #f2f4f7);
	color: var(--lre-chip-color, #1d2939);
}

.lre-widget .lre-chip:hover {
	background: var(--lre-chip-bg-hover, #e4e7ec);
}

.lre-chip:focus-visible {
	outline: 2px solid #1d2939;
	outline-offset: 1px;
}

.lre-chip__remove {
	font-weight: 700;
}

.lre-results__counter {
	margin-bottom: 12px;
	font-weight: 600;
}

.lre-results__bottom-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.lre-results__counter--bottom {
	margin-bottom: 0;
}

.lre-results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lre-gutter, 24px);
}

.lre-results__grid--cols-1 {
	grid-template-columns: repeat(1, 1fr);
}

.lre-results__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.lre-results__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
	/* A grelha colapsa sempre para 1 coluna em ecras pequenos,
	   independentemente da escolha do editor (secao 3.1). */
	.lre-results__grid--cols-1,
	.lre-results__grid--cols-2,
	.lre-results__grid--cols-3 {
		grid-template-columns: 1fr;
	}
}

.lre-card--fallback {
	border: 1px solid #e4e7ec;
	padding: 12px;
}

.lre-card--fallback .lre-card__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.lre-results__empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 0;
}

.lre-results__empty {
	color: #667085;
	margin: 0 0 16px;
}

.lre-results__empty:last-child {
	margin-bottom: 0;
}

.lre-results__loading {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}

.lre-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e4e7ec;
	border-top-color: var(--lre-btn-bg, #1d2939);
	border-radius: 50%;
	animation: lre-spin 0.8s linear infinite;
	display: inline-block;
}

@keyframes lre-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------
   Mapa interativo - secao 6.3
   -------------------------------------------------------------------- */

.lre-map__svg svg {
	width: 100%;
	height: auto;
}

.lre-region {
	fill: var(--lre-map-default, #d9dde3);
	stroke: #fff;
	stroke-width: 1;
	cursor: pointer;
	transition: fill 0.15s ease;
}

.lre-region:hover {
	fill: var(--lre-map-hover, #a9b4c4);
}

.lre-region.is-selected {
	fill: var(--lre-map-selected, #1d2939);
}

.lre-region:focus-visible {
	outline: 2px solid #1d2939;
}

/* Lista escondida - alternativa acessivel por teclado/leitor de ecra,
   sincronizada com o mapa (secao 6.3). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.screen-reader-text:focus-within {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	white-space: normal;
}

/* --------------------------------------------------------------------
   Calendario - secao 6.4
   -------------------------------------------------------------------- */

.lre-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	color: var(--lre-cal-nav, #1d2939);
}

.lre-calendar__prev,
.lre-calendar__next {
	border: 0;
	cursor: pointer;
	font-size: 1.1em;
}

/* Mesma correcao de especificidade que .lre-btn / .lre-accordion__title. */
.lre-widget .lre-calendar__prev,
.lre-widget .lre-calendar__next {
	background: none;
	color: var(--lre-cal-nav, #1d2939);
}

.lre-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.lre-calendar__grid:empty {
	display: none;
}

.lre-calendar__day {
	padding: 6px 2px;
	cursor: pointer;
	border: 1px solid transparent;
	font: inherit;
	width: 100%;
}

.lre-widget .lre-calendar__day {
	background: transparent;
}

.lre-calendar__day:focus-visible {
	outline: 2px solid #1d2939;
}

.lre-calendar__day.has-event {
	background-color: var(--lre-cal-event, #a9b4c4);
}

.lre-calendar__day.is-selected {
	background-color: var(--lre-cal-selected, #1d2939);
	color: #fff;
}

.lre-calendar__day--empty {
	visibility: hidden;
}

.lre-calendar__weekday {
	font-weight: 600;
	font-size: 0.85em;
	padding: 4px 0;
}

/* Linha de seleção de mês (secao 6.4: navegacao superior ao nivel do ano,
   botoes de mes por baixo). Presente nas vistas "mensal" e "anual". */
.lre-calendar__months {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-bottom: 8px;
}

.lre-calendar__month-btn {
	padding: 8px 4px;
	border: 1px solid #e4e7ec;
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
}

.lre-widget .lre-calendar__month-btn {
	background: transparent;
}

.lre-widget .lre-calendar__month-btn.is-selected {
	background: var(--lre-cal-selected, #1d2939);
	color: #fff;
	border-color: var(--lre-cal-selected, #1d2939);
}

.lre-calendar__day-input {
	width: 100%;
	padding: 8px;
	border: 1px solid #d0d5dd;
}