/* Klantenservicepagina (pagina-sjabloon "Klantenservice", templates/pages/customer-service.php).
   Alleen op die pagina geladen. */

.wcp-service__intro {
	padding-block: 2.5rem 1.5rem;
	background: var(--wcp-color-light);
}

.wcp-service__title { margin: 0 0 0.25rem; }

.wcp-service__lead {
	margin: 0 0 1.25rem;
	color: var(--wcp-color-muted);
	font-size: 1.125rem;
}

.wcp-service__search {
	display: flex;
	gap: 0.5rem;
	max-width: 34rem;
}

.wcp-service__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
}

.wcp-service__search button { flex: 0 0 auto; gap: 0.4rem; }

.wcp-service__section { padding-block: 2.5rem; }
.wcp-service__section--contact { background: var(--wcp-color-light); }

.wcp-service__heading { margin: 0 0 1.25rem; font-size: 1.35rem; }

.wcp-service__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}

.wcp-service__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.9rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
	color: var(--wcp-color-dark);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.wcp-service__card:hover { border-color: var(--wcp-color-primary); }

.wcp-service__card-icon {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: color-mix( in srgb, var(--wcp-color-primary) 15%, #fff );
	color: var(--wcp-color-primary);
	font-size: 1.2rem;
}

.wcp-service__card-title { font-weight: var(--wcp-font-weight-bold); }

.wcp-service__card-count {
	grid-column: 2;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}

.wcp-service__card-chevron {
	grid-column: 3;
	grid-row: 1 / span 2;
	color: var(--wcp-color-muted);
	font-size: 0.8rem;
}

.wcp-service__faq {
	display: grid;
	gap: 0.5rem;
	max-width: 52rem;
}

/* Overzicht: groepen per categorie met tussenkop */
.wcp-faq__group + .wcp-faq__group { margin-top: 2.25rem; }
.wcp-faq__group-title { margin: 0 0 0.75rem; font-size: 1.25rem; }

.wcp-service__question {
	padding: 0.85rem 1.1rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
}

.wcp-service__question > summary {
	cursor: pointer;
	font-weight: var(--wcp-font-weight-bold);
}

.wcp-service__answer { padding-top: 0.6rem; }
.wcp-service__answer > *:last-child { margin-bottom: 0; }

.wcp-service__contact {
	display: grid;
	gap: 2rem;
}

@media (min-width: 62rem) {
	.wcp-service__contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.wcp-service__options {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.wcp-service__option {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--wcp-radius);
	background: #fff;
	color: var(--wcp-color-dark);
	text-decoration: none;
}

.wcp-service__option:hover { color: var(--wcp-color-primary); }

.wcp-service__option > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: color-mix( in srgb, var(--wcp-color-primary) 15%, #fff );
	color: var(--wcp-color-primary);
	font-size: 1.2rem;
}

.wcp-service__option span { display: flex; flex-direction: column; }
.wcp-service__option small { color: var(--wcp-color-muted); }

.wcp-service__company h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.wcp-service__company address { margin: 0 0 0.75rem; font-style: normal; line-height: 1.6; }

.wcp-service__company dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	margin: 0;
}

.wcp-service__company dt { font-weight: var(--wcp-font-weight-bold); }
.wcp-service__company dd { margin: 0; }

.wcp-service__form { min-width: 0; }

/* ── 404 ── */
.wcp-404__card {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.wcp-404__thumb {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
}

.wcp-404__thumb img { width: 100%; height: 100%; object-fit: contain; }

.wcp-404__options {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-bottom: 1.25rem;
}

.wcp-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* ── Vragenlijst (faq-archief en faqcategory) ── */
.wcp-faq__layout {
	display: grid;
	gap: 2rem;
}

@media (min-width: 62rem) {
	.wcp-faq__layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
	.wcp-faq__side { position: sticky; top: 1.5rem; }
}

.wcp-faq__side { display: grid; gap: 1rem; }

.wcp-faq__box {
	padding: 1.25rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
}

.wcp-faq__box--contact { background: var(--wcp-color-light); border-color: transparent; }
.wcp-faq__box-title { margin: 0 0 0.75rem; font-size: 1.05rem; }

.wcp-faq__terms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.wcp-faq__terms a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: var(--wcp-border-width) solid var(--wcp-color-border);
	color: var(--wcp-color-dark);
	text-decoration: none;
}

.wcp-faq__terms li:last-child a { border-bottom: 0; }
.wcp-faq__terms li.is-active a,
.wcp-faq__terms a:hover { color: var(--wcp-color-primary); }
.wcp-faq__terms i { font-size: 0.7rem; opacity: 0.6; }
.wcp-faq__box--contact .wcp-service__option { background: #fff; }

/* ── Bereikbaarheid ── */
.wcp-service__hours { margin-bottom: 1.5rem; }
.wcp-service__hours h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }

.wcp-service__hours ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	max-width: 22rem;
}

.wcp-service__hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0.5rem;
	border-radius: var(--wcp-radius-sm);
}

.wcp-service__hours li.is-today {
	background: color-mix( in srgb, var(--wcp-color-primary) 12%, #fff );
	font-weight: var(--wcp-font-weight-bold);
}

.wcp-service__hours-note {
	margin: 0.5rem 0 0;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}