/* [paau_browse_appeals] — the standalone "browse all Appeals" directory page
   (0.40.0). See class-browse-appeals.php's own header comment for why this
   is a separate surface from the Donate Widget rather than a variant of it.

   Same brand-token conventions as donate-widget.css/donation-form.css:
   Elementor Global Colors (--e-global-color-primary/-text) with the PAAU
   brand hex as fallback, and !important on every color/background/border/
   display/flex declaration — this site's active theme (Hello Elementor)
   overrides those properties otherwise. --e-global-color-primary, not
   -accent (see donation-form.css's own 0.39.18 correction note) — Accent
   was never actually configured on this site's Elementor kit; the real
   brand orange lives on Primary.

   Typography deliberately does NOT use Elementor's Global Fonts custom
   properties, same reasoning as donate-widget.css's own note: PAAU's real
   headings are set via Elementor's Site Settings → Typography panel
   directly on heading tags, not through a reusable CSS variable this
   plugin could hook into. Real heading tags in this file (the modal has
   none of its own — shortcode_appeal_box()'s <h3> is styled by
   donation-form.css already) don't arise here.

   Reuses real, tested infrastructure rather than a parallel implementation:
   the modal body is real shortcode_appeal_box() markup (banner, title,
   description, Zakat badge, the full donation form via
   shortcode_donation_form()'s type-switch), styled entirely by
   donation-form.css already — this file only owns the grid/card/tab/search/
   modal chrome around it. */

.paau-browse-appeals {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	/* overflow-x: hidden (0.40.43) — defense in depth, added alongside the
	   min-width: 0 fix on .paau-browse-tabs (that rule's own comment has
	   the full story: a flex child ignoring overflow-x: auto and blowing
	   out the whole page's width instead of scrolling internally). That
	   fixes the actual cause; this is a backstop so the SAME class of bug
	   — anything inside this wrapper someday overflowing its box — can't
	   push the page itself wider than the viewport again, even if the
	   specific cause next time is something this round didn't anticipate. */
	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;
}

/* -- Toolbar: tab filter + search ------------------------------------------- */

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

/* tabs_align="left|center|right" (0.40.4) — flex: 1 1 auto so the tab row
   claims whatever width the toolbar isn't giving to the search box (or all
   of it, when show_search="0" removes the search box entirely), then
   justify-content decides where the buttons sit within that space.
   justify-content: flex-start is the default/left state and reproduces the
   exact pre-0.40.4 layout — buttons hugging the left edge — with zero
   visual change for every existing placement of this shortcode. */
.paau-browse-tabs {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	gap: 8px;
}

.paau-browse-tabs[data-tabs-align="center"] {
	justify-content: center !important;
}

.paau-browse-tabs[data-tabs-align="right"] {
	justify-content: flex-end !important;
}

/* Rounded-rect "Selection (choice)" style, per the design system doc — a
   tab is a choice among a set, not a committed action, so it deliberately
   does NOT use the full-pill Primary/Secondary button shape reserved for
   "Donate now"/"Add to cart" elsewhere on this site. */
.paau-browse-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-tab:hover {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-browse-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-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-tab.is-active .paau-browse-tab-count {
	background: rgba(255, 106, 0, 0.14) !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Mobile: horizontal-scrolling single-row tab strip (0.40.42) — direct
   ask, following a chat discussion of options: up to 7+ tabs were each
   wrapping onto their own row on narrow phones (flex-wrap: wrap, the
   desktop/tablet default just above), pushing the actual card grid
   several screens down before a donor saw a single Appeal. Switches to
   flex-wrap: nowrap + overflow-x: auto instead — the same horizontal
   swipeable-category pattern from most native app tab bars — so the
   whole tab row collapses to one ~50px band regardless of how many
   categories exist, with no new tap or menu layer between a donor and
   the actual content (the two alternatives discussed — a dropdown
   selector, or a "Filters" accordion — both cost an extra tap just to
   see or reach a category, which this avoids entirely). No separate fade/
   scroll-hint element added — the next tab sitting partially cut off at
   the visible edge is already a well-established, code-free "there's
   more, swipe" cue on its own; tabs_align="center"/"right" are excluded
   here since centering or right-aligning a set of tabs that's wider than
   the screen has nothing meaningful to center/right-align against once
   it scrolls, and would fight the browser's own initial scroll position. */
@media (max-width: 640px) {
	.paau-browse-tabs:not([data-tabs-align="center"]):not([data-tabs-align="right"]) {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		/* min-width: 0, not left at flex's own default of `auto` (0.40.43,
		   direct follow-up report: "isn't quite doing the job," screenshot
		   showing the strip cut off at the screen edge and the whole page
		   shifted/widened). A flex item's automatic minimum size defaults
		   to its content's natural (unwrapped) width, NOT 0 — for a row
		   full of nowrap tab buttons, that natural width is often wider
		   than the viewport, and the flex layout algorithm honours that
		   minimum over `overflow-x: auto` actually creating a contained,
		   scrollable box. The row doesn't scroll internally; it just
		   pushes outward, blowing out the toolbar, then the whole page's
		   width past the viewport — which is also why the hero heading
		   above it looked cut off/shifted in that screenshot, not a
		   separate bug. This is the standard, well-documented fix for
		   exactly this "flex child won't respect overflow" symptom. */
		min-width: 0;
	}

	.paau-browse-tabs:not([data-tabs-align="center"]):not([data-tabs-align="right"])::-webkit-scrollbar {
		display: none;
	}

	.paau-browse-tabs:not([data-tabs-align="center"]):not([data-tabs-align="right"]) .paau-browse-tab {
		flex-shrink: 0 !important;
		white-space: nowrap;
	}

	/* Zakat filter + search folded into one row together, instead of each
	   stacking as its own full-width block below the tabs — same round,
	   same "claw back vertical space before the grid" goal. The checkbox
	   pill shrinks to fit its own (short, fixed) label; search takes
	   whatever's left. */
	.paau-browse-toolbar {
		flex-wrap: wrap !important;
	}

	.paau-browse-zakat-filter {
		flex: 0 0 auto !important;
	}

	.paau-browse-search {
		flex: 1 1 auto !important;
	}
}

/* Zakat eligible only (0.40.30) — plain native checkbox, not a custom
   toggle, deliberately: this is a real filter over the grid (like the
   search box beside it), not a "selected" state to choose between like
   the tabs are, so it doesn't borrow their pill/is-active treatment.
   Bordered pill shape matches the general toolbar look regardless. */
.paau-browse-zakat-filter {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding: 9px 14px;
	background: #ffffff !important;
	border: 1.5px solid #ececec !important;
	border-radius: 10px !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease;
}

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

.paau-browse-zakat-input {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	accent-color: var(--e-global-color-primary, #FF6A00);
	cursor: pointer;
}

/* Same look as the Donate Widget's own search box (donate-widget.css) —
   deliberately identical, not a redesign, so the two donation-browsing
   surfaces on the site read as one family. */
.paau-browse-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;
	/* Keeps the search box pinned right even when the tab bar is entirely
	   absent (show_all_tab="0" with no Featured tab and no grouping tabs
	   configured — a real, if unusual, combination) — otherwise
	   justify-content: space-between on .paau-browse-toolbar has nothing
	   else to space against and the search box drifts to the left. */
	margin-left: auto;
}

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

.paau-browse-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-search-input::placeholder {
	color: #9a9a9a !important;
}

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

/* -- Card grid --------------------------------------------------------------- */

/* Fixed column counts by breakpoint, not auto-fill (0.40.2 — direct ask:
   "4 columns on desktop, 3 columns on 1366 (laptop)") — auto-fill's own
   card-width-driven wrapping doesn't guarantee a specific count at a named
   width, and 1366px is a genuinely common laptop viewport width worth
   pinning exactly rather than approximating with a minmax() card width.
   Tablet (900px) step below isn't from a direct ask — dropping straight
   from a fixed 3-4 columns to 2 under ~900px would leave cards
   uncomfortably narrow, so this follows the same "keep stepping down"
   logic as the two named breakpoints; worth flagging in case a different
   breakpoint is wanted here specifically.

   Mobile (560px) is 2 columns, not 1 (0.40.5) — direct ask: "I think we
   could also have 2 columns on mobile btw. eComm frequently does it."
   Descriptions are hidden at this breakpoint (below) since a two-up card
   that narrow doesn't have room for two lines of body copy on top of a
   title, thumbnail and both actions without feeling cramped — title +
   image + actions alone still reads fine at that width. Card body
   padding and title size also step down slightly here for the same
   reason — not part of the direct ask, flagged in case a different
   density is wanted.

   align-items: stretch, not start (0.40.7) — direct ask: "I'd like cards
   to be equal height." Grid items default to stretch; this grid had been
   deliberately set to start instead, so each card would size to its own
   content rather than the row's tallest — but that was never actually
   about height for its own sake, it was working around dead white space
   collecting at the BOTTOM of a shorter card once the row stretched it
   (donate-widget.css's own 0.39.19 note describes the identical problem
   on the Donate Widget's cause cards). Switching back to stretch here
   without also fixing where the extra height goes would just reintroduce
   that same complaint — see .paau-browse-card-body below, which now grows
   to absorb the slack instead of leaving it stranded under the card. */
.paau-browse-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch !important;
}

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

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

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

	.paau-browse-card-desc {
		display: none !important;
	}

	.paau-browse-card-body {
		padding: 10px 12px 6px;
	}

	.paau-browse-card-title {
		font-size: 14px;
	}

	.paau-browse-card-actions {
		padding: 6px 12px 12px;
		gap: 6px;
	}

	.paau-browse-card-donate {
		padding: 7px 14px;
		font-size: 12px;
	}

	.paau-browse-card-learn-more {
		font-size: 12px;
	}
}

/* .paau-browse-appeals prefix on every shape/hidden rule below, not just
   !important — this codebase has already confirmed (see donate-widget.css's
   own 0.39.13 note) that a plain single-class !important rule can still
   lose to a same-or-higher-specificity theme default; a two-class selector
   (0,2,0) is comfortably above that. */
/* A plain <div>, not a <button> (0.40.1) — the card itself is no longer a
   single clickable control now that "Learn more" and "Donate" are two
   distinct actions inside it (see class-browse-appeals.php's render_card()
   docblock), so no cursor: pointer or click-implying hover lift here
   either — only the two action elements below look/act clickable. */
.paau-browse-appeals .paau-browse-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;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

/* A real class, not jQuery's .toggle() — see browse-appeals.js's
   applyFilters(), and donate-widget.css's own 0.39.12 note for why: a
   plain inline style="display:none" loses outright to this card's own
   `display: flex !important` above, so filtering would otherwise silently
   do nothing. */
.paau-browse-card.is-hidden {
	display: none !important;
}

.paau-browse-appeals .paau-browse-card-thumb {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 10 !important;
	background: #f5f5f5 !important;
	border-radius: 14px 14px 0 0 !important;
	overflow: hidden;
	cursor: pointer;
}

/* width/height/object-fit all !important on the <img> itself, not just the
   box — donate-widget.css's own 0.39.13 note: object-fit only crops when
   the element has a forced, definite height, and this site's theme resets
   `img { height: auto; max-width: 100% }` without asking, which silently
   turns a plain `height: 100%` into `auto` and leaves the photo
   letterboxed inside its box instead of filling it. */
.paau-browse-appeals .paau-browse-card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.paau-browse-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;
}

/* flex: 1 1 auto (0.40.7) — this is what makes .paau-browse-grid's switch
   to align-items: stretch above look right instead of just moving the
   old "dead space at the bottom" problem up a level: .paau-browse-card is
   already a column flexbox (thumb, this body, actions), so once the grid
   stretches a shorter card taller, this is the one section with nowhere
   fixed it needs to be — it grows to fill the gap, which pushes Learn
   more/Donate down to sit flush with the card's bottom border on every
   card in the row, instead of the actions floating up wherever this
   card's own content happened to end. */
.paau-browse-card-body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 4px;
	padding: 14px 16px 8px;
}

.paau-browse-card-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--e-global-color-text, #231F20) !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.paau-browse-card-desc {
	font-size: 13px;
	line-height: 1.45;
	color: #767676 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Card actions: "Learn more" (Tertiary/Text) + "Donate" (Primary pill) --
   Per the design system doc's button table — Tertiary/Text for an
   in-sentence-style link ("no shape, no border, Accent orange text"),
   Primary full pill for the one committed action ("Donate now," one per
   view — here, one per card). */
.paau-browse-card-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	padding: 8px 16px 16px;
}

.paau-browse-card-learn-more {
	background: none !important;
	border: none !important;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-primary, #FF6A00) !important;
	text-decoration: none;
}

.paau-browse-card-learn-more:hover {
	text-decoration: underline;
}

.paau-browse-card-donate {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	padding: 8px 20px;
	background: var(--e-global-color-primary, #FF6A00) !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* One step darker than Primary (0.39.18's own darkening ratio, same value
   already used elsewhere in this plugin for a Primary hover/active state)
   — a real state change independent of opacity, per the design system
   doc's "Primary Hover/Active" token. */
.paau-browse-card-donate:hover {
	background: #E05A00 !important;
}

.paau-browse-card-donate:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #FF6A00);
	outline-offset: 2px;
}

/* -- Modal dialog ------------------------------------------------------------ */

/* z-index below the shared cart drawer's 100000 (donation-form.css) — an
   "Add to cart" click inside this modal opens that drawer, which needs to
   render on top of this modal rather than fight it for stacking order. */
.paau-browse-modal {
	position: fixed !important;
	inset: 0;
	z-index: 99000;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.paau-browse-modal.is-open {
	visibility: visible;
	opacity: 1;
}

/* Built from the Secondary dark neutral rather than plain black, per the
   design system doc's Overlay/Scrim token — ties the scrim back to the
   brand instead of a generic black backdrop. */
.paau-browse-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(35, 31, 32, 0.6) !important;
}

/* display: flex/flex-direction: column (0.40.5) — root cause of the
   close-button glitch Fouad flagged ("this popup looks horrible"):
   .paau-browse-modal-close was float: right combined with position:
   sticky on the same element, an invalid/inconsistent combination (per
   the CSS Position spec, floating an element changes how its box
   participates in layout in ways sticky positioning doesn't reliably
   account for) — it rendered detached from the title/description
   instead of sitting cleanly in the corner. Flex column + align-self:
   flex-end on the close button replaces float entirely: no spec
   ambiguity, and position: sticky still works exactly as intended
   (pinned to the top of this scrollable panel while its content
   scrolls) since sticky and flex compose normally. */
.paau-browse-modal-panel {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	max-width: 880px;
	max-height: 85vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(35, 31, 32, 0.28);
	padding: 20px;
	box-sizing: border-box;
	transform: translateY(12px) scale(0.98);
	transition: transform 0.18s ease;
}

.paau-browse-modal.is-open .paau-browse-modal-panel {
	transform: translateY(0) scale(1);
}

.paau-browse-modal-close {
	position: sticky;
	top: 0;
	align-self: flex-end !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px;
	height: 32px;
	margin: -4px -4px 4px 0;
	background: #f5f5f5 !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 18px;
	line-height: 1;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	z-index: 1;
}

.paau-browse-modal-close:hover {
	background: #ececec !important;
}

.paau-browse-modal-close:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #FF6A00);
	outline-offset: 2px;
}

.paau-browse-modal-body {
	width: 100%;
}

/* Two-column layout inside the modal only (0.40.33) — direct ask: "image
   and short description on the left... then the donation form on the
   right." Scoped to .paau-browse-modal-body .paau-appeal-box-columns
   rather than a base rule, so shortcode_appeal_box()'s own markup (see
   that method's own comment) renders as a single stacked column anywhere
   else it's used — e.g. [paau_appeal_box] directly on an Appeal's own
   page, likely in a narrower content column where 2 columns wouldn't
   fit. The modal panel itself widens to fit both columns comfortably;
   .paau-appeal-box's own 480px cap (donation-form.css) is lifted here so
   it can actually fill that wider panel instead of sitting capped and
   centered inside it. */
/* The modal panel itself IS the card now, not a second nested one
   (0.40.34) — direct correction, following a screenshot: "is there a
   point having the card within the popup modal? ... feels clunky."
   .paau-appeal-box's own border/shadow/rounded-corners/orange top stripe
   made sense for [paau_appeal_box] used standalone (no other container
   giving it that "boxed" look there), but stacked inside
   .paau-browse-modal-panel — already white, rounded, shadowed — it was
   pure redundancy: two frames doing the same job, one nested in the
   other, which is exactly what read as clunky. Stripped down to nothing
   here; the modal panel's own chrome (padding: 20px) is now the only
   frame, and the close button (a plain sibling of .paau-browse-modal-body,
   already positioned in that panel's own top-right corner — see
   .paau-browse-modal-close above) reads as belonging to the one card
   instead of floating above a second one. Confirmed nothing else
   references .paau-appeal-box's box styling before removing it here —
   .paau-fundraiser-box shares the same base rule (donation-form.css) but
   never actually renders inside this modal, and no JS in this plugin
   touches this class at all — so [paau_appeal_box] used standalone stays
   completely unaffected. */
.paau-browse-modal-body .paau-appeal-box {
	max-width: none !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.paau-browse-modal-body .paau-appeal-box-columns {
	display: flex !important;
	align-items: flex-start !important;
	gap: 24px;
}

.paau-browse-modal-body .paau-appeal-box-media {
	flex: 0 0 260px !important;
	min-width: 0;
}

.paau-browse-modal-body .paau-appeal-box-media .paau-appeal-banner {
	aspect-ratio: 1 / 1 !important;
}

.paau-browse-modal-body .paau-appeal-box-donate {
	flex: 1 1 auto !important;
	min-width: 0;
}

.paau-browse-modal-body .paau-appeal-box-donate .paau-donation-widget {
	max-width: none !important;
}

@media (max-width: 720px) {
	.paau-browse-modal-panel {
		max-width: 520px;
	}

	.paau-browse-modal-body .paau-appeal-box-columns {
		display: block !important;
	}

	.paau-browse-modal-body .paau-appeal-box-media {
		margin-bottom: 4px;
	}

	.paau-browse-modal-body .paau-appeal-box-media .paau-appeal-banner {
		aspect-ratio: 16 / 9 !important;
	}
}

.paau-browse-modal-loading {
	padding: 40px 0;
	text-align: center;
	color: #767676 !important;
}

/* Body scroll lock while the modal is open — no !important needed here
   (overflow isn't one of the properties this theme has been confirmed to
   override, unlike color/background/border/display/flex above), but added
   for consistency with this file's own blanket convention regardless. */
body.paau-browse-modal-open {
	overflow: hidden !important;
}

@media (max-width: 480px) {
	.paau-browse-modal {
		padding: 0;
		align-items: flex-end !important;
	}

	.paau-browse-modal-panel {
		max-width: 100%;
		max-height: 92vh;
		border-radius: 16px 16px 0 0 !important;
	}
}