/**
 * WB Listora Pro — Frontend Styles
 *
 * Plan selection step rendered inside the listing submission form.
 * Inherits design tokens from Free plugin's shared.css.
 */

/* ════════════════════════════════════════════
   Verification Badge
   NOTE: the canonical `.listora-verified-badge` (the on-card PILL, with its
   __icon / __text sub-elements) is defined once in the "Verified Badge on Cards"
   block relocated from pro-admin.css (see end of this file). The former minimal
   inline definition that lived here collided with it (same class, different look)
   and was removed 2026-06-23 — single source now.
════════════════════════════════════════════ */

.listora-verified-detail {
	display: inline-flex;
	align-items: center;
	gap: var(--listora-space-1, 0.4rem);
	padding: 0.35rem 0.75rem;
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 10%, transparent);
	color: var(--listora-success-fg);
	border-radius: var(--listora-radius-md, 10px);
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: 600;
	margin-block-end: var(--listora-space-4, 1rem);
}

/* ════════════════════════════════════════════
   Custom Badge Pills (detail page)
════════════════════════════════════════════ */

.listora-badges--detail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--listora-space-1, 0.25rem);
	padding: 0.25rem 0.6rem;
	font-size: var(--listora-text-xs, 0.7rem);
	font-weight: var(--listora-weight-semibold, 600);
	border-radius: var(--listora-radius-full, 9999px);
	background: var(--badge-bg, var(--listora-wp-admin-text-muted));
	color: var(--badge-text, var(--listora-bg-elevated));
	white-space: nowrap;
}

.listora-badge-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
}

/* The SVG has to follow its box.
 *
 * Badge icons became server-rendered SVGs in 1.8.0 (card 10199529746) and
 * those carry a fixed width="14" height="14". The wrapper is sized in em, so
 * on the 0.65rem card pill it measures about 9px while the icon kept drawing
 * at 14 - overflowing the pill and sitting low against the text, since the
 * overflow all falls below the baseline (card 10305193264). Scaling the SVG
 * to its wrapper fixes the alignment at every pill size rather than at one.
 */
.listora-badge-pill__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Custom badges on Free listing cards (grid / featured / QV media). */
.listora-card__custom-badges {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	max-width: 55%;
	pointer-events: none;
}

/*
 * The favourite button owns the same top-inline-end corner, so the badge column
 * drops below it whenever Free renders one. Without this the first badge sits
 * directly on top of the heart — clicks still land (the column is
 * `pointer-events: none`) but the control is hidden underneath.
 *
 * `--listora-card-fav-size` lets a theme that resizes the button retune the
 * offset; the fallback matches Free's own 44px control.
 */
.listora-card__custom-badges--below-fav {
	top: calc(0.5rem + var(--listora-card-fav-size, 44px) + 0.25rem);
}

.listora-badge-pill--card {
	font-size: 0.65rem;
	padding: 0.15rem 0.45rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ════════════════════════════════════════════
   Plan Selection Step
════════════════════════════════════════════ */

/* ─── Plan Step: Balance ─── */

.listora-plan-step__balance {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 0.9rem;
	margin-block-end: var(--listora-space-4, 1rem);
	background: color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 8%, transparent);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-size: var(--listora-text-sm, 0.8rem);
	border-radius: var(--listora-radius-full, 9999px);
}

.listora-plan-step__balance strong {
	color: var(--listora-primary-text);
	font-weight: var(--listora-weight-semibold, 600);
}

/* ─── Plan Grid ─── */

/* Fixed column counts, not auto-fit: auto-fit locks the SAME column count
   for every row in the grid, so 3 plans (2 fit the first row's tracks, 1
   left over) put that 3rd card alone in its own row, left-aligned, with
   dead space beside it - reads as a broken layout, not a design choice.
   2 plans in a 3-column grid just leaves one empty cell, which reads as
   normal. Tablet drops to 2 columns, mobile (640px below) to 1. */
.listora-plan-step__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--listora-space-4, 1rem);
}

@media (max-width: 1024px) {
	.listora-plan-step__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ─── Plan Card (label wraps radio + content) ─── */

.listora-plan-card {
	position: relative;
	cursor: pointer;
	border-radius: var(--listora-radius-lg, 14px);
}

.listora-plan-card__radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.listora-plan-card__inner {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--listora-space-4, 1rem);
	height: 100%;
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 2px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-lg, 14px);
	transition:
		border-color var(--listora-transition-base, 0.2s ease),
		box-shadow var(--listora-transition-base, 0.2s ease),
		transform var(--listora-transition-fast, 0.1s ease);
}

.listora-plan-card__inner:hover {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	box-shadow: var(--listora-shadow-md, 0 4px 6px -1px rgba(0,0,0,.07));
}

.listora-plan-card__radio:checked + .listora-plan-card__inner {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 18%, transparent),
	            var(--listora-shadow-md, 0 4px 6px -1px rgba(0,0,0,.07));
	transform: translateY(-2px);
}

.listora-plan-card__radio:focus-visible + .listora-plan-card__inner {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

/* Featured variant — the plugin's own accent, not --listora-rating (the
   star-rating amber, borrowed only because it happened to read as "gold").
   --listora-rating is also close in hue to --listora-warning, which the
   "not enough credits" badge below now uses, so a rating-colored Featured
   card sat next to an amber warning badge and read as two shades of the
   same "caution" color instead of "this one's recommended." */
.listora-plan-card--featured .listora-plan-card__inner {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	background: color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 4%, var(--listora-card-bg, var(--listora-bg-elevated)));
}

.listora-plan-card--featured .listora-plan-card__radio:checked + .listora-plan-card__inner {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 18%, transparent),
	            var(--listora-shadow-md, 0 4px 6px -1px rgba(0,0,0,.07));
}

/* Unaffordable variant */

.listora-plan-card--unaffordable {
	cursor: not-allowed;
}

.listora-plan-card--unaffordable .listora-plan-card__inner {
	opacity: 0.55;
	pointer-events: none;
}

/* Re-enable pointer events on the Buy Credits escape hatch.
 * The parent disables pointer-events on the whole card so the user can't
 * select an unaffordable plan, but the buy-link is the user's path OUT
 * of the unaffordable state — it must remain clickable. Without this,
 * the message says "Not enough credits" + the link says "Buy Credits"
 * but clicking it does nothing (Basecamp 9842731396). */
.listora-plan-card--unaffordable .listora-plan-card__buy-link {
	pointer-events: auto;
	opacity: 1;
	position: relative;
	z-index: 1;
}

.listora-plan-card--unaffordable .listora-plan-card__insufficient {
	pointer-events: auto;
}

/* Selection mark: a hollow ring by default so a plan card reads as a
   selectable choice before anything is picked (the radio itself is
   visually hidden, opacity:0 above) — filled solid once checked. Was
   display:none until checked, which left every card looking like static
   pricing info with no clickable affordance at all. */
.listora-plan-card__check {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--listora-border, var(--listora-border-default));
	background: transparent;
	color: transparent;
	transition: border-color var(--listora-transition-fast, 0.1s ease);
}

.listora-plan-card__inner:hover .listora-plan-card__check {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
}

.listora-plan-card__radio:checked + .listora-plan-card__inner .listora-plan-card__check {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	background: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-on-primary, #fff);
}

.listora-plan-card--featured .listora-plan-card__radio:checked + .listora-plan-card__inner .listora-plan-card__check {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	background: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-on-primary, #fff);
}

/* ─── Badge ─── */

.listora-plan-card__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.15em 0.55em;
	font-size: var(--listora-text-xs, 0.7rem);
	font-weight: var(--listora-weight-semibold, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--listora-rating, var(--listora-rating));
	color: var(--listora-on-rating);
	border-radius: var(--listora-radius-full, 9999px);
}

/* ─── Card Content ─── */

/* Name leads, price is the strong second line — a customer scans the plan
   name first ("Standard", "Featured"), not the number. Previously the
   price (1.3rem bold) visually outranked the name (0.9rem), so the credit
   count read as the card's heading and the plan name as a caption. */
.listora-plan-card__name {
	font-size: var(--listora-text-lg, 1.05rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-fg-default);
	line-height: 1.3;
}

.listora-plan-card__price {
	font-size: var(--listora-text-lg, 1.05rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default, var(--listora-wp-admin-text-strong));
	line-height: 1.2;
}

/* "$X one-time" marketing tagline shown beneath the canonical credit
 * cost. Visually subordinate to the credit number — that's the actual
 * deduction; the dollar string is just human-friendly context for plans
 * that opt in to a display_price. */
.listora-plan-card__price-tagline {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--listora-text-xs, 0.78rem);
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	line-height: 1.35;
}

.listora-plan-card__duration {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

/* One-shot free-trial pill — success-toned so it reads as a reward, not
 * a cost. Shown only when the vendor is still trial-eligible for the plan. */
.listora-plan-card__trial {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	align-self: flex-start;
	padding: 0.15em 0.6em;
	font-size: var(--listora-text-xs, 0.75rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-success, var(--listora-success));
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 12%, transparent);
	border-radius: var(--listora-radius-full, 9999px);
	line-height: 1.3;
}

.listora-plan-card__trial svg {
	flex-shrink: 0;
}

.listora-plan-card__credits-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.15em 0.6em;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 12%, transparent);
	color: var(--listora-primary-text);
	font-size: var(--listora-text-xs, 0.75rem);
	font-weight: var(--listora-weight-semibold, 600);
	align-self: flex-start;
}

.listora-plan-card__credits-badge svg {
	flex-shrink: 0;
}

.listora-plan-card__cost {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: 0.35rem;
	padding: 0.2rem 0.55rem;
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: 600;
	color: var(--listora-primary-text);
	background: var(--listora-primary-soft, rgba(0, 115, 170, 0.1));
	border-radius: 999px;
	align-self: flex-start;
}

/* ─── Features List ─── */

.listora-plan-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.listora-plan-card__feature {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-plan-card__feature svg {
	flex-shrink: 0;
	color: var(--listora-success, var(--listora-success));
}

/* ─── Insufficient Credits Notice ─── */

/* Warning, not danger: not having bought credits yet isn't an error state
   (nothing failed, nothing was done wrong) - it's an expected, ordinary
   place for a new member to be. --listora-danger read as the same "wrong"
   red as a validation failure. */
.listora-plan-card__insufficient {
	margin: 0;
	padding: 0.4rem 0.6rem;
	font-size: var(--listora-text-xs, 0.7rem);
	color: var(--listora-warning-fg, var(--listora-warning));
	background: var(--listora-warning-bg, color-mix(in srgb, var(--listora-warning) 8%, transparent));
	border-radius: var(--listora-radius-sm, 6px);
}

.listora-plan-card__buy-link {
	/*
	 * A 40px minimum tap target. This rendered as a 15px inline text link,
	 * which is under half the floor for a customer-facing control — and it is
	 * not an incidental link: for a member who cannot afford the plan it is the
	 * only way forward, on the step where they are trying to pay. Symmetric
	 * padding only, so the RTL twin needs no counterpart rule.
	 */
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.4rem;
	color: var(--listora-danger, var(--listora-danger));
	font-weight: var(--listora-weight-semibold, 600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.listora-plan-card__buy-link:hover {
	text-decoration: none;
}

/* ─── Coupon Input ─── */

.listora-plan-step__coupon {
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-plan-step__coupon label {
	display: block;
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: 600;
	margin-block-end: 0.35rem;
	color: var(--listora-fg-default);
}

.listora-plan-step__coupon-row {
	display: flex;
	gap: 0.5rem;
	max-width: 360px;
}

.listora-plan-step__coupon-row input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 10px);
	font-size: var(--listora-text-base, 0.9rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.listora-plan-step__coupon-apply {
	padding: 0.5rem 1rem;
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	color: var(--listora-primary-fg);
	border: none;
	border-radius: var(--listora-radius-md, 10px);
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--listora-transition-fast, 0.1s ease);
	white-space: nowrap;
}

.listora-plan-step__coupon-apply:hover {
	opacity: 0.9;
}

.listora-plan-step__coupon-apply:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.listora-plan-step__coupon-msg {
	margin-block-start: 0.35rem;
	font-size: var(--listora-text-sm, 0.8rem);
	padding: 0.4rem 0.75rem;
	border-radius: var(--listora-radius-md, 10px);
}

.listora-plan-step__coupon-msg--success {
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 10%, transparent);
	color: var(--listora-success-fg);
}

.listora-plan-step__coupon-msg--error {
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 10%, transparent);
	color: var(--listora-danger-fg, var(--listora-danger-fg));
}

.listora-plan-step__coupon-row input[aria-invalid="true"] {
	border-color: var(--listora-danger, var(--listora-danger));
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 6%, transparent);
}

.listora-plan-card__price--original {
	text-decoration: line-through;
	opacity: 0.5;
	font-size: 0.85em;
}

.listora-plan-card__price--discounted {
	color: var(--listora-success-fg);
}

/* ════════════════════════════════════════════
   Save This Search — inline form
════════════════════════════════════════════ */

.listora-save-search {
	margin-block-start: var(--listora-space-2, 0.5rem);
}

.listora-save-search__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-save-search__toggle:hover {
	color: var(--listora-primary-text);
}

.listora-save-search__form {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.5rem);
	margin-block-start: var(--listora-space-2, 0.5rem);
	padding: var(--listora-space-4, 1rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 8px);
	max-width: 420px;
}

.listora-save-search__label {
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default);
}

.listora-save-search__alert-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	cursor: pointer;
}

.listora-save-search__actions {
	display: flex;
	gap: var(--listora-space-2, 0.5rem);
	align-items: center;
	flex-wrap: wrap;
}

.listora-save-search__message {
	min-height: 1.2em;
	font-size: var(--listora-text-sm, 0.8rem);
	margin: 0;
}

.listora-save-search__message--success {
	color: var(--listora-success, var(--listora-success));
}

.listora-save-search__message--error {
	color: var(--listora-danger, var(--listora-danger));
}

/* ════════════════════════════════════════════
   Dashboard: Saved Searches panel
════════════════════════════════════════════ */

.listora-saved-searches__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.listora-saved-search__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--listora-space-4, 1rem);
	padding: var(--listora-space-2, 0.75rem) 0;
	border-bottom: 1px solid var(--listora-border-light, var(--listora-border-divider));
}

.listora-saved-search__row:last-child {
	border-bottom: none;
}

.listora-saved-search__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.listora-saved-search__name {
	font-size: var(--listora-text-base, 0.9rem);
	color: var(--listora-fg-default);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listora-saved-search__meta {
	font-size: var(--listora-text-xs, 0.75rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-saved-search__actions {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2, 0.5rem);
	flex-shrink: 0;
}

.listora-saved-search__alert-toggle {
	flex-shrink: 0;
}

.listora-saved-search__alert-label {
	font-size: var(--listora-text-xs, 0.75rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	white-space: nowrap;
}

.listora-saved-search__run {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-text-sm, 0.8rem);
	white-space: nowrap;
}

.listora-saved-search__delete {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	transition: color var(--listora-transition-fast, 0.1s ease);
}

.listora-saved-search__delete:hover {
	color: var(--listora-danger, var(--listora-danger));
}

.listora-saved-search__delete:focus-visible,
.listora-saved-search__row:focus-within {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
	border-radius: var(--listora-radius-sm, 6px);
}

/* ════════════════════════════════════════════
   Dashboard: Analytics panel — listing rows
════════════════════════════════════════════ */

.listora-analytics-listings {
	display: flex;
	flex-direction: column;
}

.listora-analytics-listing__row {
	border-bottom: 1px solid var(--listora-border-light, var(--listora-border-divider));
}

.listora-analytics-listing__row:last-child {
	border-bottom: none;
}

.listora-analytics-listing__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--listora-space-2, 0.75rem) 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: var(--listora-space-4, 1rem);
}

.listora-analytics-listing__summary:hover .listora-analytics-listing__title {
	color: var(--listora-primary-text);
}

.listora-analytics-listing__title {
	font-size: var(--listora-text-base, 0.9rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default);
	transition: color var(--listora-transition-fast, 0.1s ease);
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listora-analytics-listing__stats {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4, 1rem);
	flex-shrink: 0;
}

.listora-analytics-listing__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 3.5rem;
}

.listora-analytics-listing__stat-value {
	font-size: var(--listora-text-base, 0.9rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-fg-default);
	line-height: 1.2;
}

.listora-analytics-listing__stat-label {
	font-size: var(--listora-text-xs, 0.7rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.listora-analytics-listing__chevron {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	transition: transform var(--listora-transition-fast, 0.15s ease);
	flex-shrink: 0;
}

.listora-analytics-listing__summary[aria-expanded="true"] .listora-analytics-listing__chevron {
	transform: rotate(180deg);
}

/* ── Detail panel ── */

.listora-analytics-detail {
	padding-block: var(--listora-space-2, 0.75rem) var(--listora-space-4, 1rem);
	padding-inline: var(--listora-space-2, 0.5rem);
	background: var(--listora-surface, var(--listora-admin-bg-paper));
	border-radius: var(--listora-radius-md, 8px);
	margin-block-end: var(--listora-space-2, 0.5rem);
}

.listora-analytics-detail__period-selector {
	display: flex;
	gap: 0.25rem;
	margin-block-end: var(--listora-space-4, 1rem);
	flex-wrap: wrap;
}

.listora-analytics-detail__period-btn {
	padding: 0.3rem 0.75rem;
	font-size: var(--listora-text-sm, 0.8rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-full, 9999px);
	cursor: pointer;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	transition:
		background var(--listora-transition-fast, 0.1s ease),
		border-color var(--listora-transition-fast, 0.1s ease),
		color var(--listora-transition-fast, 0.1s ease);
}

.listora-analytics-detail__period-btn:hover,
.listora-analytics-detail__period-btn.is-active {
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-fg);
}

.listora-analytics-detail__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: var(--listora-space-2, 0.5rem);
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-analytics-detail__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 0.5rem;
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 8px);
	text-align: center;
}

.listora-analytics-detail__card-value {
	font-size: var(--listora-text-xl, 1.3rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-primary-text);
	line-height: 1.2;
}

.listora-analytics-detail__card-label {
	font-size: var(--listora-text-xs, 0.7rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-block-start: 0.2rem;
}

.listora-analytics-detail__loading,
.listora-analytics-detail__error,
.listora-analytics-detail__no-data {
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	text-align: center;
	padding: var(--listora-space-4, 1rem);
	margin: 0;
}

.listora-analytics-detail__error {
	color: var(--listora-danger, var(--listora-danger));
}

/* ── CSS-only bar chart ── */

.listora-analytics-chart {
	margin-block-start: var(--listora-space-2, 0.5rem);
}

.listora-analytics-chart__bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 80px;
	overflow-x: auto;
	padding-block-end: 4px;
}

.listora-analytics-chart__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 1;
	min-width: 14px;
	max-width: 28px;
	height: 100%;
}

.listora-analytics-chart__bar-wrap {
	display: flex;
	align-items: flex-end;
	width: 100%;
	flex: 1;
}

.listora-analytics-chart__bar {
	display: block;
	width: 100%;
	min-height: 2px;
	background: var(--listora-primary, var(--listora-wp-admin-link));
	border-radius: 2px 2px 0 0;
	opacity: 0.75;
	transition: opacity var(--listora-transition-fast, 0.1s ease);
}

.listora-analytics-chart__bar:hover {
	opacity: 1;
}

.listora-analytics-chart__label {
	font-size: 0.6rem;
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	line-height: 1;
}

.listora-analytics-chart__legend {
	font-size: var(--listora-text-xs, 0.7rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	text-align: center;
	margin-block-start: var(--listora-space-2, 0.5rem);
}

/* ════════════════════════════════════════════
   Load More / Infinite Scroll
════════════════════════════════════════════ */

/* ── Results counter ── */

.listora-loadmore__counter {
	text-align: center;
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	padding: var(--listora-space-2, 0.5rem) 0;
}

/* ── Load More button ── */

.listora-loadmore {
	display: flex;
	justify-content: center;
	padding: var(--listora-space-4, 1rem) 0;
}

.listora-loadmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-width: 200px;
	justify-content: center;
	padding: 0.7rem 1.5rem;
	font-size: var(--listora-text-base, 0.9rem);
	font-weight: var(--listora-weight-semibold, 600);
	transition:
		background var(--listora-transition-base, 0.2s ease),
		border-color var(--listora-transition-base, 0.2s ease),
		opacity var(--listora-transition-base, 0.2s ease);
}

.listora-loadmore__btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.listora-loadmore__remaining {
	font-weight: var(--listora-weight-normal, 400);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-loadmore__spinner {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* ── Spinner animation ── */

@keyframes listora-spin {
	to { transform: rotate(360deg); }
}

.listora-spinner {
	animation: listora-spin 0.8s linear infinite;
}

/* ── Infinite scroll sentinel ── */

.listora-scroll-sentinel {
	display: flex;
	justify-content: center;
	padding: var(--listora-space-6, 1.5rem) 0;
	min-height: 60px;
}

.listora-scroll-sentinel__loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	font-size: var(--listora-text-sm, 0.8rem);
}

/* ── End of results ── */

.listora-loadmore__end {
	text-align: center;
	padding: var(--listora-space-4, 1rem) 0 var(--listora-space-2, 0.5rem);
	font-size: var(--listora-text-sm, 0.8rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	position: relative;
}

.listora-loadmore__end::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: var(--listora-border, var(--listora-border-default));
	margin: 0 auto var(--listora-space-2, 0.5rem);
}

/* ── Noscript fallback pagination ── */

noscript .listora-pagination {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	padding: var(--listora-space-4, 1rem) 0;
	flex-wrap: wrap;
}

noscript .listora-pagination a,
noscript .listora-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	font-size: var(--listora-text-sm, 0.8rem);
	border-radius: var(--listora-radius-sm, 6px);
	text-decoration: none;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	border: 1px solid var(--listora-border, var(--listora-border-default));
}

noscript .listora-pagination a:hover {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-text);
}

noscript .listora-pagination .current {
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-fg);
	font-weight: var(--listora-weight-semibold, 600);
}

/* ── Hidden utility ── */

.listora-loadmore.is-hidden,
.listora-loadmore__counter.is-hidden,
.listora-loadmore__end.is-hidden,
.listora-loadmore__spinner.is-hidden,
.listora-loadmore__btn > span.is-hidden,
.listora-scroll-sentinel.is-hidden,
.listora-scroll-sentinel__loader.is-hidden {
	display: none;
}

/* ── Fade-in animation for appended cards ── */

@keyframes listora-card-fadein {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.listora-grid__results .listora-card {
	animation: listora-card-fadein 0.3s ease both;
}

/* ════════════════════════════════════════════
   Lead Form — listing contact form (frontend)
════════════════════════════════════════════ */

.listora-lead-form {
	margin-top: var(--listora-space-6, 1.5rem);
	padding: 1.25rem;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 8px);
}

.listora-lead-form h3 {
	margin: 0 0 var(--listora-space-4, 1rem);
	font-size: var(--listora-text-lg, 1.1rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default);
}

/* Inside the listing sidebar the column's own gap spaces the cards; the
   extra margins stacked on top of it left the Verified pill floating in a
   60px gap (card 10337187661). */
.listora-detail__sidebar .listora-lead-form {
	margin-top: 0;
}

.listora-detail__sidebar .listora-verified-detail {
	margin-block-end: 0;
}

.listora-lead-form__message {
	margin-top: var(--listora-space-2, 0.75rem);
	padding: 0.75rem;
	border-radius: var(--listora-radius-sm, 4px);
	font-size: var(--listora-text-sm, 0.875rem);
}

.listora-lead-form__message--success {
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 10%, transparent);
	color: var(--listora-success-fg);
	border: 1px solid color-mix(in srgb, var(--listora-success, var(--listora-success)) 35%, transparent);
}

.listora-lead-form__message--error {
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 10%, transparent);
	color: var(--listora-danger-fg, var(--listora-danger-fg));
	border: 1px solid color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 35%, transparent);
}

/* ════════════════════════════════════════════
   Responsive — two breakpoints only (per design system)
════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.listora-analytics-detail__cards {
		grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	}
}

@media (max-width: 640px) {
	.listora-plan-step__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.listora-plan-step__coupon-row {
		max-width: 100%;
	}

	.listora-plan-card__cost {
		font-size: 0.75rem;
		padding: 0.18rem 0.5rem;
	}

	.listora-saved-search__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.listora-saved-search__delete {
		min-height: 2.75rem;
		min-width: 2.75rem;
	}

	.listora-analytics-listing__stats {
		gap: var(--listora-space-2, 0.5rem);
	}

	.listora-analytics-listing__stat {
		min-width: 2.5rem;
	}

	.listora-loadmore__btn {
		width: 100%;
		min-width: 0;
	}
}

/* ════════════════════════════════════════════
   Need Detail + Respond Panel
════════════════════════════════════════════ */

.listora-need-detail {
	max-width: 56rem;
	margin: var(--listora-space-6, 1.5rem) auto;
	padding: var(--listora-space-6, 1.5rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-lg, 14px);
	color: var(--listora-fg-default);
}

.listora-need-detail__header {
	margin-block-end: var(--listora-space-4, 1rem);
	padding-block-end: var(--listora-space-4, 1rem);
	border-block-end: 1px solid var(--listora-border, var(--listora-border-default));
}

.listora-need-detail__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-2, 0.5rem);
}

.listora-need-detail__title {
	margin: 0;
	font-size: clamp(1.4rem, 2.5vw, 1.875rem);
	font-weight: var(--listora-weight-bold, 700);
	line-height: 1.2;
	flex: 1 1 auto;
}

/* ─── Canonical pill primitive ─────────────────────────────────────
 * Single shape rule for every status pill on the Needs surfaces.
 * line-height: 1 is the key fix — without it, pills inherit the
 * parent's 1.5/1.6 line-height and render 39-46px tall instead of
 * the intended ~24px. Padding + font-size kept tight so pills sit
 * proportional to the title/body text around them.
 *
 * Colours come from the semantic variant classes that follow —
 * --success / --warning / --danger / --info / --neutral. The
 * Need-page specific classes below (status / pill / item-status)
 * all alias to the same shape so we have one canonical pill across
 * the entire frontend.
 */
.listora-need-detail__status,
.listora-need-detail__pill,
.listora-need-respond__item-status {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--listora-radius-full);
	white-space: nowrap;
	/* Defaults — neutral; semantic variants below override. */
	background: var(--listora-bg-muted);
	color: var(--listora-fg-muted);
}

/* Status — primary header pill (Open / Fulfilled / Expired). */
.listora-need-detail__status {
	/* Default is `open` — soft success tint. */
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
}

.listora-need-detail__status--fulfilled {
	/* Fulfilled is a SUCCESS state for the buyer. Brand red here would
	 * read as an error — use the canonical success tokens. */
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
}

.listora-need-detail__status--expired {
	background: var(--listora-bg-muted);
	color: var(--listora-fg-muted);
}

.listora-need-detail__byline {
	margin: var(--listora-space-1, 0.4rem) 0 0;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-need-detail__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--listora-space-4, 1rem);
	margin: 0 0 var(--listora-space-6, 1.5rem);
	padding: 0;
}

.listora-need-detail__meta-row {
	margin: 0;
}

.listora-need-detail__meta-row dt {
	font-size: var(--listora-text-xs, 0.75rem);
	font-weight: var(--listora-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	margin: 0 0 0.2rem;
}

.listora-need-detail__meta-row dd {
	margin: 0;
	font-size: var(--listora-text-base, 1rem);
	color: var(--listora-fg-default);
	font-weight: 500;
}

/* Urgency pill — Normal / Urgent / Flexible. Default ("Normal") is
 * a neutral state, not an error — uses the muted background from the
 * canonical shape rule above. Only `--urgent` escalates to danger. */
.listora-need-detail__pill--urgent {
	background: var(--listora-danger-bg);
	color: var(--listora-danger-fg);
}

.listora-need-detail__pill--flexible {
	background: var(--listora-bg-muted);
	color: var(--listora-fg-muted);
}

.listora-need-detail__section-title {
	margin: 0 0 var(--listora-space-2, 0.6rem);
	font-size: var(--listora-text-lg, 1.125rem);
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-need-detail__description {
	margin-block-end: var(--listora-space-6, 1.5rem);
}

.listora-need-detail__description-body {
	font-size: var(--listora-text-base, 1rem);
	line-height: 1.6;
	color: var(--listora-fg-default);
}

/* ─── Respond Panel ─── *
 * Flat — no outer card chrome. Vendors saw the previous tinted card
 * inside the article container as a "box in a box," and each response
 * <li> as a card-in-a-box-in-a-box. The article surface itself is the
 * outer box; response items sit directly on it with a single hairline.
 */
.listora-need-respond {
	margin-block-start: var(--listora-space-6);
	padding-block-start: var(--listora-space-4);
	border-block-start: 1px solid var(--listora-border-divider);
}

.listora-need-respond__notice {
	padding: 0.75rem 1rem;
	margin-block-end: var(--listora-space-2);
	font-size: var(--listora-text-size-sm);
	border-radius: var(--listora-radius-md);
	background: var(--listora-bg-muted);
	color: var(--listora-fg-muted);
	border: 1px solid var(--listora-border-subtle);
}

.listora-need-respond__notice--success {
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
	border-color: color-mix(in srgb, var(--listora-success-fg) 25%, transparent);
}

/* `--info` is the closed/fulfilled callout — neutral grey treatment,
 * not the brand red (which reads as an error to vendors). Fulfilled
 * is a success state for the buyer and a "this train left" state for
 * vendors; in neither reading is it an error. */
.listora-need-respond__notice--info {
	background: var(--listora-info-bg);
	color: var(--listora-info-fg);
	border-color: color-mix(in srgb, var(--listora-info-fg) 25%, transparent);
}

/* `--warning` — pay-per-response gate where the vendor's balance is too
 * low. Same tone as info but with an amber/warn palette so the vendor
 * notices it before they hit Submit. */
.listora-need-respond__notice--warning {
	background: var(--listora-warning-bg);
	color: var(--listora-warning-fg);
	border-color: color-mix(in srgb, var(--listora-warning-fg) 25%, transparent);
}

/* Buy-credits link in the low-balance notice and in the 402 feedback line.
 * Inherits the surrounding tone so it reads as part of the message. Scoped
 * to the panel so theme `.entry-content a:hover { text-decoration: none }`
 * rules cannot strip the underline, the only cue that this is a link. */
.listora-need-respond a.listora-need-respond__buy-link {
	display: inline;
	margin-inline-start: var(--listora-space-1, 0.25rem);
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.listora-need-respond a.listora-need-respond__buy-link:hover,
.listora-need-respond a.listora-need-respond__buy-link:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Author "Close this need" form — a quiet ghost-button stack so it doesn't
 * compete with the primary "Accept or reject in dashboard" CTA above. */
.listora-need-respond__close-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-3);
	margin-block-start: var(--listora-space-3);
	padding-block-start: var(--listora-space-3);
	border-block-start: 1px solid var(--listora-border-subtle);
}

.listora-need-respond__close-hint {
	color: var(--listora-text-muted);
	font-size: var(--listora-text-size-sm);
}

.listora-need-respond__login {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.6rem);
	align-items: flex-start;
}

.listora-need-respond__form {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4, 1rem);
}

.listora-need-respond__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.listora-need-respond__label {
	font-size: var(--listora-text-sm, 0.875rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default);
}

.listora-need-respond__optional {
	font-weight: 400;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	margin-inline-start: 0.25rem;
}

.listora-need-respond__textarea,
.listora-need-respond__input,
.listora-need-respond__select {
	width: 100%;
	padding: 0.6rem 0.8rem;
	font-size: var(--listora-text-base, 1rem);
	border: 1px solid var(--listora-border, var(--listora-border-strong));
	border-radius: var(--listora-radius-md, 10px);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	color: var(--listora-fg-default);
	transition: border-color var(--listora-transition-fast, 0.15s ease),
	            box-shadow var(--listora-transition-fast, 0.15s ease);
}

.listora-need-respond__textarea:focus,
.listora-need-respond__input:focus,
.listora-need-respond__select:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 20%, transparent);
}

.listora-need-respond__textarea {
	min-height: 8rem;
	resize: vertical;
}

.listora-need-respond__quote {
	display: flex;
	align-items: stretch;
}

.listora-need-respond__quote-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 0.7rem;
	background: var(--listora-surface, var(--listora-admin-bg-paper));
	border: 1px solid var(--listora-border, var(--listora-border-strong));
	border-inline-end: 0;
	border-start-start-radius: var(--listora-radius-md, 10px);
	border-end-start-radius: var(--listora-radius-md, 10px);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-need-respond__quote .listora-need-respond__input {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.listora-need-respond__listing-note {
	margin: 0;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-need-respond__feedback {
	min-height: 1.4em;
	font-size: var(--listora-text-sm, 0.875rem);
}

.listora-need-respond__feedback--error {
	color: var(--listora-danger-text, var(--listora-danger-fg));
}

.listora-need-respond__feedback--success {
	color: var(--listora-success-fg);
}

.listora-need-respond__form.is-submitting {
	opacity: 0.7;
}

.listora-need-respond__submit {
	align-self: flex-start;
	min-width: 10rem;
}

.listora-need-respond__submit:disabled {
	cursor: not-allowed;
}

/* Own-message — vendor's own submitted quote on a need they already
 * responded to. Same flat paragraph treatment as item-message; subtle
 * left accent + muted color so it reads as historical context. */
.listora-need-respond__own-message {
	margin: var(--listora-space-2) 0 0;
	padding: 0 0 0 var(--listora-space-3);
	border-inline-start: 2px solid var(--listora-border-default);
	font-size: var(--listora-text-size-sm);
	line-height: 1.55;
	color: var(--listora-fg-muted);
}

.listora-need-respond__own-message::before,
.listora-need-respond__own-message::after {
	content: none;
}

/* ─── Author View: Responses List ─── */

.listora-need-respond__author-msg {
	margin: 0 0 var(--listora-space-4, 1rem);
	padding: 0.75rem 1rem;
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 8%, transparent);
	border-inline-start: 3px solid var(--listora-success, var(--listora-success));
	border-radius: var(--listora-radius-md, 10px);
	color: var(--listora-success-fg);
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-need-respond__list {
	list-style: none;
	margin: 0 0 var(--listora-space-4, 1rem);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.6rem);
}

/* Response item — single visual box level. No nested borders.
 * Sits directly on the article surface separated by hairline dividers
 * from the .listora-need-respond__list gap. */
.listora-need-respond__item {
	padding: var(--listora-space-3) 0;
	border-block-end: 1px solid var(--listora-border-divider);
}

.listora-need-respond__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.listora-need-respond__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-2, 0.5rem);
	margin-block-end: 0.4rem;
}

.listora-need-respond__item-vendor {
	font-size: var(--listora-text-base, 1rem);
}

/* Response item status pill — Pending / Accepted / Rejected.
 * Inherits shape from the canonical rule at the top of this section. */
.listora-need-respond__item-status {
	background: var(--listora-warning-bg);
	color: var(--listora-warning-fg);
}

.listora-need-respond__item-status--accepted {
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
}

.listora-need-respond__item-status--rejected {
	background: var(--listora-danger-bg);
	color: var(--listora-danger-fg);
}

.listora-need-respond__item-listing {
	margin: 0 0 0.35rem;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

/* Message body — plain paragraph styling. No <blockquote> chrome,
 * no decorative quote glyphs (theme stylesheets used to inject a
 * giant ::before quote on blockquote which created the third nested
 * box the user called out). Subtle left accent for vendor scannability. */
.listora-need-respond__item-message {
	margin: var(--listora-space-2) 0 0;
	padding: 0 0 0 var(--listora-space-3);
	border-inline-start: 2px solid var(--listora-border-default);
	font-size: var(--listora-text-size-sm);
	line-height: 1.55;
	color: var(--listora-fg-default);
}

.listora-need-respond__item-message::before,
.listora-need-respond__item-message::after {
	content: none;
}

.listora-need-respond__item-meta {
	margin: 0;
	font-size: var(--listora-text-xs, 0.75rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-need-respond__empty {
	padding: var(--listora-space-4, 1rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px dashed var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 10px);
	text-align: center;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

@media (max-width: 640px) {
	.listora-need-detail {
		padding: var(--listora-space-4, 1rem);
	}

	.listora-need-detail__heading {
		flex-direction: column;
		align-items: flex-start;
	}

	.listora-need-detail__meta {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.listora-need-respond__submit {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.listora-need-detail__meta {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ════════════════════════════════════════════
   Dashboard — "Needs matching your listings" lead-in
════════════════════════════════════════════ */

.listora-dashboard__matches {
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	padding: var(--listora-space-5);
	margin-block-end: var(--listora-space-5);
}

.listora-dashboard__matches-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--listora-space-3);
	margin-block-end: var(--listora-space-2);
}

.listora-dashboard__matches-title {
	margin: 0;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-font-weight-semibold);
	color: var(--listora-text-strong);
}

.listora-dashboard__matches-link {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-primary-text);
	text-decoration: none;
}

.listora-dashboard__matches-link:hover,
.listora-dashboard__matches-link:focus-visible {
	text-decoration: underline;
}

.listora-dashboard__matches-help {
	margin: 0 0 var(--listora-space-4);
	color: var(--listora-text-muted);
	font-size: var(--listora-text-size-sm);
	line-height: var(--listora-line-height-relaxed);
}

.listora-dashboard__matches-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--listora-space-3);
}

.listora-dashboard__matches-item {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
	padding: var(--listora-space-3) var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-sm);
}

.listora-dashboard__matches-title-link {
	font-weight: var(--listora-font-weight-medium);
	color: var(--listora-text-strong);
	text-decoration: none;
}

.listora-dashboard__matches-title-link:hover,
.listora-dashboard__matches-title-link:focus-visible {
	color: var(--listora-primary-text);
	text-decoration: underline;
}

.listora-dashboard__matches-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	align-items: center;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-text-muted);
}

/* ════════════════════════════════════════════
   Dashboard "My Responses" tab — vendor side
════════════════════════════════════════════ */

.listora-dashboard__response-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-3);
}

.listora-dashboard__response-item {
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	padding: var(--listora-space-5);
}

.listora-dashboard__response-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--listora-space-3);
	margin-block-end: var(--listora-space-3);
}

.listora-dashboard__response-need {
	margin: 0;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-font-weight-semibold);
}

.listora-dashboard__response-need a {
	color: var(--listora-text-strong);
	text-decoration: none;
}

.listora-dashboard__response-need a:hover,
.listora-dashboard__response-need a:focus-visible {
	color: var(--listora-primary-text);
	text-decoration: underline;
}

.listora-dashboard__response-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-3) var(--listora-space-5);
	margin: 0 0 var(--listora-space-3);
}

.listora-dashboard__response-meta dt {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.listora-dashboard__response-meta dd {
	margin: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-default);
}

.listora-dashboard__response-message {
	margin: 0;
	padding-inline-start: var(--listora-space-3);
	border-inline-start: 2px solid var(--listora-border-subtle);
	color: var(--listora-text-muted);
	font-size: var(--listora-text-size-sm);
	line-height: var(--listora-line-height-relaxed);
}

/* ════════════════════════════════════════════
   Dashboard "Listing slots remaining" pack-balance card
════════════════════════════════════════════ */

.listora-dashboard__pack-balance {
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	padding: var(--listora-space-5);
	margin-block-end: var(--listora-space-5);
}

.listora-dashboard__pack-balance-title {
	margin: 0 0 var(--listora-space-2);
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-font-weight-semibold);
	color: var(--listora-text-strong);
}

.listora-dashboard__pack-balance-help {
	margin: 0 0 var(--listora-space-4);
	color: var(--listora-text-muted);
	font-size: var(--listora-text-size-sm);
	line-height: var(--listora-line-height-relaxed);
}

.listora-dashboard__pack-balance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-dashboard__pack-balance-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--listora-space-3);
	padding: var(--listora-space-3) var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-sm);
}

.listora-dashboard__pack-balance-name {
	font-weight: var(--listora-font-weight-medium);
	color: var(--listora-fg-default);
}

/* ════════════════════════════════════════════
   Dashboard "My Needs" tab
════════════════════════════════════════════ */

.listora-dashboard__needs-list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4, 1rem);
}

.listora-dashboard__need-row {
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	padding: var(--listora-space-5);
}

.listora-dashboard__need-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-4, 1rem);
	align-items: flex-start;
	justify-content: space-between;
}

.listora-dashboard__need-titlewrap {
	flex: 1 1 220px;
	min-width: 0;
}

.listora-dashboard__need-title {
	margin: 0 0 var(--listora-space-1, 0.4rem);
	font-size: var(--listora-text-md, 1rem);
	font-weight: var(--listora-weight-semibold, 600);
	line-height: 1.3;
}

.listora-dashboard__need-title a {
	color: inherit;
	text-decoration: none;
}

.listora-dashboard__need-title a:hover,
.listora-dashboard__need-title a:focus-visible {
	color: var(--listora-primary-text);
	text-decoration: underline;
}

.listora-dashboard__need-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2, 0.6rem);
	align-items: center;
	font-size: var(--listora-text-sm, 0.85rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-dashboard__need-respcount {
	display: inline-flex;
	gap: var(--listora-space-1, 0.3rem);
	align-items: center;
}

.listora-dashboard__need-pending-dot {
	color: var(--listora-warning, var(--listora-warning-fg));
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-dashboard__need-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	gap: var(--listora-space-1, 0.3rem);
	align-items: center;
}

.listora-dashboard__need-toggle.is-expanded .listora-dashboard__need-toggle-icon {
	transform: rotate(180deg);
}

.listora-dashboard__need-toggle-icon {
	transition: transform 0.18s ease;
}

.listora-dashboard__need-details {
	margin-block-start: var(--listora-space-4, 1rem);
	padding-block-start: var(--listora-space-4, 1rem);
	border-block-start: 1px solid var(--listora-border, var(--listora-border-default));
}

.listora-dashboard__need-empty {
	margin: 0;
	padding: var(--listora-space-4, 1rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-size: var(--listora-text-sm, 0.9rem);
	text-align: center;
}

.listora-dashboard__response-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.75rem);
}

.listora-dashboard__response-card {
	background: var(--listora-surface, var(--listora-admin-bg-soft));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 10px);
	padding: var(--listora-space-4, 1rem);
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2, 0.6rem);
}

.listora-dashboard__response-card[data-status="accepted"] {
	border-color: var(--listora-success, var(--listora-success));
	background: color-mix(in srgb, var(--listora-success, var(--listora-success)) 5%, var(--listora-surface, var(--listora-admin-bg-soft)));
}

.listora-dashboard__response-card[data-status="rejected"] {
	opacity: 0.72;
}

.listora-dashboard__response-card-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2, 0.6rem);
	justify-content: space-between;
	align-items: center;
}

.listora-dashboard__response-vendor {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--listora-space-1, 0.3rem);
	font-size: var(--listora-text-sm, 0.9rem);
	color: var(--listora-fg-default);
}

.listora-dashboard__response-vendor-name {
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-dashboard__response-listing a {
	color: var(--listora-primary-text);
	text-decoration: none;
}

.listora-dashboard__response-listing a:hover,
.listora-dashboard__response-listing a:focus-visible {
	text-decoration: underline;
}

.listora-dashboard__response-message {
	margin: 0;
	color: var(--listora-fg-default);
	font-size: var(--listora-text-sm, 0.9rem);
	line-height: 1.5;
}

.listora-dashboard__response-card-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--listora-space-2, 0.6rem);
}

.listora-dashboard__response-date {
	font-size: var(--listora-text-xs, 0.75rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-dashboard__response-actions {
	display: inline-flex;
	gap: var(--listora-space-1, 0.4rem);
}

@media (max-width: 640px) {
	.listora-dashboard__need-head {
		flex-direction: column;
	}

	/* In a column the 220px basis became a height: a blank gap above the actions. */
	.listora-dashboard__need-titlewrap {
		flex-basis: auto;
	}

	.listora-dashboard__need-toggle {
		align-self: flex-start;
	}

	.listora-dashboard__response-card-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.listora-dashboard__response-actions {
		width: 100%;
	}

	.listora-dashboard__response-actions .listora-btn {
		flex: 1 1 0;
	}
}


/* ============================================================
 * Analytics dashboard — component controls.
 * Held by doubled-class specificity (no !important): the listing summary is a
 * clean transparent row (title + stats); period buttons are subtle pills with
 * a primary active state.
 * ============================================================ */
.listora-analytics-listing__summary.listora-analytics-listing__summary {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
}
.listora-analytics-detail__period-btn.listora-analytics-detail__period-btn {
	background: var(--listora-card-bg, #fff);
	color: var(--listora-fg-muted, #555);
	border: 1px solid var(--listora-border, rgba(0, 0, 0, 0.12));
	border-radius: 9999px;
	box-shadow: none;
}
.listora-analytics-detail__period-btn.listora-analytics-detail__period-btn:hover,
.listora-analytics-detail__period-btn.listora-analytics-detail__period-btn.is-active {
	background: var(--listora-primary-fill, var(--listora-primary));
	color: var(--listora-primary-fg, #fff);
	border-color: var(--listora-primary);
}

/* THEME-INDEPENDENCE — coupon apply (plan step). Secondary action, not a
   solid-red theme button. */
.listora-plan-step__coupon-apply.listora-plan-step__coupon-apply {
	background: transparent;
	color: var(--listora-primary-text);
	border: 1px solid var(--listora-primary);
	border-radius: var(--listora-button-radius, 6px);
	box-shadow: none;
}
.listora-plan-step__coupon-apply.listora-plan-step__coupon-apply:hover {
	background: var(--listora-primary-fill, var(--listora-primary));
	color: var(--listora-primary-fg, #fff);
}

/* ════════════════════════════════════════════
   Photo Reviews (frontend — listing detail)
════════════════════════════════════════════ */

/* ─── Photo Reviews — Upload Drop Zone ─── */
.listora-review-photos {
	margin-bottom: 1rem;
}

.listora-review-photos__limit {
	font-weight: 400;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	font-size: 0.8125rem;
}

.listora-review-photos__dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 1rem;
	border: 2px dashed var(--listora-border-strong, var(--listora-border-strong));
	border-radius: 6px;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.listora-review-photos__dropzone:hover,
.listora-review-photos__dropzone.is-drag-over {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	background: var(--listora-info-bg, var(--listora-info-bg));
}

.listora-review-photos__dropzone.is-active {
	border-style: solid;
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
}

/* File input covers the entire dropzone — invisible, clickable */
.listora-review-photos__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.listora-review-photos__input:disabled {
	cursor: not-allowed;
}

.listora-review-photos__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	font-size: 0.875rem;
	pointer-events: none;
	text-align: center;
}

.listora-review-photos__placeholder svg {
	color: var(--listora-text-faint, var(--listora-fg-faint));
}

.listora-review-photos__placeholder.is-hidden {
	display: none;
}

/* ─── Photo Reviews — Preview Thumbnails ─── */
.listora-review-photos__previews {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.listora-review-photos__previews.is-hidden {
	display: none;
}

.listora-review-photos__preview-item {
	position: relative;
	flex-shrink: 0;
}

.listora-review-photos__preview-img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
}

.listora-review-photos__remove-btn {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: var(--listora-danger, var(--listora-danger));
	border: none;
	border-radius: 50%;
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	cursor: pointer;
	line-height: 1;
	z-index: 2;
}

.listora-review-photos__remove-btn:hover {
	background: var(--listora-danger-text, var(--listora-danger-fg));
}

/* ─── Photo Reviews — Gallery (Review List Display) ─── */
.listora-review-photos__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.listora-review-photos__gallery-link {
	display: block;
	flex-shrink: 0;
}

.listora-review-photos__gallery-img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	transition: opacity 0.15s ease;
}

.listora-review-photos__gallery-link:hover .listora-review-photos__gallery-img {
	opacity: 0.85;
}

/* ════════════════════════════════════════════
   Multi-Criteria Reviews — Criteria Averages
════════════════════════════════════════════ */

/* ─── Criteria Averages (Listing Detail — Frontend) ─── */
.listora-criteria-averages {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: 8px;
}

.listora-criteria-averages__heading {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--listora-fg-default);
}

.listora-criteria-averages__list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.listora-criteria-averages__row {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: 0.75rem;
}

.listora-criteria-averages__label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--listora-fg-default);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listora-criteria-averages__bar-wrap {
	height: 8px;
	background: var(--listora-border, var(--listora-border-default));
	border-radius: 4px;
	overflow: hidden;
}

.listora-criteria-averages__bar-fill {
	height: 100%;
	background: var(--listora-primary, var(--listora-wp-admin-link));
	border-radius: 4px;
	transition: width 0.4s ease;
	min-width: 2px;
}

.listora-criteria-averages__score {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--listora-fg-default);
	text-align: right;
}

/* === Review Criteria + Comparison (frontend) — relocated from pro-admin.css 2026-06-23 === */
/* ─── Review Criteria (Frontend) ─── */
.listora-reviews__criteria {
	margin-bottom: 1rem;
	padding: 1rem;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border-radius: 6px;
}

.listora-reviews__criterion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.375rem 0;
}

.listora-reviews__criterion-label {
	font-size: 0.875rem;
	font-weight: 500;
}

.listora-reviews__star-input--small .listora-reviews__star-svg {
	width: 20px;
	height: 20px;
}

/* Photo-review + criteria-averages rules are frontend-only — they render on
 * public listing detail pages, never in wp-admin. Moved to pro-frontend.css
 * (the unconditionally-enqueued frontend sheet) so they actually load there. */

/* ─── Floating Comparison Bar ─── */
.listora-compare-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--listora-text-strong, var(--listora-wp-admin-text-strong));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	padding: 0.75rem 1rem;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
	transform: translateY(0);
	transition: transform 0.25s ease;
}

/* Doubled-class specificity (no !important) so a theme can't force the hidden
   bar visible — keeps the frontend sheet !important-free per coding rules. */
.listora-compare-bar.listora-compare-bar[hidden] {
	display: none;
}

.listora-compare-bar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.listora-compare-bar__count {
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--listora-border-subtle, var(--listora-border-default));
}

.listora-compare-bar__slots {
	display: flex;
	gap: 0.5rem;
	flex: 1;
}

.listora-compare-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-inline-start: auto;
}

.listora-compare-bar__clear {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--listora-border-strong); /* TODO: tokenize when canonical token added */
	padding: 0.4rem 0.9rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: border-color 0.15s, color 0.15s;
}

.listora-compare-bar__clear:hover {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-compare-bar__cta {
	display: inline-block;
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	color: var(--listora-primary-fg);
	text-decoration: none;
	padding: 0.45rem 1.25rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 700;
	transition: opacity 0.15s ease;
}

.listora-compare-bar__cta:hover {
	opacity: 0.88;
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

/* ─── Compare Toggle on Cards ─── */
/* Styled to read as an action button (matches Save / Share / Directions
   in the detail header). The previous thin-bordered rectangle without
   an icon read as a disabled input field at first glance. */
.listora-compare-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	/* Sit above the card's stretched title-link overlay
	   (.listora-card__title a::after, z-index 1) so the toggle is clickable
	   on a listing card instead of the click navigating to the single listing. */
	position: relative;
	z-index: 2;
	min-height: 40px;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-full, 9999px);
	font-size: 0.8rem;
	font-weight: var(--listora-weight-semibold, 600);
	/* Use semantic body-text + elevated-surface tokens so dark mode inverts.
	   Previous --listora-text-primary / --listora-fg-inverse pairing painted
	   near-black on near-black under dark — both are undefined or dark-tinted. */
	color: var(--listora-fg-default);
	background: var(--listora-bg-elevated);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	user-select: none;
	/* Sit above the .listora-card__title a::after click overlay so the toggle is interactive. */
	position: relative;
	z-index: 2;
}

.listora-compare-toggle:hover {
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.listora-compare-toggle.is-selected {
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-fg);
}

.listora-compare-toggle__icon,
.listora-compare-toggle__check {
	flex-shrink: 0;
	pointer-events: none;
}

/* Default state: show the bars icon, hide the check. */
.listora-compare-toggle__check {
	display: none;
}

/* Selected state: swap icons so users see at a glance "this card is in compare". */
.listora-compare-toggle.is-selected .listora-compare-toggle__icon {
	display: none;
}

.listora-compare-toggle.is-selected .listora-compare-toggle__check {
	display: inline-block;
}

.listora-compare-toggle__checkbox {
	/* Visually hidden but still accessible */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.listora-compare-toggle__label {
	pointer-events: none;
}

/* ─── Verified Badge on Cards ─── */
.listora-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 40px;
	padding: 0.2rem 0.65rem;
	background: var(--listora-info-bg, var(--listora-info-bg));
	color: var(--listora-info, var(--listora-info));
	border: 1px solid var(--listora-info-bg); /* TODO: tokenize when canonical token added */
	border-radius: var(--listora-radius-full, 9999px);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.listora-verified-badge__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.listora-verified-badge__text {
	white-space: nowrap;
}

/* ─── Compare Toggle Disabled state (max reached) ─── */
.listora-compare-toggle.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: auto;
}

.listora-compare-toggle.is-disabled:hover {
	border-color: var(--listora-border, var(--listora-border-default));
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-compare-toggle:focus-visible,
.listora-compare-toggle__checkbox:focus-visible + .listora-compare-toggle__label {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

/* ─── Listing-Detail Compare Button ─── */
.listora-detail-compare {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.listora-detail-compare__icon {
	flex-shrink: 0;
}

.listora-detail-compare__label--in {
	display: none;
}

.listora-detail-compare.is-selected {
	background: var(--listora-primary-fill, var(--listora-primary, var(--listora-wp-admin-link)));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-primary-fg);
}

.listora-detail-compare.is-selected .listora-detail-compare__label--add {
	display: none;
}

.listora-detail-compare.is-selected .listora-detail-compare__label--in {
	display: inline;
}

.listora-detail-compare.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.listora-detail-compare:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

/* ─── Floating Compare Bar — Slot thumbnails ─── */
.listora-compare-bar__slot {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: 0.8rem;
	max-width: 200px;
}

.listora-compare-bar__slot-thumb {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
}

.listora-compare-bar__slot-thumb--placeholder {
	background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
}

.listora-compare-bar__slot-title {
	color: var(--listora-admin-bg-paper); /* TODO: tokenize when canonical token added */
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 8rem;
}

.listora-compare-bar__slot-remove {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0.25rem;
	cursor: pointer;
	border-radius: 4px;
	flex-shrink: 0;
}

.listora-compare-bar__slot-remove:hover,
.listora-compare-bar__slot-remove:focus-visible {
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: rgba(255, 255, 255, 0.15);
}

/*
 * Keyboard focus needs its own indicator, not the hover treatment.
 *
 * This shared the hover rule, whose only visible change is a 15%-white
 * background against an already-dark bar, behind `outline: 2px solid
 * transparent`. A keyboard user could not tell which slot they were on —
 * WCAG 2.4.7. Uses the same --listora-focus-ring token Free's components
 * draw focus with, so the treatment matches the rest of the product.
 */
.listora-compare-bar__slot-remove:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var( --listora-focus-ring, 0 0 0 2px var( --listora-bg-elevated ), 0 0 0 4px var( --listora-primary ) );
}

.listora-compare-bar__cta.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.listora-compare-bar__cta:focus-visible,
.listora-compare-bar__clear:focus-visible {
	outline: 2px solid var(--listora-fg-inverse, var(--listora-bg-elevated));
	outline-offset: 2px;
}

/* Empty state */
.listora-compare-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	background: var(--listora-surface, var(--listora-admin-bg-paper));
	border-radius: var(--listora-radius, 8px);
	border: 1px dashed var(--listora-border, var(--listora-border-default));
}

/* Mobile responsive */
@media (max-width: 640px) {
	.listora-compare-bar__slots {
		flex-wrap: wrap;
		width: 100%;
		order: 3;
	}

	.listora-compare-bar__slot {
		max-width: 100%;
	}

	.listora-compare-bar__slot-title {
		max-width: 6rem;
	}

	.listora-compare-bar__inner {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.listora-compare-bar__count {
		flex: 1 1 auto;
	}

	.listora-compare-bar__actions {
		margin-inline-start: 0;
	}
}


/* Buyer contact for the vendor whose quote was accepted (card 10337031114). */
.listora-need-respond__contact {
	margin: var(--listora-space-3) 0;
	padding: var(--listora-space-4);
	border: 1px solid var(--listora-success-fg);
	border-radius: var(--listora-radius-md);
	background: var(--listora-success-bg);
}

.listora-need-respond__contact-title {
	margin: 0 0 var(--listora-space-2);
	font-size: var(--listora-text-size-base);
	color: var(--listora-fg-strong);
}

.listora-need-respond__contact-list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--listora-space-1) var(--listora-space-3);
	margin: 0;
	font-size: var(--listora-text-size-sm);
}

.listora-need-respond__contact-list dt {
	color: var(--listora-fg-muted);
}

.listora-need-respond__contact-list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* My Needs: manage a request (card 10337031808). */
.listora-dashboard__need-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	align-items: center;
}

.listora-dashboard__need-actions form {
	margin: 0;
}

.listora-dashboard__need-actions .listora-dashboard__need-delete {
	color: var(--listora-danger-fg);
}

.listora-dashboard__need-notice {
	margin: 0 0 var(--listora-space-4);
	padding: var(--listora-space-3) var(--listora-space-4);
	border-inline-start: 3px solid var(--listora-success-fg);
	border-radius: var(--listora-radius-md);
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
	font-size: var(--listora-text-size-sm);
}

/* Needs navigation (card 10337032282). */
.listora-needs__actions {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 var(--listora-space-4);
}

.listora-need-detail__back {
	display: inline-flex;
	align-items: center;
	gap: var(--listora-space-1);
	margin: 0 0 var(--listora-space-3);
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
}

[dir="rtl"] .listora-need-detail__back-icon {
	transform: scaleX(-1);
}

@media (max-width: 480px) {
	.listora-needs__actions .listora-btn {
		width: 100%;
		justify-content: center;
	}
}