/* [paau_browse_fundraisers] (0.40.76) — direct ask: "a shortcode that just
   shows all fundraisers in a grid with 4 columns, 3 columns on tablet, 1 on
   mobile. filterable up top with the programs and search. pagination
   beyond 16 fundraisers."

   Same brand-token/!important conventions as browse-appeals.css/donation-
   form.css: Elementor Global Colors (--e-global-color-primary/-text) with
   the PAAU brand hex as fallback, !important on every color/background/
   border/display/flex declaration (Hello Elementor overrides those
   otherwise), font-family left off real heading tags (this site's actual
   heading font comes from Elementor Site Settings → Typography directly on
   the tag, not a Global Fonts CSS variable — see donation-form.css's own
   correction note for the full story).

   Toolbar/tab/search visual language deliberately matches browse-appeals.css
   as closely as this shortcode's different behaviour allows (AJAX-paginated
   query vs. client-side show/hide — see class-browse-fundraisers.php's own
   header comment), so this reads as the same "browse" family on the site,
   not a visually unrelated feature bolted on beside it. New class names
   throughout rather than reusing .paau-browse-* — this shortcode's tabs
   don't carry a data-tabs/is-hidden filtering contract the way Browse
   Appeals' do, and giving it its own names keeps that difference honest
   rather than implying a shared behaviour that isn't actually there. */

.paau-browse-fundraisers {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, sans-serif) !important;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-browse-fundraisers.is-loading {
	opacity: 0.6 !important;
	pointer-events: none !important;
	transition: opacity 0.15s ease;
}

/* -- Toolbar: category tabs + search ---------------------------------------- */

.paau-browse-fr-toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	margin-bottom: 20px;
}

.paau-browse-fr-tabs {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	gap: 8px;
}

.paau-browse-fr-tab {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	padding: 9px 16px;
	background: #ffffff !important;
	border: 1.5px solid #ececec !important;
	border-radius: 12px !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paau-browse-fr-tab:hover {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-browse-fr-tab.is-active {
	background: #FFF4E8 !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-browse-fr-tab-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #f0f0f0 !important;
	border-radius: 999px !important;
	font-size: 11px;
	font-weight: 700;
	color: #767676 !important;
}

.paau-browse-fr-tab.is-active .paau-browse-fr-tab-count {
	background: rgba(255, 106, 0, 0.14) !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Mobile horizontal-scrolling tab strip — same reasoning and pattern as
   browse-appeals.css's own 0.40.42/0.40.43 notes: a row of category
   buttons wrapping onto several lines on a phone pushes the actual grid
   down multiple screens before a visitor sees a single Fundraiser. */
@media (max-width: 640px) {
	.paau-browse-fr-tabs {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		min-width: 0;
		padding-bottom: 2px;
	}

	.paau-browse-fr-tabs::-webkit-scrollbar {
		display: none !important;
	}

	.paau-browse-fr-tab {
		flex-shrink: 0 !important;
	}
}

.paau-browse-fr-search {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding: 9px 12px;
	background: #f5f5f5 !important;
	border-radius: 10px !important;
	color: #767676 !important;
	flex: 0 1 260px !important;
	margin-left: auto;
}

.paau-browse-fr-search svg {
	flex-shrink: 0 !important;
}

.paau-browse-fr-search-input {
	flex: 1 1 auto !important;
	min-width: 0;
	background: transparent !important;
	border: none !important;
	font-size: 13px;
	color: var(--e-global-color-text, #231F20) !important;
	outline: none;
}

.paau-browse-fr-search-input::placeholder {
	color: #9a9a9a !important;
}

.paau-browse-fr-empty-note {
	margin: 8px 2px 20px;
	font-size: 13px;
	color: #767676 !important;
}

/* -- Card grid ---------------------------------------------------------------
   Fixed column counts, exactly as asked: 4 desktop, 3 tablet (≤900px, same
   tablet breakpoint donate-widget.css/appeal-fundraisers.css both already
   use), 1 mobile (≤640px, same mobile breakpoint this plugin's other
   shortcodes use — donation-form.css, appeal-fundraisers.css's own 600px is
   the one near-exception). align-items: stretch + .paau-browse-fr-card-body
   { flex: 1 1 auto } below is the same "equal-height cards, actions flush
   at the same row position" pattern browse-appeals.css's own 0.40.7 note
   established — not duplicated by accident, deliberately kept identical
   since it solves the exact same problem here. */
.paau-browse-fr-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch !important;
}

@media (max-width: 900px) {
	.paau-browse-fr-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.paau-browse-fr-grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 12px;
	}
}

.paau-browse-fundraisers .paau-browse-fr-card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden;
	min-width: 0;
	background: #ffffff !important;
	border: 1.5px solid #ececec !important;
	border-radius: 14px !important;
	text-align: left;
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.paau-browse-fundraisers .paau-browse-fr-card:hover {
	border-color: #ddd8d3 !important;
	box-shadow: 0 6px 16px rgba(35, 31, 32, 0.06);
}

/* 11:4, matching the 'paau_fundraiser_cover' image size a Fundraiser's own
   cover image is actually generated at (class-cpt-fundraisers.php's
   register_cover_image_size(), 0.40.71) and the Donate Widget's own
   fundraiser banner already crops to — same photo, same shape, wherever a
   Fundraiser's cover shows up on this site. */
.paau-browse-fundraisers .paau-browse-fr-card-thumb {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 11 / 4 !important;
	background: #f5f5f5 !important;
	border-radius: 14px 14px 0 0 !important;
	overflow: hidden;
}

.paau-browse-fundraisers .paau-browse-fr-card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.paau-browse-fr-card-badge {
	display: inline-flex !important;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 3px 8px;
	background: #FFF4E8 !important;
	border-radius: 999px !important;
	font-size: 10px;
	font-weight: 700;
	color: var(--e-global-color-primary, #FF6A00) !important;
	letter-spacing: 0.02em;
}

.paau-browse-fr-card-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px;
	padding: 14px 16px 16px;
	flex: 1 1 auto !important;
}

.paau-browse-fr-card-title {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-browse-fundraisers .paau-browse-fr-card:hover .paau-browse-fr-card-title {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-browse-fr-card-organiser {
	font-size: 12px;
	color: #767676 !important;
	margin-bottom: 6px;
}

/* Thermometer styling itself is not duplicated here — same reasoning as
   appeal-fundraisers.css's own note: it's the shared
   PAAU_D_Donation_Engine::render_thermometer() markup, styled by donation-
   form.css already. Just scaled down for card context, same as that file's
   own card-scoped .paau-appeal-progress-amount override. */
.paau-browse-fr-card .paau-appeal-progress-amount {
	font-size: 18px !important;
}

.paau-browse-fr-card .paau-appeal-progress-wrap {
	margin-bottom: 0;
}

/* -- Pagination --------------------------------------------------------------- */

.paau-browse-fr-pagination-wrap {
	margin-top: 24px;
}

.paau-browse-fr-pagination {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
}

.paau-browse-fr-page-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	background: #ffffff !important;
	border: 1.5px solid #ececec !important;
	border-radius: 8px !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paau-browse-fr-page-btn:hover:not(:disabled) {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-browse-fr-page-btn.is-active {
	background: var(--e-global-color-primary, #FF6A00) !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
}

.paau-browse-fr-page-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.paau-browse-fr-page-ellipsis {
	padding: 0 4px;
	color: #9a9a9a !important;
	font-size: 13px;
}