/* Inu no Kai — activiteitenformulier (/activiteiten-doorgeven/).
   Zelfde taal als de bevestigingspagina: witte kaart, crème panelen,
   warme hairlines, serif voor de koppen. */

.ink-survey {
	--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-survey, .ink-survey *, .ink-survey *::before, .ink-survey *::after { box-sizing: border-box; }

/* De paginatitel zegt hetzelfde als de kop in de kaart. */
.ink-survey-page .wp-block-post-title { display: none; }

/* -------- Kop -------- */
.ink-survey__head { text-align: center; margin: 0 0 1.7rem; }
.ink-survey__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-survey__check svg { width: 1.7rem; height: 1.7rem; }
.ink-survey__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-survey__sub { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.ink-survey__sub strong { color: var(--ink-ink); }

/* -------- Meldingen -------- */
.ink-survey__errors,
.ink-survey__saved {
	border-radius: 12px;
	padding: 0.85rem 1.1rem;
	margin: 0 0 1.3rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.ink-survey__errors {
	background: rgba(200, 64, 46, 0.08);
	border: 1px solid rgba(200, 64, 46, 0.3);
	color: var(--ink-ink);
}
.ink-survey__errors p { margin: 0 0 0.35rem; }
.ink-survey__errors ul { margin: 0; padding-left: 1.2rem; }
.ink-survey__errors li { margin: 0.2rem 0; }
.ink-survey__saved {
	background: var(--ink-base);
	border: 1px solid var(--ink-border);
	color: var(--ink-soft);
}

/* -------- Blokken -------- */
.ink-survey__block {
	background: var(--ink-base);
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	padding: 1.1rem 1.2rem 1.2rem;
	margin: 0 0 1.1rem;
}
.ink-survey__legend {
	display: flex; align-items: center; gap: 0.6rem;
	font-family: var(--ink-serif);
	font-size: 1.1rem; font-weight: 600; line-height: 1.3;
	padding: 0; margin: 0 0 0.35rem;
	color: var(--ink-ink);
}
.ink-survey__step {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.7rem; height: 1.7rem;
	border-radius: 50%;
	background: var(--ink-red); color: #fff;
	font-family: var(--ink-sans); font-size: 0.9rem; font-weight: 700;
}
.ink-survey__legend--plain { font-size: 1rem; }
.ink-survey__hint { margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.ink-survey__hint--center { text-align: center; margin-top: 0.5rem; }

/* -------- Keuzes -------- */
.ink-survey__choices { display: flex; flex-direction: column; gap: 0.5rem; }
.ink-survey__choices--wrap { flex-direction: row; flex-wrap: wrap; }
.ink-survey__choices--wrap .ink-survey__choice { flex: 1 1 14rem; }

.ink-survey__choice {
	display: flex; align-items: flex-start; gap: 0.65rem;
	background: var(--ink-card);
	border: 1px solid var(--ink-border);
	border-radius: 11px;
	padding: 0.75rem 0.9rem;
	cursor: pointer;
	font-size: 0.97rem; line-height: 1.45;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ink-survey__choice:hover { border-color: var(--ink-rust); }
.ink-survey__choice input { flex: 0 0 auto; margin: 0.2rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--ink-red); }
.ink-survey__choice:has(input:checked) { border-color: var(--ink-red); background: rgba(200, 64, 46, 0.05); }
.ink-survey__choice:focus-within { outline: 2px solid var(--ink-rust); outline-offset: 2px; }

/* -------- Per hond -------- */
.ink-survey__dog { margin: 0 0 1rem; }
.ink-survey__dog:last-child { margin-bottom: 0; }
.ink-survey__dogname {
	margin: 0 0 0.45rem;
	font-weight: 700; font-size: 1rem;
	color: var(--ink-rust);
}

/* -------- Opmerking -------- */
.ink-survey__block--note textarea {
	width: 100%;
	border: 1px solid var(--ink-border);
	border-radius: 11px;
	padding: 0.7rem 0.85rem;
	font-family: var(--ink-sans); font-size: 0.97rem; line-height: 1.5;
	color: var(--ink-ink); background: var(--ink-card);
	resize: vertical;
}
.ink-survey__block--note textarea:focus { outline: none; border-color: var(--ink-rust); box-shadow: 0 0 0 3px rgba(204, 107, 51, 0.16); }

/* -------- Versturen -------- */
.ink-survey__submit {
	display: block; width: 100%;
	background: var(--ink-red); color: #fff;
	border: 0; border-radius: 12px;
	padding: 1rem 1.4rem;
	font-family: var(--ink-sans); font-size: 1.05rem; font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ink-survey__submit:hover { background: #b3382a; }
.ink-survey__deadline { margin: 0.7rem 0 0; text-align: center; font-size: 0.88rem; color: var(--ink-soft); }

/* -------- Bedankt -------- */
.ink-survey__recap {
	background: var(--ink-base);
	border: 1px solid var(--ink-border);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 1.2rem;
}
.ink-survey__recaprow {
	display: flex; flex-wrap: wrap; gap: 0.2rem 1rem;
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid var(--ink-border);
	font-size: 0.97rem; line-height: 1.5;
}
.ink-survey__recaprow:last-child { border-bottom: 0; }
.ink-survey__recaplabel { flex: 0 0 9.5rem; color: var(--ink-soft); }
.ink-survey__recapvalue { flex: 1 1 12rem; font-weight: 600; }

.ink-survey__wa {
	display: block; text-align: center;
	background: #25D366; color: #0b2e18;
	text-decoration: none;
	border-radius: 12px;
	padding: 0.95rem 1.4rem;
	font-weight: 700; font-size: 1.02rem;
}
.ink-survey__wa:hover { background: #1fbb5a; color: #0b2e18; }

.ink-survey__again { margin: 1.2rem 0 0; text-align: center; font-size: 0.92rem; color: var(--ink-soft); }
.ink-survey__again a { color: var(--ink-red); }

@media (max-width: 480px) {
	.ink-survey__recaplabel { flex: 1 1 100%; }
	.ink-survey__choices--wrap .ink-survey__choice { flex: 1 1 100%; }
}