/**
 * Wholesale account styles.
 *
 * Uses the Fischer Bell theme's design tokens, with a literal fallback after each var() so the
 * plugin still renders sensibly under a different theme.
 */

/* ------------------------------------------------------------------ pricing ---- */

/* Trade pricing reads green; retail stays ink. The colour is the signal that a rate is applied. */
.fb-price--wholesale .fb-price__now {
	font-family: var(--font-display, sans-serif);
	font-weight: var(--fw-bold, 700);
	color: var(--fb-green-700, #4E7D1E);
}

.fb-price__was {
	font-size: var(--text-body-sm, 14px);
	color: var(--text-muted, #676B76);
	text-decoration: line-through;
	font-weight: var(--fw-regular, 400);
}

.fb-price__meta {
	display: block;
	margin-top: var(--space-2, 8px);
}

/* The prompt for logged-out visitors sits beside the retail price, never replacing it. */
.fb-price__gate {
	display: block;
	margin-top: var(--space-2, 8px);
	font-size: var(--text-body-sm, 14px);
	font-weight: var(--fw-semibold, 600);
	color: var(--fb-green-700, #4E7D1E);
	text-decoration: none;
}

.fb-price__gate:hover { text-decoration: underline; color: var(--fb-green-700, #4E7D1E); }

.fb-wholesale-upsell { margin-block: var(--space-4, 16px); }
.fb-wholesale-upsell a { font-weight: var(--fw-semibold, 600); }

/* -------------------------------------------------------- application form ---- */

.fb-wholesale-apply { max-width: 820px; }

.fb-wholesale-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4, 16px);
	margin-bottom: var(--space-6, 24px);
}

.fb-wholesale-form__grid .fb-field { margin: 0; }
.fb-wholesale-form__grid .fb-field--wide { grid-column: 1 / -1; }

.fb-wholesale-form__note {
	font-size: var(--text-caption, 13px);
	color: var(--text-muted, #676B76);
	margin-top: var(--space-4, 16px);
	max-width: 60ch;
	text-wrap: pretty;
}

/* Off-screen rather than display:none — bots skip hidden inputs but fill positioned ones. */
.fb-wholesale-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ account area ---- */

.fb-account-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 16px);
	flex-wrap: wrap;
	padding: var(--space-5, 20px);
	margin-bottom: var(--space-6, 24px);
	border: var(--border-width, 1px) solid var(--border-default, #D2D4DA);
	border-radius: var(--radius-lg, 8px);
	background: var(--surface-card, #fff);
}

.fb-account-status__company {
	font-family: var(--font-display, sans-serif);
	font-size: var(--text-h3, 22px);
	font-weight: var(--fw-bold, 700);
	letter-spacing: var(--ls-heading, -0.01em);
	margin-top: var(--space-1, 4px);
}

.fb-account-lede {
	color: var(--text-secondary, #4B4F58);
	font-size: var(--text-body-sm, 14px);
	max-width: 62ch;
	margin-bottom: var(--space-6, 24px);
	text-wrap: pretty;
}

.fb-pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-sm, 14px);
}

.fb-pricing-table thead tr {
	border-bottom: var(--border-width-strong, 2px) solid var(--border-default, #D2D4DA);
}

.fb-pricing-table th {
	text-align: left;
	padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) 0;
	font-size: var(--text-micro, 11px);
	font-weight: var(--fw-semibold, 600);
	letter-spacing: var(--ls-eyebrow, 0.09em);
	text-transform: uppercase;
	color: var(--text-muted, #676B76);
}

.fb-pricing-table td {
	padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) 0;
	border-bottom: var(--border-width, 1px) solid var(--border-subtle, #E7E8EC);
	vertical-align: top;
}

.fb-pricing-table a { color: var(--text-primary, #2C2E35); text-decoration: none; font-weight: var(--fw-semibold, 600); }
.fb-pricing-table a:hover { text-decoration: underline; }

.fb-pricing-table__sku {
	display: block;
	font-family: var(--font-mono, monospace);
	font-size: var(--text-micro, 11px);
	color: var(--text-muted, #676B76);
	margin-top: 2px;
}

.fb-pricing-table .is-list {
	font-family: var(--font-mono, monospace);
	color: var(--text-muted, #676B76);
	text-decoration: line-through;
}

.fb-pricing-table .is-yours {
	font-family: var(--font-mono, monospace);
	color: var(--fb-green-700, #4E7D1E);
	font-weight: var(--fw-semibold, 600);
}

.fb-pricing-table .is-mono { font-family: var(--font-mono, monospace); }

/* --------------------------------------------------------------- responsive ---- */

@media (max-width: 720px) {
	.fb-wholesale-form__grid { grid-template-columns: 1fr; }

	/* A 4-column price table is unreadable at 375px; reflow to labelled rows. */
	.fb-pricing-table thead { display: none; }
	.fb-pricing-table, .fb-pricing-table tbody, .fb-pricing-table tr, .fb-pricing-table td { display: block; width: 100%; }

	.fb-pricing-table tr {
		padding: var(--space-4, 16px) 0;
		border-bottom: var(--border-width, 1px) solid var(--border-subtle, #E7E8EC);
	}

	.fb-pricing-table td { border: 0; padding: 0; }
	.fb-pricing-table td + td { display: inline-block; width: auto; margin-right: var(--space-4, 16px); margin-top: var(--space-2, 8px); }
	.fb-pricing-table td.is-list::before { content: "List "; color: var(--text-muted, #676B76); font-family: var(--font-body, sans-serif); }
	.fb-pricing-table td.is-yours::before { content: "Yours "; color: var(--text-muted, #676B76); font-family: var(--font-body, sans-serif); font-weight: 400; }
}