/* Gezond&Vitaal afspraakplanner — huisstijl uit het stijlboek (petrol, beige, turquoise, olijf, lime; Poppins + Roboto) */

.gvp {
	--gvp-petrol: #337A7C;
	--gvp-petrol-dark: #285f61;
	--gvp-ink: #173f40;
	--gvp-muted: #566b6b;
	--gvp-beige: #F5EBE2;
	--gvp-paper: #fffcf8;
	--gvp-line: #e3d4c6;
	--gvp-turq: #5BC0CC;
	--gvp-olive: #959C70;
	--gvp-lime: #dedc00;
	--gvp-danger: #a8322b;
	--gvp-warn-bg: #fbf3d6;
	--gvp-radius: 14px;

	box-sizing: border-box;
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px);
	background: var(--gvp-beige);
	border-radius: 24px;
	color: var(--gvp-ink);
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}
.gvp *, .gvp *::before, .gvp *::after { box-sizing: border-box; }
.gvp p { margin: 0; }
.gvp img { max-width: 100%; }
.gvp a { color: var(--gvp-petrol); text-decoration: underline; }
.gvp button, .gvp input, .gvp select, .gvp textarea {
	font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; box-shadow: none;
}
.gvp button { cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; text-align: inherit; line-height: inherit; min-height: 0; }
.gvp button:disabled { cursor: default; }
.gvp :focus-visible { outline: 3px solid var(--gvp-turq); outline-offset: 2px; }
.gvp [data-gvp-heading]:focus { outline: none; }
.gvp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gvp-boot { color: var(--gvp-muted); }

/* Typografie */
.gvp .gvp-title {
	font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: clamp(22px, 3vw, 28px);
	line-height: 1.25; margin: 0 0 20px; color: var(--gvp-ink); letter-spacing: normal; text-transform: none;
}
.gvp .gvp-title + .gvp-lead { margin-top: -14px !important; }
.gvp .gvp-subtitle { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 16px; margin: 24px 0 12px; color: var(--gvp-ink); }
.gvp-lead { color: var(--gvp-muted); margin-bottom: 24px !important; }
.gvp-small { font-size: 14px; color: var(--gvp-muted); margin-top: 16px !important; }
.gvp-empty { padding: 20px; background: var(--gvp-paper); border: 1.5px dashed var(--gvp-line); border-radius: var(--gvp-radius); }

/* Stappenbalk */
.gvp-steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gvp-steps li {
	display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 12px;
	border-bottom: 3px solid var(--gvp-line); color: var(--gvp-muted);
	font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.2;
}
.gvp-steps li.is-done, .gvp-steps li.is-active { border-color: var(--gvp-petrol); color: var(--gvp-ink); }
.gvp-steps__num {
	flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	border: 1.5px solid var(--gvp-line); font-size: 12px; background: var(--gvp-paper);
}
.is-active .gvp-steps__num { background: var(--gvp-lime); border-color: var(--gvp-lime); color: var(--gvp-ink); }
.is-done .gvp-steps__num { background: var(--gvp-petrol); border-color: var(--gvp-petrol); color: #fff; }

/* Terug, keuzes */
.gvp .gvp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--gvp-petrol); font-weight: 400; font-size: 15px; }
.gvp .gvp-back:hover { text-decoration: underline; }
.gvp-summary { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gvp-summary li { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--gvp-paper); border: 1px solid var(--gvp-line); font-size: 13px; font-weight: 400; color: var(--gvp-ink); }

/* Meldingen */
.gvp-notice { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-weight: 400; }
.gvp-notice p { flex: 1 1 260px; }
.gvp-notice--error { background: #fbe9e7; color: var(--gvp-danger); }
.gvp-notice--warn { background: var(--gvp-warn-bg); color: #5c4a06; }
.gvp-callout { margin: 0 0 24px; padding: 14px 18px; background: var(--gvp-paper); border: 1.5px solid var(--gvp-olive); border-radius: 12px; font-size: 15px; }
.gvp-callout > * { margin: 0 0 6px; }
.gvp-callout > *:last-child { margin-bottom: 0; }

/* Laden */
.gvp-loading { display: flex; align-items: center; gap: 12px; min-height: 180px; justify-content: center; color: var(--gvp-muted); }
.gvp-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--gvp-line); border-top-color: var(--gvp-petrol); animation: gvp-spin .8s linear infinite; }
@keyframes gvp-spin { to { transform: rotate(360deg); } }

/* Afspraaktype-kaarten */
.gvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gvp .gvp-card {
	display: flex; flex-direction: column; overflow: hidden; text-align: left;
	background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: var(--gvp-radius);
	transition: border-color .15s ease, transform .15s ease;
}
.gvp .gvp-card:hover { border-color: var(--gvp-petrol); transform: translateY(-2px); }
.gvp .gvp-card.is-selected { border-color: var(--gvp-petrol); box-shadow: inset 0 0 0 1.5px var(--gvp-petrol); }
.gvp-card__img { display: block; aspect-ratio: 4 / 3; background: var(--gvp-olive); overflow: hidden; }
.gvp-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gvp .gvp-card:hover .gvp-card__img img { transform: scale(1.03); }
.gvp-card--plain { border-top: 6px solid var(--gvp-petrol); }
.gvp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.gvp-card__title { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; }
.gvp-card__text { font-size: 14px; color: var(--gvp-muted); }
.gvp-card__meta { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 400; color: var(--gvp-petrol); }
.gvp-arrow { font-size: 18px; color: var(--gvp-petrol); transition: transform .15s ease; }
.gvp .gvp-card:hover .gvp-arrow, .gvp .gvp-option:hover .gvp-arrow { transform: translateX(3px); }

/* Lijst-opties (locatie, specialisatie) */
.gvp-list { display: grid; gap: 10px; }
.gvp .gvp-option {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
	padding: 16px 18px; background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: var(--gvp-radius);
	transition: border-color .15s ease;
}
.gvp .gvp-option:hover, .gvp .gvp-option.is-selected { border-color: var(--gvp-petrol); }
.gvp-option__title { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 500; }
.gvp-option__text { display: block; font-size: 14px; color: var(--gvp-muted); }

/* Behandelaars */
.gvp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.gvp .gvp-person {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	padding: 22px 14px 18px; background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: var(--gvp-radius);
	transition: border-color .15s ease, transform .15s ease;
}
.gvp .gvp-person:hover { border-color: var(--gvp-petrol); transform: translateY(-2px); }
.gvp .gvp-person.is-selected { border-color: var(--gvp-petrol); box-shadow: inset 0 0 0 1.5px var(--gvp-petrol); }
.gvp-person__avatar {
	width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 8px;
	display: grid; place-items: center; background: var(--gvp-petrol); color: #fff;
	border: 3px solid var(--gvp-beige); box-shadow: 0 0 0 1.5px var(--gvp-line);
}
.gvp-person__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gvp-person__initials { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 24px; }
.gvp-person__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; line-height: 1.3; }
.gvp-person__role { font-size: 14px; color: var(--gvp-muted); }

/* Datum en tijd */
.gvp-week { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gvp-week__label { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; }
.gvp .gvp-iconbtn {
	width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
	background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); color: var(--gvp-petrol); font-size: 18px;
}
.gvp .gvp-iconbtn:hover:not(:disabled) { border-color: var(--gvp-petrol); }
.gvp .gvp-iconbtn:disabled { opacity: .35; }
.gvp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gvp .gvp-day {
	display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0;
	background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: 12px;
}
.gvp .gvp-day:hover:not(:disabled) { border-color: var(--gvp-petrol); }
.gvp .gvp-day:disabled { background: transparent; border-style: dashed; color: var(--gvp-muted); opacity: .55; }
.gvp .gvp-day.is-selected { background: var(--gvp-petrol); border-color: var(--gvp-petrol); color: #fff; }
.gvp-day__name { font-size: 12px; text-transform: lowercase; }
.gvp-day__num { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 18px; }
.gvp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.gvp .gvp-slot {
	padding: 10px 0; text-align: center; font-weight: 400;
	background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: 10px;
	transition: border-color .15s ease, background-color .15s ease;
}
.gvp .gvp-slot:hover { border-color: var(--gvp-petrol); }
.gvp .gvp-slot.is-selected { background: var(--gvp-petrol); border-color: var(--gvp-petrol); color: #fff; }

/* Formulier */
.gvp-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gvp-w1 { grid-column: span 1; } .gvp-w2 { grid-column: span 2; } .gvp-w3 { grid-column: span 3; } .gvp-w6 { grid-column: 1 / -1; }
.gvp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gvp-field label, .gvp-field legend { font-size: 14px; font-weight: 400; color: var(--gvp-ink); padding: 0; margin: 0; }
.gvp-field legend { margin-bottom: 6px; }
.gvp-req { color: var(--gvp-petrol); }
.gvp-opt { color: var(--gvp-muted); font-weight: 300; }
.gvp .gvp-field input[type="text"], .gvp .gvp-field input[type="email"], .gvp .gvp-field input[type="tel"],
.gvp .gvp-field input[type="date"], .gvp .gvp-field select, .gvp .gvp-field textarea {
	width: 100%; min-height: 48px; padding: 10px 14px; font-weight: 400;
	background: #fff; border: 1.5px solid var(--gvp-line); border-radius: 10px; color: var(--gvp-ink);
	transition: border-color .15s ease;
}
.gvp .gvp-field textarea { resize: vertical; min-height: 90px; }
.gvp .gvp-field input:focus, .gvp .gvp-field select:focus, .gvp .gvp-field textarea:focus { border-color: var(--gvp-petrol); outline: none; box-shadow: 0 0 0 3px rgba(91, 192, 204, .35); }
.gvp .has-error input, .gvp .has-error select, .gvp .has-error textarea { border-color: var(--gvp-danger); }
.gvp-error { color: var(--gvp-danger); font-size: 13px; font-weight: 400; }
.gvp-counter { align-self: flex-end; font-size: 12px; color: var(--gvp-muted); }
.gvp-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.gvp-radio { position: relative; cursor: pointer; }
.gvp-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gvp-radio span {
	display: inline-block; padding: 10px 18px; border-radius: 999px; background: #fff;
	border: 1.5px solid var(--gvp-line); font-weight: 400; transition: all .15s ease;
}
.gvp-radio input:checked + span { background: var(--gvp-petrol); border-color: var(--gvp-petrol); color: #fff; }
.gvp-radio input:focus-visible + span { outline: 3px solid var(--gvp-turq); outline-offset: 2px; }
.gvp .has-error .gvp-radio span { border-color: var(--gvp-danger); }
.gvp-check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; cursor: pointer; }
.gvp-check input { width: 20px; height: 20px; accent-color: var(--gvp-petrol); margin: 0; }

/* Knoppen */
.gvp-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.gvp-form .gvp-actions { margin-top: 4px; }
.gvp .gvp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: 12px; background: var(--gvp-petrol); color: #fff;
	font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2;
	transition: background-color .15s ease;
}
.gvp .gvp-btn:hover { background: var(--gvp-petrol-dark); }
.gvp .gvp-btn--small { padding: 8px 16px; font-size: 14px; }
.gvp .gvp-btn--ghost { background: transparent; color: var(--gvp-petrol); border: 1.5px solid var(--gvp-petrol); }
.gvp .gvp-btn--ghost:hover { background: var(--gvp-paper); }

/* Overzicht en bevestiging */
.gvp-review { margin: 0; padding: 6px 20px; background: var(--gvp-paper); border: 1.5px solid var(--gvp-line); border-radius: var(--gvp-radius); }
.gvp-review > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gvp-line); }
.gvp-review > div:last-child { border-bottom: 0; }
.gvp-review dt { color: var(--gvp-muted); margin: 0; }
.gvp-review dd { margin: 0; font-weight: 400; }
.gvp-review + .gvp-callout { margin-top: 20px; }
.gvp-done { max-width: 620px; }
.gvp-done__icon {
	display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%;
	background: var(--gvp-lime); color: var(--gvp-ink); font-size: 26px; font-weight: 600;
}

/* Smal: mobiel én het paneel. Een container query kijkt naar de breedte van de planner zelf, niet van het scherm. */
.gvp { container-type: inline-size; container-name: gvp; }
@media (max-width: 680px) {
	.gvp { border-radius: 18px; }
}
@container gvp (max-width: 620px) {
	.gvp-steps { gap: 6px; }
	.gvp-steps li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; }
	.gvp-steps li:not(.is-active) .gvp-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.gvp-form { grid-template-columns: minmax(0, 1fr); }
	.gvp-w1, .gvp-w2, .gvp-w3 { grid-column: 1 / -1; }
	.gvp-review > div { grid-template-columns: 1fr; gap: 2px; }
	.gvp-day__name { font-size: 11px; }
	.gvp-day__num { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.gvp *, .gvp *::before, .gvp *::after { transition: none !important; animation-duration: 1ms !important; }
}

/* -------------------------------------------------------------------------
 * Zwevende knop en paneel
 * ---------------------------------------------------------------------- */

.gvp-fab {
	position: fixed; right: 24px; bottom: 24px; z-index: 99990;
	display: inline-flex; align-items: center; gap: 10px; margin: 0;
	padding: 14px 24px 14px 20px; border: 0; border-radius: 999px;
	background: #337A7C; color: #fff; cursor: pointer;
	font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2;
	letter-spacing: normal; text-transform: none; text-decoration: none;
	box-shadow: 0 10px 28px rgba(23, 63, 64, .28), 0 2px 6px rgba(23, 63, 64, .18);
	transition: background-color .15s ease, transform .15s ease;
	-webkit-appearance: none; appearance: none;
}
.gvp-fab:hover { background: #285f61; color: #fff; transform: translateY(-2px); }
.gvp-fab:focus-visible { outline: 3px solid #5BC0CC; outline-offset: 3px; }
.gvp-fab__icon { flex: none; display: block; }
.gvp-lock .gvp-fab { visibility: hidden; }

html.gvp-lock { overflow: hidden; }

.gvp-dialog {
	position: fixed; inset: 0 0 0 auto; margin: 0;
	width: min(600px, 100vw); max-width: 100vw;
	height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
	padding: 0; border: 0; border-radius: 24px 0 0 24px;
	background: #F5EBE2; color: #173f40; overflow-y: auto; overscroll-behavior: contain;
	box-shadow: -12px 0 40px rgba(23, 63, 64, .25);
}
.gvp-dialog:not([open]) { display: none; }
.gvp-dialog[open] { animation: gvp-slide-in .28s cubic-bezier(.2, .8, .2, 1); }
.gvp-dialog::backdrop { background: rgba(23, 63, 64, .45); }
@keyframes gvp-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.gvp-dialog__bar {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px 16px 28px; background: #F5EBE2; border-bottom: 1px solid #e3d4c6;
}
.gvp-dialog__title { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 18px; color: #173f40; }
.gvp-dialog .gvp-dialog__close {
	display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 1.5px solid #e3d4c6; border-radius: 50%; background: #fffcf8; color: #337A7C; cursor: pointer;
	-webkit-appearance: none; appearance: none; box-shadow: none;
}
.gvp-dialog .gvp-dialog__close:hover { border-color: #337A7C; }
.gvp-dialog .gvp-dialog__close:focus-visible { outline: 3px solid #5BC0CC; outline-offset: 2px; }
.gvp.gvp--panel { max-width: none; border-radius: 0; padding: 24px 28px 40px; scroll-margin-top: 80px; }

@media (max-width: 680px) {
	.gvp-fab { right: 16px; bottom: 16px; padding: 12px 18px 12px 16px; font-size: 15px; }
	.gvp-dialog { width: 100vw; border-radius: 0; }
	.gvp-dialog__bar { padding: 12px 16px 12px 20px; }
	.gvp.gvp--panel { padding: 20px 16px 32px; }
}
@media print { .gvp-fab { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.gvp-dialog[open] { animation: none; }
	.gvp-fab { transition: none; }
}