/**
 * [braj_mandi_feed] output styling - built on the shared
 * mathuranow-design-system tokens (--mnds-*), which this plugin also
 * enqueues on the frontend whenever the shortcode is actually present on
 * a page (see BLMF_Shortcode::maybe_enqueue_frontend_assets()) - not a
 * separate token set.
 *
 * Every small/label-style text in this file uses --mnds-text-muted
 * (#5B6774), not --mnds-text-faint (#8A949E) - measured live (2026-09-15)
 * at 2.93-3.08:1 against this page's white/sunken backgrounds, failing
 * WCAG AA's 4.5:1 minimum for text this size, on every one of freshness
 * label / source attribution / table column headers / "as of" date /
 * filter labels, in both languages (color contrast doesn't depend on
 * which language is rendering). --mnds-text-muted is the same token
 * already used for this exact purpose elsewhere (mnds-label in the
 * shared design system) and passes at ~5.5:1.
 *
 * @package Braj_Live_Mandi_Feeds
 */
.blmf-feed__freshness {
	font-size: var(--mnds-text-xs, 0.75rem);
	color: var(--mnds-text-muted, #5B6774);
	margin: 0 0 8px;
}
.blmf-feed__stale-chip {
	display: inline-block;
	font-size: var(--mnds-text-xs, 0.75rem);
	font-weight: 600;
	color: #8A6A2A;
	background: #FFF4DF;
	border: 1px solid #F2DFAE;
	border-radius: 999px;
	padding: 0.35em 0.85em;
	margin: 0 0 10px;
}
.blmf-feed__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mnds-text-sm, 0.8125rem);
}
.blmf-feed__table th,
.blmf-feed__table td {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid var(--mnds-border, #EEF0F3);
}
.blmf-feed__table th {
	font-size: var(--mnds-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mnds-text-muted, #5B6774);
	font-weight: 700;
}
/* Small, subdued source attribution - deliberately generic (never names
   the exact upstream API by name), same treatment as the homepage
   Mandi card's .mn-daily-needs__source so both stay visually
   consistent even though this page doesn't load the theme's own CSS
   file. */
.blmf-feed__source {
	margin: 10px 0 0;
	font-size: 11px;
	letter-spacing: 0.01em;
	color: var(--mnds-text-muted, #5B6774);
}

/* ===================================================
   /mathura-mandi/ full categorized page (2026-09-15) - same --mnds-*
   token-with-static-fallback convention as everything above, extended
   rather than replaced, for one consistent file.
   =================================================== */
.blmf-feed--full { max-width: 100%; }

.blmf-feed__header { margin: 0 0 var(--mnds-space-3, 12px); }
.blmf-feed__title {
	font-size: var(--mnds-text-h2, 1.625rem);
	font-weight: var(--mnds-weight-bold, 700);
	color: var(--mnds-text, #2A3542);
	margin: 0 0 4px;
}
.blmf-feed__asof {
	font-size: var(--mnds-text-sm, 0.8125rem);
	color: var(--mnds-text-muted, #5B6774);
	margin: 0;
}

/* Filters bar - State/District as plain read-only labels (this site is
   deliberately Mathura-district-scoped, not a real cascading location
   picker - a dropdown with exactly one option is worse than no dropdown),
   Market/Commodity as real functional controls. Wraps on narrow screens
   rather than forcing a horizontal scroll on the controls themselves -
   only the data tables below get their own scroll container. */
.blmf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mnds-space-4, 16px);
	background: var(--mnds-surface-sunken, #F8F9FA);
	border: 1px solid var(--mnds-border, #EEF0F3);
	border-radius: var(--mnds-radius-md, 10px);
	padding: var(--mnds-space-3, 12px) var(--mnds-space-4, 16px);
	margin: 0 0 var(--mnds-space-5, 24px);
}
.blmf-filters__static,
.blmf-filters__control {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 120px;
}
.blmf-filters__static-label,
.blmf-filters__label {
	font-size: var(--mnds-text-xs, 0.75rem);
	font-weight: var(--mnds-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mnds-text-muted, #5B6774);
}
.blmf-filters__static-value {
	font-size: var(--mnds-text-base, 0.9375rem);
	font-weight: var(--mnds-weight-medium, 500);
	color: var(--mnds-text, #2A3542);
}
.blmf-filters__select {
	font: inherit;
	font-size: var(--mnds-text-base, 0.9375rem);
	padding: 0.45em 0.65em;
	border: 1px solid var(--mnds-border-strong, #E7EBEF);
	border-radius: var(--mnds-radius-sm, 6px);
	background: var(--mnds-surface, #fff);
	color: var(--mnds-text, #2A3542);
	max-width: 220px;
}
.blmf-filters__select:focus { outline: 2px solid var(--mnds-accent, #D90429); outline-offset: 1px; }

.blmf-category { margin: 0 0 var(--mnds-space-6, 32px); }
.blmf-category__title {
	font-size: var(--mnds-text-h3, 1.25rem);
	font-weight: var(--mnds-weight-bold, 700);
	color: var(--mnds-text, #2A3542);
	margin: 0 0 var(--mnds-space-2, 8px);
	padding-bottom: var(--mnds-space-2, 8px);
	border-bottom: 3px solid var(--mnds-accent, #D90429);
}
/* First (Vegetables, always shown first per the page's own reader-
   priority ordering) reads as the most prominent section - larger
   title, accent-tinted background strip - without a special-case class
   in the PHP, purely via :first-of-type. */
.blmf-category:first-of-type .blmf-category__title {
	font-size: var(--mnds-text-h2, 1.625rem);
}

/* ===================================================
   Commodity card grid (2026-09-30) - replaces the earlier flat,
   horizontally-scrolling table (min-width:640px) with a responsive grid
   of per-commodity "boxes" on the shared .mnds-card component (mu-
   plugins/mathuranow-design-system) - stacks to one column on a phone
   with no horizontal scroll anywhere on the page, unlike the table it
   replaces (which still needed its own inner scroll under ~640px).
   =================================================== */
.blmf-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mnds-space-4, 16px);
}
@media (min-width: 640px) {
	.blmf-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.blmf-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.blmf-commodity-card {
	display: flex;
	flex-direction: column;
	gap: var(--mnds-space-2, 8px);
	min-width: 0; /* lets long commodity/variety text wrap inside a grid cell instead of forcing the cell wider */
	scroll-margin-top: var(--mnds-space-5, 24px); /* keeps a jumped-to card clear of a sticky header, if one is ever added */
}
.blmf-commodity-card__name {
	font-size: var(--mnds-text-lg, 1.125rem);
	font-weight: var(--mnds-weight-bold, 700);
	color: var(--mnds-text, #2A3542);
	margin: 0;
}

/* Per-commodity natural-language sentence (2026-09-15, kept as its own
   box-level line in the 2026-09-30 card redesign) - a plain-text answer
   to "what's the price of X today", both for a human skimming the card
   and for AI/voice-assistant text extraction. --mnds-text (not the
   muted token used elsewhere in this file), since this is primary
   content a reader/AI is meant to actually read, not a de-emphasized
   caption - contrast already confirmed passing WCAG AA from the same
   token's use elsewhere on this site. Class `.blmf-commodity-summary`
   is kept unchanged (alongside the new `__summary` element class) since
   the theme's Speakable schema (inc/live-data-seo.php) targets it by
   that exact selector. */
.blmf-commodity-card__summary {
	color: var(--mnds-text, #2A3542);
	font-size: var(--mnds-text-sm, 0.8125rem);
	font-style: italic;
	margin: 0;
}

.blmf-commodity-card__rows {
	display: flex;
	flex-direction: column;
	gap: var(--mnds-space-2, 8px);
	margin-top: var(--mnds-space-1, 4px);
}
/* One variety/market combination - label:value chips instead of table
   columns, so a long variety or market name simply wraps rather than
   forcing a wide row that needs horizontal scroll. */
.blmf-variety-row {
	background: var(--mnds-surface-sunken, #F8F9FA);
	border: 1px solid var(--mnds-border, #EEF0F3);
	border-radius: var(--mnds-radius-sm, 6px);
	padding: var(--mnds-space-2, 8px) var(--mnds-space-3, 12px);
}
.blmf-variety-row__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--mnds-space-2, 8px);
	font-size: var(--mnds-text-sm, 0.8125rem);
}
.blmf-variety-row__variety { font-weight: var(--mnds-weight-semibold, 600); color: var(--mnds-text, #2A3542); }
.blmf-variety-row__market { color: var(--mnds-text-muted, #5B6774); }
.blmf-variety-row__prices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnds-space-3, 12px);
	margin: var(--mnds-space-2, 8px) 0 4px;
}
.blmf-price { display: flex; align-items: baseline; gap: 4px; }
.blmf-price__label {
	font-size: var(--mnds-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mnds-text-muted, #5B6774);
}
.blmf-price__value { font-size: var(--mnds-text-base, 0.9375rem); font-weight: var(--mnds-weight-bold, 700); color: var(--mnds-text, #2A3542); }
.blmf-price--avg .blmf-price__value { color: var(--mnds-accent-secondary, #0D1B2A); }
.blmf-variety-row__date { font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-muted, #5B6774); }

/* Brief highlight when the commodity jump-to control lands on a card. */
@keyframes blmf-row-highlight {
	0%, 100% { background: var(--mnds-surface, #fff); }
	30% { background: var(--mnds-accent-bg, #FDEEEF); }
}
.blmf-row--highlight { animation: blmf-row-highlight 2s ease; }

@media (prefers-reduced-motion: reduce) {
	.blmf-row--highlight { animation: none; background: var(--mnds-accent-bg, #FDEEEF); }
}

/* ===================================================
   Dashboard redesign (2026-09-30) - status badge, featured strip,
   category pills, search, trust block, FAQ accordion, empty state.
   Same --mnds-* token-with-fallback convention as everything above.
   =================================================== */

/* Status badge (item 9) - "Today" only when the real arrival_date
   genuinely matches today (see the PHP-side comparison in
   render_categorized_page()); every other case, including a successful
   but AGMARK-lagged fetch, reads "Latest available" - never implies a
   live "today" price when the underlying data isn't dated today. */
.blmf-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mnds-space-2, 8px);
}
.blmf-status-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--mnds-text-xs, 0.75rem);
	font-weight: var(--mnds-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.3em 0.75em;
	border-radius: var(--mnds-radius-pill, 999px);
}
.blmf-status-badge--today {
	color: var(--mnds-success, #1B7F5F);
	background: var(--mnds-success-bg, #E8F6F0);
}
.blmf-status-badge--latest {
	color: var(--mnds-warning, #8A6A2A);
	background: var(--mnds-warning-bg, #FFF4DF);
}

/* Featured strip (item 2) - horizontally swipeable on narrow screens
   (no wrap, native momentum scroll), a real grid once there's room for
   it side by side. */
.blmf-featured {
	display: flex;
	gap: var(--mnds-space-3, 12px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 2px 2px var(--mnds-space-2, 8px);
	margin: 0 0 var(--mnds-space-5, 24px);
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
	.blmf-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow-x: visible; }
}
.blmf-featured-card {
	flex: 0 0 150px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--mnds-space-3, 12px);
}
.blmf-featured-card__name { font-size: var(--mnds-text-sm, 0.8125rem); font-weight: var(--mnds-weight-semibold, 600); color: var(--mnds-text-muted, #5B6774); }
.blmf-featured-card__price { font-size: var(--mnds-text-h2, 1.625rem); font-weight: var(--mnds-weight-bold, 700); color: var(--mnds-text, #2A3542); line-height: 1.15; }
.blmf-featured-card__unit { font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-muted, #5B6774); margin-bottom: 4px; }
.blmf-featured-card__range { font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-muted, #5B6774); }
.blmf-featured-card__market { font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-faint, #8A949E); }

/* Search input (item 4) - shares .blmf-filters__control's own layout,
   just wider and with a proper search affordance. */
.blmf-filters__control--search { flex: 1 1 220px; min-width: 200px; }
.blmf-search-input {
	font: inherit;
	font-size: var(--mnds-text-base, 0.9375rem);
	padding: 0.45em 0.65em;
	border: 1px solid var(--mnds-border-strong, #E7EBEF);
	border-radius: var(--mnds-radius-sm, 6px);
	background: var(--mnds-surface, #fff);
	color: var(--mnds-text, #2A3542);
	width: 100%;
	box-sizing: border-box;
}
.blmf-search-input:focus { outline: 2px solid var(--mnds-accent, #D90429); outline-offset: 1px; }
.blmf-search-noresults {
	font-size: var(--mnds-text-sm, 0.8125rem);
	color: var(--mnds-text-muted, #5B6774);
	margin: 0 0 var(--mnds-space-4, 16px);
}

/* Category pills (item 3) - horizontal scroll on narrow screens rather
   than wrapping into a multi-row block, matching the featured strip's
   own swipe pattern. */
.blmf-pills {
	display: flex;
	gap: var(--mnds-space-2, 8px);
	overflow-x: auto;
	padding: 2px 2px var(--mnds-space-2, 8px);
	margin: 0 0 var(--mnds-space-5, 24px);
	-webkit-overflow-scrolling: touch;
}
.blmf-pill {
	flex: 0 0 auto;
	font: inherit;
	font-size: var(--mnds-text-sm, 0.8125rem);
	font-weight: var(--mnds-weight-semibold, 600);
	color: var(--mnds-text, #2A3542);
	background: var(--mnds-surface, #fff);
	border: 1px solid var(--mnds-border-strong, #E7EBEF);
	border-radius: var(--mnds-radius-pill, 999px);
	padding: 0.45em 1em;
	cursor: pointer;
}
.blmf-pill:focus-visible { outline: 2px solid var(--mnds-accent, #D90429); outline-offset: 1px; }
.blmf-pill--active {
	color: var(--mnds-text-on-accent, #fff);
	background: var(--mnds-accent-secondary, #0D1B2A);
	border-color: var(--mnds-accent-secondary, #0D1B2A);
}

/* Trust block (item 10) - compact, not a heavy "about this data" panel. */
.blmf-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnds-space-1, 4px) var(--mnds-space-4, 16px);
	margin: var(--mnds-space-6, 32px) 0 var(--mnds-space-4, 16px);
	padding: var(--mnds-space-3, 12px) var(--mnds-space-4, 16px);
}
.blmf-trust__line { margin: 0; font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-muted, #5B6774); }
.blmf-trust__line--source { font-weight: var(--mnds-weight-semibold, 600); color: var(--mnds-text, #2A3542); }

/* FAQ accordion (item 19) - native <details>/<summary>, no JS needed. */
.blmf-faq { margin: 0 0 var(--mnds-space-4, 16px); }
.blmf-faq__title {
	font-size: var(--mnds-text-h3, 1.25rem);
	font-weight: var(--mnds-weight-bold, 700);
	color: var(--mnds-text, #2A3542);
	margin: 0 0 var(--mnds-space-3, 12px);
}
.blmf-faq__item {
	border: 1px solid var(--mnds-border, #EEF0F3);
	border-radius: var(--mnds-radius-sm, 6px);
	padding: var(--mnds-space-2, 8px) var(--mnds-space-3, 12px);
	margin: 0 0 var(--mnds-space-2, 8px);
}
.blmf-faq__question {
	font-weight: var(--mnds-weight-semibold, 600);
	color: var(--mnds-text, #2A3542);
	cursor: pointer;
}
.blmf-faq__question:focus-visible { outline: 2px solid var(--mnds-accent, #D90429); outline-offset: 1px; }
.blmf-faq__answer { margin: var(--mnds-space-2, 8px) 0 0; font-size: var(--mnds-text-sm, 0.8125rem); color: var(--mnds-text-muted, #5B6774); }

/* Empty/error state (item 11) - a real card, not a bare paragraph. */
.blmf-empty-state {
	background: var(--mnds-surface-sunken, #F8F9FA);
	border: 1px solid var(--mnds-border, #EEF0F3);
	border-radius: var(--mnds-radius-md, 10px);
	padding: var(--mnds-space-6, 32px) var(--mnds-space-4, 16px);
	text-align: center;
}
.blmf-empty-state__source { margin: var(--mnds-space-2, 8px) 0 0; font-size: var(--mnds-text-xs, 0.75rem); color: var(--mnds-text-muted, #5B6774); }