/* Karma Rebate front-end styles. Scoped to .kr-* so it sits politely inside any theme. */

:root {
	--kr-ink: #1c2421;
	--kr-muted: #5b6662;
	--kr-paper: #ffffff;
	--kr-tint: #f3f7f1;
	--kr-line: #d6ded8;
	--kr-accent: #1f7a4d;
	--kr-accent-ink: #ffffff;
	--kr-danger: #a3271f;
	--kr-danger-tint: #fbeceb;
}

.kr-hero {
	padding-block: 3rem 2rem;
}
.kr-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--kr-accent);
	margin-bottom: 0.5rem;
}
.kr-lede {
	font-size: 1.2rem;
	max-width: 38em;
}
.kr-footnote {
	font-size: 0.8rem;
	color: var(--kr-muted);
}

.kr-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	padding: 1.5rem;
	margin: 2rem 0;
	background: var(--kr-tint);
	border: 1px solid var(--kr-line);
	border-radius: 12px;
	color: var(--kr-ink);
}
.kr-stats > div {
	display: flex;
	flex-direction: column;
}
.kr-stat-num {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.kr-stat-label {
	font-size: 0.9rem;
	color: var(--kr-muted);
}
.kr-stats .kr-footnote {
	flex-basis: 100%;
	margin: 0;
}

/* Form */
.kr-card {
	background: var(--kr-paper);
	color: var(--kr-ink);
	border: 1px solid var(--kr-line);
	border-radius: 14px;
	padding: clamp(1.25rem, 4vw, 2rem);
	max-width: 36rem;
	box-sizing: border-box;
}
.kr-card *,
.kr-card *::before,
.kr-card *::after {
	box-sizing: border-box;
}
.kr-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}
.kr-form legend,
.kr-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}
.kr-field {
	margin: 0 0 1.1rem;
}
.kr-help {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	color: var(--kr-muted);
}
.kr-form input[type="text"],
.kr-form input[type="email"],
.kr-form textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	font: inherit;
	color: var(--kr-ink);
	background: #fff;
	border: 1px solid var(--kr-line);
	border-radius: 8px;
}
.kr-form input:focus,
.kr-form textarea:focus {
	outline: 2px solid var(--kr-accent);
	outline-offset: 1px;
	border-color: var(--kr-accent);
}
.kr-code-list {
	display: grid;
	gap: 0.5rem;
}
.kr-form .kr-code-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.35rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-align: center;
}
.kr-add {
	margin-top: 0.6rem;
	background: none;
	border: 1px dashed var(--kr-line);
	border-radius: 8px;
	padding: 0.5rem 0.9rem;
	font: inherit;
	color: var(--kr-accent);
	cursor: pointer;
}
.kr-add:hover {
	border-color: var(--kr-accent);
}
.kr-submit {
	margin: 1.5rem 0 0.5rem;
}
.kr-submit button {
	width: 100%;
	padding: 0.9rem 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--kr-accent);
	color: var(--kr-accent-ink);
	border: 0;
	border-radius: 999px;
}
.kr-submit button:hover {
	filter: brightness(1.08);
}
.kr-muted {
	color: var(--kr-muted);
	font-weight: 400;
}
.kr-small {
	font-size: 0.85rem;
	margin: 0;
}
.kr-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.cf-turnstile {
	margin-top: 1rem;
}

.kr-alert {
	background: var(--kr-danger-tint);
	color: var(--kr-danger);
	border: 1px solid currentColor;
	border-radius: 10px;
	padding: 0.9rem 1rem;
	margin-bottom: 1.25rem;
}
.kr-alert ul {
	margin: 0.4rem 0 0;
	padding-left: 1.2rem;
}

/* Receipt */
.kr-stamp {
	display: inline-block;
	transform: rotate(-4deg);
	border: 3px solid var(--kr-accent);
	color: var(--kr-accent);
	border-radius: 6px;
	padding: 0.2rem 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.kr-receipt h2 {
	margin-top: 0.75rem;
}
.kr-dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
	padding: 1rem;
	background: var(--kr-tint);
	border-radius: 10px;
	margin: 1rem 0;
}
.kr-dl dt {
	font-weight: 700;
}
.kr-dl dd {
	margin: 0;
	overflow-wrap: anywhere;
}
@media (max-width: 480px) {
	.kr-dl {
		grid-template-columns: 1fr;
	}
	.kr-dl dd {
		margin-bottom: 0.5rem;
	}
}

/* The homepage hero already has a headline; hide the theme's "Home" page title there. */
body.home .wp-block-post-title {
	display: none;
}
.kr-steps h3 {
	margin-bottom: 0.4rem;
}

.kr-check {
	margin: 0 0 1.1rem;
}
.kr-check label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
}
.kr-check input {
	margin-top: 0.3rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--kr-accent);
	flex: none;
}

/* Karma Wall */
.kr-wall {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}
.kr-deed {
	background: var(--kr-paper);
	color: var(--kr-ink);
	border: 1px solid var(--kr-line);
	border-radius: 12px;
	padding: 1.1rem 1.2rem;
	margin: 0;
}
.kr-deed p {
	margin: 0 0 0.6rem;
}
.kr-deed-by {
	font-size: 0.9rem;
	color: var(--kr-muted);
}
.kr-deed-by b {
	color: var(--kr-accent);
}

/* Receipt confetti */
.kr-confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 99999;
}
.kr-confetti i {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 14px;
	border-radius: 2px;
	animation-name: kr-fall;
	animation-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
	animation-fill-mode: forwards;
}
@keyframes kr-fall {
	to {
		transform: translate(var(--kr-drift, 0), 110vh) rotate(var(--kr-spin, 360deg));
	}
}
.kr-receipt .kr-stamp {
	animation: kr-stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes kr-stamp {
	from {
		transform: rotate(-4deg) scale(2.4);
		opacity: 0;
	}
	to {
		transform: rotate(-4deg) scale(1);
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.kr-receipt .kr-stamp {
		animation: none;
	}
}