/* Inu no Kai — bevestigingspagina na aanmelding (/aanmelding-bevestigd/).
   Zelfde taal als het aanmeldformulier: witte kaart, crème panelen,
   warme hairlines, serif voor bedragen. */

.ink-conf {
	--ink-base:   var(--wp--preset--color--base, #FCF7F0);
	--ink-base2:  var(--wp--preset--color--base-2, #F1E4D2);
	--ink-card:   var(--wp--preset--color--accent-6, #fff);
	--ink-border: var(--wp--preset--color--accent-5, #E7D8C4);
	--ink-ink:    var(--wp--preset--color--contrast, #2A2521);
	--ink-rust:   var(--wp--preset--color--accent-1, #CC6B33);
	--ink-red:    var(--wp--preset--color--accent-2, #C8402E);
	--ink-green:  #2F7D53;
	--ink-soft:   rgba(42, 37, 33, 0.62);
	--ink-serif:  Platypi, "Iowan Old Style", Georgia, serif;
	--ink-sans:   Manrope, -apple-system, BlinkMacSystemFont, sans-serif;

	max-width: 720px;
	margin: 0 auto;
	background: var(--ink-card);
	border: 1px solid var(--ink-border);
	border-radius: 18px;
	padding: clamp(1.4rem, 1rem + 2.4vw, 2.4rem);
	box-shadow: 0 18px 44px rgba(42, 37, 33, 0.13);
	font-family: var(--ink-sans);
	color: var(--ink-ink);
	box-sizing: border-box;
}
.ink-conf, .ink-conf *, .ink-conf *::before, .ink-conf *::after { box-sizing: border-box; }

/* De paginatitel zegt hetzelfde als de kop in de kaart — die kaartkop is hier de H1. */
.ink-confirm-page .wp-block-post-title { display: none; }

/* -------- Kop -------- */
.ink-conf-head { text-align: center; margin: 0 0 1.6rem; }
.ink-conf-head__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.4rem; height: 3.4rem; margin: 0 0 0.9rem;
	border-radius: 50%;
	background: rgba(47, 125, 83, 0.12);
	color: var(--ink-green);
}
.ink-conf-head__check.is-off { background: rgba(42, 37, 33, 0.08); color: var(--ink-soft); }
.ink-conf-head__check svg { width: 1.7rem; height: 1.7rem; }
.ink-conf-head__title {
	font-family: var(--ink-serif);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
	font-weight: 600; line-height: 1.15;
	margin: 0 0 0.45rem; color: var(--ink-ink);
}
.ink-conf-head__sub { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.ink-conf-head__sub strong { color: var(--ink-ink); }

/* -------- Wanneer / Waar -------- */
.ink-conf-card {
	background: var(--ink-base);
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 1.15rem;
}
.ink-conf-row {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75rem; row-gap: 0.1rem;
	padding: 0.85rem 1rem;
}
.ink-conf-row + .ink-conf-row { border-top: 1px solid var(--ink-border); }
.ink-conf-row__icon {
	grid-row: 1 / span 2;
	width: 2.1rem; height: 2.1rem; border-radius: 50%;
	background: var(--ink-card); border: 1px solid var(--ink-border);
	color: var(--ink-rust);
	display: inline-flex; align-items: center; justify-content: center;
	align-self: start;
}
.ink-conf-row__icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.ink-conf-row__label {
	grid-column: 2;
	font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em;
	color: var(--ink-soft);
}
.ink-conf-row__value { grid-column: 2; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.ink-conf-row__sub { display: block; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); }
.ink-conf-route {
	display: inline-flex; align-items: center; gap: 0.35rem;
	margin-top: 0.4rem;
	font-size: 0.88rem; font-weight: 700; color: var(--ink-red); text-decoration: none;
}
.ink-conf-route:hover { text-decoration: underline; }
.ink-conf-route__icon svg { width: 1.05rem; height: 1.05rem; }

/* -------- Mailregel -------- */
.ink-conf-mail {
	margin: 0 0 1.15rem;
	font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);
}
.ink-conf-mail strong { color: var(--ink-ink); overflow-wrap: anywhere; }

/* -------- Panelen deelnemers / honden -------- */
.ink-conf-panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0 0 1.15rem;
}
.ink-conf-panel {
	background: var(--ink-base);
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	padding: 0.95rem 1rem;
	min-width: 0;
}
.ink-conf-panel__head { display: flex; align-items: center; gap: 0.55rem; }
.ink-conf-panel__icon {
	flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
	background: var(--ink-card); border: 1px solid var(--ink-border);
	color: var(--ink-rust);
	display: inline-flex; align-items: center; justify-content: center;
}
.ink-conf-panel__icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.ink-conf-panel__title { font-weight: 800; font-size: 0.98rem; }
.ink-conf-panel__count {
	margin-left: auto;
	font-family: var(--ink-serif); font-size: 1.3rem; font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ink-conf-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.ink-conf-list li {
	padding: 0.4rem 0;
	font-size: 0.93rem; line-height: 1.4;
	overflow-wrap: anywhere;
}
.ink-conf-list li + li { border-top: 1px solid var(--ink-border); }
.ink-conf-empty { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--ink-soft); }

/* -------- Betaald -------- */
.ink-conf-paid {
	display: flex; align-items: center; gap: 0.6rem;
	background: var(--ink-base2);
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	padding: 0.85rem 1rem;
	margin: 0 0 1.15rem;
}
.ink-conf-paid__icon {
	flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
	background: var(--ink-card); border: 1px solid var(--ink-border);
	color: var(--ink-rust);
	display: inline-flex; align-items: center; justify-content: center;
}
.ink-conf-paid__icon svg { width: 1.15rem; height: 1.15rem; }
.ink-conf-paid__label { font-weight: 700; font-size: 0.98rem; }
.ink-conf-paid__amount {
	margin-left: auto;
	font-family: var(--ink-serif); font-size: 1.45rem; font-weight: 600; color: var(--ink-red);
	font-variant-numeric: tabular-nums;
}

/* -------- QR -------- */
.ink-conf-qr {
	display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	padding: 1rem;
	margin: 0 0 1.4rem;
}
.ink-conf-qr__img {
	flex: 0 0 auto;
	width: 150px; height: 150px;
	image-rendering: pixelated; /* scherpe blokjes bij schalen */
	background: #fff; border-radius: 8px;
}
.ink-conf-qr__text { flex: 1 1 12rem; min-width: 0; }
.ink-conf-qr__title { margin: 0 0 0.3rem; font-weight: 800; font-size: 1rem; }
.ink-conf-qr__code {
	margin: 0 0 0.4rem;
	font-family: var(--ink-serif); font-size: 1.5rem; font-weight: 600;
	letter-spacing: 0.08em; color: var(--ink-ink);
}
.ink-conf-qr__note { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); }

/* -------- Knoppen -------- */
.ink-conf-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ink-conf-btn {
	flex: 1 1 auto; text-align: center;
	padding: 0.85rem 1.2rem;
	border: 1.5px solid var(--ink-border); border-radius: 12px;
	background: var(--ink-card); color: var(--ink-ink);
	font-family: var(--ink-sans); font-weight: 700; font-size: 0.95rem;
	text-decoration: none;
	transition: filter .15s ease, transform .12s ease, background-color .15s ease;
}
.ink-conf-btn:hover { background: var(--ink-base); transform: translateY(-1px); }
.ink-conf-btn--primary {
	background: var(--ink-red); border-color: var(--ink-red); color: #fff;
	box-shadow: 0 6px 18px rgba(200, 64, 46, 0.28);
}
.ink-conf-btn--primary:hover { background: var(--ink-red); filter: brightness(1.08); }
.ink-conf-btn:focus-visible { outline: 3px solid rgba(200, 64, 46, 0.35); outline-offset: 2px; }

/* -------- Wachtstand -------- */
.ink-conf--wait { text-align: center; }
.ink-conf--wait .ink-conf-head { margin-bottom: 1.2rem; }
.ink-conf-spinner {
	display: inline-block; width: 2.4rem; height: 2.4rem; margin: 0 0 1rem;
	border: 3px solid var(--ink-border);
	border-top-color: var(--ink-red);
	border-radius: 50%;
	animation: inkConfSpin 0.9s linear infinite;
}
@keyframes inkConfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ink-conf-spinner { animation-duration: 3s; }
}

@media (max-width: 560px) {
	.ink-conf-panels { grid-template-columns: 1fr; }
	.ink-conf-qr { justify-content: center; text-align: center; }
	.ink-conf-qr__text { flex-basis: 100%; }
	.ink-conf-btn { flex-basis: 100%; }
}

/* -------- Afdrukken: alleen het bewijs, geen knoppen -------- */
@media print {
	.ink-conf { box-shadow: none; border: 0; max-width: none; padding: 0; }
	.ink-conf-actions, .ink-conf-mail { display: none; }
	.ink-conf-qr { break-inside: avoid; }
}