/**
 * Blog Filter for Elementor — base styles.
 * Sensible defaults that mirror the reference design; every value here is
 * overridable by the Elementor Style-tab controls (which emit higher-priority
 * inline-id CSS via {{WRAPPER}} selectors).
 */

.bfe-widget {
	--bfe-purple: #6C2BD9;
	box-sizing: border-box;
	display: flex;
	flex-direction: column; /* predictable vertical spacing, no margin-collapse */
}
.bfe-widget *,
.bfe-widget *::before,
.bfe-widget *::after {
	box-sizing: border-box;
}

/* ---------------- Filter bar ---------------- */
.bfe-filterbar {
	background: #F2F2F2;
	border-radius: 16px;
	padding: 20px 24px;
	margin-bottom: 24px;
}
.bfe-filterbar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.bfe-filterbar__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #1A1A2E;
	line-height: 1.2;
}
.bfe-filterbar__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------- Dropdowns ---------------- */
.bfe-dropdown {
	position: relative;
}
.bfe-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #E2E2E8;
	border-radius: 10px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 500;
	color: #1A1A2E;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
	line-height: 1.2;
}
.bfe-dropdown__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
	display: inline-block;
}
.bfe-dropdown.is-open .bfe-dropdown__chevron {
	transform: rotate(-135deg) translateY(-2px);
}
.bfe-dropdown__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	max-width: 520px;
	background: #fff;
	border: 1px solid #ECECF0;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(20, 20, 40, .12);
	padding: 16px;
}
.bfe-dropdown__panel[hidden] {
	display: none;
}
.bfe-dropdown__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}
/* Dropdown Items Layout — driven by the widget wrapper class (prefix_class). */
.bfe-ddl-row .bfe-dropdown__list {
	flex-direction: row;
	flex-wrap: wrap;
}
/* Row: let the panel grow to fit items side-by-side instead of stacking them. */
.bfe-ddl-row .bfe-dropdown__panel {
	width: -moz-max-content;
	width: max-content;
	min-width: 220px;
	max-width: 600px;
}
.bfe-ddl-column .bfe-dropdown__list {
	flex-direction: column;
	flex-wrap: nowrap;
}
.bfe-ddl-column .bfe-dropdown__panel {
	min-width: 200px;
}
.bfe-dropdown__empty {
	margin: 0;
	color: #888;
	font-size: 14px;
}

/* Custom checkboxes */
.bfe-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #E5E5EC;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}
.bfe-checkbox:hover {
	border-color: #cfcfe0;
}
.bfe-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bfe-checkbox__box {
	width: 18px;
	height: 18px;
	border: 2px solid #C4C4D0;
	border-radius: 4px;
	flex: 0 0 auto;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}
.bfe-checkbox__input:checked + .bfe-checkbox__box {
	background-color: var(--bfe-purple);
	border-color: var(--bfe-purple);
}
.bfe-checkbox__input:checked + .bfe-checkbox__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bfe-checkbox__input:focus-visible + .bfe-checkbox__box {
	outline: 2px solid var(--bfe-purple);
	outline-offset: 2px;
}
.bfe-checkbox__text {
	font-size: 15px;
	color: #2A2A38;
}

/* ---------------- Search ---------------- */
.bfe-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #E2E2E8;
	border-radius: 10px;
	padding: 0 14px;
	min-width: 240px;
	overflow: hidden; /* keep contents inside the single rounded border */
}
/* Single rounded border only: strip the input's native (square) chrome.
   High specificity + !important so theme rules like `input[type="search"]`
   (Astra) can't reintroduce the inner border/divider in any state. */
.bfe-search input.bfe-search__input,
.bfe-search input.bfe-search__input:hover,
.bfe-search input.bfe-search__input:focus,
.bfe-search input.bfe-search__input:focus-visible,
.bfe-search input.bfe-search__input:active {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 11px 0;
	margin: 0;
	font-size: 15px;
	color: #1A1A2E;
	width: 100%;
}
.bfe-search__input::-webkit-search-decoration,
.bfe-search__input::-webkit-search-cancel-button,
.bfe-search__input::-webkit-search-results-button,
.bfe-search__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.bfe-search__icon {
	color: #9A9AA8;
	display: inline-flex;
	border: 0;
	background: transparent;
}

/* ---------------- Active filters bar ---------------- */
.bfe-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-6px);
	margin-bottom: 0;
	padding: 0 18px;
	border-radius: 12px;
	transition: max-height .35s ease, opacity .3s ease, transform .3s ease,
		margin .35s ease, padding .35s ease;
}
.bfe-active[hidden] {
	display: none; /* before JS init / when bar disabled */
}
/* While the active bar is visible it owns the space below the filter bar,
   so the filter bar's own bottom spacing is removed and "Gap Above Bar"
   fully controls the gap (0 = flush against the filter bar).
   Two selectors for robustness: the JS class, and a pure-CSS :has() that
   works even if the JS hasn't reloaded. !important beats Elementor's
   dynamically generated "Spacing Below Bar" rule whatever its specificity. */
.bfe-widget.bfe-has-active .bfe-filterbar,
.bfe-filterbar:has( + .bfe-active.is-visible ) {
	margin-bottom: 0 !important;
}
.bfe-active.is-visible {
	max-height: 500px;
	opacity: 1;
	transform: none;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 14px 18px;
	background: #F7F7FB;
}
.bfe-active__label {
	font-size: 14px;
	font-weight: 600;
	color: #15151F;
	white-space: nowrap;
}
.bfe-active__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}
.bfe-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #EFEAFB;
	color: #6C2BD9;
	border: 1px solid transparent;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1;
	animation: bfe-chip-in .25s ease;
}
@keyframes bfe-chip-in {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: none; }
}
.bfe-chip__remove {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	opacity: .7;
	transition: opacity .15s ease;
}
.bfe-chip__remove:hover {
	opacity: 1;
}
.bfe-active__reset {
	margin-left: auto;
	border: 0;
	cursor: pointer;
	background: #6C2BD9;
	color: #fff;
	border-radius: 8px;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.bfe-active__reset:hover {
	background: #5a22b8;
}

/* ---------------- Grid + cards ---------------- */
.bfe-grid {
	display: grid;
	grid-template-columns: repeat(var(--bfe-columns-fallback, 3), minmax(0, 1fr));
	gap: 24px;
}
.bfe-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(20, 20, 40, .06);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bfe-card__image-link {
	display: block;
	line-height: 0;
}
.bfe-card__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.bfe-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.bfe-card__category {
	font-size: 14px;
	font-weight: 700;
	color: var(--bfe-purple);
	text-decoration: none;
	margin-bottom: 10px;
	display: inline-block;
}
.bfe-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
}
.bfe-card__title a {
	color: #15151F;
	text-decoration: none;
	transition: color .15s ease;
}
.bfe-card__title a:hover {
	color: var(--bfe-purple);
}
.bfe-card__excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: #5B5B6B;
	margin: 0 0 18px;
}
.bfe-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	font-size: 14px;
	color: #3A3A4A;
}
.bfe-card__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bfe-card__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
.bfe-card__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.bfe-icon {
	display: inline-block;
	vertical-align: middle;
}

/* ---------------- Empty / loader ---------------- */
.bfe-results {
	position: relative;
}
.bfe-empty {
	text-align: center;
	padding: 60px 20px;
	color: #6B6B7B;
	font-size: 16px;
}
.bfe-results.is-loading .bfe-results__inner {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s ease;
}
.bfe-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 80px;
}
.bfe-loader[hidden] {
	display: none;
}
.bfe-loader__spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(108, 43, 217, .2);
	border-top-color: var(--bfe-purple);
	border-radius: 50%;
	animation: bfe-spin .7s linear infinite;
}
@keyframes bfe-spin {
	to { transform: rotate(360deg); }
}

/* ---------------- Pagination ---------------- */
.bfe-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 40px;
}
.bfe-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #3A3A4A;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.bfe-page--dots {
	cursor: default;
	min-width: auto;
	border: 0;
}
.bfe-page:not(.bfe-page--dots):hover {
	background: #F2F2F2;
	color: var(--bfe-purple);
}
.bfe-page.is-active {
	background: #fff;
	border-color: #D9D9E0;
	color: #15151F;
}
.bfe-page--prev,
.bfe-page--next {
	font-weight: 500;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	.bfe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bfe-grid { grid-template-columns: 1fr; }
	.bfe-filterbar__top { align-items: flex-start; }
	.bfe-filterbar__controls { width: 100%; }
	.bfe-search { min-width: 0; flex: 1 1 100%; }
	.bfe-dropdown__panel { max-width: min(92vw, 520px); }
}