/* ==========================================================================
   T's Direct Order & Quote System — quote cart

   Built to quote-cart-mockup.html. The quote page shares most of its design
   with the cart, so this file only carries what is unique to a quote. Item
   cards, attribute pills, the branding panel, the no-branding badge and the
   summary all come from tsd-cart.css and are used unchanged.

   Mockup values are quoted above each block.
   ========================================================================== */

/* Fill the container it sits in (the site uses ~80%-wide containers), rather
   than rendering narrow. Matches the cart's width behaviour. */
.tsd.tsd-quote { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   1. THE BANNER

   mockup:
     .quote-banner { background:var(--dark); color:#fff; border-radius:var(--radius);
                     padding:15px 18px; margin-bottom:18px;
                     display:flex; gap:14px; align-items:flex-start }
     .qb-ic { color:var(--green); flex-shrink:0; margin-top:1px }
     .qb-t  { font-family:var(--font-d); font-weight:600; font-size:15px }
     .qb-d  { font-size:12.5px; color:var(--muted-2); line-height:1.5 }
   ========================================================================== */

.tsd .tsd-quote-banner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 18px;
	padding: 15px 18px;
	background: var(--tsd-dark);
	color: #fff;
	border-radius: var(--tsd-radius);
}
.tsd .tsd-quote-banner__ic { display: flex; flex-shrink: 0; margin-top: 1px; color: var(--tsd-green); }
.tsd .tsd-quote-banner__t {
	font-family: var(--tsd-font-d);
	font-weight: var(--tsd-h6-fw);
	font-size: var(--tsd-h6-size);
	letter-spacing: var(--tsd-h6-ls);
	line-height: var(--tsd-h6-lh);
	color: #fff;
}
/* White, not the muted grey the mockup used. On this dark panel the grey is
   hard to read, and this is the line that tells a customer nothing is being
   charged — it needs to be legible. */
.tsd .tsd-quote-banner__d {
	font-size: var(--tsd-small-size);
	color: #fff;
	line-height: var(--tsd-small-lh);
}

/* ==========================================================================
   4. THE HEADER ICON
   ========================================================================== */

.tsd .tsd-quote-icon,
.tsd .tsd-quote-icon:link,
.tsd .tsd-quote-icon:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--tsd-dark);
	border-radius: var(--tsd-radius-sm);
	color: #fff;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
}
.tsd .tsd-quote-icon:hover { background: var(--tsd-dark-2); color: #fff; }
.tsd .tsd-quote-icon__count {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tsd-green);
	border-radius: 10px;
	font-family: var(--tsd-font-b);
	font-size: 11px;
	font-weight: 700;
}

/* ==========================================================================
   5. EMPTY AND SIGN-IN STATES
   ========================================================================== */

.tsd .tsd-empty__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   6. NARROW SCREENS — the mockup's 900px breakpoint
   ========================================================================== */

@media screen and (max-width: 900px) {
	.tsd .tsd-quote-banner { padding: 13px 14px; gap: 11px; }
	.tsd .tsd-quote-banner__t { font-size: 14px; }
	.tsd .tsd-quote-banner__d { font-size: 12px; }
	.tsd .tsd-frow { grid-template-columns: 1fr; }
	.tsd .tsd-quote-delivery { margin-bottom: 14px; }
}

/* ==========================================================================
   7. AFTER SUBMITTING
   ========================================================================== */

/* the notice on the orders page */
.tsd .tsd-quote-sent {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0 0 22px;
	padding: 15px 18px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	border-left: 4px solid var(--tsd-green);
	border-radius: var(--tsd-radius);
}
.tsd .tsd-quote-sent__ic {
	display: flex;
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--tsd-green-600);
}
.tsd .tsd-quote-sent__t {
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 16px;
	color: var(--tsd-ink);
	margin-bottom: 3px;
}
.tsd .tsd-quote-sent__d { font-size: 13.5px; color: var(--tsd-ink); line-height: 1.5; }

/* the panel that replaces the quote once it has been sent */
.tsd .tsd-empty__icon.is-green { background: var(--tsd-green-tint); color: var(--tsd-green-600); }
.tsd .tsd-empty__icon.is-green svg { display: block; }

/* Centred in the page, not merely centred text. The panel replaces the two
   column layout, so without this it keeps the width of whatever it replaced
   and sits off to one side. */
.tsd .tsd-quote-sent-panel {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.tsd .tsd-quote-sent-panel .tsd-empty__icon { margin-left: auto; margin-right: auto; }
.tsd .tsd-quote-sent-panel .tsd-empty__actions { justify-content: center; }

@media screen and (max-width: 900px) {
	.tsd .tsd-quote-sent { padding: 13px 14px; gap: 11px; }
	.tsd .tsd-quote-sent__t { font-size: 15px; }
	.tsd .tsd-quote-sent__d { font-size: 12.5px; }
}

/* ==========================================================================
   A QUOTE ON THE ACCOUNT PAGE

   WooCommerce renders that page and its table. These style what sits inside
   the product cell, and the box below it. The table itself is left alone.
   ========================================================================== */

/* ---------- the branding on a line ---------- */
.tsd .tsd-ob { margin-top: 10px; }

.tsd .tsd-ob__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 20px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	color: var(--tsd-green-600);
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.4;
}
.tsd .tsd-ob__badge svg { flex-shrink: 0; }

/* No branding is amber, and a shade darker than the token: at 11px the token
   itself only reaches 3.8:1 against this background, where this reaches 5.5. */
.tsd .tsd-ob__badge.is-none {
	background: var(--tsd-amber-bg);
	border-color: var(--tsd-amber-line);
	color: var(--tsd-amber);
}

.tsd .tsd-ob__detail {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--tsd-paper-2);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tsd-ink);
}
.tsd .tsd-ob__pos {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin-bottom: 3px;
}
.tsd .tsd-ob__pos:last-of-type { margin-bottom: 0; }
.tsd .tsd-ob__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	flex-shrink: 0;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-green-line);
	border-radius: 4px;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 11.5px;
	color: var(--tsd-green-600);
}
.tsd .tsd-ob__cost {
	margin-top: 7px;
	padding-top: 7px;
	border-top: 1px solid var(--tsd-line);
	font-size: 12px;
	color: var(--tsd-muted);
}
.tsd .tsd-ob__cost b { color: var(--tsd-ink); font-weight: 600; }

/* ---------- the convert box ---------- */
/* Forced: the theme puts a dark border and square corners on containers in
   this region and wins on specificity. */
.tsd.tsd-convert.tsd-convert {
	margin: 26px 0 !important;
	padding: 0 !important;
	background: var(--tsd-paper) !important;
	border: 1px solid var(--tsd-green-line) !important;
	border-radius: var(--tsd-radius) !important;
	box-shadow: var(--tsd-shadow) !important;
	overflow: hidden;
}
.tsd-convert__head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 18px 22px;
	background: var(--tsd-green-tint);
	border-bottom: 1px solid var(--tsd-green-line);
}
.tsd-convert__ic {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-green-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsd-green-600);
}
.tsd-convert__t {
	margin-bottom: 2px;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tsd-green-600);
}
.tsd-convert__d { font-size: 13px; color: var(--tsd-status-green, #3ecf6a); line-height: 1.55; }
.tsd-convert__body { padding: 18px 22px; }
.tsd-convert__note {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--tsd-muted);
	line-height: 1.55;
}
.tsd-convert__note svg { flex-shrink: 0; margin-top: 2px; color: var(--tsd-muted-2); }
.tsd-convert__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* the theme styles every link that looks like a button, so this is forced */
.tsd-convert__actions .tsd-btn.tsd-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 48px !important;
	min-height: 0 !important;
	padding: 0 24px !important;
	border-radius: var(--tsd-radius-sm) !important;
	background: var(--tsd-green) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 500 !important;
	font-size: 15.5px !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	text-decoration: none !important;
	width: auto !important;
	float: none !important;
}
.tsd-convert__actions .tsd-btn.tsd-btn:hover { background: var(--tsd-green-600) !important; }

@media screen and (max-width: 600px) {
	.tsd-convert__actions .tsd-btn.tsd-btn { width: 100% !important; }
}