/*
 * QuickBite — shared tokens and small components.
 *
 * The palette is taken from the shop pages the owner already built and from the
 * two approved designs: a warm cream page, white cards, deep green for anything
 * that moves the order forward, and amber only for cash on delivery.
 *
 * Everything is scoped under .qb-* so nothing here can reach the theme or the
 * page builder's own markup.
 */

:root {
	--qb-green: #15603a;
	--qb-green-dark: #0f4a2c;
	--qb-green-soft: #e8f3ec;
	--qb-amber: #e0912f;
	--qb-amber-soft: #fdf3e3;
	--qb-red: #b3261e;
	--qb-red-soft: #fdecea;

	/* Used for one thing only: the dot that marks a message as new. It is
	   deliberately outside the brand palette, because everything green on
	   these screens means "the order is fine" and a new-message mark has to
	   read as a different kind of thing entirely. */
	--qb-blue: #1a73e8;

	--qb-ink: #1f2937;
	--qb-ink-2: #4b5563;
	--qb-muted: #6b7280;
	--qb-line: #e7e1d6;

	--qb-bg: #fdf8f0;
	--qb-card: #ffffff;

	--qb-r: 14px;
	--qb-r-sm: 10px;
	--qb-shadow: 0 1px 2px rgba(31, 41, 55, .06), 0 8px 24px rgba(31, 41, 55, .06);
	--qb-shadow-lg: 0 12px 40px rgba(31, 41, 55, .18);

	--qb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.qb-app,
.qb-screen {
	font-family: var(--qb-font);
	color: var(--qb-ink);
	background: var(--qb-bg);
	-webkit-font-smoothing: antialiased;
}

.qb-card {
	background: var(--qb-card);
	border: 1px solid var(--qb-line);
	border-radius: var(--qb-r);
	box-shadow: var(--qb-shadow);
}

.qb-card-pad {
	padding: 16px;
}

/* Buttons ---------------------------------------------------------------- */

.qb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: 600 15px/1.2 var(--qb-font);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, opacity .15s ease, transform .05s ease;
}

.qb-btn:active { transform: translateY(1px); }

.qb-btn[disabled],
.qb-btn.is-busy {
	opacity: .55;
	cursor: not-allowed;
}

/* Themes style bare `button:hover` and `button:focus`. Those selectors outrank
   a single class of ours, so unless every state is spelled out here the shop's
   buttons take the theme's colour the moment a customer touches one - and the
   label disappears when that colour is white on white. */
.qb-btn-primary,
.qb-btn-primary:hover,
.qb-btn-primary:focus,
.qb-btn-primary:active { background: var(--qb-green); color: #fff; border-color: transparent; }
.qb-btn-primary:hover { background: var(--qb-green-dark); }

.qb-btn-amber,
.qb-btn-amber:hover,
.qb-btn-amber:focus,
.qb-btn-amber:active { background: var(--qb-amber); color: #fff; border-color: transparent; }
.qb-btn-amber:hover { filter: brightness(.95); }

.qb-btn-ghost,
.qb-btn-ghost:hover,
.qb-btn-ghost:focus,
.qb-btn-ghost:active { background: transparent; color: var(--qb-green); border-color: var(--qb-green); }
.qb-btn-ghost:hover { background: var(--qb-green-soft); }

.qb-btn-quiet,
.qb-btn-quiet:hover,
.qb-btn-quiet:focus,
.qb-btn-quiet:active { background: #f3f4f6; color: var(--qb-ink-2); border-color: transparent; }

.qb-btn-danger,
.qb-btn-danger:hover,
.qb-btn-danger:focus,
.qb-btn-danger:active { background: var(--qb-red); color: #fff; border-color: transparent; }

.qb-btn:focus-visible { outline: 3px solid var(--qb-green); outline-offset: 2px; }

.qb-btn-block { width: 100%; }

.qb-btn-sm {
	min-height: 36px;
	padding: 8px 14px;
	font-size: 13px;
}

/* Fields ----------------------------------------------------------------- */

.qb-field {
	display: block;
	margin: 0 0 12px;
}

.qb-field > span {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--qb-muted);
}

.qb-field input,
.qb-field select,
.qb-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--qb-line);
	border-radius: var(--qb-r-sm);
	background: #fff;
	font: 400 15px/1.3 var(--qb-font);
	color: var(--qb-ink);
}

.qb-field input:focus,
.qb-field select:focus,
.qb-field textarea:focus {
	outline: 2px solid var(--qb-green-soft);
	border-color: var(--qb-green);
}

/* Bits ------------------------------------------------------------------- */

.qb-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--qb-green-soft);
	color: var(--qb-green-dark);
}

.qb-pill-amber { background: var(--qb-amber-soft); color: #8a5a10; }

/* An author display rule beats the browser default for [hidden]. .qb-pill
   sets display:inline-flex, so the ETA pill shipped as a 20x8 green blob on
   the delivery card even though its hidden attribute was set. */
.qb-pill[hidden] { display: none; }
.qb-pill-red { background: var(--qb-red-soft); color: var(--qb-red); }
.qb-pill-grey { background: #f3f4f6; color: var(--qb-muted); }

.qb-muted { color: var(--qb-muted); }
.qb-small { font-size: 13px; }
.qb-strong { font-weight: 700; }
.qb-right { text-align: right; }
.qb-row { display: flex; align-items: center; gap: 12px; }
.qb-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qb-stack > * + * { margin-top: 12px; }

.qb-sep {
	height: 1px;
	background: var(--qb-line);
	margin: 14px 0;
	border: 0;
}

.qb-empty {
	padding: 36px 20px;
	text-align: center;
	color: var(--qb-muted);
}

.qb-empty-emoji { font-size: 34px; display: block; margin-bottom: 8px; }

/* An emoji character depends on the device having a font for it. Most phones
   do, but a kiosk tablet or a stripped-down browser can have none at all, and
   then the empty state shows a blank box where its one piece of art should
   be. An SVG from our own sprite has no such dependency. */
.qb-empty-ic {
	width: 34px;
	height: 34px;
	display: block;
	margin: 0 auto 8px;
	color: var(--qb-muted);
}

/* Sheets ----------------------------------------------------------------- */

.qb-sheet {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(15, 23, 42, .5);
}

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

.qb-sheet-card {
	width: 100%;
	max-width: 520px;
	max-height: 92vh;
	overflow: auto;
	background: var(--qb-card);
	border-radius: 18px 18px 0 0;
	box-shadow: var(--qb-shadow-lg);
	animation: qb-rise .18s ease-out;
}

@keyframes qb-rise {
	from { transform: translateY(14px); opacity: .6; }
	to { transform: none; opacity: 1; }
}

.qb-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--qb-line);
}

.qb-sheet-head h3 { margin: 0; font-size: 17px; }

.qb-ic { width: 19px; height: 19px; flex: none; display: block; }

/* Same theme problem as the .qb-btn family below: these two carry one class
   each, so a bare `button:hover` in the theme outranks them and repaints the
   control in the theme's accent - which on a white close button means the ×
   vanishes under the cursor. Every state is spelled out for that reason. */
.qb-sheet-close,
.qb-sheet-close:hover,
.qb-sheet-close:focus,
.qb-sheet-close:active {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	/* The theme pads every bare button 15px 30px, which stretches a round
	   34px button into a 60px wide oval, so the padding is zeroed here too. */
	padding: 0;
	box-sizing: border-box;
	background: #f3f4f6;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
	color: var(--qb-ink-2);
}

.qb-sheet-close:hover { background: #e5e7eb; color: var(--qb-ink); }

.qb-sheet-body { padding: 16px; }
.qb-sheet-foot { padding: 16px; border-top: 1px solid var(--qb-line); }

@media (min-width: 640px) {
	.qb-sheet { align-items: center; }
	.qb-sheet-card { border-radius: 18px; }
}

/* Toast ------------------------------------------------------------------ */

.qb-toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	transform: translateX(-50%);
	z-index: 99999;
	max-width: 90vw;
	padding: 11px 18px;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 14px;
	box-shadow: var(--qb-shadow-lg);
}

.qb-toast-bad { background: var(--qb-red); }

/* Spinner ---------------------------------------------------------------- */

.qb-spin {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: qb-turn .7s linear infinite;
}

.qb-spin-dark { border-color: #d1d5db; border-top-color: var(--qb-green); }

@keyframes qb-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.qb-spin { animation-duration: 2s; }
	.qb-sheet-card { animation: none; }
}

/* The shop's own closed notice, above whatever the page builder drew. */
/* The banner ships empty and hidden, then storefront.js fills it from
   /state. An author rule beats the browser default for [hidden], so say it
   here explicitly or a cached page would flash an empty amber bar. */
.qb-shop-notice[hidden] {
	display: none !important;
}

.qb-shop-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--qb-r-sm);
	background: var(--qb-amber-soft);
	color: #7c4a06;
	font-size: 14px;
}