/* RB B2B — quote form, quick order, MOQ.
   Layout/typography primitives (.btn, .field, .form-grid, .two-col,
   .summary-box, .note) live in the theme's assets/theme.css, ported from
   docs/recyclingbin-mock.html. Only genuinely page-specific rules belong here —
   do not re-declare button/field padding, size, or weight. */

.rb-moq-note { font-size: .85rem; font-weight: 600; color: var(--navy, #1f3a5f); margin: .4em 0; }
.rb-request-quote { margin: .5em 0; font-size: .9rem; }
.rb-request-quote a { font-weight: 600; }

/* Notices */
.rb-b2b-notice { border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; font-size: .92rem; }
.rb-b2b-success { background: #eaf6e2; color: var(--green-deep, #3f6b1f); border: 1px solid #c9e3b6; }
.rb-b2b-error { background: #fbeceb; color: var(--red, #c0392b); border: 1px solid #f0c7c2; }
.rb-b2b-error ul { margin: 0; padding-left: 1.1em; }

/* Forms — sizing comes from .field / .form-grid in theme.css. */
.rb-b2b-form input:focus, .rb-b2b-form select:focus, .rb-b2b-form textarea:focus {
	border-color: var(--green-mid, #5b8c2a); outline: none;
}
.rb-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.rb-q-forproduct { display: inline-block; font-size: .95rem; }
.rb-q-forproduct .rb-q-sku { color: var(--ink-soft, #4b5548); font-size: .82rem; }
.rb-b2b-inline-note { margin: 14px 0; }   /* mock: <div class="note" style="margin:14px 0"> */

/* Quote — the grid is .two-col (theme.css); this is just the rail contents. */
.rb-quote-main { min-width: 0; }
.rb-quote-intro { color: var(--ink-soft, #4b5548); font-size: 1.05rem; max-width: 560px; margin: 0 0 22px; }
.rb-talk-box h3 { margin-top: 0; font-size: 1.05rem; }
.rb-talk-lead { font-size: .9rem; color: var(--ink-soft, #4b5548); margin: 0 0 8px; }
.rb-rep { padding: 8px 0; border-top: 1px solid var(--line, #e3e7dd); }
.rb-rep b { font-size: .9rem; }
.rb-rep-title { font-size: .8rem; color: var(--ink-soft, #4b5548); }
.rb-talk-cta { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rb-phone-icon { flex-shrink: 0; }

/* Email opt-ins — the approved form's multi-select. `.field select` sets a
   single-line padding that looks wrong on a list box, so give it room. */
.rb-quote-form select[multiple] { padding: 6px; height: auto; }
.rb-quote-form select[multiple] option { padding: 4px 6px; }

/* The unsubscribe checkbox. `.field label` is display:block and `.field input`
   is width:100%, which is right for every other control here and puts a lone
   checkbox on its own line above its text, floating in the middle of the row —
   which is what Chris saw. Both selectors below are deliberately specific enough
   to beat those two rules. */
.field.rb-q-optout label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: .9rem; margin-bottom: 0; }
.field.rb-q-optout input[type="checkbox"] { width: auto; margin: 0; padding: 0; flex-shrink: 0; }

/* Quote — the heading, copy and custom-graphics minimums the approved page puts
   above the form. `.spec-table` is the theme's; only the spacing is local. */
.rb-quote-heading { margin: 0 0 6px; }
.rb-quote-minimums { margin-bottom: 24px; }
.rb-quote-minimums th:last-child { width: 90px; }

/* Contact — same two-column shape as the quote page: form on the left, the
   call/fax/email/address rail on the right. The grid itself is the theme's
   `.two-col`; these are the parts that belong to the form. */
.rb-contact-cols { gap: 40px; align-items: start; }
.rb-contact-title { margin-bottom: 6px; }
.rb-contact-lede { margin-bottom: 24px; }
.rb-contact-actions { margin-top: 16px; }
.rb-contact-aside { position: sticky; top: 80px; }
.rb-contact-aside h3 { margin: 0 0 8px; font-size: 1.05rem; }
.rb-contact-aside h3 + p { margin: 0 0 4px; }
.rb-contact-aside p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
	.rb-contact-aside { position: static; }
}

/* Quick order — mock .qo-table, line 398 */
.rb-qo-intro { color: var(--ink-soft, #4b5548); max-width: 640px; margin: 0 0 18px; }
.qo-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.qo-table th {
	text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--ink-soft, #4b5548); padding: 0 8px 8px; border-bottom: 1px solid var(--line, #e3e7dd);
}
.qo-table td { padding: 6px 8px; border-bottom: 1px solid var(--line, #e3e7dd); vertical-align: middle; }
.qo-table input {
	width: 100%; border: 1px solid var(--line-2, #d3dac9); border-radius: 6px;
	padding: .5em .6em; font-size: .9rem; font-family: inherit; background: #fff;
}
.qo-table .qo-qty input { width: 80px; }
.qo-table .qo-name { font-size: .82rem; color: var(--ink-soft, #4b5548); }
.qo-table .qo-unit { font-size: .82rem; color: var(--ink-soft, #4b5548); }
.qo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.rb-qo-del { padding: .3em .6em; }
/* The remove column has an empty header and holds one small button, but the
   mockup leaves it unsized — so table auto-layout splits the slack between it
   and Product, giving an empty column ~290px (measured in the mockup itself at
   1400px: 200/443/110/120/287). Shrink it to its content so Product takes the
   room, which is plainly what the layout intends. */
.qo-table th:last-child,
.qo-table td:last-child { width: 1%; white-space: nowrap; }

.rb-qo-csv { margin-top: 34px; max-width: 560px; margin-bottom: 24px; }
.rb-qo-csv h3 { margin: 0 0 6px; font-size: 1.05rem; }
.rb-qo-csv p { font-size: .86rem; color: var(--ink-soft, #4b5548); }
.rb-qo-csv code { background: var(--wash-2, #eef2e7); padding: .1em .35em; border-radius: 4px; }
.rb-qo-paste {
	width: 100%; min-height: 90px; border: 1px solid var(--line-2, #d3dac9);
	border-radius: 6px; padding: .6em; font-family: inherit;
}
.rb-qo-import { margin-top: 10px; }