/**
 * quote-cart.css
 *
 * Item 10c (2026-09-04) — View Quote and Get Quote. Deliberately small:
 * both pages reuse cart.css's .cart-layout/.cart-table/.summary-box and
 * checkout.css's .checkout-layout/.form-section/.summary-box wholesale
 * (both enqueued alongside this file — see class-enqueue-assets.php) per
 * the user's explicit request that these two new pages look like the
 * existing Cart and Checkout pages. This file only adds the handful of
 * things genuinely new to these two pages: View Quote's own small
 * tweaks, the per-product artwork-override block on Get Quote, and a
 * couple of small notes/empty-state tweaks.
 *
 * @package WholesaleTheme
 */

/* ---------------- Empty state ---------------- */
/* Duplicated (small, deliberate) from cart.css's .empty-state rather
   than also enqueuing the rest of cart.css on the Get Quote page (which
   otherwise has no use for cart.css's line-item/shipping-widget rules) —
   View Quote DOES also enqueue cart.css directly (see
   class-enqueue-assets.php), so this simply wins there by cascade order
   with identical values; harmless duplication, not a conflict. */
.empty-state {
	border: 1px dashed #999;
	padding: 60px 20px;
	text-align: center;
}
.empty-state h2 {
	margin-bottom: 8px;
}
.empty-state p {
	color: #666;
	margin-bottom: 20px;
}

/* ---------------- View Quote ---------------- */
/* v88.3 (2026-09-05, user request): Qty is now a real .qty-input (same
   class Cart uses, styled in cart.css, which this page already enqueues)
   instead of plain text -- no page-specific Qty-cell rule needed here
   any more (v88.2 briefly had one, .quote-qty-cell, for the plain-text
   version). */
.quote-cart-table .remove-btn {
	text-decoration: none;
}
.quote-summary-note {
	font-size: 11px;
	color: #888;
	/* v80 (2026-09-04, user request): needed breathing room before the
	   button that follows on both View Quote (Proceed to Get Quote) and
	   Get Quote (Get My Personalized Quote) — bottom margin added to
	   match the gap Checkout's own .place-order-btn margin-top gives
	   its summary box (assets/css/checkout.css). */
	margin: 8px 0 16px;
}

/* ---------------- Get Quote: "Your Quote Items" review block ---------------- */
.quote-item-row {
	border-bottom: 1px solid #eee;
	padding: 14px 0;
}
.quote-item-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.quote-item-row:first-child {
	padding-top: 0;
}
.quote-item-info h4 {
	font-size: 13.5px;
	margin: 0 0 3px;
}
.quote-item-info .meta {
	font-size: 11.5px;
	color: #888;
}
/*
 * Mobile-audit "Get Quote" pass (2026-09-15). This whole element is a
 * <label> (input + text both inside it, unlike Pay for Order's separate
 * input/label pair), so the entire flex row is already clickable — but
 * confirmed via Playwright getBoundingClientRect() its actual height
 * was only 19.4px (just the text's own line-height, no padding), the
 * same too-small-to-comfortably-tap gap already found and fixed on Pay
 * for Order's payment-method label (checkout.css). Padding added here
 * for the same reason: this is this row's real per-product way to
 * reveal decoration/artwork fields, and needs a tap target bigger than
 * one line of 12.5px text. Vertical-only so the row still sits flush
 * with .quote-item-row's own text column on desktop.
 */
.quote-item-override-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 400;
	margin-top: 10px;
	padding: 8px 0;
	cursor: pointer;
}
.quote-item-override-toggle input {
	margin: 0;
}
.quote-item-override-fields {
	margin-top: 12px;
	padding: 14px;
	background: #fafafa;
	border: 1px solid #eee;
}
.quote-item-override-fields .field:last-child {
	margin-bottom: 0;
}
.quote-item-override-fields .field textarea {
	min-height: 70px;
}

/* Get Quote's field labels/inputs — reuses quote-request.css's
   .quote-request-form .field rules (that stylesheet is enqueued
   alongside this one — see class-enqueue-assets.php); the empty-state
   and error blocks likewise reuse quote-request.css's .empty-state/
   .quote-errors/.quote-success rules rather than duplicating them. */

@media (max-width: 900px) {
	.checkout-layout {
		grid-template-columns: 1fr;
	}
}