/*
 * The order screen.
 *
 * A cream page, white cards with a hairline border, a section title with its own
 * small icon, and deep green for anything that moves the order forward.
 *
 * Layout follows the approved reference: a page header with a breadcrumb and the
 * shop name, then two columns on a desktop - what the customer fills in on the
 * left, the money and the pay buttons on the right. Below 900px it becomes one
 * column and the pay buttons pin themselves to the bottom of the screen with the
 * amount beside them, because on a phone the total has to be readable without
 * scrolling back up.
 *
 * The columns are real wrapper elements. An earlier version placed each card
 * into a column with its own `grid-column` rule, and adding one card made the
 * whole screen zigzag between the two columns.
 */

.qb-checkout {
	margin: 0;
	padding: 0;
	background: var(--qb-bg);
}

.qb-co-wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* Page header ------------------------------------------------------------ */

.qb-co-top {
	background: var(--qb-card);
	border-bottom: 1px solid var(--qb-line);
	padding: 14px 0 16px;
	padding-top: calc(14px + env(safe-area-inset-top));
}

.qb-co-crumbs {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--qb-muted);
}

.qb-co-crumbs a {
	color: var(--qb-green);
	font-weight: 600;
	text-decoration: none;
}

.qb-co-crumbs a:hover { text-decoration: underline; }
.qb-co-crumbs .is-here { color: var(--qb-muted); }

.qb-co-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 6px;
}

.qb-co-titlebar h1 {
	margin: 0;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--qb-green-dark);
}

.qb-co-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 44%;
	padding: 7px 13px;
	border: 1px solid var(--qb-line);
	border-radius: 999px;
	background: var(--qb-bg);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qb-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.qb-co-chip .qb-ic { width: 15px; height: 15px; color: var(--qb-green); }

/* Page grid -------------------------------------------------------------- */

.qb-co-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 24px;
	align-items: start;
	padding-top: 18px;
	padding-bottom: 28px;
}

.qb-co-alerts:empty { display: none; }

.qb-co-col { min-width: 0; }

/* Cards ------------------------------------------------------------------ */

.qb-co-card {
	margin: 0 0 14px;
	padding: 16px;
	background: var(--qb-card);
	border: 1px solid var(--qb-line);
	border-radius: var(--qb-r);
	box-shadow: 0 1px 2px rgba(31, 41, 55, .04);
}

.qb-co-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* On a 320px phone the title, its count and the action were three items
	   fighting over one line and each broke mid-word. Let the action drop to
	   its own line instead. */
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 13px;
}

.qb-co-card-head h2 {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--qb-muted);
}

.qb-co-card-head h2 .qb-ic {
	width: 16px;
	height: 16px;
	color: var(--qb-green);
}

.qb-co-change,
.qb-co-add-more,
.qb-co-change:hover,
.qb-co-add-more:hover,
.qb-co-change:focus,
.qb-co-add-more:focus,
.qb-co-change:active,
.qb-co-add-more:active {
	border: 0;
	padding: 0;
	background: none;
	color: var(--qb-green);
	font: 700 12px/1 var(--qb-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.qb-co-change:hover,
.qb-co-add-more:hover { color: var(--qb-green-dark); text-decoration: underline; }

/* Two fields side by side, one under the other once there is no room. */
.qb-co-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0 14px;
}

/* Closed / problems ------------------------------------------------------ */

.qb-co-closed,
.qb-co-problems {
	display: block;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--qb-r-sm);
	background: var(--qb-amber-soft);
	color: #7c4a06;
	font-size: 14px;
}

.qb-co-closed strong,
.qb-co-problems strong { display: block; margin-bottom: 2px; }

.qb-co-problems { background: var(--qb-red-soft); color: var(--qb-red); }
.qb-co-problems[hidden],
.qb-co-closed[hidden] { display: none; }

.qb-co-problems ul { margin: 4px 0 0; padding-left: 18px; }

/* Items ------------------------------------------------------------------ */

.qb-co-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qb-co-items > li + li {
	border-top: 1px solid var(--qb-line);
}

.qb-co-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}

.qb-co-item-img {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: var(--qb-r-sm);
	object-fit: cover;
	background: #f3f4f6;
}

.qb-co-item-body { flex: 1; min-width: 0; }

.qb-co-item-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.qb-co-item-meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--qb-muted);
}

/*
 * The money always finishes at the right edge of the row, at every width.
 *
 * Narrow (the phone, and the reference's own phone screen): the price sits on
 * top and the stepper under it, both pinned right. An earlier version wrapped
 * the whole pair onto a second line instead, which left the amount floating in
 * the middle of empty space with nothing lining up.
 *
 * Wide: the two sit on one line, stepper then price, as the desktop reference
 * has them.
 */
.qb-co-item-side {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	margin-left: auto;
	text-align: right;
}

.qb-co-item-price {
	text-align: right;
	white-space: nowrap;
}

@media (min-width: 561px) {
	.qb-co-item-side {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	/* The script writes the price before the stepper, which suited the stacked
	   layout. Ordered here rather than in the markup so nothing that reads
	   those nodes has to change. */
	.qb-co-item-price { order: 2; min-width: 62px; }
}

.qb-co-item-price {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* Stepper. Big enough for a thumb — 32px squares, not 20px links. */
.qb-step {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--qb-green);
	border-radius: 999px;
	overflow: hidden;
	background: var(--qb-green-soft);
}

.qb-step button,
.qb-step button:hover,
.qb-step button:focus,
.qb-step button:active {
	width: 32px;
	height: 32px;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	background: none;
	color: var(--qb-green-dark);
	font: 700 17px/1 var(--qb-font);
	cursor: pointer;
}

.qb-step button:hover { background: rgba(15, 74, 44, .1); }
.qb-step button[disabled] { opacity: .4; cursor: not-allowed; }

.qb-step span {
	min-width: 26px;
	text-align: center;
	font: 700 14px/1 var(--qb-font);
	color: var(--qb-green-dark);
}

.qb-co-item.is-busy { opacity: .5; pointer-events: none; }

.qb-co-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 0;
	color: var(--qb-muted);
	font-size: 14px;
}

.qb-co-empty { text-align: center; padding: 10px 0 4px; }
.qb-co-empty[hidden] { display: none; }
.qb-co-empty p { color: var(--qb-muted); margin: 6px 0 14px; }

/* Address ---------------------------------------------------------------- */

.qb-co-addr-line {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.qb-co-addr-empty { font-weight: 500; color: var(--qb-muted); }

.qb-co-addr-meta {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--qb-muted);
}

.qb-co-addr .qb-btn { margin-top: 12px; }
.qb-co-addr.has-point .qb-btn { display: none; }

.qb-co-saved { margin-top: 12px; }
.qb-co-saved[hidden] { display: none; }

.qb-co-saved-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 8px;
	text-align: left;
	border: 1px solid var(--qb-line);
	border-radius: var(--qb-r-sm);
	background: #fff;
	font: 400 14px/1.4 var(--qb-font);
	color: var(--qb-ink);
	cursor: pointer;
}

.qb-co-saved-item.is-on {
	border-color: var(--qb-green);
	background: var(--qb-green-soft);
}

.qb-co-saved-item small { display: block; color: var(--qb-muted); font-size: 12px; }

/* When / slots ----------------------------------------------------------- */

.qb-co-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}

.qb-co-radio + .qb-co-radio { border-top: 1px solid var(--qb-line); }
.qb-co-radio[hidden] { display: none; }

.qb-co-radio input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--qb-green); }
.qb-co-radio strong { display: block; font-size: 15px; }
.qb-co-radio small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--qb-muted); }

/* The estimated time reads as a result, not as helper text, so it gets the
   same green strip the reference gives it. */
.qb-co-radio small#qb-co-eta-text.is-set {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: var(--qb-r-sm);
	background: var(--qb-green-soft);
	color: var(--qb-green-dark);
	font-weight: 600;
}

.qb-co-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.qb-co-slots[hidden] { display: none; }

.qb-slot,
.qb-slot:hover,
.qb-slot:focus,
.qb-slot:active {
	padding: 9px 13px;
	border: 1px solid var(--qb-line);
	border-radius: 999px;
	background: #fff;
	font: 600 13px/1 var(--qb-font);
	color: var(--qb-ink-2);
	cursor: pointer;
}

.qb-slot:hover { border-color: var(--qb-green); color: var(--qb-green-dark); }
.qb-slot.is-on,
.qb-slot.is-on:hover,
.qb-slot.is-on:focus { border-color: var(--qb-green); background: var(--qb-green); color: #fff; }
.qb-slot[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.qb-co-check {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 10px;
	font-size: 14px;
	cursor: pointer;
}

.qb-co-check input { width: 18px; height: 18px; accent-color: var(--qb-green); }

/* A label the screen reader hears and the eye does not. Our own class, because
   the theme owns `screen-reader-text` and may not be loaded here at all. */
.qb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Instruction chips ------------------------------------------------------ */

.qb-co-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.qb-chip,
.qb-chip:hover,
.qb-chip:focus,
.qb-chip:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	box-sizing: border-box;
	border: 1px solid var(--qb-line);
	border-radius: 999px;
	background: #fff;
	font: 600 12.5px/1 var(--qb-font);
	color: var(--qb-ink-2);
	cursor: pointer;
}

.qb-chip:hover { border-color: var(--qb-green); color: var(--qb-green-dark); }

.qb-chip.is-on,
.qb-chip.is-on:hover,
.qb-chip.is-on:focus {
	border-color: var(--qb-green);
	background: var(--qb-green-soft);
	color: var(--qb-green-dark);
}

/* Coupon ----------------------------------------------------------------- */

.qb-co-coupon {
	display: flex;
	gap: 8px;
}

.qb-co-coupon input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	box-sizing: border-box;
	border: 1px dashed var(--qb-line);
	border-radius: var(--qb-r-sm);
	font: 600 14px/1 var(--qb-font);
	text-transform: uppercase;
}

.qb-co-coupon-msg { margin: 8px 0 0; font-size: 13px; }
.qb-co-coupon-msg[hidden] { display: none; }
.qb-co-coupon-msg.is-bad { color: var(--qb-red); }
.qb-co-coupon-msg.is-good { color: var(--qb-green-dark); }

.qb-co-coupon-list { margin-top: 10px; }

.qb-co-coupon-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	margin: 0 6px 6px 0;
	border-radius: 999px;
	background: var(--qb-green-soft);
	color: var(--qb-green-dark);
	font: 700 12px/1 var(--qb-font);
}

.qb-co-coupon-tag button,
.qb-co-coupon-tag button:hover,
.qb-co-coupon-tag button:focus {
	border: 0;
	padding: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(15, 74, 44, .12);
	color: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

/* Bill ------------------------------------------------------------------- */

.qb-co-bill-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
}

.qb-co-bill-row span:first-child { color: var(--qb-ink-2); }
.qb-co-bill-row.is-off span:last-child { color: var(--qb-green-dark); font-weight: 600; }
.qb-co-bill-row.is-note { font-size: 12.5px; color: var(--qb-muted); padding-top: 0; }

.qb-co-bill-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px dashed var(--qb-line);
	font-size: 18px;
	font-weight: 800;
}

.qb-co-saving {
	margin-top: 12px;
	padding: 9px 12px;
	border-radius: var(--qb-r-sm);
	background: var(--qb-green-soft);
	color: var(--qb-green-dark);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.qb-co-fineprint {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--qb-muted);
}

.qb-co-fineprint:empty { display: none; }

/* Payment ---------------------------------------------------------------- */

.qb-co-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	padding: 10px;
	border: 1px solid var(--qb-line);
	border-radius: var(--qb-r-sm);
	background: var(--qb-bg);
}

.qb-co-methods[hidden] { display: none; }

.qb-co-method {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border: 1px solid var(--qb-line);
	border-radius: 7px;
	background: #fff;
	font: 700 11.5px/1.3 var(--qb-font);
	letter-spacing: .02em;
	color: var(--qb-ink-2);
}

.qb-co-buttons { display: grid; gap: 9px; }

.qb-co-foot .qb-btn { justify-content: space-between; }
.qb-co-foot .qb-btn[hidden] { display: none; }
.qb-co-foot .qb-btn strong { font-size: 16px; }

.qb-co-foot-error {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: var(--qb-r-sm);
	background: var(--qb-red-soft);
	color: var(--qb-red);
	font-size: 13px;
}

.qb-co-foot-error[hidden] { display: none; }

.qb-co-foot-note {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--qb-muted);
	text-align: center;
}

.qb-co-foot-note:empty { display: none; }

/* The "to pay" strip belongs to the pinned phone bar. On a desktop the bill
   sits right above these buttons, so repeating the number there is noise. */
.qb-co-bar-sum { display: none; }

/* Site footer ------------------------------------------------------------ */

.qb-co-sitefoot {
	border-top: 1px solid var(--qb-line);
	background: var(--qb-card);
	padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
	text-align: center;
}

.qb-co-sitefoot-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 0 0 8px;
	font-size: 12.5px;
}

.qb-co-sitefoot-links:empty { display: none; }
.qb-co-sitefoot-links a { color: var(--qb-green); text-decoration: none; font-weight: 600; }
.qb-co-sitefoot-links a:hover { text-decoration: underline; }

.qb-co-sitefoot-copy {
	margin: 0;
	font-size: 12px;
	color: var(--qb-muted);
}

/* Done ------------------------------------------------------------------- */

.qb-co-done {
	max-width: 420px;
	margin: 40px auto;
	padding: 28px 22px;
	text-align: center;
}

.qb-co-done-tick {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--qb-green);
	color: #fff;
	font-size: 30px;
}

.qb-co-done h2 { margin: 0 0 6px; font-size: 21px; }
.qb-co-done p { margin: 0 0 18px; color: var(--qb-muted); }

/* Phone: one column, and the buttons pin to the bottom ------------------- */

@media (max-width: 899px) {
	.qb-co-titlebar { flex-wrap: wrap; gap: 8px; }
	.qb-co-titlebar h1 { font-size: 21px; }
	.qb-co-chip { max-width: 100%; }

	/* Out of the card and onto the screen. The buttons are the one thing the
	   customer must always be able to reach. */
	.qb-co-foot {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--qb-card);
		border-top: 1px solid var(--qb-line);
		box-shadow: 0 -8px 24px rgba(31, 41, 55, .1);
	}

	.qb-co-bar-sum {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 9px;
	}

	.qb-co-bar-label { font-size: 12.5px; color: var(--qb-muted); }
	.qb-co-bar-sum strong { font-size: 18px; font-weight: 800; }

	.qb-co-bar-link,
	.qb-co-bar-link:hover,
	.qb-co-bar-link:focus,
	.qb-co-bar-link:active {
		margin-left: auto;
		border: 0;
		padding: 0;
		background: none;
		color: var(--qb-green);
		font: 600 12.5px/1 var(--qb-font);
		text-decoration: underline;
		cursor: pointer;
	}

	/* Two buttons side by side, the way the reference has them, as soon as
	   both are showing. A single button keeps the full width. */
	.qb-co-buttons { grid-auto-flow: column; grid-auto-columns: 1fr; }
	.qb-co-foot .qb-btn { justify-content: center; gap: 7px; }
	.qb-co-foot .qb-btn strong { font-size: 15px; }
	.qb-co-foot-note { display: none; }

	/* Room for the pinned bar. It has to go on the LAST element on the page,
	   not on the cards: with the clearance on .qb-co-main the site footer sat
	   after it and spent its whole life hidden behind the bar. */
	.qb-co-main { padding-bottom: 20px; }
	.qb-co-sitefoot { padding-bottom: calc(146px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
	.qb-co-foot .qb-btn { flex-direction: column; gap: 1px; padding: 9px 10px; }
	.qb-co-foot .qb-btn span { font-size: 12.5px; }
	.qb-co-foot .qb-btn strong { font-size: 14px; }
}

/* Desktop: two columns --------------------------------------------------- */

@media (min-width: 900px) {
	.qb-co-main {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.qb-co-alerts { grid-column: 1 / -1; }

	/* The money column follows the customer down a long left column. 24px of
	   breathing room under the header it sticks below. */
	.qb-co-col-side {
		position: sticky;
		top: 18px;
	}
}

/* Safety net: a component that sets its own display silently defeats the
   hidden attribute. Scoped to our own screens so the theme is untouched. */
.qb-co-main [hidden], .qb-co-top [hidden] { display: none !important; }