/**
 * quote-request.css
 *
 * Styles the Request a Quote page (template-request-quote.php). Field
 * styling intentionally mirrors account.css's .field rules exactly
 * (same font sizes, borders, spacing) for visual consistency with the
 * rest of the site's forms — kept as its own copy here rather than a
 * cross-dependency on account.css, since this page isn't part of the
 * account system and account.css is only enqueued on account pages
 * (see includes/class-enqueue-assets.php).
 *
 * @package B2B_Apparel
 */

.quote-request-page {
	max-width: 640px;
	/* Longhand top/bottom only (2026-09-03 fix) — the old `padding: 40px
	 * 0 90px` shorthand also zeroed out padding-left/-right, silently
	 * overriding base.css's .wrap { padding: 0 24px } horizontal gutter
	 * for this element specifically (quote-request.css loads after
	 * base.css, so it won by cascade order). Harmless above the 640px
	 * content width on desktop, but on any viewport under ~640px+48px
	 * it meant this page's box touched the screen edges left/right while
	 * every other page kept its 24px gutter. Longhand leaves .wrap's own
	 * left/right values alone. */
	padding-top: 40px;
	padding-bottom: 90px;
}

.quote-request-box {
	border: 1px solid var(--ink, #111);
	padding: 32px;
	/* Breadcrumb-to-content gap (2026-09-03 fix, item 17 follow-up) —
	 * this page skips the shared .page-header component (shop/checkout/
	 * cart/single-product all put an <h1> there, which supplies ~10-22px
	 * of breathing room between the breadcrumb and whatever comes next
	 * via .page-header's own padding/margin-bottom); this page's H1 lives
	 * INSIDE the bordered box instead, same layout as My Account's
	 * .dash-layout. Previously that meant zero gap — the box's top
	 * border sat flush against the breadcrumb text. Matches My Account's
	 * .dash-layout { padding-top: 30px } (account.css) so both "boxed
	 * content directly under a breadcrumb, no separate page-header"
	 * layouts share the same gap. */
	margin-top: 30px;
}

.quote-request-box h1 {
	font-size: 22px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.quote-intro {
	color: #666;
	font-size: 14px;
	margin: 0 0 28px;
}

.quote-success {
	color: #444;
	font-size: 14.5px;
}

/* Logged-in prefill note (2026-09-02, testing-round item 11) — same
 * markup/visual weight as checkout.css's .prefill-note, copied rather
 * than shared since this page's CSS is intentionally self-contained
 * (see file docblock). */
.prefill-note {
	font-size: 11px;
	color: #888;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.prefill-note svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.quote-errors {
	border: 1px solid #c0392b;
	background: #fdf1f0;
	color: #c0392b;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13px;
}
.quote-errors ul {
	margin: 0;
	padding-left: 18px;
}
.quote-errors li {
	margin-bottom: 4px;
}
.quote-errors li:last-child {
	margin-bottom: 0;
}

/* ---------------- Fields (mirrors account.css's .field rules) ---------------- */
.quote-request-form .field label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin-bottom: 6px;
	color: #444;
}
.quote-request-form .field input,
.quote-request-form .field textarea {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	margin-bottom: 16px;
}
.quote-request-form .field textarea {
	min-height: 110px;
	resize: vertical;
}
.quote-request-form .field .optional {
	text-transform: none;
	font-weight: 400;
	color: #999;
}
.quote-request-form .field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 600px) {
	.quote-request-box {
		padding: 22px;
	}
	.quote-request-form .field-row {
		grid-template-columns: 1fr;
	}
}

/* ---------------- Product Get Custom Quote page (item 10b, 2026-09-03) ---------------- */

/* Product context banner — shows which product this quote is for, at
   the top of the form. Grayscale-only, per this theme's design
   standard — no color, matches every other UI surface. */
.product-quote-context {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid #ddd;
	padding: 12px 14px;
	margin-bottom: 20px;
}
.product-quote-context img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex: none;
}
.product-quote-context-label {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
	margin-bottom: 2px;
}
.product-quote-context a {
	color: var(--ink, #111);
	font-weight: 700;
	font-size: 14px;
}

/* Selections table — the real size/quantity breakdown carried over from
   the product page's pricing matrix (round 2, 2026-09-04). Rendered by
   assets/js/quote-selections.js; both this table and the "couldn't find
   your selections" fallback message below are server-rendered up front
   (display:none) so JS only ever toggles which one shows, no layout
   flash either way. Grayscale-only, matches the rest of this theme. */
.quote-selections {
	margin-bottom: 20px;
}
.quote-selections-empty {
	border: 1px solid #ddd;
	background: #fafafa;
	color: #666;
	padding: 12px 14px;
	font-size: 13px;
	margin: 0;
}
.quote-selections-empty a {
	color: var(--ink, #111);
	font-weight: 700;
	text-decoration: underline;
}
.quote-selections-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.quote-selections-table th,
.quote-selections-table td {
	border: 1px solid #ddd;
	padding: 8px 12px;
	text-align: left;
}
.quote-selections-table thead th {
	background: #f6f6f6;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	font-weight: 700;
}
.quote-selections-table tfoot td {
	font-weight: 700;
	border-top: 2px solid #111;
}

.quote-section-heading {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin: 26px 0 14px;
	padding-top: 18px;
	border-top: 1px solid #eee;
}
.product-quote-form h2.quote-section-heading:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.quote-request-form .field select {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	margin-bottom: 6px;
	background: #fff;
}
.quote-request-form .field input[type="file"] {
	border: 1px dashed #ccc;
	padding: 10px 12px;
	font-size: 13px;
	width: 100%;
	margin-bottom: 6px;
	background: #fafafa;
}
.field-hint {
	font-size: 11.5px;
	color: #888;
	margin: 0 0 16px;
}

/* Honeypot field (class-quote-request.php's is_spam_submission()) —
   hidden off-screen rather than display:none, since some automated
   scripts skip fields with display:none but still fill in ones that
   are merely positioned off-screen. Never shown or announced to real
   visitors; aria-hidden + tabindex="-1" keep it out of the accessible
   tree and tab order too. */
.b2b-quote-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}