/*
 * Kieswijs Signup, in Kieswijs-huisstijl (kieswijs.nl/over-kieswijs/ team grid).
 * Fonts come from the theme (Montserrat for headings); we only name them as a preference.
 */
.kw-signup {
	--kw-blue: #0b7195;
	--kw-cta: #f79321;
	--kw-cta-hover: #e5821a;
	--kw-text: #272727;
	--kw-muted: #616161;
	--kw-border: #d9d9d9;
	--kw-bg-soft: #f5f5f5;
	--kw-error: #b32d2e;
	--kw-radius: .25rem;     /* Buttons and inputs, as on kieswijs.nl. */
	--kw-card-radius: 12px;  /* Advisor and product cards. */
	--kw-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .07);
	--kw-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .12);
	--kw-heading-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--kw-scroll-offset: 120px; /* Room for a fixed site header when we scroll or move focus. */
	color: var(--kw-text);
	max-width: 1140px;
}
.kw-signup [hidden] { display: none !important; }
/* Elements we scroll to or focus (thank-you, step titles, fields with an error) stay below a fixed header. */
.kw-signup .kw-done, .kw-signup .kw-step__title, .kw-signup .kw-field { scroll-margin-top: var(--kw-scroll-offset); }

/*
 * Theme hardening. Themes style bare elements inside the content area with selectors that beat a
 * single class (Divi: `#left-area ol, .entry-content ol { list-style: decimal }`, uppercase
 * headings, `p { padding-bottom: 1em }`; Total: see the buttons below). Reset only what we rely on;
 * `!important` only where a theme uses an ID selector.
 */
.kw-signup ol.kw-steps { list-style: none !important; padding: 0 !important; line-height: inherit; }
.kw-signup .kw-steps__item { list-style: none; margin: 0; padding: 0; }
.kw-signup .kw-section__title,
.kw-signup .kw-step__title,
.kw-signup .kw-done h2 { text-transform: none; letter-spacing: normal; padding: 0; line-height: 1.3; }
.kw-signup p.kw-error,
.kw-signup p.kw-hint,
.kw-signup p.kw-done__msg { padding: 0; }
.kw-signup p.kw-notice { padding: .75rem 1rem; }

/* Steps */
.kw-steps { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-family: var(--kw-heading-font); }
.kw-steps__item { color: var(--kw-muted); font-weight: 700; }
.kw-steps__item.is-active { color: var(--kw-blue); }
.kw-step { border: 0; padding: 0; margin: 0; min-width: 0; }
/* The title gets focus on step change (for screen readers); no visible ring, it is not a control. */
.kw-step__title:focus, .kw-step__title:focus-visible { outline: none; }
.kw-step__title { font-family: var(--kw-heading-font); font-size: 1.6rem; font-weight: 700; color: #0a0a0a; margin-bottom: 1rem; padding: 0; }

/* Step 1 header: title with the location filter right next to it (floated legend). */
.kw-step__title--inline { float: left; margin: 0 1.5rem 1.5rem 0; line-height: 2.75rem; }
.kw-step__aside { display: flex; align-items: center; justify-content: flex-end; min-height: 2.75rem; margin-bottom: 1.5rem; } /* Flex = new BFC, fills the space beside the float. */
/* Own chevron, so the arrow gets breathing room from the border. */
.kw-filter select {
	appearance: none; -webkit-appearance: none; min-width: 13rem; padding: .55rem 2.75rem .55rem .8rem; border: 1px solid var(--kw-border); border-radius: var(--kw-radius); font: inherit; color: inherit; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat;
}

/* Step 1: sticky bar with the chosen advisor and "Volgende". */
.kw-pickbar { position: sticky; bottom: 0; z-index: 20; padding: .75rem 0 1rem; pointer-events: none; }
.kw-pickbar__inner {
	display: flex; align-items: center; gap: .85rem; padding: .6rem .6rem .6rem .6rem; background: #fff; border-radius: var(--kw-card-radius);
	box-shadow: 0 -2px 6px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .18); pointer-events: auto;
	transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s;
}
.kw-pickbar[data-visible="false"] .kw-pickbar__inner { transform: translateY(calc(100% + 1.5rem)); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s; }
.kw-pickbar__photo { flex: none; width: 3rem; height: 3rem; border-radius: calc(var(--kw-card-radius) - 4px); overflow: hidden; background: var(--kw-bg-soft); }
.kw-pickbar__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kw-pickbar__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.kw-pickbar__label { font-size: .8rem; color: var(--kw-muted); }
.kw-pickbar__name { font-family: var(--kw-heading-font); font-weight: 700; color: var(--kw-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pickbar .kw-next { margin-left: auto; flex: none; }
@media (max-width: 600px) {
	.kw-pickbar .kw-next { padding-left: 1.25rem; padding-right: 1.25rem; }
	/* Narrow screens: let a long name wrap (max. two lines) instead of cutting it off. */
	.kw-pickbar__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (prefers-reduced-motion: reduce) { .kw-pickbar__inner, .kw-pickbar[data-visible="false"] .kw-pickbar__inner { transition: none; } }

/* Step 2 header: the chosen advisor as a small card on the right. */
.kw-step[data-step="2"] .kw-step__title--inline { line-height: 4.5rem; }
.kw-step[data-step="2"] .kw-section:first-of-type { clear: both; }
.kw-chosen { display: flex; align-items: center; gap: .85rem; padding: .5rem 1rem .5rem .5rem; background: #fff; border-radius: var(--kw-card-radius); box-shadow: var(--kw-shadow); }
.kw-chosen__photo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: calc(var(--kw-card-radius) - 4px); overflow: hidden; background: var(--kw-bg-soft); }
.kw-chosen__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kw-chosen__text { display: flex; flex-direction: column; line-height: 1.3; }
.kw-chosen__label { font-size: .8rem; color: var(--kw-muted); }
.kw-chosen__name { font-family: var(--kw-heading-font); font-weight: 700; color: var(--kw-blue); }
.kw-chosen__change { margin-left: .75rem; padding: .35rem .75rem; border: 1px solid var(--kw-border); border-radius: var(--kw-radius); background: #fff; color: var(--kw-text); font: inherit; font-size: .85rem; cursor: pointer; transition: border-color .15s, color .15s; }
.kw-chosen__change:hover, .kw-chosen__change:focus-visible { border-color: var(--kw-blue); color: var(--kw-blue); }
/*
 * Themes like Total set `button { background-color: … !important }` from the Customizer.
 * Our buttons force their own background; .kw-signup + class beats the theme's bare `button`.
 */
.kw-signup .kw-chosen__change { background-color: #fff !important; }

@media (max-width: 600px) {
	.kw-step__title--inline, .kw-step[data-step="2"] .kw-step__title--inline { float: none; margin: 0 0 .75rem; line-height: 1.3; }
	.kw-step__aside { justify-content: stretch; }
	.kw-filter select, .kw-chosen { width: 100%; min-width: 0; }
	.kw-chosen__change { margin-left: auto; }
}

/* Advisor cards: rounded, soft shadow, photo on top, lifts on hover. */
.kw-advisors { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .kw-advisors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kw-advisors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.kw-advisor { position: relative; display: flex; flex-direction: column; text-align: center; cursor: pointer; background: #fff; border-radius: var(--kw-card-radius); overflow: hidden; box-shadow: var(--kw-shadow); transition: box-shadow .2s, transform .2s; }
.kw-advisor:hover { box-shadow: var(--kw-shadow-hover); transform: translateY(-3px); }
.kw-advisor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.kw-advisor__photo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kw-bg-soft); }
.kw-advisor__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kw-advisor:hover .kw-advisor__photo img { transform: scale(1.04); }.kw-advisor__body { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .9rem .75rem 1.1rem; }
.kw-advisor__name { font-family: var(--kw-heading-font); font-size: 1.05rem; font-weight: 700; color: var(--kw-blue); line-height: 1.3; }
.kw-advisor__meta { font-size: .85rem; color: var(--kw-muted); line-height: 1.4; }
.kw-advisor__more { position: relative; z-index: 2; margin-top: .2rem; font-size: .85rem; color: var(--kw-blue); }

/* Selected: orange ring around the card + check badge on the photo. */
.kw-advisor.is-selected,
.kw-advisor:has(input:checked) { box-shadow: 0 0 0 3px var(--kw-cta), var(--kw-shadow-hover); }
.kw-advisor.is-selected .kw-advisor__photo::after,
.kw-advisor:has(input:checked) .kw-advisor__photo::after {
	content: ""; position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	background: var(--kw-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}
/* Keyboard focus only (no ring after a mouse click). */
.kw-advisor:has(input:focus-visible) { outline: 3px solid var(--kw-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.kw-advisor, .kw-advisor__photo img { transition: none; }
	.kw-advisor:hover, .kw-advisor:hover .kw-advisor__photo img { transform: none; }
}

/* Details form */
.kw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
@media (max-width: 640px) { .kw-grid { grid-template-columns: 1fr; } }
.kw-grid--address { grid-template-columns: 2fr 1fr 1.5fr; }
@media (max-width: 640px) { .kw-grid--address { grid-template-columns: 1fr; } }

/* Step 2 sections: a heading and a thin divider, no boxes. */
.kw-section { padding: 1.75rem 0 .5rem; border-top: 1px solid var(--kw-border); }
.kw-section:first-of-type { padding-top: .25rem; border-top: 0; }
.kw-section__title { margin: 0 0 1.1rem; font-family: var(--kw-heading-font); font-size: 1.2rem; font-weight: 700; color: #0a0a0a; }
.kw-section .kw-actions { margin: 1.25rem 0 .5rem; }
.kw-field { margin-bottom: 1rem; border: 0; padding: 0; }
.kw-field label, .kw-field legend { display: block; margin-bottom: .3rem; color: var(--kw-text); font-weight: 400; font-size: 15px; }
.kw-field input[type="text"], .kw-field input[type="email"], .kw-field input[type="tel"], .kw-field input[type="date"], .kw-field input[type="url"], .kw-field select, .kw-field textarea {
	width: 100%; padding: .6rem .7rem; border: 1px solid var(--kw-border); border-radius: var(--kw-radius); font: inherit; color: var(--kw-text); background: #fff; box-sizing: border-box;
}
/* Text-like controls only; radios and checkboxes get a ring on keyboard focus only (below). */
.kw-field input:not([type="radio"]):not([type="checkbox"]):focus, .kw-field select:focus, .kw-field textarea:focus, .kw-filter select:focus { outline: 2px solid var(--kw-blue); outline-offset: 1px; border-color: var(--kw-blue); }
.kw-signup input[type="radio"]:focus, .kw-signup input[type="checkbox"]:focus { outline: none; }
.kw-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--kw-blue); outline-offset: 2px; }
.kw-consent label { font-weight: 400; }
.kw-field.has-error input, .kw-field.has-error select, .kw-field.has-error textarea { border-color: var(--kw-error); }
.kw-error { color: var(--kw-error); font-size: .9rem; margin: .3rem 0 0; }
.kw-error a { color: inherit; font-weight: 600; }
.kw-hint { color: var(--kw-muted); font-size: .85rem; margin: .3rem 0 0; }
.kw-req { color: var(--kw-error); }
.kw-photo-preview { max-width: 120px; margin-top: .5rem; }
.kw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Product choice with prices */
.kw-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kw-options legend { grid-column: 1 / -1; padding: 0; }
@media (max-width: 640px) { .kw-options { grid-template-columns: 1fr; } }
.kw-option { position: relative; display: flex !important; flex-direction: column; gap: .2rem; margin: 0 !important; padding: 1rem 1rem 1rem 3.25rem; border: 1px solid var(--kw-border); border-radius: var(--kw-card-radius); background: #fff; cursor: pointer; font-weight: 400 !important; transition: box-shadow .2s; }
.kw-option:hover { box-shadow: var(--kw-shadow); }
/* Custom radio: larger circle, orange dot when chosen, soft orange halo on keyboard focus. */
.kw-option input[type="radio"] {
	appearance: none; -webkit-appearance: none; position: absolute; left: 1rem; top: 1rem; width: 1.375rem; height: 1.375rem; margin: 0;
	border: 2px solid #bdbdbd; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.kw-option:hover input[type="radio"] { border-color: var(--kw-cta); }
.kw-option input[type="radio"]:checked { border-color: var(--kw-cta); background: var(--kw-cta); box-shadow: inset 0 0 0 4px #fff; }
.kw-option input[type="radio"]:focus-visible { box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px rgba(247, 147, 33, .3); }
.kw-option input[type="radio"]:not(:checked):focus-visible { box-shadow: 0 0 0 4px rgba(247, 147, 33, .3); }
/* Add-ons: same card, square check. */
.kw-option input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; position: absolute; left: 1rem; top: 1rem; width: 1.375rem; height: 1.375rem; margin: 0;
	border: 2px solid #bdbdbd; border-radius: 5px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.kw-option:hover input[type="checkbox"] { border-color: var(--kw-cta); }
.kw-option input[type="checkbox"]:checked {
	border-color: var(--kw-cta);
	background: var(--kw-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.kw-option input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px rgba(247, 147, 33, .3); }
.kw-legend-hint { color: var(--kw-muted); font-size: .9em; }
.kw-option:has(input:checked) { border-color: var(--kw-cta); box-shadow: 0 0 0 1px var(--kw-cta) inset; }
.kw-option__title { font-family: var(--kw-heading-font); font-weight: 700; color: var(--kw-text); }
.kw-option__price { color: var(--kw-muted); font-size: .9rem; }
.kw-cost { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; background: var(--kw-bg-soft); border-radius: var(--kw-card-radius); }
.kw-notice { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--kw-cta); background: #fff7ee; border-radius: 0 var(--kw-radius) var(--kw-radius) 0; font-size: .9rem; }
.kw-cost__label { font-family: var(--kw-heading-font); font-weight: 700; color: var(--kw-text); }
/* Employer details (Kieswerk/Kiesinzicht "voor bedrijven"): grey block like the cost line. The floated legend stays inside the padding. */
.kw-company { padding: 1rem; background: var(--kw-bg-soft); border-radius: var(--kw-card-radius); }
.kw-company legend { float: left; width: 100%; margin-bottom: .2rem; font-family: var(--kw-heading-font); font-weight: 700; }
.kw-company legend + * { clear: both; }
.kw-company .kw-hint { margin: 0 0 1rem; }

/* Buttons, as the theme buttons on kieswijs.nl */
.kw-btn { background: var(--kw-cta); color: #fff; border: 0; border-radius: var(--kw-radius); padding: .65rem 2.5rem; font-family: var(--kw-heading-font); font-size: 1rem; font-weight: 400; line-height: 1.5; cursor: pointer; transition: background-color .15s; }
.kw-btn:hover, .kw-btn:focus-visible { background: var(--kw-cta-hover); color: #fff; }
.kw-btn:focus-visible { outline: 2px solid var(--kw-blue); outline-offset: 2px; }
.kw-btn[disabled] { opacity: .6; cursor: progress; }
.kw-btn[aria-disabled="true"], .kw-btn[aria-disabled="true"]:hover { background: #c4c4c4; color: #fff; cursor: not-allowed; }
/* Same theme override as above, for every state of the main button. */
.kw-signup .kw-btn { background-color: var(--kw-cta) !important; }
.kw-signup .kw-btn:hover, .kw-signup .kw-btn:focus-visible { background-color: var(--kw-cta-hover) !important; }
.kw-signup .kw-btn[aria-disabled="true"], .kw-signup .kw-btn[aria-disabled="true"]:hover { background-color: #c4c4c4 !important; }
.kw-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.kw-done { padding: 1.5rem; border-radius: var(--kw-radius); background: var(--kw-bg-soft); }
.kw-done h2 { font-family: var(--kw-heading-font); color: var(--kw-blue); margin-top: 0; }