/**
 * CV WhatsApp Lead — front-end styling.
 * Neutraal en compact; neemt waar mogelijk de themakleuren over.
 */

.cvwl-wa-icoon {
	flex: none; width: 1.2em; height: 1.2em; background-color: currentColor;
	-webkit-mask: var(--cvwl-glyph) center / contain no-repeat;
	mask: var(--cvwl-glyph) center / contain no-repeat;
}
:root {
	--cvwl-groen: #25d366; --cvwl-groen-donker: #1da851;
	--cvwl-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.36c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42h-.47c-.16 0-.43.06-.66.31-.23.25-.87.85-.87 2.07s.89 2.4 1.02 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Zwevende knop */
.cvwl-fab {
	position: fixed; right: 18px; bottom: 18px; z-index: 9998;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .8rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--cvwl-groen); color: #fff; font: inherit; font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.cvwl-fab:hover { background: var(--cvwl-groen-donker); }
.cvwl-fab__label { white-space: nowrap; }
/* Mobiel: zelfde breakpoint als de sticky-balk van het thema (≤ 767.98px). */
@media (max-width: 767.98px) {
	.cvwl-fab { bottom: 74px; padding: .8rem; }
	.cvwl-fab__label { display: none; }
	/* Thema-sticky-balk aanwezig (klasse gezet door whatsapp.js): FAB boven de balk. */
	body.cvwl-thema-cta .cvwl-fab { bottom: 110px; }
	/* De sticky-balk heeft al een eigen WhatsApp-knop → geen dubbele knop. */
	body.cvwl-thema-wa .cvwl-fab { display: none; }
}
body.cvwl-modal-open { overflow: hidden; }

/* Losse inline knop */
.cvwl-knop {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.2rem; border: 0; border-radius: 8px; cursor: pointer;
	background: var(--cvwl-groen); color: #fff; font: inherit; font-weight: 600;
}
.cvwl-knop:hover { background: var(--cvwl-groen-donker); }

/* Modal */
.cvwl-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.cvwl-modal[hidden] { display: none; }
@media (min-width: 768px) { .cvwl-modal { align-items: center; } }
.cvwl-modal__overlay { position: absolute; inset: 0; background: rgba(10, 20, 30, .55); }
.cvwl-modal__paneel {
	position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
	background: #fff; border-radius: 16px 16px 0 0; padding: 1.5rem 1.4rem 1.4rem;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) { .cvwl-modal__paneel { border-radius: 16px; } }
.cvwl-modal__sluit {
	position: absolute; top: 8px; right: 12px; width: 34px; height: 34px;
	border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #667;
}

/* Formulier */
.cvwl-form__titel { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; color: #10233a; }
.cvwl-form__intro { margin: 0 0 1rem; color: #55636f; font-size: .93rem; line-height: 1.45; }
.cvwl-inline .cvwl-form {
	max-width: 460px; border: 1px solid #e2e8ef; border-radius: 14px; padding: 1.4rem;
	background: #fff;
}
.cvwl-veld { display: block; margin-bottom: .8rem; }
.cvwl-veld > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; color: #24313d; }
.cvwl-veld input, .cvwl-veld textarea {
	width: 100%; padding: .65em .8em; border: 1px solid #cfd8e1; border-radius: 8px;
	font: inherit; font-size: 1rem; background: #fff; color: #1c2733;
}
.cvwl-veld textarea { resize: vertical; min-height: 5.5em; }
.cvwl-veld--foto small { display: block; margin-top: .3rem; color: #77828d; font-size: .8rem; }
.cvwl-veld input:focus, .cvwl-veld textarea:focus { outline: 2px solid var(--cvwl-groen); outline-offset: 1px; }

.cvwl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cvwl-verstuur {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	margin-top: .4rem; padding: .85em 1.2em; border: 0; border-radius: 9px; cursor: pointer;
	background: var(--cvwl-groen); color: #fff; font: inherit; font-weight: 700; font-size: 1rem;
}
.cvwl-verstuur:hover { background: var(--cvwl-groen-donker); }
.cvwl-verstuur[disabled] { opacity: .6; cursor: default; }

.cvwl-form__melding { margin: .8rem 0 0; font-size: .9rem; }
.cvwl-form__melding.is-fout { color: #b3261e; }
.cvwl-form__melding.is-ok { color: #1da851; }

/* Mini-bedanktweergave — vervangt het formulier na een geslaagde verzending */
.cvwl-bedankt[hidden] { display: none; }
.cvwl-bedankt { text-align: center; padding: .5rem 0 .25rem; }
.cvwl-bedankt:focus { outline: none; }
.cvwl-bedankt__icoon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: .7rem; margin-bottom: .9rem;
	border-radius: 999px; background: var(--cvwl-groen); box-sizing: border-box;
}
.cvwl-bedankt__titel { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; color: #10233a; }
.cvwl-bedankt__reminder {
	margin: 0 0 .9rem; padding: .75rem .9rem; text-align: left; font-size: .88rem; line-height: 1.5;
	background: #fff7ed; border: 1px solid #fcd9a8; border-radius: 9px; color: #6b4a12;
}
.cvwl-bedankt__reminder strong { color: #8a3a00; }
.cvwl-bedankt__vervolg { margin: 0 0 1.1rem; color: #55636f; font-size: .93rem; }
.cvwl-bedankt__sluit {
	width: 100%; padding: .8em 1.2em; border: 1px solid #cfd8e1; border-radius: 9px; cursor: pointer;
	background: #fff; color: #10233a; font: inherit; font-weight: 700; font-size: 1rem;
}
.cvwl-bedankt__sluit:hover { background: #f3f6f8; }
.cvwl-bedankt__opnieuw {
	display: block; width: 100%; margin-top: .7rem; padding: .4em; border: 0; background: none; cursor: pointer;
	color: #55636f; font: inherit; font-size: .85rem; text-decoration: underline;
}
.cvwl-bedankt__opnieuw:hover { color: #10233a; }