/**
 * 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
════════════════════════════════════════════ */

.listora-verified-badge {
	display: inline-flex;
	align-items: center;
	color: var(--listora-success, var(--listora-success));
	cursor: default;
}

.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-text, 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 {
	width: 0.85em;
	height: 0.85em;
}

/* ════════════════════════════════════════════
   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, var(--listora-wp-admin-link));
	font-weight: var(--listora-weight-semibold, 600);
}

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

.listora-plan-step__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--listora-space-4, 1rem);
}

/* ─── 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 */

.listora-plan-card--featured .listora-plan-card__inner {
	border-color: var(--listora-rating, var(--listora-rating));
	background: color-mix(in srgb, var(--listora-rating, var(--listora-rating)) 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-rating, var(--listora-rating));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--listora-rating, var(--listora-rating)) 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;
}

/* ─── 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-fg-inverse, var(--listora-bg-elevated));
	border-radius: var(--listora-radius-full, 9999px);
}

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

.listora-plan-card__name {
	font-size: var(--listora-text-base, 0.9rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	line-height: 1.3;
}

.listora-plan-card__price {
	font-size: var(--listora-text-xl, 1.3rem);
	font-weight: var(--listora-weight-bold, 700);
	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));
}

.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, var(--listora-wp-admin-link));
	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, var(--listora-wp-admin-link));
	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 ─── */

.listora-plan-card__insufficient {
	margin: 0;
	padding: 0.4rem 0.6rem;
	font-size: var(--listora-text-xs, 0.7rem);
	color: var(--listora-danger, var(--listora-danger));
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 8%, transparent);
	border-radius: var(--listora-radius-sm, 6px);
}

.listora-plan-card__buy-link {
	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-text, var(--listora-wp-admin-text-strong));
}

.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, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	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-text, 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-text, 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, var(--listora-wp-admin-link));
}

.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-text, var(--listora-wp-admin-text-strong));
}

.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-text, var(--listora-wp-admin-text-strong));
	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, var(--listora-wp-admin-link));
}

.listora-analytics-listing__title {
	font-size: var(--listora-text-base, 0.9rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	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-text, var(--listora-wp-admin-text-strong));
	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, var(--listora-wp-admin-link));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.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, var(--listora-wp-admin-link));
	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, var(--listora-wp-admin-link));
}

noscript .listora-pagination .current {
	background: var(--listora-primary, var(--listora-wp-admin-link));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	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-text, var(--listora-wp-admin-text-strong));
}

.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-text, 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-text, var(--listora-wp-admin-text));
}

.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-text, var(--listora-wp-admin-text));
	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-text, var(--listora-wp-admin-text));
}

/* ─── 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);
}

/* 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-font-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-text, var(--listora-wp-admin-text));
}

.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-text, var(--listora-wp-admin-text));
	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-text, 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-text, 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-font-size-md);
	font-weight: var(--listora-font-weight-semibold);
	color: var(--listora-text-strong);
}

.listora-dashboard__matches-link {
	font-size: var(--listora-font-size-sm);
	color: var(--listora-primary);
	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-font-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-decoration: underline;
}

.listora-dashboard__matches-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	align-items: center;
	font-size: var(--listora-font-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-font-size-md);
	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-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-font-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-font-size-sm);
	color: var(--listora-text);
}

.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-font-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-font-size-md);
	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-font-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-text);
}

/* ════════════════════════════════════════════
   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, var(--listora-wp-admin-link));
	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-text, var(--listora-wp-admin-text));
}

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

.listora-dashboard__response-listing a {
	color: var(--listora-primary, var(--listora-wp-admin-link));
	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-text, var(--listora-wp-admin-text));
	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;
	}

	.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);
	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);
	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);
	color: var(--listora-primary-fg, #fff);
}