/* CUPP Wholesale order form. Inherits the theme's fonts; change --cupp-ws-accent to match the brand. */
.cupp-ws {
	--cupp-ws-accent: #1a1a1a;
	--cupp-ws-line: rgba(0, 0, 0, .12);
	--cupp-ws-soft: rgba(0, 0, 0, .04);
	--cupp-ws-warn: #b42318;
	max-width: 960px;
	margin: 0 auto;
}
.cupp-ws-login { max-width: 420px; margin: 0 auto; }
.cupp-ws-store { margin: 0 0 1.5em; padding: .75em 1em; background: var(--cupp-ws-soft); border-radius: 6px; }
.cupp-ws-staff-note { padding: .75em 1em; border: 1px dashed var(--cupp-ws-line); border-radius: 6px; }

.cupp-ws-group { margin: 2em 0 .5em; font-size: 1.15em; letter-spacing: .02em; }
.cupp-ws-table { width: 100%; border-collapse: collapse; margin: 0; }
.cupp-ws-table th { text-align: left; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; opacity: .7; font-weight: 600; padding: .5em .5em; border-bottom: 1px solid var(--cupp-ws-line); }
.cupp-ws-table td { padding: .65em .5em; border-bottom: 1px solid var(--cupp-ws-line); vertical-align: middle; }
.cupp-ws-table .col-price, .cupp-ws-table .col-total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cupp-ws-table .col-qty { width: 90px; text-align: center; }
.cupp-ws-table .col-total { width: 110px; }
.cupp-ws-table .name { display: block; font-weight: 500; }
.cupp-ws-table .meta { display: block; font-size: .8em; opacity: .65; }
.cupp-ws-table input[type=number] { width: 72px; padding: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.cupp-ws-row.has-qty { background: var(--cupp-ws-soft); }
.cupp-ws-row.is-over input { outline: 2px solid var(--cupp-ws-warn); }
.cupp-ws-row.is-out { opacity: .55; }

.cupp-ws-summary {
	position: sticky; bottom: 0; z-index: 20;
	margin-top: 2em; padding: 1em 1.25em;
	background: #fff; border: 1px solid var(--cupp-ws-line); border-radius: 10px 10px 0 0;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}
.cupp-ws-meters { display: grid; grid-template-columns: 1.4fr 1.4fr .6fr .8fr 1fr; gap: 1em; align-items: end; }
.cupp-ws-meters .label { display: block; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.cupp-ws-meters .value { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.cupp-ws-meters .bar { position: relative; display: block; height: 6px; margin-top: .35em; background: var(--cupp-ws-soft); border-radius: 3px; overflow: hidden; }
.cupp-ws-meters .bar i { display: block; height: 100%; width: 0; background: var(--cupp-ws-accent); transition: width .2s; }
.cupp-ws-meters .bar.has-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: #fff; }
.cupp-ws-meters .bar.over i { background: var(--cupp-ws-warn); }
.cupp-ws-timed { display: inline-flex; align-items: center; gap: .5em; margin-top: .75em; font-weight: 500; cursor: pointer; }
.cupp-ws-timed input { width: 1.1em; height: 1.1em; }
.cupp-ws-warning { margin: .75em 0 0; color: var(--cupp-ws-warn); font-weight: 600; }
.cupp-ws-actions { display: flex; gap: .75em; justify-content: flex-end; margin-top: 1em; }
.cupp-ws-form.has-problem button[value=checkout] { opacity: .5; }

@media (max-width: 700px) {
	.cupp-ws-table thead { display: none; }
	.cupp-ws-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25em .75em; padding: .6em 0; border-bottom: 1px solid var(--cupp-ws-line); }
	.cupp-ws-table td { border: 0; padding: 0; }
	.cupp-ws-table .col-name { grid-column: 1 / -1; }
	.cupp-ws-table .col-price { text-align: left; }
	.cupp-ws-table .col-qty { grid-row: 2; grid-column: 2; width: auto; }
	.cupp-ws-table .col-total { display: none; }
	.cupp-ws-summary { padding: .75em 1em; }
	.cupp-ws-meters { grid-template-columns: 1fr 1fr 1fr; gap: .5em .75em; }
	.cupp-ws-meters .meter:nth-child(-n+2) { grid-column: span 1; }
	.cupp-ws-actions { margin-top: .6em; }
	.cupp-ws-actions .button { flex: 1; text-align: center; }
}