/* ==========================================================================
   Migala marketplace widgets — shared design tokens & components
   (mgl- prefix). Fresh module, independent of the legacy proposal-workspace
   assets — nothing here depends on .mpw-* rules or that module being active.
   ========================================================================== */
.mgl-shell {
	--mgl-bg: #f7f7f7;
	--mgl-card: #ffffff;
	--mgl-border: #ebebeb;
	--mgl-border-strong: #dddddd;
	--mgl-text: #222222;
	--mgl-text-secondary: #5e5e5e;
	--mgl-text-tertiary: #717171;
	--mgl-text-faint: #808080;
	--mgl-accent: #ffea05;
	--mgl-accent-hover: #e6d200;
	--mgl-accent-disabled-bg: #fff6b3;
	--mgl-success-bg: #e3f5e6;
	--mgl-success-text: #1f7a34;
	--mgl-success-bg-alt: #e3f5e9;
	--mgl-success-text-alt: #187d43;
	--mgl-dark-bg: #222222;	
	--mgl-dark-text: #ffffff;
	--mgl-neutral-bg: #f7f7f7;
	--mgl-neutral-bg-alt: #f2f2f2;
	--mgl-neutral-text: #929292;
	--mgl-neutral-text-alt: #6a6a6a;
	--mgl-pending-bg: #fdf3dd;
	--mgl-pending-text: #a5680a;
	--mgl-viewed-bg: #eaf1ff;
	--mgl-viewed-text: #2f5fd6;
	--mgl-accepted-bg: #e8f5ec;
	--mgl-accepted-text: #1f7a34;
	--mgl-declined-bg: #fdeeee;
	--mgl-declined-text: #c23b3b;
	--mgl-declined-bg-alt: #fdeaea;
	--mgl-declined-text-alt: #c33d3d;
	--mgl-radius-lg: 20px;
	--mgl-radius-md: 12px;
	--mgl-radius-sm: 10px;
	--mgl-radius-full: 50vw;
	--mgl-shadow-row: 0 1px 3px rgba(0,0,0,0.06);
	--mgl-shadow-panel: 0 2px 6px rgba(0,0,0,0.05);
	--mgl-shadow-nav: 0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
	--mgl-shadow-hover: 0 6px 18px rgba(0,0,0,0.1);
	--mgl-shadow-modal: 0 12px 32px rgba(0,0,0,0.2);
	--mgl-shadow-drawer: -8px 0 24px rgba(0,0,0,0.12);

	font-family: inherit;
	color: var(--mgl-text);
	-webkit-font-smoothing: antialiased;
}

.mgl-shell *,
.mgl-shell *::before,
.mgl-shell *::after {
	box-sizing: border-box;
}

.mgl-shell button,
.mgl-shell input,
.mgl-shell select,
.mgl-shell textarea {
	font-family: inherit;
}

.mgl-shell button:focus,
.mgl-shell input:focus,
.mgl-shell select:focus,
.mgl-shell textarea:focus {
	outline: none;
}

/* :not(.mgl-btn) so an <a class="mgl-btn ..."> keeps whatever color its own
   variant sets (mgl-btn--dark's white, mgl-btn--outline's dark, etc.) —
   .mgl-shell a's specificity (0,1,1) otherwise beats a bare .mgl-btn--*
   rule's (0,1,0) regardless of source order, silently inheriting the
   surrounding text color into the button. Every existing <a class="mgl-btn
   mgl-btn--accent"> happened to inherit a dark color that was already close
   to what --accent wants anyway, which is why this went unnoticed until an
   <a class="mgl-btn mgl-btn--dark"> (render_proposals_empty_state()'s
   "Explore vendors") inherited that same dark color onto a dark background
   and rendered with invisible text. */
.mgl-shell a:not(.mgl-btn) {
	color: inherit;
}

.mgl-shell svg {
	flex: none;
}

/* ---- nav ---- */
.mgl-nav {
	min-height: 72px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	position: sticky;
	top: 0;
	z-index: 40;
	box-shadow: var(--mgl-shadow-nav);
}

.mgl-nav-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mgl-nav-tab {
	text-decoration: none;
	padding: 8px 16px;
	border-radius: var(--mgl-radius-full);
	font-size: 14px;
	font-weight: 600;
	color: var(--mgl-text-secondary);
	border: none;
	background: none;
	cursor: pointer;
	line-height: 1.4;
}

.mgl-nav-tab.is-active {
	background: var(--mgl-dark-bg);
	color: var(--mgl-dark-text);
}

.mgl-nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

@media (max-width: 640px) {
	.mgl-nav { padding: 14px 16px; }
	.mgl-nav-right { width: 100%; justify-content: flex-end; }
}

/* ---- page shell ----
   No max-width/margin/background here on purpose — layout width and page
   background are left to Elementor's own container/section settings. */
.mgl-page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.mgl-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: none;
}

/* ---- controls row: saved-search chips + sort/filters share one row ---- */
.mgl-controls-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 20px;
}

@media (max-width: 640px) {
	.mgl-page-header {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 12px;
	}
	.mgl-header-title {
		width: 100%;
	}
	.mgl-controls-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.mgl-header-actions {
		order: 1;
		width: 100%;
		justify-content: flex-end;
	}
	.mgl-header-actions [data-mgl-open-drawer] {
		order: 1;
		flex: 1 1 auto;
		justify-content: center;
	}
	.mgl-header-actions [data-mgl-sort] {
		order: 2;
	}
	.mgl-saved-searches {
		order: 2;
		width: 100%;
	}
}

.mgl-page-header h1 {
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 30px);
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.mgl-page-header p {
	font-size: 15px;
	color: var(--mgl-text-secondary);
	margin: 0;
}

/* ---- card (outlined surface — cards/large containers use 20px radius) ---- */
.mgl-card {
	background: var(--mgl-card);
	border: 1px solid var(--mgl-border);
	border-radius: var(--mgl-radius-lg);
	box-shadow: var(--mgl-shadow-panel);
	padding: 32px;
	margin-bottom: 20px;
}

@media (max-width: 640px) {
	.mgl-card { padding: 18px; }
}

.mgl-card-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mgl-text-tertiary);
	margin-bottom: 12px;
}

/* ---- shared card language (Leads Feed / Proposal Feed / My Events Feed) ----
   All three feeds use the same parts: a glyph avatar, a metric row with fixed
   slots, and a right-hand figure (big number over its deadline caption). The
   vendor feeds render these as list rows (.mgl-rowcard); the host dashboard
   renders them as grid cards (.mgl-gridcard) so the card shape survives in a
   multi-column grid. Anything that differs between the three lives in the
   per-widget stylesheet; anything shared lives here, so the "same slot means
   the same kind of fact" rule can't drift apart between widgets. */
.mgl-card-avatar {
	width: 60px;
	height: 60px;
	border-radius: var(--mgl-radius-md);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background-color: var(--mgl-neutral-bg-alt);
	background-size: cover;
	background-position: center;
}

.mgl-card-avatar svg {
	flex: none;
}

/* display:block is explicit throughout this family because two of the three
   cards are <a> elements, whose inner structure has to be built from
   inline-level elements — a <div> inside an <a> containing a nested block
   is avoidable, so these are all <span>s and get their display set here. */
.mgl-card-title {
	display: block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--mgl-text);
}

/* The reference code is needed when a host quotes it, but it shouldn't
   compete with the event name when scanning a list — the title format is
   always "EVT-0000: [Type] in [City, Province]". --text-faint (2.2:1 on
   white) fails WCAG AA for real body text at this size — --text-tertiary
   is the palette's lightest tone that still clears 4.5:1, so it's the
   floor for anything meant to be read rather than glanced past. */
.mgl-card-title-ref {
	font-weight: 500;
	color: var(--mgl-text-tertiary);
}

.mgl-card-title.is-muted {
	color: var(--mgl-text-tertiary);
}

/* Fixed metric row. Slot order never changes and slots are never dropped —
   a missing value renders muted in place (see render_card_metric()) so the
   columns stay readable straight down a feed. */
.mgl-card-metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--mgl-text-tertiary);
}

.mgl-card-metric {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Decorative reinforcement of the text right beside it (a calendar glyph
   next to "Oct 31, 2026"), so it's exempt from text-contrast minimums —
   left at --text-faint on purpose, unlike every text color below. */
.mgl-card-metric svg {
	flex: none;
	color: var(--mgl-text-faint);
}

.mgl-card-metric.is-match {
	color: var(--mgl-success-text);
	font-weight: 600;
}

.mgl-card-metric.is-match svg {
	color: var(--mgl-success-text);
}

/* An absent value ("Guests not set", "0 of 3 fit you") still needs to be
   read, so it can't drop below --text-tertiary — the wording already says
   "this is missing"; italic is the second, color-independent cue for that,
   since there's no palette tone lighter than tertiary that still passes
   4.5:1 on white. */
.mgl-card-metric.is-muted,
.mgl-card-metric.is-muted svg {
	color: var(--mgl-text-tertiary);
	font-style: italic;
}

/* Right-hand figure: money over the date it stops mattering. Same shape on
   both vendor feeds (budget/propose-by, price/expires) so the eye lands in
   one place across either feed. */
/* display:block is explicit because the Leads row is an <a>, so its figure
   is a <span> — without it the value/caption don't stack. */
.mgl-card-figure {
	display: block;
	flex: none;
	text-align: right;
	min-width: 128px;
}

.mgl-rowcard-foot {
	flex: none;
}

.mgl-card-figure-value {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mgl-text);
}

.mgl-card-figure-value.is-muted {
	font-size: 14px;
	font-weight: 600;
	font-style: italic;
	color: var(--mgl-text-tertiary);
}

.mgl-card-figure-caption {
	display: block;
	font-size: 12px;
	color: var(--mgl-text-tertiary);
	margin-top: 3px;
}

/* The single meaning red carries on these cards: inside a week, or already
   past. Nothing else on a card is allowed to be red. */
.mgl-card-figure-caption.is-soon {
	color: var(--mgl-declined-text);
	font-weight: 600;
}

/* Same color as a normal caption (there's no lighter tone left that still
   passes contrast) — italic is what tells "No deadline" apart from a real
   date like "Propose by Aug 2" at a glance. */
.mgl-card-figure-caption.is-muted {
	font-style: italic;
	color: var(--mgl-text-tertiary);
}

/* ---- row card: the vendor feeds' list row ---- */
.mgl-rowcard {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--mgl-card);
	border: 1px solid var(--mgl-border);
	border-radius: var(--mgl-radius-md);
	box-shadow: var(--mgl-shadow-row);
}

/* Shared by both vendor feeds' rows — Leads Feed's row is an <a> (so this is
   built from <span>s), Proposal Feed's is a <div>; either way this is the
   one rule that lays the avatar out beside the title/metric block and lets
   that block consume the row's remaining width, pushing the figure to the
   far edge. Centered rather than top-aligned: at this row height a centered
   avatar reads better whether the title sits on one line or wraps to two. */
.mgl-rowcard-head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.mgl-rowcard-body {
	flex: 1;
	min-width: 0;
}

.mgl-rowcard-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 8px;
}

@media (max-width: 640px) {
	/* Stacks into a card: identity on top, then the metric row, then the
	   figure paired with the action on one baseline. Top-aligned here,
	   unlike the desktop row — the head spans full width on its own line,
	   so it reads like a card header rather than a single-line list row. */
	.mgl-rowcard {
		display: block;
		padding: 16px;
	}

	.mgl-rowcard-head {
		align-items: flex-start;
	}

	.mgl-rowcard-foot {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		margin-top: 14px;
	}

	.mgl-card-figure {
		text-align: left;
		min-width: 0;
	}

	.mgl-card-figure-value {
		font-size: 17px;
	}
}

/* ---- grid card: the host dashboard's event card ---- */
.mgl-gridcard {
	display: flex;
	flex-direction: column;
	background: var(--mgl-card);
	border: 1px solid var(--mgl-border);
	border-radius: var(--mgl-radius-md);
	box-shadow: var(--mgl-shadow-row);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s;
}

.mgl-gridcard:hover {
	box-shadow: var(--mgl-shadow-hover);
}

/* Appears only when the host owes this event an action, which is what keeps
   it meaningful — a banner on every card is wallpaper. */
.mgl-gridcard-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	background: var(--mgl-pending-bg);
	color: var(--mgl-pending-text);
}

.mgl-gridcard-alert svg {
	flex: none;
}

.mgl-gridcard-body {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	flex: 1;
}

.mgl-gridcard-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}


.mgl-gridcard-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid var(--mgl-border);
	background: var(--mgl-neutral-bg);
	font-size: 13px;
	color: var(--mgl-text-tertiary);
}

.mgl-gridcard-foot-text {
	min-width: 0;
}

/* Services-filled progress. The label carries the fraction as text as well,
   so the bar is a second read of the number rather than the only one. */
.mgl-card-progress {
	height: 5px;
	border-radius: var(--mgl-radius-full);
	background: var(--mgl-neutral-bg-alt);
	margin-top: 18px;
	overflow: hidden;
}

.mgl-card-progress-fill {
	display: block;
	height: 100%;
	border-radius: var(--mgl-radius-full);
	background: var(--mgl-dark-bg);
}

.mgl-card-progress-fill.is-complete {
	background: var(--mgl-success-text);
}

.mgl-card-progress-fill.is-muted {
	background: var(--mgl-text-faint);
}

.mgl-card-progress-label {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--mgl-text-tertiary);
	margin-top: 8px;
}

.mgl-card-progress-label b {
	font-weight: 700;
	color: var(--mgl-text);
}

@media (max-width: 640px) {
	.mgl-gridcard-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.mgl-gridcard-foot .mgl-btn {
		justify-content: center;
	}
}

/* The previous .mgl-feed-card family (top/main/meta/divider/bottom) was
   dropped when all three feeds moved onto the .mgl-rowcard / .mgl-gridcard
   language above — nothing referenced it any more. */

/* ---- form controls (shared by any widget with an inline form) ---- */
.mgl-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mgl-text-secondary);
	margin: 0 0 6px;
}

.mgl-input,
.mgl-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-sm);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	background: var(--mgl-card);
	color: var(--mgl-text);
	margin-bottom: 16px;
}

.mgl-textarea {
	resize: vertical;
	line-height: 1.5;
}

/* ---- circular icon button (edit/share, drawer close, chat popover close,
   service-row chevron, chat composer attach/emoji/send — 2026-07: the
   single shared style for every "small round action button" in the
   module. .mgl-drawer-close/.mgl-chat-popover-close/.mgl-service-row-toggle/
   .mgl-chat-plus-btn/.mgl-chat-emoji-btn were previously separate, near-
   identical implementations at 28-34px with slightly different fills/
   borders — all now render via this one class. ---- */
.mgl-icon-btn {
	width: 34px;
	height: 34px;
	border-radius: var(--mgl-radius-full);
	background: var(--mgl-card);
	border: 1px solid var(--mgl-border-strong);
	color: var(--mgl-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	flex: none;
}

.mgl-icon-btn:hover {
	background: #f7f7f7;
}

/* dark/primary variant — the one icon button (chat send) that needs to
   stand out from the rest, same idea as .mgl-btn--dark vs .mgl-btn--outline. */
.mgl-icon-btn--dark {
	background: var(--mgl-dark-bg);
	color: var(--mgl-dark-text);
	border: none;
}
.mgl-icon-btn--dark:hover {
	background: #3a3a3a;
}
.mgl-icon-btn--dark:disabled {
	opacity: 0.5;
	cursor: default;
}

/* .mgl-link-btn removed 2026-07 — never referenced by any widget. */

/* ---- badges ----
   .mgl-pill / .mgl-pill--credits / .mgl-pill--muted removed 2026-07 — both
   were just "neutral gray badge" in a different shape (13px, no border),
   used in exactly one place each. Both usages now use .mgl-badge--neutral
   instead of a separate pill system. */
.mgl-badge { border-radius: var(--mgl-radius-full); padding: 5px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* smaller badge nested inside a control (e.g. the applied-filter-count on
   the "Filters" button) — same idea .mgl-pill-tab .mgl-badge already
   solves via CSS; this was duplicated as an identical inline style in 2
   widget files instead of a real modifier class. */
.mgl-badge--sm { padding: 4px 8px; font-size: 11px; line-height: 1.5; }

.mgl-badge--success { background: var(--mgl-success-bg-alt); color: var(--mgl-success-text-alt); }
.mgl-badge--dark { background: var(--mgl-dark-bg); color: var(--mgl-dark-text); }
.mgl-badge--neutral { background: var(--mgl-neutral-bg-alt); color: var(--mgl-neutral-text-alt); }
.mgl-badge--pending { background: var(--mgl-pending-bg); color: var(--mgl-pending-text); }
.mgl-badge--viewed { background: var(--mgl-viewed-bg); color: var(--mgl-viewed-text); }
.mgl-badge--accepted { background: var(--mgl-accepted-bg); color: var(--mgl-accepted-text); }
.mgl-badge--declined { background: var(--mgl-declined-bg-alt); color: var(--mgl-declined-text-alt); }
.mgl-badge--outline { background: var(--mgl-card); color: var(--mgl-text-secondary); border: 1px solid var(--mgl-border-strong); }

/* ---- tag (plain bordered text tag) — 2026-07: single .mgl-tag class used
   by both the recap/services tags and Event Page's service chip, which
   used to run its own near-identical .mgl-chip-based style. inline-flex +
   gap is a no-op for the plain single-text-node usages, but gives the
   service-chip's nested count badge proper spacing. ---- */
.mgl-recap-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mgl-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-full);
	padding: 6px 14px;
	font-size: 13px;
	color: var(--mgl-text);
	background: var(--mgl-card);
}

/* Locked-view service chip (label + nested .mgl-badge, see
   render_vendor_services()) — the badge already carries its own trailing
   padding (5px 12px), so the shared .mgl-tag's 14px on this side stacks on
   top of that and reads as too loose; tightened to 6px here only, leaving
   plain single-text .mgl-tag usages (proposal recap services list) at the
   original symmetric 14px. */
.mgl-tag--service {
	padding-right: 6px;
}

/* ---- shared proposal divider + pricing breakdown + recap card family —
   used by Helpers\render_proposal_recap_card() (the single template behind
   both the event page's propose drawer and the proposal feed's view
   drawer), plus the event page's own host-side proposal card and forms.
   Lives here (not event-page.css) so it's available wherever any of those
   render, including the feed widget's own page. ---- */
hr.mgl-form-divider {
	border: none;
	border-top: 1px solid var(--mgl-border);
	margin: 28px 0;
}

/* Propose/edit forms (event page's own, and the proposal feed's) are built
   from a sequence of .mgl-form-section blocks — the divider between them
   is automatic (adjacent-sibling), not a manually-placed <hr> per pair.
   That manual approach is exactly what caused the two forms' spacing to
   drift out of sync (a divider forgotten between two sections in one form
   but not the other) — this can't drift since it just reacts to whatever
   sections happen to be adjacent, including when a conditional section
   (e.g. "Services", only shown if the event has any) is skipped entirely. */
.mgl-form-section {
	margin-bottom: 0;
}

.mgl-form-section + .mgl-form-section {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--mgl-border);
}

.mgl-pricing-breakdown-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.mgl-pricing-breakdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--mgl-neutral-bg-alt);
	border-radius: var(--mgl-radius-md);
}

.mgl-pricing-breakdown-label {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

.mgl-pricing-breakdown-services {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--mgl-text-tertiary);
	margin-top: 2px;
}

.mgl-pricing-breakdown-price {
	flex: none;
	font-size: 15px;
	font-weight: 700;
}

/* ---- vendor recap card (cream price strip, own layout) ---- */
.mgl-recap-card {
	border: 1px solid var(--mgl-border);
	border-radius: var(--mgl-radius-md);
	padding: 20px;
}

.mgl-recap-card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mgl-recap-card-identity {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mgl-recap-avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--mgl-radius-full);
	flex: none;
	background-size: cover;
	background-position: center;
	background-color: var(--mgl-neutral-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: var(--mgl-text-secondary);
}

.mgl-recap-listing-name {
	display: block;
	font-weight: 700;
	font-size: 17px;
	color: inherit;
	text-decoration: none;
}

a.mgl-recap-listing-name:hover {
	text-decoration: underline;
}

.mgl-recap-sub {
	font-size: 13.5px;
	color: var(--mgl-text-tertiary);
	margin-top: 2px;
}

/* .mgl-recap-tags's base shape is already above — this screen only needs
   its own top/bottom margin on the container. Left unscoped (not
   .mgl-recap-card .mgl-recap-tags) to preserve the exact original
   cascade — the host proposal card's .mgl-host-proposal-tags also carries
   the plain .mgl-recap-tags class and was already picking up this same
   margin-top before this rule moved here. */
.mgl-recap-tags {
	margin-top: 16px;
	margin-bottom: 16px;
}

.mgl-recap-price-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	background: #faf9f7;
	border-radius: var(--mgl-radius-md);
	padding: 14px 18px;
	margin-bottom: 16px;
}

.mgl-recap-price-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mgl-text-tertiary);
	font-weight: 700;
}

.mgl-recap-price-value {
	font-weight: 700;
	font-size: 22px;
	color: var(--mgl-text);
	margin-top: 2px;
}

.mgl-recap-price-divider {
	width: 1px;
	height: 32px;
	background: #e4e2de;
	flex: none;
}

.mgl-recap-valid {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--mgl-text-secondary);
	font-size: 13.5px;
}

.mgl-proposal-details {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--mgl-border);
}

.mgl-proposal-title {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
}

.mgl-proposal-list-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mgl-text-tertiary);
	font-weight: 700;
	margin-bottom: 8px;
}

.mgl-proposal-message {
	font-size: 15px;
	color: #3f3f3f;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 64ch;
}

.mgl-proposal-next-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--mgl-accepted-bg);
	color: var(--mgl-accepted-text);
	border-radius: var(--mgl-radius-md);
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 20px;
}

.mgl-proposal-next-steps svg {
	flex: none;
}

.mgl-proposal-inclusions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.mgl-proposal-list-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14.5px;
	margin-bottom: 8px;
	line-height: 1.5;
}

.mgl-proposal-list-item svg {
	margin-top: .375em;
}

.mgl-proposal-list-item--no {
	color: var(--mgl-text-secondary);
}

/* ---- chip (bordered pill with room for a trailing icon/remove-button —
   shared shape behind Leads Feed's .mgl-saved-search). ---- */
.mgl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-full);
	padding: 6px 8px 6px 14px;
	font-weight: 600;
	background: var(--mgl-card);
	color: var(--mgl-text);
}

/* ---- buttons ---- */
.mgl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--mgl-radius-full);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	padding: 10px 18px;
	text-decoration: none;
	transition: background 0.15s;
}

.mgl-btn--accent { background: var(--mgl-accent); color: var(--mgl-text); }
.mgl-btn--accent:hover { background: var(--mgl-accent-hover); }
.mgl-btn--dark { background: var(--mgl-dark-bg); color: var(--mgl-dark-text); }
.mgl-btn--dark:hover { background: #3a3a3a; }
.mgl-btn--outline { background: var(--mgl-card); color: var(--mgl-text); border: 1px solid var(--mgl-border-strong); font-weight: 600; }
.mgl-btn--outline:hover { background: #f7f7f7; }
.mgl-btn--text { background: transparent; color: var(--mgl-text); font-weight: 500; padding: 12px 8px; }
.mgl-btn--text:hover { text-decoration: underline; }
.mgl-btn--destructive-text { background: transparent; color: var(--mgl-declined-text); font-weight: 600; padding: 12px 4px; text-decoration: underline; }
/* re-added 2026-07: the whole module now uses one single .mgl-btn pill
   system — Event Page's separate rounded-rect .mgl-ep-btn/.mgl-ep-link
   family (and its byte-for-byte copy in proposal-feed.css) is gone, and
   this full-width modifier is genuinely used now by the propose form's
   Save button. */
.mgl-btn--block { display: flex; width: 100%; padding: 14px 18px; font-size: 15px; }
.mgl-btn:disabled { background: var(--mgl-accent-disabled-bg); color: var(--mgl-text-faint); cursor: not-allowed; }

/* Elementor's global kit CSS (.elementor-kit-N button {font-weight:700})
   outranks .mgl-btn--outline/.mgl-btn--text's single class (one class +
   one element beats one class alone), so a real <button>-tag .mgl-btn goes
   bold while the identically-classed <a>-tag version doesn't. Re-declared
   here under .mgl-shell for the extra class of specificity needed to win
   back on <button> elements too. */
.mgl-shell .mgl-btn--outline { font-weight: 600; }
.mgl-shell .mgl-btn--text { font-weight: 500; }

/* ---- filter row (status tabs + sort) ---- */
.mgl-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.mgl-filter-row { flex-wrap: nowrap; }
}

.mgl-status-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 640px) {
	.mgl-status-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		min-width: 0;
		padding-bottom: 2px;
		scrollbar-width: none;
	}
	.mgl-status-tabs::-webkit-scrollbar { display: none; }
}

.mgl-status-tab {
	padding: 9px 16px;
	border-radius: var(--mgl-radius-full);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex: none;
	background: var(--mgl-card);
	color: var(--mgl-text);
	border: 1px solid var(--mgl-border-strong);
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* count badge nested in a status tab (My Events/My Listings) — same
   treatment as .mgl-pill-tab .mgl-badge below. */
.mgl-status-tab .mgl-badge {
	background: var(--mgl-neutral-bg-alt);
	color: var(--mgl-text);
	padding: 2px 8px;
	font-size: 12px;
}

.mgl-status-tab.is-active .mgl-badge {
	background: rgba(255,255,255,0.2);
	color: #ffffff;
}

.mgl-status-tab.is-active {
	background: var(--mgl-dark-bg);
	color: var(--mgl-dark-text);
	border-color: var(--mgl-dark-bg);
	font-weight: 600;
}

/* ---- filter drawer group + pill options (group label + a row of toggle
   pills) — was pasted byte-for-byte into both leads-feed.css and
   proposal-feed.css, each file's own comment calling it out as a
   deliberate "self-contained file" duplication rather than an oversight.
   No per-widget deltas existed, so it moves here whole. ---- */
.mgl-filter-group {
	margin-bottom: 24px;
}

.mgl-filter-group-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mgl-text-tertiary);
	margin-bottom: 12px;
}

.mgl-pill-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mgl-pill-option {
	text-align: center;
	padding: 10px 16px;
	border-radius: var(--mgl-radius-full);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	background: var(--mgl-card);
	color: var(--mgl-text);
	border: 1px solid var(--mgl-border-strong);
	font-weight: 500;
}

.mgl-pill-option.is-active {
	background: var(--mgl-dark-bg);
	color: var(--mgl-dark-text);
	border-color: var(--mgl-dark-bg);
	font-weight: 600;
}

.mgl-select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-sm);
	padding: 10px 36px 10px 14px;
	font-size: 14px;
	font-weight: 600;
	background: var(--mgl-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--mgl-text);
	flex: none;
}

@media (max-width: 640px) {
	.mgl-select {
		width: 40px;
		height: 40px;
		padding: 0;
		color: transparent;
		background-position: center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 4 4 4-4'/%3E%3Cpath d='M7 20V4'/%3E%3Cpath d='m21 8-4-4-4 4'/%3E%3Cpath d='M17 4v16'/%3E%3C/svg%3E");
	}
}

/* ---- full-width form select (event page's propose form + proposal feed's
   edit form "Send as" listing select) — same properties as .mgl-filter-select
   below, kept as its own rule since it needs a bottom margin (sits stacked
   in a form) rather than filling a filter-drawer row. ---- */
.mgl-ep-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-sm);
	padding: 10px 36px 10px 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	background: var(--mgl-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--mgl-text);
	margin-bottom: 16px;
}

/* Proposal feed's edit form shows the sending listing read-only (it can't
   change once a proposal exists) — dimmed so it doesn't read as an
   editable field like the rest of the form around it. */
.mgl-ep-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- filter select (plain bordered select used inside filter drawers —
   was pasted byte-for-byte into both leads-feed.css and proposal-feed.css,
   no per-widget deltas existed). Distinct from .mgl-select above: no custom
   chevron background-image, sharp --mgl-radius-sm corners, full-width. ---- */
/* fixed 2026-07: was missing font-weight (rendered lighter than every
   sibling control in the same drawer) and had no chevron at all (relied on
   the native OS arrow, unlike .mgl-select right above). Kept as its own
   rule rather than sharing .mgl-select directly — .mgl-select's mobile
   media query collapses it to a 40px icon-only button, which is wrong for
   a full-width field inside a drawer with plenty of room. */
.mgl-filter-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mgl-border-strong);
	border-radius: var(--mgl-radius-sm);
	padding: 10px 36px 10px 14px;
	font-size: 14px;
	font-weight: 600;
	background: var(--mgl-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--mgl-text);
}

/* ---- grid ---- */
.mgl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

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

@media (max-width: 640px) {
	.mgl-grid { grid-template-columns: 1fr; }
}

.mgl-empty {
	grid-column: 1 / -1;
	border: 1px dashed var(--mgl-border-strong);
	border-radius: var(--mgl-radius-lg);
	padding: 40px;
	text-align: center;
	color: var(--mgl-text-tertiary);
	font-size: 14px;
}

/* ---- toast ---- */
.mgl-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mgl-dark-bg);
	color: var(--mgl-dark-text);
	padding: 14px 22px;
	border-radius: var(--mgl-radius-md);
	font-size: 14px;
	/* Same #wpadminbar/Elementor-sticky-section fix as .mgl-drawer-overlay
	   above — just under the drawer's own z-index so a toast fired while a
	   drawer is open still reads on top of it. */
	z-index: 999998;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	text-align: center;
	max-width: 90vw;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.mgl-toast.is-visible {
	opacity: 1;
}

/* ---- confirm modal ---- */
.mgl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Was 1000 — genuinely too low: WP core's #wpadminbar sits at 99999, so
	   for any logged-in admin/host the toolbar rendered on top of this
	   "backdrop", leaving it visibly uncovered at the very top of the
	   viewport instead of dimming the whole page.
	   Deliberately one above .mgl-drawer-overlay's own z-index (999999,
	   below) rather than matching it — a page-level confirm modal can still
	   be triggered from inside an already-open drawer (event-page.js
	   re-parents drawers to <body> to escape Elementor's transform
	   wrappers, which can leave a same-z-index modal stranded behind one
	   depending on source order). The propose drawer's own withdraw
	   confirmation avoids this entirely by living inside the drawer instead
	   of using this class at all — see render_withdraw_modal() in
	   class-event-page-widget.php — but this still guards any other modal
	   that does. */
	z-index: 1000000;
	padding: 20px;
}

.mgl-modal {
	background: var(--mgl-card);
	border-radius: var(--mgl-radius-lg);
	padding: 28px;
	max-width: 380px;
	width: 100%;
	box-shadow: var(--mgl-shadow-modal);
}

.mgl-modal h3 {
	font-weight: 700;
	font-size: 19px;
	margin: 0 0 8px;
}

.mgl-modal p {
	font-size: 14px;
	color: var(--mgl-text-secondary);
	line-height: 1.5;
	margin: 0 0 6px;
}

.mgl-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 14px;
}

.mgl-modal-actions .mgl-btn {
	padding: 12px 20px;
	font-size: 15px;
	border-radius: var(--mgl-radius-md);
}

/* ---- right slide-over drawer ---- */
.mgl-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	/* Same #wpadminbar (z-index:99999) fix as .mgl-modal-overlay above. */
	z-index: 999999;
}

.mgl-drawer {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 100vw);
	background: var(--mgl-card);
	box-shadow: var(--mgl-shadow-drawer);
	display: flex;
	flex-direction: column;
}

/* A confirm step scoped to the drawer panel itself (position:absolute
   against .mgl-drawer just above, its nearest positioned ancestor) rather
   than a page-level .mgl-modal-overlay — see render_withdraw_modal() in
   class-event-page-widget.php for why: as a true descendant it always
   paints on top of the drawer's own content, with no z-index tug-of-war
   against whatever the drawer's own stacking position happens to be. */
.mgl-drawer-confirm {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 5;
}

.mgl-drawer-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 24px 24px 16px;
	border-bottom: 1px solid var(--mgl-border);
}

.mgl-drawer-head strong {
	display: block;
	font-weight: 700;
	font-size: 19px;
	margin-bottom: 6px;
}

/* .mgl-drawer-close removed 2026-07 — identical to .mgl-icon-btn, which
   drawer-close markup now uses directly. */

.mgl-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

.mgl-drawer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--mgl-border);
}

/* Groups Message host + a primary action (Edit proposal / view primary) on
   the far right of a .mgl-drawer-footer — margin-left:auto pushes the whole
   group to the end regardless of whatever renders before it (Withdraw,
   Undo withdraw, or nothing). Shared by Helpers\render_proposal_footer_layout()
   so the event page's propose drawer and the proposal feed's view drawer
   render this from one template. */
.mgl-drawer-footer-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* ---- side drawer that becomes a bottom sheet on mobile (e.g. the event
   page's proposal drawer) — opt-in via .mgl-drawer--sheet so it doesn't
   change drawers that should stay a full-height side panel on mobile too. */
@media (max-width: 640px) {
	.mgl-drawer--sheet {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		max-height: 88vh;
		border-radius: var(--mgl-radius-lg) var(--mgl-radius-lg) 0 0;
	}

	.mgl-drawer--sheet .mgl-drawer-body {
		padding-bottom: max(20px, env(safe-area-inset-bottom));
	}
}