/*
 * Opmaak van de publieke formulieren: e-book, contact en afspraak.
 *
 * Staat los van het dashboard, want deze regels laden mee op gewone
 * websitepaginas - op de homepage staat het e-bookformulier. Het
 * dashboardgedeelte (crm-style-snippet.css) is zes keer zo groot en hoort
 * daar niet bij.
 */

/* Contactformulier op de website. Zelfde opzet als het e-bookformulier:
   een raster dat op een smal scherm onder elkaar valt. */
.wd-crm-contact-row {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}



.wd-crm-contact-field {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	gap: 6px;
}



.wd-crm-contact-full {
	grid-column: 1 / -1;
}



.wd-crm-contact-field input,
.wd-crm-contact-field textarea {
	border: 1px solid #c9d2d6;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	font-weight: 400;
	padding: 10px 12px;
	width: 100%;
}



.wd-crm-contact-actions {
	margin: 16px 0 0;
}



.wd-crm-contact-actions button {
	background: #1e73be;
	border: 0;
	border-radius: 40px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 12px 30px;
}



.wd-crm-contact-actions button:hover {
	background: #185d98;
}



.wd-crm-contact-notice {
	border-radius: 6px;
	margin: 0 0 14px;
	padding: 12px 14px;
}



.wd-crm-contact-notice.is-ok {
	background: #e8f6ec;
	border: 1px solid #b7e0c4;
}



.wd-crm-contact-notice.is-fout {
	background: #fdecec;
	border: 1px solid #f2bdbd;
}



/* Afspraakformulier: de vrije momenten per dag, als knopjes om uit te kiezen. */
.wd-crm-afspraak-uitleg {
	margin: 0 0 12px;
}



/* Eerst een dag kiezen; pas daarna worden de tijden opgehaald. */
.wd-crm-afspraak-dagkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}



.wd-crm-afspraak-dagknop {
	border: 2px solid #c9d2d6;
	border-radius: 999px;
	color: inherit;
	display: inline-block;
	font-size: 0.95rem;
	padding: 5px 11px;
	text-decoration: none;
}



.wd-crm-afspraak-dagknop:hover {
	background: #eef7fd;
}



/* Het thema kleurt links blauw; op een blauwe knop moet de tekst wit blijven. */
.wd-crm-afspraak-dagknop.is-actief {
	background: #1e73be;
	border-color: #1e73be;
	color: #fff !important;
}



.wd-crm-afspraak-tijden {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}



.wd-crm-afspraak-tijd input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}



.wd-crm-afspraak-tijd span {
	border: 2px solid #c9d2d6;
	border-radius: 999px;
	cursor: pointer;
	display: inline-block;
	font-size: 0.95rem;
	padding: 5px 11px;
}



.wd-crm-afspraak-tijd input:checked + span {
	background: #1e73be;
	border-color: #1e73be;
	color: #fff;
}



.wd-crm-afspraak-tijd input:focus-visible + span {
	outline: 2px solid #1e73be;
	outline-offset: 2px;
}



.wd-crm-afspraak-leeg {
	color: #5d6876;
}



/* ---------------------------------------------------------------------------
   Publiek e-book aanvraagformulier ([wd_crm_ebook_form])
   Staat op de website zelf, niet in het CRM-dashboard, en gebruikt daarom
   neutrale opmaak die zich voegt naar het thema.
   --------------------------------------------------------------------------- */

.wd-crm-ebook-form {
	max-width: 640px;
	/* Zorgt dat de melding na verzenden niet onder de sticky header valt
	   wanneer de browser naar #wd-crm-ebook springt. */
	scroll-margin-top: 120px;
}



.wd-crm-ebook-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}



.wd-crm-ebook-row .wd-crm-ebook-field {
	flex: 1 1 220px;
}



.wd-crm-ebook-field {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
}



/* De homepage zet het formulier in een witte kaart en gaf de velden daar een
   eigen rand en ronding. Die regels stonden in het CSS-snippet van de site;
   ze horen bij dit formulier, dus staan ze hier. Selector en volgorde zijn
   ongewijzigd, zodat de homepage er hetzelfde uitziet. */
body .wd-ebook-form-card input:not([type="submit"]),
body.home .wd-ebook-form-card input:not([type="submit"]) {
	border: 1px solid var(--wd-line);
	border-radius: 12px;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	width: 100%;
}



.wd-crm-ebook-field input {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #c9d2d6;
	border-radius: 6px;
	font: inherit;
	font-weight: 400;
	box-sizing: border-box;
}



.wd-crm-ebook-field input:focus {
	outline: 2px solid #1e73be;
	outline-offset: 1px;
	border-color: #1e73be;
}



.wd-crm-ebook-actions {
	margin: 18px 0 0;
}



.wd-crm-ebook-actions button {
	background: #1e73be;
	color: #fff;
	border: 0;
	border-radius: 40px;
	padding: 12px 30px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}



.wd-crm-ebook-actions button:hover {
	background: #185d98;
}



/* Specifieker dan .entry-content p, zodat de themastijl dit niet overruled. */
.wd-crm-ebook-form p.wd-crm-ebook-consent {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #6b787e;
}



.wd-crm-ebook-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid transparent;
}



.wd-crm-ebook-notice.is-ok {
	background: #eaf7ed;
	border-color: #b7e0c2;
	color: #1d6b33;
}



.wd-crm-ebook-notice.is-fout {
	background: #fdecec;
	border-color: #f3c2c2;
	color: #a12626;
}



/* E-book downloaden zonder formulier. De knop volgt de knopstijl van de site
   (blauw, rond, witte tekst); zonder eigen regels pakt hij die van het thema. */
.wd-crm-ebook-download {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
}



.wd-crm-ebook-download-actie {
	margin: 0;
}



a.wd-crm-ebook-download-knop {
	background-color: #0693e3;
	border: 2px solid #0693e3;
	border-radius: 25px;
	color: #ffffff !important;
	display: inline-block;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 28px;
	text-decoration: none !important;
}



a.wd-crm-ebook-download-knop:hover,
a.wd-crm-ebook-download-knop:focus {
	background-color: #0573b8;
	border-color: #0573b8;
	color: #ffffff !important;
}



.wd-crm-ebook-download-status {
	color: #5d6876;
	font-size: 0.95em;
	margin: 0;
}




/* Het blok dat op de homepage in de plaats komt van het aanvraagformulier
   zodra we de bezoeker aan zijn code herkennen. De knop vult de breedte van
   het blok, zodat hij op de plek van het formulier niet verloren staat. */
.wd-crm-ebook-bekend {
	max-width: none;
}



.wd-crm-ebook-bekend p {
	margin: 0;
}



.wd-crm-ebook-bekend a.wd-crm-ebook-download-knop {
	display: block;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
	width: 100%;
}