/* The Little Pickle — Loyalty app styles (self-contained, brand-matched). */
.lp-app {
	--navy: #354285;
	--pickle: #B1A526;
	--rustic: #8B5A47;
	--olive: #1D2100;
	--cream: #F5F3EA;
	--warm: #FCFBF7;
	--line: rgba(53, 66, 133, 0.16);
	--display: "Bowlby One", Impact, system-ui, sans-serif;
	--body: "Work Sans", system-ui, -apple-system, sans-serif;

	max-width: 560px;
	margin: 0 auto;
	padding: 8px 16px 48px;
	font-family: var(--body);
	color: var(--olive);
	-webkit-font-smoothing: antialiased;
}
.lp-app *, .lp-app *::before, .lp-app *::after { box-sizing: border-box; }

.lp-panel {
	background: var(--warm);
	border: 2px solid var(--pickle);
	border-radius: 12px;
	box-shadow: inset 0 0 0 5px var(--warm), inset 0 0 0 7px rgba(177, 165, 38, 0.35);
	padding: 30px 24px;
}
.lp-center { text-align: center; }

.lp-eyebrow {
	font-family: var(--body);
	font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.18em; color: var(--rustic); margin: 0 0 10px;
}
.lp-h1 {
	font-family: var(--display); text-transform: uppercase; color: var(--navy);
	font-size: clamp(30px, 8vw, 44px); line-height: 1.02; margin: 0 0 14px;
}
.lp-lead { font-size: 16px; line-height: 1.6; color: rgba(29, 33, 0, 0.8); margin: 0 0 20px; }
.lp-hint { font-size: 13px; color: rgba(29, 33, 0, 0.55); margin: 12px 0 0; }
.lp-link { color: var(--navy); font-weight: 600; }

/* Forms */
.lp-form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 8px; }
.lp-field { display: flex; flex-direction: column; gap: 5px; }
.lp-field > span { font-size: 13px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; }
.lp-field > span em { font-style: normal; color: rgba(29, 33, 0, 0.5); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lp-field input {
	font-family: var(--body); font-size: 16px; padding: 12px 14px;
	border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--olive);
}
.lp-field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(53, 66, 133, 0.15); }

.lp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: rgba(29, 33, 0, 0.8); }
.lp-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }

/* Buttons */
.lp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--body); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
	background: var(--navy); color: var(--warm); border: 2px solid var(--navy);
	padding: 14px 24px; border-radius: 8px; cursor: pointer; text-decoration: none;
	transition: background 0.15s;
}
.lp-btn:hover { background: #2a3470; }
.lp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--warm), 0 0 0 5px var(--navy); }
.lp-btn-block { width: 100%; margin-top: 4px; }
.lp-btn-ghost { background: transparent; color: var(--navy); }
.lp-btn-ghost:hover { background: var(--cream); }
.lp-btn-gold { background: var(--pickle); border-color: var(--pickle); color: var(--olive); }
.lp-btn-gold:hover { background: #c4b93f; }

.lp-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: rgba(29, 33, 0, 0.45); font-size: 13px; }
.lp-divider::before, .lp-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.lp-alert {
	background: rgba(139, 90, 71, 0.1); border: 1px solid rgba(139, 90, 71, 0.4);
	color: var(--rustic); border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}

/* Card: stamps + QR */
.lp-reward {
	background: var(--pickle); color: var(--olive); font-weight: 700;
	border-radius: 10px; padding: 14px; margin-bottom: 18px; font-size: 16px;
}
.lp-stamps {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
	gap: 10px; max-width: 320px; margin: 18px auto 8px;
}
.lp-stamp {
	aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(53, 66, 133, 0.3);
	display: grid; place-items: center; font-size: 22px; background: var(--cream);
}
.lp-stamp.is-filled { border: 2px solid var(--pickle); background: rgba(177, 165, 38, 0.18); }
.lp-count { font-family: var(--display); color: var(--navy); font-size: 20px; margin: 6px 0 12px; }
.lp-lifetime { font-size: 14px; color: rgba(29, 33, 0, 0.7); line-height: 1.5; margin: 0 0 14px; }
.lp-lifetime-num { font-family: var(--display); color: var(--rustic); font-size: 18px; }
.lp-lifetime-next { font-size: 12px; color: rgba(29, 33, 0, 0.5); }
.lp-badge {
	display: inline-block; background: var(--navy); color: var(--warm);
	font-family: var(--display); text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em;
	padding: 8px 16px; border-radius: 999px; margin: 0 0 16px;
}
.lp-milestone-banner {
	background: var(--navy); color: var(--warm); border-radius: 10px; padding: 14px;
	font-weight: 700; font-size: 16px; margin-bottom: 12px;
}

.lp-qr {
	width: 220px; height: 220px; margin: 8px auto; background: #fff;
	border: 2px solid var(--navy); border-radius: 10px; padding: 10px;
	display: grid; place-items: center;
}
.lp-qr svg, .lp-qr img { width: 100%; height: 100%; display: block; }

/* Staff scanner */
.lp-scanner {
	position: relative; width: 100%; max-width: 360px; margin: 16px auto;
	aspect-ratio: 1; background: #000; border-radius: 12px; overflow: hidden; border: 2px solid var(--navy);
}
.lp-scanner video { width: 100%; height: 100%; object-fit: cover; }
.lp-scan-frame {
	position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px; pointer-events: none;
}
#lp-scan-controls { margin-top: 6px; }
.lp-result {
	margin-top: 18px; border-radius: 10px; padding: 18px; font-size: 16px;
	border: 2px solid var(--line);
}
.lp-result.is-ok { background: rgba(177, 165, 38, 0.14); border-color: var(--pickle); }
.lp-result.is-warn { background: rgba(139, 90, 71, 0.1); border-color: rgba(139, 90, 71, 0.4); }
.lp-result.is-err { background: rgba(200, 40, 40, 0.08); border-color: rgba(200, 40, 40, 0.4); }
.lp-result .lp-result-name { font-family: var(--display); color: var(--navy); font-size: 20px; }
.lp-result .lp-result-count { font-size: 15px; margin: 6px 0 12px; }
.lp-result-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.lp-result-actions .lp-btn { margin: 0; flex: 1 1 auto; min-width: 150px; }

@media (prefers-reduced-motion: reduce) { .lp-app * { transition: none !important; } }