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

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

/*
 * The product page's quantity breaks (FB_Wholesale_Pricing::render_panel()), under the price, laid out
 * like the reference supplier's: quantity, price per unit without GST, price per unit with it. The row
 * the buyer's quantity reaches is tinted green (bulk.js), the colour that already means "a trade rate
 * applies" on this site.
 */
.fb-bulk {
	margin-block: var(--space-4, 16px) var(--space-5, 20px);
	max-width: 480px;
}

.fb-bulk__title {
	margin: 0 0 var(--space-2, 8px);
	font-family: var(--font-body, sans-serif);
	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);
}

/* `separate` so the border can take the radius; `collapse` ignores it. */
.fb-bulk__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--border-width, 1px) solid var(--border-default, #D2D4DA);
	border-radius: var(--radius-md, 4px);
	overflow: hidden;
	font-size: var(--text-body-sm, 14px);
	font-variant-numeric: tabular-nums;
}

.fb-bulk__table th,
.fb-bulk__table td {
	padding: var(--space-2, 8px) var(--space-3, 12px);
	text-align: center;
	border-bottom: var(--border-width, 1px) solid var(--border-subtle, #E7E8EC);
}

.fb-bulk__table thead th {
	background: var(--surface-subtle, #F5F6F8);
	font-size: var(--text-caption, 13px);
	font-weight: var(--fw-semibold, 600);
	color: var(--text-secondary, #4B4F58);
	line-height: 1.3;
}

.fb-bulk__table thead th span {
	display: block;
	font-size: var(--text-micro, 11px);
	font-weight: var(--fw-regular, 400);
	color: var(--text-muted, #676B76);
}

.fb-bulk__table tbody th { font-weight: var(--fw-semibold, 600); }

/*
 * The quantity column never wraps: at 375px "Quantity" broke mid-word and "10 – 14" split over two
 * lines, while the price columns, which carry ranges on a product whose options differ, wrap at the
 * dash as they should.
 */
.fb-bulk__table tr > :first-child { white-space: nowrap; }

@media (max-width: 480px) {
	.fb-bulk__table th,
	.fb-bulk__table td { padding-inline: var(--space-2, 8px); }
}

.fb-bulk__table tbody tr:last-child > * { border-bottom: 0; }

.fb-bulk__table tr.is-current > * {
	background: var(--surface-accent-soft, #EAF3DF);
	color: var(--fb-green-700, #4E7D1E);
	font-weight: var(--fw-semibold, 600);
}

.fb-bulk__note {
	margin: var(--space-2, 8px) 0 0;
	font-size: var(--text-caption, 13px);
	color: var(--text-muted, #676B76);
	text-wrap: pretty;
}

/* What a visitor without a trade account sees in the table's place: that it exists, and how to get it. */
.fb-bulk--locked p {
	margin: 0;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	border: var(--border-width, 1px) dashed var(--border-default, #D2D4DA);
	border-radius: var(--radius-md, 4px);
	background: var(--surface-subtle, #F5F6F8);
	font-size: var(--text-body-sm, 14px);
	color: var(--text-secondary, #4B4F58);
	text-wrap: pretty;
}

.fb-bulk--locked a { font-weight: var(--fw-semibold, 600); color: var(--fb-green-700, #4E7D1E); }

/* "Add 4 more for S$0.74 each." — its own line at the foot of the buy row (bulk.js). */
.fb-bulk-nudge {
	flex: 1 1 100%;
	order: 99;
	margin: 0;
	font-size: var(--text-body-sm, 14px);
	font-weight: var(--fw-semibold, 600);
	color: var(--fb-green-700, #4E7D1E);
}

.fb-bulk-nudge[hidden] { display: none; }

.fb-account-subhead {
	margin: var(--space-6, 24px) 0 var(--space-2, 8px);
	font-size: var(--text-h4, 18px);
}

.fb-pricing-table--bulk tbody th {
	text-align: left;
	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);
	font-size: var(--text-body-sm, 14px);
	font-weight: var(--fw-semibold, 600);
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-primary, #2C2E35);
}

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

	/*
	 * The four-column rate card (product, list, yours, saving) that reflowed to labelled rows here
	 * went with per-tier prices (2026-09-27). The My pricing tables are two columns now and read as
	 * tables at 375px.
	 */
}