/**
 * Brandcast Aanmeldformulier - stylesheet
 *
 * Huisstijl staat als CSS custom properties bovenaan. Het font "New Order" is
 * al beschikbaar in de omgeving en wordt hier NIET opnieuw geladen.
 */

.bcaf-wrap {
	/* Huisstijl */
	--bcaf-groen: #3CB39C;
	--bcaf-blauw: #1D78BC;
	--bcaf-donkerblauw: #023047;
	--bcaf-babyblauw: #F3F8FC;

	/* Afgeleide waarden */
	--bcaf-groen-donker: #2e9d88;
	--bcaf-tekst-grijs: #8a99a8;
	--bcaf-rand: #e3ecf4;
	--bcaf-radius: 12px;
	--bcaf-radius-lg: 16px;

	/* Breedte van de formulierkolom in het babyblauwe vlak. */
	--bcaf-form-width: 580px;

	/* Horizontale verschuiving van de Google-reviews (positief = naar rechts). */
	--bcaf-reviews-shift: 0px;

	box-sizing: border-box;
	display: flex;
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 100vh;
	background: var(--bcaf-babyblauw);
	color: var(--bcaf-donkerblauw);
	font-family: "New Order", sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

input[type="checkbox"] {
    opacity: 0 !important;
}

.bcaf-wrap *,
.bcaf-wrap *::before,
.bcaf-wrap *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------------- */
.bcaf-sidebar {
	flex: 0 0 34%;
	max-width: 29%;
	min-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 56px 32px;
	background: var(--bcaf-donkerblauw);
	color: #fff;
}

.bcaf-logo {
	margin-top: auto;
	margin-bottom: 46px;
	text-align: center;
}

/* Navigatie duwt de footer naar beneden; samen met de auto-marge boven het
   logo staat het blok logo + stappen verticaal gecentreerd. */
.bcaf-sidenav {
	margin-bottom: auto;
}

.bcaf-logo svg {
	width: 200px;
	height: auto;
}

.bcaf-sidenav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.bcaf-sidenav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 21px 0;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.2s ease;
}

/* Los verticaal streepje tussen twee stap-iconen, met witruimte rond de
   iconen (13px halve icoonhoogte + 8px marge boven en onder). */
.bcaf-sidenav-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 12px;
	top: calc(50% + 21px);
	height: calc(100% - 42px);
	width: 2px;
	background: rgba(255, 255, 255, 0.18);
}

.bcaf-sidenav-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--bcaf-donkerblauw);
}

.bcaf-sidenav-icon svg {
	width: 22px;
	height: 22px;
}

/* Icoonkleur volgt de tekstkleur via stroke/fill overrides. */
.bcaf-sidenav-icon svg [stroke] {
	stroke: currentColor;
}

.bcaf-sidenav-icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.bcaf-sidenav-label {
	font-size: 16px;
	font-weight: 800;
}

.bcaf-sidenav-item.is-active {
	color: #fff;
}

.bcaf-sidenav-item.is-active .bcaf-sidenav-icon {
	color: var(--bcaf-groen);
}

.bcaf-sidenav-item.is-done {
	color: rgba(255, 255, 255, 0.85);
}

.bcaf-sidenav-item.is-done .bcaf-sidenav-icon {
	color: var(--bcaf-groen);
}

.bcaf-sidebar-footer {
	align-self: stretch;
	/* Doorbreekt de zijbalk-padding zodat de items op 20px van de randen staan. */
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: -18px;
	margin-top: 0;
	padding-top: 32px;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

.bcaf-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff !important;
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
}

.bcaf-contact:hover {
	color: #fff;
	opacity: 0.85;
}

/* Icoon behoudt de groene huisstijlkleur, ongeacht de (witte) tekstkleur. */
.bcaf-contact-icon {
	display: inline-flex;
	color: var(--bcaf-groen);
}

.bcaf-contact-icon svg {
	width: 17px;
	height: 17px;
}

/* ---------------------------------------------------------------------------
 * Hoofdcontent
 * ------------------------------------------------------------------------- */
.bcaf-main {
	position: relative;
	flex: 1 1 auto;
	padding: 29px 64px 29px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* De feitelijke formulierkolom: smaller dan het babyblauwe vlak, horizontaal
   gecentreerd in het rechterblok en verticaal gecentreerd tussen indicator en dots. */
.bcaf-form {
	width: 100%;
	max-width: 900px !important;
	margin: auto;
}

/* Decoratieve shape rechtsonder. Hogere specificiteit dan `.bcaf-main > *`
   zodat de absolute positionering niet overschreven wordt. */
.bcaf-main > .bcaf-shape {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}

.bcaf-shape svg {
	display: block;
	width: 320px;
	height: auto;
}

.bcaf-main > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Stappenindicator (horizontaal, bovenaan)
 * ------------------------------------------------------------------------- */
.bcaf-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 50px auto 0px;
	max-width: 560px;
	width: 100%;
}

.bcaf-indicator-step {
	display: flex;
	align-items: center;
}

/* Tussenliggende stappen groeien mee zodat de streepjes de ruimte vullen. */
.bcaf-indicator-step:not(:last-child) {
	flex: 1 1 auto;
}

.bcaf-indicator-step:last-child {
	flex: 0 0 auto;
}

/* Alle vakjes exact even groot, ongeacht status. */
.bcaf-indicator-box {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(2, 48, 71, 0.06);
	color: var(--bcaf-groen);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Alle iconen exact even groot. */
.bcaf-indicator-icon {
	display: inline-flex;
}

.bcaf-indicator-icon svg {
	width: 30px;
	height: 30px;
}

.bcaf-indicator-icon svg [stroke] {
	stroke: currentColor;
}

.bcaf-indicator-icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* Vinkje niet meer gebruiken: elk vakje toont zijn eigen icoon (uniform). */
.bcaf-indicator-check {
	display: none !important;
}

/* Verbindingsstreepje tussen de vakjes (geen pijl). */
.bcaf-indicator-connector {
	flex: 1 1 auto;
	min-width: 24px;
	height: 2px;
	margin: 0 16px;
	background: #d3e0ec;
	border-radius: 2px;
	transition: background 0.2s ease;
}

/* Actieve en afgeronde stap: donkerblauw vak met groen icoon (zoals ontwerp). */
.bcaf-indicator-step.is-active .bcaf-indicator-box,
.bcaf-indicator-step.is-done .bcaf-indicator-box {
	background: var(--bcaf-donkerblauw);
	color: var(--bcaf-groen);
	box-shadow: 0 10px 22px rgba(2, 48, 71, 0.18);
}

/* Doorlopen streepjes worden groen. */
.bcaf-indicator-step.is-done .bcaf-indicator-connector,
.bcaf-indicator-step.is-active .bcaf-indicator-connector {
	background: var(--bcaf-groen);
}

/* Stapnaam naast icoon, mobiele voortgangsbalk en mobiele topbalk: standaard verborgen (desktop). */
.bcaf-indicator-label {
	display: none;
}

.bcaf-indicator-progress {
	display: none;
}

.bcaf-mobilebar {
	display: none;
}

/* Compacte mobiele indicator (standaard verborgen). */
.bcaf-indicator-compact {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 4px 0 28px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bcaf-donkerblauw);
}

.bcaf-indicator-compact-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 8px;
	background: var(--bcaf-donkerblauw);
	color: #fff;
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Stap-inhoud
 * ------------------------------------------------------------------------- */
.bcaf-step {
	animation: bcaf-fade 0.25s ease;
}

@keyframes bcaf-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bcaf-step-eyebrow {
	display: block;
	color: var(--bcaf-blauw);
	font-weight: 700;
	font-size: 16px !important;
	line-height: 1.3 !important;

}

.bcaf-step-title {
	margin: 0 0 5px;
	font-size: 20px !important;
	line-height: 1.25 !important;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-step-subtitle {
	margin: 0 0 22px;
    color: #082F47;
	font-size: 15px !important;
	line-height: 1.4 !important;
}

/* Velden-grid */
.bcaf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 18px;
}

.bcaf-field--full {
	grid-column: 1 / -1;
}

.bcaf-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bcaf-input {
	width: 100%;
	/* Verticale padding (1e waarde) bepaalt de hoogte van álle invoervelden. */
	padding: 16px 16px;
	border: 1px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius);
	background: var(--bcaf-babyblauw);
	color: var(--bcaf-donkerblauw);
	font-family: inherit;
	font-size: 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bcaf-input::placeholder {
	color: var(--bcaf-tekst-grijs);
	opacity: 1;
}

.bcaf-input:focus {
	outline: none;
	border-color: var(--bcaf-groen);
	background: #fff;
	box-shadow: none;
}

/* Het Elementor-thema zet de padding van inputs met !important. Met een hogere
   specificiteit + !important winnen we dat, zodat de veldhoogte hierboven geldt.
   Pas de 1e waarde (16px) aan om alle invoervelden hoger/lager te maken. */
.bcaf-wrap .bcaf-main .bcaf-form input.bcaf-input {
	padding: 13px 16px !important;
}

/* Extra ruimte tussen de bovenste stappenindicator en de inhoud van stap 3. */
.bcaf-step--pakket {
	margin-top: 40px;
}

/* Alleen in stap 3 (Pakket) een kleinere invoertekst. */
.bcaf-step--pakket .bcaf-input {
	font-size: 13px;
}

.bcaf-field.has-error .bcaf-input {
	border-color: #e05a5a;
	background: #fdf3f3;
}

.bcaf-error {
	display: none;
	margin-top: 5px;
	color: #d64545;
	font-size: 12px;
}

.bcaf-field.has-error .bcaf-error {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Stap-footer: voordelen + navigatieknoppen
 * ------------------------------------------------------------------------- */
.bcaf-step-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 22px;
}

/* Linkerblok in de footer: Google-reviews + (op desktop) een USP ernaast. */
.bcaf-footer-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bcaf-reviews {
	display: flex;
	align-items: center;
}

.bcaf-reviews img {
	display: block;
	height: 19px;
	width: auto;
	/* Verschuif de Google-reviews horizontaal door hieronder --bcaf-reviews-shift
	   aan te passen (positief = naar rechts, negatief = naar links). */
	transform: translateX(var(--bcaf-reviews-shift, 0px));
}

/* USP naast de reviews (groen vinkje + tekst). */
.bcaf-footer-usp {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bcaf-donkerblauw);
	padding-left: 20px;
}

.bcaf-footer-usp-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--bcaf-groen);
}

.bcaf-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.bcaf-btn {
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: transform 0.05s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.bcaf-btn:active {
	transform: translateY(1px);
}

.bcaf-btn-next {
	padding: 13px 28px;
	border-radius: 999px;
	background: var(--bcaf-groen);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(60, 179, 156, 0.28);
}

.bcaf-btn-next:hover {
	background: var(--bcaf-groen-donker);
}

.bcaf-btn-next[disabled] {
	opacity: 0.7;
	cursor: default;
}

.bcaf-btn-prev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--bcaf-rand) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--bcaf-donkerblauw) !important;
	box-shadow: 0 6px 16px rgba(2, 48, 71, 0.08);
	padding: 0px !important;
}

.bcaf-btn-prev:hover {
	background: var(--bcaf-babyblauw) !important;
}

/* Forceer grootte, zichtbaarheid en kleur van het pijl-icoon tegen agressieve
   thema-CSS in. De attribuutselector raakt alleen de lijn-paden (niet het
   transparante achtergrondpad zonder stroke). */
.bcaf-btn-prev svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.bcaf-btn-prev svg [stroke] {
	stroke: var(--bcaf-donkerblauw) !important;
}

.bcaf-btn-prev svg [fill]:not([fill="none"]) {
	fill: var(--bcaf-donkerblauw) !important;
}

/* ---------------------------------------------------------------------------
 * Berichten (succes / fout)
 * ------------------------------------------------------------------------- */
.bcaf-message {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--bcaf-radius);
	font-size: 14px;
}

.bcaf-message.is-error {
	background: #fdf3f3;
	color: #c33;
	border: 1px solid #f3caca;
}

.bcaf-message.is-success {
	background: rgba(60, 179, 156, 0.1);
	color: var(--bcaf-groen-donker);
	border: 1px solid rgba(60, 179, 156, 0.4);
}

.bcaf-success-panel {
	text-align: center;
	padding: 40px 20px;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bcaf-success-panel .bcaf-success-thumb {
	display: block;
	margin-bottom: 26px;
	line-height: 0;
}

.bcaf-success-panel .bcaf-success-thumb svg {
	width: 92px;
	height: auto;
	display: block;
}

.bcaf-success-panel h2 {
	margin: 0 0 10px !important;
	color: var(--bcaf-donkerblauw) !important;
	font-size: 37px !important;
	font-weight: 800 !important;
}

.bcaf-success-panel p {
	margin: 0;
	color: var(--bcaf-tekst-grijs);
	font-size: 18px;
}

/* Bedankt-weergave: verberg de stappenindicator en pagination-dots. */
.bcaf-wrap.bcaf-completed .bcaf-indicator,
.bcaf-wrap.bcaf-completed .bcaf-indicator-compact,
.bcaf-wrap.bcaf-completed .bcaf-dots {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pagination-dots
 * ------------------------------------------------------------------------- */
.bcaf-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 0;
	padding-top: 30px;
}

.bcaf-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #cdd9e5;
	transition: all 0.2s ease;
}

.bcaf-dot.is-active {
	width: 26px;
	background: var(--bcaf-groen);
}

/* ---------------------------------------------------------------------------
 * Stap 3 - Pakket
 * ------------------------------------------------------------------------- */
.bcaf-pakket-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 5px;
}

.bcaf-screens {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 18px;
	color: var(--bcaf-donkerblauw);
}

.bcaf-wrap .bcaf-screens .bcaf-screens-input {
	flex: 0 0 auto;
	width: 64px;
	min-width: 0;
	max-width: 64px;
	padding: 10px 6px;
	text-align: center;
	border: 1px solid var(--bcaf-rand);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--bcaf-donkerblauw);
}

.bcaf-screens-input:focus {
	outline: none;
	border-color: var(--bcaf-groen);
	box-shadow: none;
}

/* Invoerveld voor de gewenste inch-maat onder de TV-keuze (stap 3). */
.bcaf-tv-inch {
	margin-top: 12px;
	width: 100%;
	height: 50px;
}

.bcaf-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 26px;
}

.bcaf-package {
	position: relative;
	display: block;
	padding: 30px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius-lg);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcaf-package input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bcaf-package.is-selected {
	border-color: var(--bcaf-blauw);
	/* box-shadow: 0 12px 26px rgba(29, 120, 188, 0.12); */
}

.bcaf-package-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--bcaf-blauw);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* Selectie-indicator rechtsboven: standaard een leeg wit cirkeltje met grijze
   rand; bij selectie een blauw gevuld cirkeltje met wit vinkje. */
.bcaf-package-check {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: 50%;
	background: #fff;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcaf-package-check svg {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcaf-package.is-selected .bcaf-package-check {
	border-color: var(--bcaf-blauw);
	background: var(--bcaf-blauw);
}

.bcaf-package.is-selected .bcaf-package-check svg {
	opacity: 1;
}

.bcaf-package-name {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
	margin-bottom: 12px;
}

.bcaf-package-features {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bcaf-package-features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 13px;
	color: var(--bcaf-donkerblauw);
}

.bcaf-feature-check {
	display: inline-flex;
	color: var(--bcaf-groen);
	flex: 0 0 auto;
}

.bcaf-feature-info {
	display: inline-flex;
	color: #c4d2df;
	margin-left: auto;
}

.bcaf-package-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 7px 12px;
    border-radius: 999px;
    background: rgba(60, 179, 156, 0.12);
    color: var(--bcaf-groen-donker);
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
}

/* Voetregel van de pakketkaart: "Bekijk alle opties" links, prijs rechts. */
.bcaf-package-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.bcaf-package-link {
    flex: 0 0 auto;
}

.bcaf-package-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.1;
}

.bcaf-package-price-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--bcaf-donkerblauw);
}

.bcaf-package-price-meta {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    color: var(--bcaf-tekst-grijs);
}

/* Bewust geen aparte styling voor het geselecteerde pakket: de knop
   "Bekijk alle opties" houdt dezelfde lichtgroene kleuren als bij de
   niet-geselecteerde pakketten. */

/* Subsecties */
.bcaf-subsection {
	margin-bottom: 24px;
}

.bcaf-subtitle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}
h3.bcaf-subtitle {
	font-size: 20px !important;
}

/* Sectiekoppen in stap 3 (o.a. "Extra opties") groter/zwaarder, conform ontwerp. */
.bcaf-step--pakket h3.bcaf-subtitle {
	font-size: 20px !important;
	font-weight: 800 !important;
}
/* Zelfde lichtgroene info-pill als "Bekijk alle opties". */
.bcaf-badge-info, button.bcaf-badge-info.bcaf-move-info, button.bcaf-badge-info.bcaf-player-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border: none !important;
	border-radius: 999px;
	background: rgba(60, 179, 156, 0.12) !important;
	color: var(--bcaf-groen-donker) !important;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	margin-top: 5px;
	box-shadow: none !important;
}

/* De Move-variant is een <button>; knop-standaardstijlen van het thema resetten. */
button.bcaf-badge-info {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.bcaf-badge-info:hover {
	background: rgba(60, 179, 156, 0.2) !important;
}

.bcaf-badge-info svg {
	flex: 0 0 auto;
}

/* Chips */
.bcaf-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.bcaf-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius);
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	color: var(--bcaf-donkerblauw);
	transition: border-color 0.2s ease;
}

.bcaf-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bcaf-chip-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: 50%;
	background: #fff;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcaf-chip-check svg {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcaf-chip.is-checked {
	border-color: var(--bcaf-blauw);
}

.bcaf-chip.is-checked .bcaf-chip-check {
	border-color: var(--bcaf-blauw);
	background: var(--bcaf-blauw);
}

.bcaf-chip.is-checked .bcaf-chip-check svg {
	opacity: 1;
}

.bcaf-chip-custom {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	align-items: center;
}

/* "Andere template" is exact 1 kolom breed (net als "Nieuws/ nu.nl"); het
   omschrijvingsveld vult de resterende 3 kolommen. */
.bcaf-chip-input {
	background: #fff;
	grid-column: span 3;
}

/* Extra opties (productblokken) + totaal */
.bcaf-extras-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Kaartengroep neemt niet de volledige breedte in; hierdoor ontstaat de tussen-
   ruimte naar het Totaal-vak zoals in het ontwerp. */
.bcaf-extras {
	flex: 0 1 582px;
	min-width: 0;
}

.bcaf-extra-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.bcaf-extra-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius-lg);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcaf-extra-card.is-locked {
	cursor: default;
}

.bcaf-extra-card.is-selected {
	border-color: var(--bcaf-blauw);
}

.bcaf-extra-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Selectie-indicator rechtsboven (zelfde stijl als de pakketkaarten). */
.bcaf-extra-check {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: 50%;
	background: #fff;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcaf-extra-check svg {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcaf-extra-card.is-selected .bcaf-extra-check {
	border-color: var(--bcaf-blauw);
	background: var(--bcaf-blauw);
}

.bcaf-extra-card.is-selected .bcaf-extra-check svg {
	opacity: 1;
}

.bcaf-extra-media {
	flex: 0 0 auto;
	width: 72px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bcaf-extra-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.bcaf-extra-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

/* "Gratis inbegrepen" op de bovenlijn van de kaart, net als de "Meest gekozen"-badge. */
.bcaf-extra-badge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--bcaf-blauw);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.bcaf-extra-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-extra-sub {
	font-size: 13px;
	font-weight: 400;
	color: var(--bcaf-donkerblauw);
}

.bcaf-extra-price {
	font-size: 13px;
	font-weight: 400;
	color: var(--bcaf-donkerblauw);
}

.bcaf-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bcaf-pills--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.bcaf-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius);
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--bcaf-donkerblauw);
	transition: border-color 0.2s ease;
}

.bcaf-pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bcaf-pill-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: 50%;
	background: #fff;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcaf-pill-check svg {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcaf-pill.is-selected {
	border-color: var(--bcaf-blauw);
}

.bcaf-pill.is-selected .bcaf-pill-check {
	border-color: var(--bcaf-blauw);
	background: var(--bcaf-blauw);
}

.bcaf-pill.is-selected .bcaf-pill-check svg {
	opacity: 1;
}

.bcaf-pill--wide {
	width: 100%;
	padding: 15px 20px;
}

/* Totaal-vak rechts van de Extra opties: regelitems + voetblok met totaal p/m. */
.bcaf-total {
	flex: 0 0 250px;
	align-self: flex-start;
	padding: 16px 24px;
	border: 1px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius);
	background: #fff;
	box-shadow: 0 8px 20px rgba(2, 48, 71, 0.05);
	display: flex;
	flex-direction: column;
}

.bcaf-total-label {
	display: block;
	font-weight: 800;
	font-size: 14px;
	color: var(--bcaf-blauw);
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bcaf-rand);
}

.bcaf-total-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bcaf-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bcaf-total-row[hidden] {
	display: none;
}

.bcaf-total-row-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--bcaf-donkerblauw);
}

.bcaf-total-row-value {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--bcaf-donkerblauw);
	white-space: nowrap;
}

/* Schuin doorgestreepte maandprijs (pakket is 30 dagen gratis). */
.bcaf-total-strike {
	position: relative;
	font-weight: 400;
	color: var(--bcaf-tekst-grijs);
}

.bcaf-total-strike::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 1.5px;
	background: currentColor;
	transform: rotate(-12deg);
}

/* Voetblok met scheidingslijn: totaal per maand + "daarna"-tekst + eenmalig. */
.bcaf-total-foot {
	margin-top: 6px;
	padding-top: 4px;
	border-top: 1px solid var(--bcaf-rand);
}

.bcaf-total-final {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.bcaf-total-final-main {
	display: flex;
	flex-direction: column;
}

.bcaf-total-final-label {
	font-size: 13px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-total-final-amount {
	font-size: 20px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
	line-height: 1;
	padding-bottom: 4px;
}

.bcaf-total-after {
	display: block;
	margin-top: 0px;
	font-size: 10px;
	color: var(--bcaf-tekst-grijs);
}

.bcaf-total-once-note {
	font-size: 10px;
	font-weight: 400;
	color: var(--bcaf-tekst-grijs);
}

.bcaf-total-once[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Stap 4 (facturatie): bestellingsoverzicht + USP's naast elkaar
 * ------------------------------------------------------------------------- */
.bcaf-summary-row {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-top: 8px;
}

/* Overzichtsblok breder dan de compacte variant in stap 3, met ruimere
 * paddings en grotere tekst dan het compacte totaal-blok. */
.bcaf-step--facturatie .bcaf-summary-total {
	flex: 0 0 380px;
	align-self: flex-start;
	padding: 24px 28px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-label {
	font-size: 18px;
	margin-bottom: 14px;
	padding-bottom: 14px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-rows {
	gap: 12px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-row-label,
.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-row-value {
	font-size: 15px;
	gap: 10px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-foot {
	margin-top: 14px;
	padding-top: 14px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-final-label {
	font-size: 16px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-final-amount {
	font-size: 28px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-after {
	margin-top: 4px;
	font-size: 12px;
}

.bcaf-step--facturatie .bcaf-summary-total .bcaf-total-once-note {
	font-size: 12px;
}

.bcaf-usps {
	list-style: none;
	margin: 50px 50px 50px 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bcaf-usp {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bcaf-usp-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	line-height: 0;
}

.bcaf-usp-icon svg {
	width: 36px;
	height: 36px;
	display: block;
}

.bcaf-usp-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bcaf-usp-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-usp-text {
	font-size: 13px;
	line-height: 1.55;
	color: var(--bcaf-tekst-grijs);
}

@media (max-width: 800px) {
	.bcaf-summary-row {
		flex-direction: column;
		gap: 24px;
	}

	.bcaf-step--facturatie .bcaf-summary-total {
		flex: 1 1 auto;
		width: 100%;
	}
}

.elementor-kit-6 input:not([type="button"]):not([type="submit"]), .elementor-kit-6 textarea, .elementor-kit-6 .elementor-field-textual {

    padding: 9px 18px 9px 18px !important;
}

/* ---------------------------------------------------------------------------
 * "Bekijk alle opties"-popup (vervangt de stap-inhoud in de normale flow)
 * ------------------------------------------------------------------------- */
.bcaf-packages-modal {
	display: none;
	padding: 4px 0 8px;
}

/* Bij een geopende popup: verberg de bovenste stappenindicator en de rest van
   stap 3, en toon alleen de popup-inhoud (zonder aparte scrollbalk). */
.bcaf-wrap.bcaf-modal-open .bcaf-indicator,
.bcaf-wrap.bcaf-modal-open .bcaf-indicator-compact {
	display: none;
}

.bcaf-wrap.bcaf-modal-open .bcaf-step--pakket > :not(.bcaf-packages-modal) {
	display: none;
}

.bcaf-wrap.bcaf-modal-open .bcaf-packages-modal {
	display: block;
}

/* Brandcast Move- en player-popup: eigen open-state met hetzelfde gedrag. */
.bcaf-move-modal,
.bcaf-player-modal {
	display: none;
	padding: 4px 0 8px;
}

.bcaf-wrap.bcaf-move-modal-open .bcaf-indicator,
.bcaf-wrap.bcaf-move-modal-open .bcaf-indicator-compact,
.bcaf-wrap.bcaf-player-modal-open .bcaf-indicator,
.bcaf-wrap.bcaf-player-modal-open .bcaf-indicator-compact {
	display: none;
}

.bcaf-wrap.bcaf-move-modal-open .bcaf-step--pakket > :not(.bcaf-move-modal) {
	display: none;
}

.bcaf-wrap.bcaf-player-modal-open .bcaf-step--pakket > :not(.bcaf-player-modal) {
	display: none;
}

.bcaf-wrap.bcaf-move-modal-open .bcaf-move-modal,
.bcaf-wrap.bcaf-player-modal-open .bcaf-player-modal {
	display: block;
}

.bcaf-modal-inner {
	width: 100%;
}

.bcaf-modal-bar {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 22px;
}

/* Groene "Ga terug"-pill met witte tekst en terug-pijl. */
.bcaf-modal-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	border: none;
	border-radius: 999px;
	background: var(--bcaf-groen);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(60, 179, 156, 0.28);
	transition: background 0.2s ease;
}

.bcaf-modal-back:hover {
	background: var(--bcaf-groen-donker);
}

.bcaf-modal-back svg {
	width: 18px;
	height: 18px;
	display: block;
}

.bcaf-modal-back svg [stroke] {
	stroke: #fff;
}

.bcaf-modal-back svg [fill]:not([fill="none"]) {
	fill: #fff;
}

.bcaf-modal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	/* Stretch zorgt dat alle kaarten even hoog zijn (gelijk aan de langste). */
	align-items: stretch;
}

.bcaf-modal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 26px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius-lg);
	background: #fff;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(2, 48, 71, 0.05);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcaf-modal-card:hover {
	border-color: var(--bcaf-blauw);
}

.bcaf-modal-card.is-selected {
	border-color: var(--bcaf-blauw);
}

.bcaf-modal-card:focus-visible {
	outline: none;
	border-color: var(--bcaf-blauw);
	box-shadow: 0 0 0 3px rgba(29, 120, 188, 0.18);
}

.bcaf-modal-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--bcaf-blauw);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* Selectie-indicator rechtsboven (zelfde logica als de stap-3-kaarten). */
.bcaf-modal-radio {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: 50%;
	background: #fff;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcaf-modal-radio svg {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bcaf-modal-card.is-selected .bcaf-modal-radio {
	border-color: var(--bcaf-blauw);
	background: var(--bcaf-blauw);
}

.bcaf-modal-card.is-selected .bcaf-modal-radio svg {
	opacity: 1;
}

.bcaf-modal-name {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-modal-group-title {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-modal-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bcaf-modal-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--bcaf-donkerblauw);
}

.bcaf-modal-check {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--bcaf-groen);
}

.bcaf-modal-text {
	flex: 0 1 auto;
}

.bcaf-modal-info {
	display: inline-flex;
	flex: 0 0 auto;
	margin-left: 6px;
	color: #c4d2df;
}

.bcaf-modal-price {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.bcaf-modal-price-amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
	line-height: 1;
}

.bcaf-modal-price-meta {
	display: flex;
	flex-direction: column;
	font-size: 10px;
	line-height: 1.3;
	color: var(--bcaf-tekst-grijs);
}

/* ---------------------------------------------------------------------------
 * Brandcast Move-popup ("Meer informatie")
 * ------------------------------------------------------------------------- */
.bcaf-move-card {
	position: relative;
	display: flex;
	gap: 40px;
	padding: 70px 70px;
	border: 1.5px solid var(--bcaf-rand);
	border-radius: var(--bcaf-radius-lg);
	background: #fff;
	box-shadow: 0 18px 40px rgba(2, 48, 71, 0.06);
}
.bcaf-move-icons img {
    border-radius: 0px;
}

.bcaf-move-card.is-selected {
	border-color: var(--bcaf-blauw);
}

/* Linkerkolom: gecombineerde afbeelding (titel + tagline + productfoto). */
.bcaf-move-media {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bcaf-move-photo {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.bcaf-move-photo img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Rechterkolom: specificaties, iconen en CTA. */
.bcaf-move-specs {
	flex: 1 1 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bcaf-move-specs-title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	color: var(--bcaf-donkerblauw);
}

.bcaf-move-spec-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.bcaf-move-spec-list li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--bcaf-donkerblauw);
}

.bcaf-move-spec-label {
	font-weight: 800;
}

.bcaf-move-spec-value {
	font-weight: 400;
}

/* Intro-tekst + voordelenlijst (o.a. de Brandcast player-popup). */
.bcaf-move-intro {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bcaf-donkerblauw);
}

.bcaf-move-benefits {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bcaf-move-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--bcaf-donkerblauw);
}

.bcaf-benefit-check {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--bcaf-groen);
}

.bcaf-move-icons {
	margin-bottom: 24px;
}

.bcaf-move-icons img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Groene CTA-knop, consistent met de "Ga terug"-pill maar als call-to-action. */
.bcaf-modal-add {
	align-self: flex-start;
	margin-top: auto;
	padding: 13px 26px;
	border: none;
	border-radius: 999px;
	background: var(--bcaf-groen);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(60, 179, 156, 0.28);
	transition: background 0.2s ease;
}

.bcaf-modal-add:hover {
	background: var(--bcaf-groen-donker);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
/* Op laptops (t/m 1545px) de horizontale stappenindicator bovenaan verbergen
   zodat het formulier rechts meer ruimte krijgt. De stapweergave blijft
   beschikbaar via de zijnavigatie in de zijbalk. */
@media (max-width: 1545px) {
	.bcaf-indicator, .bcaf-dots  {
		display: none;
	}
	.bcaf-main {
		padding: 15px 64px 38px;
	}
	.bcaf-sidebar-footer {
		margin-left: -50px;
		margin-right: -50px;
	}
}

@media (max-width: 900px) {
	.bcaf-wrap {
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		/* overflow visible is nodig zodat position:sticky (topbalk) werkt. */
		overflow: visible;
	}

	/* Witte topbalk + groene voortgangsbalk blijven bovenaan staan bij scrollen. */
	.bcaf-mobilehead {
		position: sticky;
		top: 0;
		z-index: 30;
		background: #fff;
	}

	/* Logo/sidebar vervalt op mobiel; de witte topbalk komt ervoor in de plaats. */
	.bcaf-sidebar {
		display: none;
	}

	.bcaf-main {
		padding: 0;
		background: #fff;
	}

	/* De 4-icoonrij en compacte badge vervallen op mobiel. */
	.bcaf-indicator,
	.bcaf-indicator-compact {
		display: none;
	}

	/* Decoratieve shape verbergen: door overflow:visible zou die anders uitsteken. */
	.bcaf-shape {
		display: none;
	}

	/* Witte topbalk: wisselend actief icoon + "Stap N" links, USP rechts. */
	.bcaf-mobilebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px;
		background: #fff;
	}

	.bcaf-mobilebar-step {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.bcaf-mobilebar-icon-item {
		display: none;
	}

	.bcaf-mobilebar-icon-item.is-active {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 10px;
		background: var(--bcaf-donkerblauw);
		color: var(--bcaf-groen);
	}

	.bcaf-mobilebar-icon-item svg {
		width: 17px;
		height: 17px;
	}

	.bcaf-mobilebar-icon-item svg [stroke] {
		stroke: currentColor;
	}

	.bcaf-mobilebar-icon-item svg [fill]:not([fill="none"]) {
		fill: currentColor;
	}

	.bcaf-mobilebar-label {
		font-size: 14px;
		font-weight: 700;
		color: var(--bcaf-donkerblauw);
	}

	.bcaf-mobilebar-usp {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--bcaf-donkerblauw);
	}

	.bcaf-mobilebar-usp-icon {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--bcaf-groen);
	}

	.bcaf-mobilebar-usp-icon svg {
		width: 20px;
		height: 20px;
	}

	/* Groene voortgangsbalk: volle breedte, direct onder de witte balk. */
	.bcaf-indicator-progress {
		display: block;
		height: 5px;
		margin: 0;
		background: #d3e0ec;
		border-radius: 0;
		overflow: hidden;
	}

	.bcaf-indicator-progress-fill {
		display: block;
		height: 100%;
		width: 25%;
		background: var(--bcaf-groen);
		transition: width 0.25s ease;
	}

	/* Eyebrow "Stap N" verbergen: staat nu in de witte topbalk. */
	.bcaf-step-eyebrow {
		display: none;
	}

	/* Alles onder de groene lijn: babyblauw; inhoud verticaal gecentreerd
	   op basis van de schermhoogte (voorkomt witruimte onderaan). De auto-marges
	   centreren bij korte content en klappen samen bij lange content (blijft scrollbaar). */
	.bcaf-form {
		margin: 0;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		background: var(--bcaf-babyblauw);
		padding: 24px 20px 40px;
	}

	.bcaf-form .bcaf-step-container {
		margin-top: auto;
		margin-bottom: auto;
	}

	.bcaf-packages {
		grid-template-columns: 1fr;
	}

	.bcaf-modal-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.bcaf-move-card {
		flex-direction: column;
		gap: 24px;
		padding: 28px 24px;
	}

	.bcaf-chips {
		grid-template-columns: 1fr 1fr;
	}

	.bcaf-chip-custom {
		grid-template-columns: 1fr 1fr;
	}

	.bcaf-chip-input {
		grid-column: auto;
	}

	/* Extra opties onder elkaar; Totaal eronder op smallere schermen. */
	.bcaf-extras-row {
		flex-direction: column;
		align-items: stretch;
	}

	/* In kolom-modus mag de flex-basis (breedte) niet als hoogte gaan werken. */
	.bcaf-extras {
		flex: 0 1 auto;
	}

	.bcaf-total {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
	}

	/* Footer op mobiel: Google-reviews gecentreerd onder de groene knop. */
	.bcaf-step-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.bcaf-footer-info {
		justify-content: center;
		margin-top: 4px;
	}

	/* USP staat op mobiel al in de witte topbalk; niet dubbel tonen. */
	.bcaf-footer-usp {
		display: none;
	}

	/* Op stap 3 (pakket) tonen we de Google-reviews niet op mobiel. */
	.bcaf-step--pakket .bcaf-reviews {
		display: none;
	}

	.bcaf-actions {
		margin-left: 0;
		justify-content: space-between;
	}

	.bcaf-btn-next {
		flex: 1 1 auto;
	}
}

@media (max-width: 560px) {
	.bcaf-main {
		padding: 0;
	}

	.bcaf-form {
		padding: 25px 25px 40px;
	}

	.bcaf-grid {
		grid-template-columns: 1fr;
	}

	.bcaf-pakket-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bcaf-chips {
		grid-template-columns: 1fr;
	}

	.bcaf-chip-custom {
		grid-template-columns: 1fr;
	}

	.bcaf-pills--two {
		grid-template-columns: 1fr;
	}

	.bcaf-extra-cards {
		grid-template-columns: 1fr;
	}

	.bcaf-total {
		width: 100%;
	}

	.bcaf-step-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	/* Google-reviews gecentreerd onder de knop. */
	.bcaf-footer-info {
		justify-content: center;
		margin-top: 4px;
	}

	/* --------------------------------------------------------------------
	 * Positie Google-reviews per stap aanpassen (mobiel).
	 * Speel met margin-left: positief = naar rechts, negatief = naar links.
	 * ------------------------------------------------------------------ */
/* Stap 2 (Adresgegevens) */


	/* Stap 2 (Adresgegevens) */
	.bcaf-step[data-step="2"] .bcaf-footer-info {
		margin-left: 35px;
	}

	/* Stap 4 (Facturatie) */
	.bcaf-step[data-step="4"] .bcaf-footer-info {
		margin-left: 35px;
	}

	.bcaf-actions {
		margin-left: 0;
		justify-content: space-between;
	}

	.bcaf-btn-next {
		flex: 1 1 auto;
	}

	.bcaf-shape {
		display: none;
	}
	.bcaf-step--pakket {
		margin-top: 0px;
	}
	/* Label links, invoerveld rechts uitgelijnd op mobiel. */
	.bcaf-screens {
		width: 100%;
		justify-content: space-between;
		font-size: 15px;
	}
	input#bcaf-aantal_schermen {
		padding: 4px !important;
	}
	.bcaf-usps {
		margin: 20px 50px 20px 22px;
		
	}
}