/**
 * Quote flow styles.
 *
 * Consumes the Fischer Bell theme's design tokens, with fallbacks after each var() so the plugin
 * still renders sensibly if it is ever activated under a different theme.
 */

/* ------------------------------------------------------------------ notices ---- */

.fb-notice {
	padding: var(--space-4, 16px);
	border-radius: var(--radius-md, 4px);
	border-left: 3px solid transparent;
	font-size: var(--text-body-sm, 14px);
	margin-bottom: var(--space-6, 24px);
}

.fb-notice--success { background: var(--status-success-bg, #E6F4EA); color: var(--status-success, #12803C); border-left-color: currentColor; }
.fb-notice--warning { background: var(--status-warning-bg, #FDF1DF); color: var(--status-warning, #B36A00); border-left-color: currentColor; }
.fb-notice--danger  { background: var(--status-danger-bg, #FDECEA); color: var(--status-danger, #B32318); border-left-color: currentColor; }
.fb-notice--info    { background: var(--status-info-bg, #E8F0F8); color: var(--status-info, #15558F); border-left-color: currentColor; }

/* -------------------------------------------------------------- empty state ---- */

.fb-empty-state {
	text-align: center;
	padding: var(--space-16, 64px) var(--space-6, 24px);
	border: 1px dashed var(--border-default, #D2D4DA);
	border-radius: var(--radius-lg, 8px);
	color: var(--text-secondary, #4B4F58);
}

.fb-empty-state .fb-icon { color: var(--steel-300, #B3B6BF); }

.fb-empty-state h2 {
	font-family: var(--font-display, sans-serif);
	font-size: var(--text-h3, 22px);
	margin: var(--space-4, 16px) 0 var(--space-2, 8px);
	color: var(--text-primary, #2C2E35);
}

.fb-empty-state p {
	max-width: 46ch;
	margin: 0 auto var(--space-6, 24px);
	font-size: var(--text-body-sm, 14px);
	text-wrap: pretty;
}

/* --------------------------------------------------------------- line items ---- */

.fb-quote-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6, 24px);
}

.fb-quote-table th {
	text-align: left;
	font-size: var(--text-micro, 11px);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow, 0.09em);
	text-transform: uppercase;
	color: var(--text-muted, #676B76);
	padding: var(--space-3, 12px) var(--space-3, 12px);
	border-bottom: 1px solid var(--border-default, #D2D4DA);
}

.fb-quote-table td {
	padding: var(--space-4, 16px) var(--space-3, 12px);
	border-bottom: 1px solid var(--border-subtle, #E7E8EC);
	vertical-align: middle;
}

.fb-quote-table__media { width: 72px; }

.fb-quote-table__media img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--surface-subtle, #F3F4F6);
	border-radius: var(--radius-md, 4px);
	display: block;
}

.fb-quote-table__name {
	display: block;
	font-weight: 600;
	font-size: var(--text-body-sm, 14px);
	color: var(--text-primary, #2C2E35);
	text-decoration: none;
	text-wrap: pretty;
}

.fb-quote-table__name:hover { text-decoration: underline; }

.fb-quote-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-quote-table__on-request {
	font-size: var(--text-caption, 13px);
	color: var(--status-info, #15558F);
	font-weight: 500;
}

.fb-quote-table__qty { width: 84px; }

.fb-quote-items__actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--space-12, 48px);
}

/* Quote-only products on the catalogue never show an empty price slot. */
.fb-price__on-request {
	font-size: var(--text-body-sm, 14px);
	font-weight: 600;
	color: var(--status-info, #15558F);
}

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

.fb-quote-form {
	border-top: 1px solid var(--border-default, #D2D4DA);
	padding-top: var(--space-10, 40px);
}

.fb-quote-form__title {
	font-family: var(--font-display, sans-serif);
	font-size: var(--text-h2, 28px);
	margin: 0 0 var(--space-2, 8px);
}

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

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

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

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

/* ------------------------------------------------------- add-to-quote button ---- */

.fb-quote-add { margin: 0; display: inline-block; }
.fb-quote-add.is-added .fb-btn { background: var(--fb-green-100, #EDF7E1); color: var(--fb-green-700, #4E7D1E); border-color: transparent; }

/* Toast confirming an AJAX add, so the page never has to reload to acknowledge the click. */
.fb-quote-toast {
	position: fixed;
	right: 20px;
	bottom: 88px;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	max-width: 320px;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	background: var(--fb-ink, #2C2E35);
	color: #fff;
	border-radius: var(--radius-md, 4px);
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(44, 46, 53, .12));
	font-size: var(--text-body-sm, 14px);
	transform: translateY(8px);
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
}

.fb-quote-toast.is-visible { opacity: 1; transform: translateY(0); }
.fb-quote-toast a { color: var(--fb-green, #88C946); font-weight: 600; }
.fb-quote-toast--error { background: var(--status-danger, #B32318); }

@media (prefers-reduced-motion: reduce) {
	.fb-quote-toast { transition: none; }
}

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

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

	/* Reflow the table into stacked cards; a 5-column table is unusable at 375px. */
	.fb-quote-table thead { display: none; }
	.fb-quote-table,
	.fb-quote-table tbody,
	.fb-quote-table tr,
	.fb-quote-table td { display: block; width: 100%; }

	.fb-quote-table tr {
		position: relative;
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: var(--space-2, 8px) var(--space-3, 12px);
		align-items: center;
		padding: var(--space-4, 16px) 0;
		border-bottom: 1px solid var(--border-subtle, #E7E8EC);
	}

	.fb-quote-table td { border: 0; padding: 0; }
	.fb-quote-table__media { grid-row: span 3; }
	.fb-quote-table__qty { width: 100%; max-width: 120px; }

	.fb-quote-table tr > td:last-child {
		position: absolute;
		top: var(--space-4, 16px);
		right: 0;
	}
}

/* ---------------------------------------------------------- two-panel layout ---- */

.fb-quote-intro { margin-bottom: var(--space-6, 24px); }

.fb-quote-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-10, 40px);
	align-items: start;
}

.fb-quote-main { min-width: 0; }

/*
 * Offset accounts for the sticky site header, so the panel never slides under it.
 */
.fb-quote-summary { position: sticky; top: 140px; }

.fb-quote-summary__rows {
	margin: var(--space-4, 16px) 0 0;
	display: grid;
	gap: var(--space-2, 8px);
}

.fb-quote-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 12px);
	font-size: var(--text-body-sm, 14px);
}

.fb-quote-summary__row dt { color: var(--text-secondary, #4B4F58); margin: 0; }
.fb-quote-summary__row dd { margin: 0; font-weight: var(--fw-semibold, 600); }

.fb-quote-summary__note {
	font-size: var(--text-caption, 13px);
	color: var(--text-muted, #676B76);
	margin: var(--space-4, 16px) 0 0;
	line-height: var(--lh-relaxed, 1.65);
	text-wrap: pretty;
}

/* The send button belongs with the contact fields it validates, not in the sticky panel. */
.fb-quote-form { border-top: 0; padding-top: 0; margin-top: var(--space-12, 48px); }

@media (max-width: 1024px) {
	.fb-quote-layout { grid-template-columns: 1fr; gap: var(--space-8, 32px); }

	/* Once stacked, a sticky summary would just cover the form it summarises. */
	.fb-quote-summary { position: static; }
}