/* Public raffle page (templates/modules/raffle.php).
 *
 * Layered on campaign-single.css, which provides the shell, panel, mosaic,
 * tabs, dialogs and buttons. Only raffle-specific pieces live here, scoped
 * under .kuku-rf.
 */

/* Status ------------------------------------------------------------------ */

.kuku-rf .kuku-rf-pill[data-state="closed"] {
	background: var(--cp-peach);
	color: var(--cp-brick);
}

.kuku-rf .kuku-rf-pill[data-state="drawn"] {
	background: var(--cp-plum-soft);
	color: var(--cp-plum);
}

.kuku-rf-ribbon {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: calc(100% - 32px);
	padding: 8px 14px;
	border-radius: 14px;
	background: #ffffff;
	color: var(--cp-plum);
	font: 800 15px/1.2 var(--cp-body);
	text-align: left;
	box-shadow: 0 8px 20px rgba(41, 26, 48, .18);
}

.kuku-rf[data-state="closed"] .kuku-rf-ribbon {
	background: var(--cp-peach);
	color: var(--cp-brick);
}

.kuku-rf[data-state="drawn"] .kuku-rf-ribbon {
	background: var(--cp-plum);
	color: #ffffff;
}

/* Panel ------------------------------------------------------------------- */

.kuku-rf-price span:last-child {
	color: var(--cp-muted);
	font: 600 18px/1 var(--cp-body);
	letter-spacing: 0;
}

.kuku-rf-cap {
	margin-top: 14px;
}

.kuku-rf-cap__bar {
	height: 10px;
	border-radius: 999px;
	background: var(--cp-line-soft);
	overflow: hidden;
}

.kuku-rf-cap__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cp-gradient);
}

.kuku-rf-cap p,
.kuku-rf-when {
	margin: 8px 0 0;
	color: var(--cp-muted);
	font-size: 14px;
}

.kuku-rf-when {
	margin-top: 16px;
	color: var(--cp-ink);
	font-weight: 700;
}

.kuku-rf-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
}

.kuku-rf-countdown div {
	padding: 10px 4px;
	border-radius: 14px;
	background: var(--cp-plum-soft);
	text-align: center;
}

.kuku-rf-countdown strong {
	display: block;
	color: var(--cp-plum);
	font: 800 24px/1 var(--cp-display);
	font-variant-numeric: tabular-nums;
}

.kuku-rf-countdown span {
	color: var(--cp-muted);
	font-size: 12px;
}

.kuku-rf .kuku-cp-panel > .kuku-cp-btn--secondary {
	margin-top: 16px;
}

.kuku-rf .kuku-cp-panel > .kuku-cp-btn--secondary + .kuku-cp-btn--secondary {
	margin-top: 12px;
}

.kuku-rf-next {
	margin: 14px 0 0;
	color: #4a4250;
	font-size: 14px;
	line-height: 1.5;
}

.kuku-rf-owner {
	display: grid;
	gap: 8px;
	margin-top: 14px;
	padding: 18px 20px;
	border-radius: 22px;
	background: var(--cp-ink);
	color: #f3e8f6;
	font-size: 14px;
}

.kuku-rf-owner strong {
	color: #ffffff;
	font: 800 16px/1.3 var(--cp-display);
}

.kuku-rf-owner p {
	margin: 0;
}

.kuku-rf-linked {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	padding: 18px 20px;
	border-radius: 22px;
	background: var(--cp-card);
	box-shadow: 0 0 0 1px var(--cp-line);
	color: #4a4250;
	font-size: 14px;
	text-decoration: none;
}

.kuku-rf-linked > span:nth-child(2) {
	flex: 1;
}

.kuku-rf-linked strong {
	display: block;
	color: var(--cp-ink);
	font: 800 16px/1.3 var(--cp-display);
}

.kuku-rf-linked em {
	color: var(--cp-plum);
	font-style: normal;
	font-weight: 700;
}

.kuku-rf-linked .kuku-cp-avatar {
	background: var(--cp-teal);
}

/* Main column ------------------------------------------------------------- */

.kuku-rf .kuku-cp-main {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.kuku-rf-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.kuku-rf-head h2,
.kuku-rf-card h2 {
	font-size: 28px;
}

.kuku-rf-head p {
	margin: 0;
	color: var(--cp-muted);
	font-size: 15px;
}

.kuku-rf-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 28px;
	border-radius: 26px;
}

.kuku-rf-banner h2 {
	margin: 0;
	font-size: 22px;
}

.kuku-rf-banner p {
	margin: 4px 0 0;
}

.kuku-rf-banner.is-closed {
	background: var(--cp-peach);
	color: var(--cp-brick);
}

.kuku-rf-banner.is-drawn {
	background: var(--cp-teal-soft);
	color: var(--cp-teal);
}

.kuku-rf-banner > div {
	flex: 1 1 360px;
}

/* Prizes ------------------------------------------------------------------ */

.kuku-rf-prizes__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.kuku-rf-prizes__track.is-carousel {
	grid-template-columns: none;
	grid-auto-columns: calc((100% - 24px) / 3);
	grid-auto-flow: column;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.kuku-rf-prizes__track.is-carousel::-webkit-scrollbar {
	display: none;
}

.kuku-rf-prize {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	background: var(--cp-card);
	box-shadow: 0 0 0 1px #f0e2dc;
	scroll-snap-align: start;
}

.kuku-rf-prize__art {
	position: relative;
	display: grid;
	place-items: center;
	height: 150px;
	overflow: hidden;
}

.kuku-rf-prize__art :where(picture, .kuku-rf-prize__img) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.kuku-rf-prize__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kuku-rf-prize__qty {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--cp-ink);
	font: 800 12px/1.4 var(--cp-body);
}

.kuku-rf-prize__body {
	display: grid;
	flex: 1;
	align-content: start;
	gap: 8px;
	padding: 16px 18px 18px;
}

.kuku-rf-prize__body h3 {
	font-size: 18px;
}

.kuku-rf-prize__desc {
	color: #4a4250;
	font-size: 14px;
	line-height: 1.45;
}

.kuku-rf-prize__desc > :last-child {
	margin-bottom: 0;
}

.kuku-rf-prize__desc ul {
	margin: 0;
	padding-left: 18px;
}

.kuku-rf-prize__value,
.kuku-rf-prize__sponsor {
	margin: 0;
	font-size: 13px;
}

.kuku-rf-prize__value {
	color: var(--cp-teal);
	font-weight: 700;
}

.kuku-rf-prize__sponsor {
	color: var(--cp-muted);
}

.kuku-rf-winner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--cp-line-soft);
}

.kuku-rf-winner > span:last-child {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.kuku-rf-winner strong {
	font-size: 15px;
	overflow-wrap: anywhere;
}

.kuku-rf-badge {
	justify-self: start;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.kuku-rf-badge.is-ok {
	background: var(--cp-teal-soft);
	color: var(--cp-teal);
}

.kuku-rf-badge.is-pending {
	background: var(--cp-peach);
	color: var(--cp-brick);
}

.kuku-rf-badge.is-reserve {
	background: var(--cp-plum-soft);
	color: var(--cp-plum);
}

/* How it works ------------------------------------------------------------ */

.kuku-rf-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kuku-rf-steps li {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 18px;
	border-radius: 20px;
	background: var(--cp-paper);
	box-shadow: inset 0 0 0 1px #f0e2dc;
	color: #4a4250;
	font-size: 14px;
}

.kuku-rf-steps b {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--cp-plum-soft);
	color: var(--cp-plum);
	font: 800 15px/1 var(--cp-body);
}

.kuku-rf-steps strong {
	color: var(--cp-ink);
	font: 800 16px/1.3 var(--cp-display);
}

.kuku-rf-steps li[data-done] {
	background: var(--cp-teal-soft);
	box-shadow: inset 0 0 0 1px #cfe8e1;
}

.kuku-rf-steps li[data-done] b {
	background: #ffffff;
	color: var(--cp-teal);
}

.kuku-rf-steps li[data-now] {
	background: var(--cp-card);
	box-shadow: inset 0 0 0 2px var(--cp-plum);
}

/* Record and verification ------------------------------------------------- */

.kuku-rf-card {
	padding: 26px;
	border-radius: 26px;
	background: var(--cp-card);
	box-shadow: 0 18px 44px rgba(93, 46, 62, .09), 0 0 0 1px #f0e2dc;
	scroll-margin-top: 24px;
}

.kuku-rf-card > p {
	margin: 8px 0 0;
	color: #4a4250;
}

.kuku-rf-record {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
}

.kuku-rf-record div {
	padding: 16px;
	border-radius: 16px;
	background: var(--cp-paper);
	box-shadow: inset 0 0 0 1px #f0e2dc;
}

.kuku-rf-record dt {
	color: var(--cp-muted);
	font-size: 13px;
}

.kuku-rf-record dd {
	margin: 4px 0 0;
	font: 800 20px/1.2 var(--cp-display);
}

.kuku-rf-hash {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--cp-ink);
	color: #f3e8f6;
	font: 500 13px/1.4 ui-monospace, Menlo, monospace;
}

.kuku-rf-hash code {
	flex: 1;
	overflow-wrap: anywhere;
	background: none;
	color: inherit;
	font: inherit;
}

.kuku-rf-hash button {
	position: relative;
	flex: none;
	min-height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	color: var(--cp-ink);
	font: 700 13px/1 var(--cp-body);
	cursor: pointer;
}

.kuku-rf .kuku-rf-card p.kuku-rf-fine {
	margin-top: 12px;
	color: var(--cp-muted);
	font-size: 13px;
}

.kuku-rf-verify-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.kuku-rf-verify-head p {
	margin: 4px 0 0;
	color: var(--cp-muted);
	font-size: 15px;
}

.kuku-rf-verify-head .kuku-raffle-verify {
	display: grid;
	gap: 10px;
}

.kuku-rf-verify-result:empty {
	display: none;
}

.kuku-rf-verify-result {
	margin: 0;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--cp-teal-soft);
	color: var(--cp-teal);
	font-size: 15px;
	font-weight: 700;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 760px) {
	.kuku-rf-prizes__track.is-carousel {
		grid-auto-columns: min(82%, 300px);
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}

	.kuku-rf-steps,
	.kuku-rf-record {
		grid-template-columns: 1fr;
	}

	.kuku-rf-card,
	.kuku-rf-banner {
		padding: 20px;
		border-radius: 22px;
	}

	.kuku-rf-head h2,
	.kuku-rf-card h2 {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kuku-rf-prizes__track.is-carousel {
		scroll-behavior: auto;
	}
}

/* Long winner lists ------------------------------------------------------- */

.kuku-rf-more {
	margin-top: 6px;
}

.kuku-rf-more summary {
	padding-top: 10px;
	border-top: 1px solid var(--cp-line-soft);
	color: var(--cp-plum);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.kuku-rf-more[open] summary {
	margin-bottom: 4px;
}

.kuku-rf-prizes__track.is-carousel {
	align-items: start;
}

.kuku-rf-more[open] {
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
}