/*
 * v9.17.0 - App-weergave: inlogschermen in het ontwerp van de eerste demo-app.
 *
 * Alles hangt onder body.sva-app-inlog (inlogscherm) of body.sva-app-status
 * (uitzonderingsscherm voor een ingelogde ZZP'er zonder portaal). Die klassen
 * worden door app-inlog.js alleen op een telefoon of in de geinstalleerde app
 * gezet en verdwijnen bij een fout of als de module uitstaat. Zonder die klasse
 * is er geen enkele regel in dit bestand van kracht.
 */

/* ---------- Inlogscherm: donkerblauw, volledig scherm ---------- */
body.sva-app-inlog { overflow: hidden; }
body.sva-app-inlog .sva-op-login-wrapper, body.sva-app-inlog .sva-op-login-wrapper *, body.sva-app-status .sva-op-login-wrapper, body.sva-app-status .sva-op-login-wrapper *, .sva-ia-blad, .sva-ia-blad * {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body.sva-app-inlog .sva-op-login-wrapper {
	position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box;
	max-width: none; width: auto; margin: 0;
	display: flex; flex-direction: column;
	padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: linear-gradient(170deg, #16324f, #0f2238 70%);
	color: #fff;
}
body.sva-app-inlog .sva-op-login-wrapper::before {
	content: ""; position: fixed; left: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%;
	background: radial-gradient(circle, rgba(242,106,27,.45), transparent 65%); pointer-events: none;
}
body.sva-app-inlog .sva-op-login-card {
	position: relative; z-index: 1; display: flex; flex-direction: column;
	width: 100%; max-width: 440px; margin: auto; padding: 0;
	background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
	color: #fff; text-align: left;
}
body.sva-app-inlog .sva-op-login-card > * { order: 4; }
body.sva-app-inlog .sva-op-login-card .sva-op-brandmark { display: none !important; }
body.sva-app-inlog .sva-ia-logo {
	order: 0; align-self: flex-start; width: 56px; height: 64px; margin: 0 0 22px; box-sizing: border-box;
	background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22110 80 293 336%22%3E%3Cdefs%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f96a0c%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f1500f%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22%23ffffff%22 fill-rule=%22evenodd%22 d=%22M256.50,87.50 L392.00,126.00 C392.00,167.33 392.00,208.67 392.00,250.00 C392.00,255.00 391.59,258.75 390.31,265.00 C389.04,271.25 386.92,280.00 384.37,287.50 C381.82,295.00 378.96,302.50 375.01,310.00 C371.05,317.50 366.52,325.00 360.62,332.50 C354.73,340.00 348.00,347.50 339.63,355.00 C331.26,362.50 321.80,370.00 310.43,377.50 C299.06,385.00 280.40,395.08 271.41,400.00 C262.43,404.92 261.47,404.67 256.50,407.00 C251.53,404.67 250.57,404.92 241.59,400.00 C232.60,395.08 213.94,385.00 202.57,377.50 C191.20,370.00 181.74,362.50 173.37,355.00 C165.00,347.50 158.27,340.00 152.37,332.50 C146.48,325.00 141.95,317.50 137.99,310.00 C134.04,302.50 131.18,295.00 128.63,287.50 C126.08,280.00 123.96,271.25 122.69,265.00 C121.41,258.75 121.00,255.00 121.00,250.00 C121.00,208.67 121.00,167.33 121.00,126.00 L256.50,87.50Z M256.50,112.00 L368.50,145.00 C368.50,180.00 368.50,215.00 368.50,250.00 C368.50,255.00 368.44,259.00 367.24,265.00 C366.05,271.00 364.00,279.00 361.32,286.00 C358.65,293.00 355.54,300.00 351.19,307.00 C346.84,314.00 341.78,321.00 335.21,328.00 C328.64,335.00 321.10,342.00 311.78,349.00 C302.45,356.00 288.47,364.50 279.26,370.00 C270.04,375.50 264.09,378.00 256.50,382.00 C248.91,378.00 242.96,375.50 233.74,370.00 C224.53,364.50 210.55,356.00 201.22,349.00 C191.90,342.00 184.36,335.00 177.79,328.00 C171.22,321.00 166.16,314.00 161.81,307.00 C157.46,300.00 154.35,293.00 151.68,286.00 C149.00,279.00 146.95,271.00 145.76,265.00 C144.56,259.00 144.50,255.00 144.50,250.00 C144.50,215.00 144.50,180.00 144.50,145.00 L256.50,112.00Z%22/%3E%3Cpath fill=%22%23ffffff%22 d=%22M256.50,263.50 C277.83,263.50 299.17,259.17 320.50,257.00 C320.37,259.67 320.71,260.54 320.12,265.00 C319.53,269.46 318.44,277.50 316.96,283.75 C315.48,290.00 314.12,296.25 311.25,302.50 C308.38,308.75 305.08,315.00 299.74,321.25 C294.39,327.50 286.37,334.88 279.17,340.00 C271.96,345.12 264.06,348.00 256.50,352.00 C248.94,348.00 241.04,345.12 233.83,340.00 C226.63,334.88 218.61,327.50 213.26,321.25 C207.92,315.00 204.62,308.75 201.75,302.50 C198.88,296.25 197.52,290.00 196.04,283.75 C194.56,277.50 193.47,269.46 192.88,265.00 C192.29,260.54 192.63,259.67 192.50,257.00 C213.83,259.17 235.17,263.50 256.50,263.50Z%22/%3E%3Cmask id=%22m%22%3E%3Cpath fill=%22%23fff%22 d=%22M256.50,141.20 C258.67,141.20 260.00,141.35 263.00,142.20 C266.00,143.05 270.13,144.33 274.50,146.30 C278.87,148.27 284.16,150.58 289.21,154.00 C294.27,157.42 300.52,162.53 304.83,166.80 C309.14,171.07 312.33,175.33 315.07,179.60 C317.82,183.87 319.67,188.13 321.30,192.40 C322.93,196.67 323.89,200.93 324.85,205.20 C325.81,209.47 325.38,214.87 327.07,218.00 C328.76,221.13 333.18,222.00 335.00,224.00 C336.82,226.00 338.17,227.83 338.00,230.00 C337.83,232.17 336.50,234.83 334.00,237.00 C331.50,239.17 328.17,241.17 323.00,243.00 C317.83,244.83 310.33,246.67 303.00,248.00 C295.67,249.33 286.75,250.33 279.00,251.00 C271.25,251.67 264.00,252.00 256.50,252.00 C249.00,252.00 241.75,251.67 234.00,251.00 C226.25,250.33 217.33,249.33 210.00,248.00 C202.67,246.67 195.17,244.83 190.00,243.00 C184.83,241.17 181.50,239.17 179.00,237.00 C176.50,234.83 175.17,232.17 175.00,230.00 C174.83,227.83 176.18,226.00 178.00,224.00 C179.82,222.00 184.24,221.13 185.93,218.00 C187.62,214.87 187.19,209.47 188.15,205.20 C189.11,200.93 190.07,196.67 191.70,192.40 C193.33,188.13 195.18,183.87 197.93,179.60 C200.67,175.33 203.86,171.07 208.17,166.80 C212.48,162.53 218.73,157.42 223.79,154.00 C228.84,150.58 234.13,148.27 238.50,146.30 C242.87,144.33 247.00,143.05 250.00,142.20 C253.00,141.35 254.33,141.20 256.50,141.20Z%22/%3E%3Cpath fill=%22%23000%22 d=%22M228.00,138.00 L240.00,138.00 L238.80,178.00 L236.20,181.50 L228.00,138.00Z M285.00,138.00 L273.00,138.00 L274.20,178.00 L276.80,181.50 L285.00,138.00Z%22/%3E%3C/mask%3E%3Crect x=%22170%22 y=%22135%22 width=%22173%22 height=%22125%22 fill=%22url(%23h)%22 mask=%22url(%23m)%22/%3E%3C/svg%3E") center / contain no-repeat; color: transparent; font-size: 0; overflow: hidden;
}
body.sva-app-inlog .sva-ia-terug {
	order: 0; align-self: flex-start; width: 40px; height: 40px; margin: 0 0 20px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: none;
}
body.sva-app-inlog .sva-ia-terug svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sva-app-inlog .sva-ia-weg { display: none !important; }
body.sva-app-inlog .sva-op-login-card .sva-op-code-teller { display: none !important; }
body.sva-app-inlog .sva-ia-teller { order: 3; margin: 0 0 4px; line-height: 1.2 !important; font-size: 13px; color: rgba(255,255,255,.8) !important; }
body.sva-app-inlog .sva-ia-teller b { color: #f26a1b; line-height: 1; }
body.sva-app-inlog .sva-op-login-card h2 {
	order: 1; margin: 0 0 6px; font-size: 32px !important; line-height: 1.22 !important; letter-spacing: -.02em; font-weight: 800 !important; color: #fff !important; border: 0; padding: 0; text-align: left;
}
body.sva-app-inlog .sva-ia-terug ~ h2 { font-size: 28px !important; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-muted,
body.sva-app-inlog .sva-op-login-card > p.sva-op-code-teller { order: 2; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.45; margin: 0 0 22px; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-code-teller { order: 3; font-size: 13px; margin: -10px 0 4px; }
body.sva-app-inlog .sva-op-login-card .sva-op-auth-msg,
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel { order: 3; }
body.sva-app-inlog .sva-op-login-card .sva-op-pk-login,
body.sva-app-inlog .sva-op-login-card .sva-op-twofa-resend { order: 5; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-uitleg { order: 6; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-aanmelden { order: 3; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-center,
body.sva-app-inlog .sva-op-login-card > p.sva-op-auth-links { order: 7; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-uitleg { order: 6; }

/* tekst en links */
body.sva-app-inlog .sva-op-login-card p, body.sva-app-inlog .sva-op-login-card .sva-op-muted { color: rgba(255,255,255,.8) !important; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-center,
body.sva-app-inlog .sva-op-login-card > p.sva-op-auth-links,
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-uitleg { text-align: center; font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; color: rgba(255,255,255,.75) !important; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-uitleg { margin-top: 16px; }
body.sva-app-inlog .sva-op-login-card > p.sva-op-login-aanmelden { text-align: center; font-size: 12.5px; line-height: 1.45; margin: -4px 0 14px; color: rgba(255,255,255,.75) !important; }
body.sva-app-inlog .sva-op-login-card a { color: #fff !important; text-decoration: underline; font-size: inherit; }

/* velden */
body.sva-app-inlog .sva-op-login-card form { margin: 0; }
body.sva-app-inlog .sva-op-login-card label {
	display: block; margin: 0 0 12px; padding-left: 4px; line-height: normal; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7);
}
body.sva-app-inlog .sva-op-login-card input[type="email"],
body.sva-app-inlog .sva-op-login-card input[type="password"],
body.sva-app-inlog .sva-op-login-card input[type="text"] {
	display: block; width: 100%; box-sizing: border-box; margin: 5px 0 0 -4px; width: calc(100% + 4px); min-height: 0;
	padding: 13px 14px; font-size: 16px; line-height: normal; font-weight: 400; font-family: inherit;
	color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: 14px; box-shadow: none;
}
body.sva-app-inlog .sva-op-login-card input::placeholder { color: rgba(255,255,255,.45); }
body.sva-app-inlog .sva-op-login-card input:focus { outline: none; border-color: #f26a1b; }
body.sva-app-inlog .sva-op-login-card input:-webkit-autofill {
	-webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1d4a73 inset; caret-color: #fff;
}

/* knoppen */
body.sva-app-inlog .sva-op-login-card .sva-op-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 0 10px;
	padding: 15px 18px; font-size: 16px; font-weight: 700; font-family: inherit; line-height: normal;
	color: #fff !important; background: #f26a1b; border: 0; border-radius: 15px; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0;
}
body.sva-app-inlog .sva-op-login-card .sva-op-btn::before,
body.sva-app-inlog .sva-op-login-card .sva-op-btn::after { display: none !important; }
body.sva-app-inlog .sva-op-login-card .sva-op-btn-outline,
body.sva-app-inlog .sva-op-login-card .sva-op-pk-login .sva-op-btn { background: rgba(255,255,255,.1); color: #fff; }
body.sva-app-inlog .sva-op-login-card .sva-op-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.sva-app-inlog .sva-op-login-card .sva-op-btn:disabled { opacity: .5; }
html[data-sva-plat="and"] body.sva-app-inlog .sva-op-login-card .sva-op-btn { border-radius: 100px; }
body.sva-app-inlog .sva-op-login-card form .sva-op-btn:last-child { margin-bottom: 0; }
body.sva-app-inlog .sva-op-login-card .sva-op-pk-login { margin: 10px 0 0 !important; }
body.sva-app-inlog .sva-op-login-card .sva-op-pk-login .sva-op-btn { margin: 0; }
body.sva-app-inlog .sva-op-login-card .sva-op-pk-login > p.sva-op-muted:not(.sva-op-pk-fout) { display: none; }
body.sva-app-inlog .sva-op-login-card .sva-op-pk-fout {
	margin: 0 0 10px !important; padding: 12px 14px; border-radius: 14px; font-size: 13.5px !important; line-height: 1.45; text-align: left;
	background: rgba(240,168,64,.16); border: 1px solid rgba(240,168,64,.4) !important; color: #ffeccb !important;
}
body.sva-app-inlog .sva-op-login-card .sva-op-linklike {
	display: block; width: 100%; margin: 16px 0 0; padding: 0; line-height: 1.45; background: none; border: 0; box-shadow: none;
	color: rgba(255,255,255,.85) !important; font-size: 12.5px; font-family: inherit; text-decoration: underline; text-align: center; cursor: pointer;
}
body.sva-app-inlog .sva-op-login-card .sva-op-twofa-resend { margin: 0; }

/* meldingen */
body.sva-app-inlog .sva-op-login-card .sva-op-auth-msg {
	margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; border: 1px solid; box-shadow: none;
}
body.sva-app-inlog .sva-op-login-card .sva-op-auth-ok { background: rgba(62,208,138,.16); border-color: rgba(62,208,138,.4); color: #d6f7e6; }
body.sva-app-inlog .sva-op-login-card .sva-op-auth-error { background: rgba(255,123,123,.16); border-color: rgba(255,123,123,.4); color: #ffdede; }

/* inlogcode: zes vakjes */
body.sva-app-inlog .sva-op-login-card .sva-op-twofa-label { display: none; }
body.sva-app-inlog .sva-op-login-card .sva-op-twofa-boxes { display: flex; gap: 8px; margin: 16px 0; justify-content: stretch; }
body.sva-app-inlog .sva-op-login-card input.sva-op-twofa-box {
	flex: 1; min-width: 0; width: auto; height: 56px; margin: 0; padding: 0; text-align: center;
	font-size: 24px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: 14px;
}
body.sva-app-inlog .sva-op-login-card .sva-op-twofa-trust { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.8); font-weight: 400; }

/* dienst achter een gedeelde link */
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel {
	display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px; border-radius: 16px; border: 0;
	background: rgba(255,255,255,.1); color: #fff; font-size: 13px; line-height: 1.4;
}
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel, body.sva-app-inlog .sva-op-login-card .sva-op-login-doel * { line-height: 1.4 !important; }
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel strong { display: block; font-size: 15px !important; color: #fff; }
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel span { color: rgba(255,255,255,.8); }
body.sva-app-inlog .sva-ia-doelicoon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; }
body.sva-app-inlog .sva-ia-doelicoon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sva-app-inlog .sva-op-login-doel-fout .sva-ia-doelicoon { background: rgba(240,168,64,.25); color: #f0a840; }
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel-uitleg { display: block; margin-top: 4px; color: #f6a672 !important; }
body.sva-app-inlog .sva-op-login-card .sva-op-login-doel-fout { background: rgba(240,168,64,.14); }

/* ---------- Uitzonderingsscherm (bv. account wordt verwijderd) ---------- */
body.sva-app-status { overflow: hidden; }
body.sva-app-status .sva-op-login-wrapper {
	position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box; max-width: none; width: auto; margin: 0;
	padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
	background: #f2f4f9; color: #141a2e; display: flex; flex-direction: column;
}
body.sva-app-status .sva-op-login-wrapper .sva-op-form-card {
	margin: auto 0; width: 100%; max-width: 440px; align-self: center; box-sizing: border-box;
	background: #fff3dc; border: 0; border-radius: 20px; box-shadow: none; padding: 16px;
}
body.sva-app-status .sva-op-form-card h2 { margin: 0 0 8px; font-size: 17px !important; color: #16324f !important; display: flex; gap: 10px; align-items: center; }
body.sva-app-status .sva-op-form-card h2 .dashicons { color: #d9830f; }
body.sva-app-status .sva-op-form-card p { color: #667089 !important; font-size: 13px; line-height: 1.45; }
body.sva-app-status .sva-op-form-card .sva-op-btn {
	display: flex; width: 100%; box-sizing: border-box; justify-content: center; padding: 15px 18px; font-size: 16px; font-weight: 700;
	color: #fff; background: #f26a1b; border: 0; border-radius: 15px; box-shadow: none;
}
body.sva-app-status .sva-op-form-card .sva-op-btn::before,
body.sva-app-status .sva-op-form-card .sva-op-btn::after { display: none !important; }
body.sva-app-status .sva-op-form-card p:last-child { margin: 18px 0 0; }
body.sva-app-status .sva-op-form-card p:last-child a {
	display: block; text-align: center; padding: 15px; border-radius: 15px; background: #fff; color: #d12c2c; font-weight: 700; font-size: 16px; text-decoration: none;
}
html[data-sva-plat="and"] body.sva-app-status .sva-op-form-card .sva-op-btn { border-radius: 100px; }

/* ---------- Onderblad (installatiehint, Face ID, meldingen) ---------- */
.sva-ia-laag { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: flex-end; }
.sva-ia-achter { position: absolute; inset: 0; background: rgba(8,12,24,.5); animation: sva-ia-fade .2s; }
.sva-ia-blad {
	position: relative; width: 100%; box-sizing: border-box; max-height: 88%; overflow-y: auto;
	background: #f2f4f9; color: #141a2e; border-radius: 28px 28px 0 0;
	padding: 10px 16px max(30px, calc(env(safe-area-inset-bottom) + 14px)); animation: sva-ia-op .28s cubic-bezier(.2,.8,.2,1);
	font-family: inherit; text-align: left;
}
html[data-sva-plat="and"] .sva-ia-blad { border-radius: 32px 32px 0 0; }
.sva-ia-grab { width: 40px; height: 5px; border-radius: 3px; background: #e3e6ef; margin: 0 auto 12px; }
.sva-ia-icoon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 4px auto 14px; }
.sva-ia-icoon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sva-ia-icoon.oranje { background: #fff0e6; color: #f26a1b; }
.sva-ia-icoon.blauw { background: #e8effd; color: #2457c5; }
.sva-ia-blad h2 { margin: 0 0 6px; font-size: 21px; color: #16324f; text-align: center; letter-spacing: -.01em; }
.sva-ia-blad p { margin: 0 0 18px; color: #667089; font-size: 14px; line-height: 1.5; text-align: center; }
.sva-ia-blad ol { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; }
.sva-ia-blad li { position: relative; padding: 0 0 14px 34px; font-size: 13px; color: #667089; }
.sva-ia-blad li b { display: block; color: #141a2e; font-size: 14px; }
.sva-ia-blad li::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -4px; width: 3px; background: #e3e6ef; }
.sva-ia-blad li:last-child::before { display: none; }
.sva-ia-blad.zonder-icoon h2 { text-align: left; margin: 4px 0 4px; }
.sva-ia-blad.zonder-icoon > p { text-align: left; font-size: 13.5px; margin: 0 0 6px; }
.sva-ia-blad li i { box-sizing: border-box; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; border: 3px solid #e3e6ef; background: #fff; }
.sva-ia-blad li.nu i { background: #f26a1b; border-color: #fff0e6; box-shadow: 0 0 0 3px #fff0e6; }
.sva-ia-knop {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 0 8px;
	padding: 15px 18px; font-size: 16px; font-weight: 700; font-family: inherit; line-height: 1.2; cursor: pointer;
	color: #fff; background: #f26a1b; border: 0; border-radius: 15px; box-shadow: none;
}
.sva-ia-knop.licht { background: #fff; color: #16324f; box-shadow: inset 0 0 0 1.5px #e3e6ef; }
.sva-ia-knop:disabled { opacity: .55; }
html[data-sva-plat="and"] .sva-ia-knop { border-radius: 100px; }
.sva-ia-fout { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #fff3dc; color: #7a4b00; font-size: 13px; text-align: left; }
@keyframes sva-ia-op { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sva-ia-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sva-ia-blad, .sva-ia-achter { animation: none; } }

/* ---------- v9.24.0 "Zet op beginscherm": vijf uitvoeringen (app-installeer.js) ---------- */
.sva-ii-laag, .sva-ii-laag *, .sva-ii-balk, .sva-ii-balk * { box-sizing: border-box; font-family: inherit; }
.sva-ii-svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; flex: none; }
.sva-ii-blad { padding-top: 10px; }
.sva-ii-kop { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.sva-ii-kt b { display: block; font-size: 18px; color: #16324f; letter-spacing: -.01em; line-height: 1.2; }
.sva-ii-kt span { display: block; margin-top: 2px; font-size: 13.5px; color: #667089; }
.sva-ii-appicoon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font-style: normal; font-weight: 800; color: #fff; font-size: 15px; background: #022a4b center / cover no-repeat; box-shadow: 0 6px 16px rgba(2,42,75,.25); }
.sva-ii-appicoon.klein { width: 44px; height: 44px; border-radius: 11px; font-size: 12px; }
.sva-ii-appicoon.groot { width: 96px; height: 96px; border-radius: 24px; font-size: 24px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.sva-ii-knop { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 15px 18px; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; color: #fff; background: #f26a1b; border: 0; border-radius: 15px; box-shadow: none; text-align: center; }
.sva-ii-knop.licht { background: #fff; color: #16324f; box-shadow: inset 0 0 0 1.5px #e3e6ef; }
.sva-ii-knop.ok { background: #1f9d55; }
.sva-ii-knop.terug { width: 54px; flex: none; margin: 0; padding: 0; background: #fff; color: #16324f; box-shadow: inset 0 0 0 1.5px #e3e6ef; }
.sva-ii-knop.sva-ii-install { background: #022a4b; }
html[data-sva-plat="and"] .sva-ii-knop { border-radius: 100px; }
.sva-ii-of { text-align: center; color: #667089; font-size: 12.5px; margin: 4px 0 10px; }
.sva-ii-tekstknop { background: none; border: 0; padding: 10px 8px; font-size: 14px; font-weight: 600; color: #667089; cursor: pointer; box-shadow: none; }
.sva-ii-onder { display: flex; justify-content: center; gap: 14px; margin-top: 2px; }
.sva-ii-t { margin: 4px 0 6px; font-size: 21px; color: #16324f; text-align: center; letter-spacing: -.01em; }
.sva-ii-p { margin: 0 0 16px; color: #667089; font-size: 14px; line-height: 1.5; text-align: center; }
.sva-ii-link { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e6ef; font-size: 13px; color: #16324f; word-break: break-all; user-select: all; -webkit-user-select: all; }

/* wijzer */
.sva-ii-tel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f26a1b; text-align: center; margin: 0 0 8px; }
.sva-ii-st { margin: 12px 0 4px; font-size: 19px; text-align: center; color: #16324f; letter-spacing: -.01em; }
.sva-ii-ss { margin: 0 0 12px; font-size: 14px; color: #667089; text-align: center; line-height: 1.45; min-height: 2.9em; }
.sva-ii-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; }
.sva-ii-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: #d5dae6; cursor: pointer; transition: width .2s, background .2s; box-shadow: none; }
.sva-ii-dot.nu { width: 26px; background: #f26a1b; }
.sva-ii-dot.af { background: #022a4b; }
.sva-ii-acties { display: flex; gap: 8px; margin-bottom: 4px; }
.sva-ii-acties .sva-ii-knop:not(.terug) { margin: 0; flex: 1; }

/* nagebouwd telefoonplaatje */
.sva-ii-scene { position: relative; height: 150px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #dfe6f2, #eef2f9); display: flex; flex-direction: column; justify-content: flex-end; }
.sva-ii-scene.s-bar-boven, .sva-ii-scene.s-menu-and { justify-content: flex-start; }
.sva-ii-scene.s-menu, .sva-ii-scene.s-item-and, .sva-ii-scene.s-voeg, .sva-ii-scene.s-voeg-and { justify-content: center; padding: 14px; }
.sva-ii-scene > * { animation: sva-ii-in .35s ease both; }
.sva-ii-pag { padding: 14px 16px; display: grid; gap: 8px; flex: 1; align-content: start; }
.sva-ii-pag b { display: block; height: 10px; border-radius: 6px; background: #c9d2e3; width: 80%; }
.sva-ii-pag b.k { width: 48%; }
.sva-ii-safo { display: flex; justify-content: space-around; align-items: center; height: 54px; background: rgba(255,255,255,.92); border-top: 1px solid #d5dae6; color: #5b6b82; }
.sva-ii-safo > span { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.sva-ii-safo .u svg { transform: scaleX(-1); opacity: .4; }
.sva-ii-safo u { display: block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; }
.sva-ii-safo u.t { box-shadow: 4px -4px 0 -1px #fff, 4px -4px 0 1px currentColor; }
.sva-ii-url { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 4px 6px 4px 14px; border-radius: 14px; background: #fff; color: #16324f; font-size: 13px; box-shadow: 0 2px 8px rgba(2,42,75,.08); }
.sva-ii-url .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-ii-url .doel { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.sva-ii-lijst { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(2,42,75,.12); }
.sva-ii-lijst > div { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 14.5px; color: #16324f; border-bottom: 1px solid #eef0f6; }
.sva-ii-lijst > div:last-child { border-bottom: 0; }
.sva-ii-lijst > div > span:not(.sva-ii-tik) { margin-left: auto; order: 2; color: #5b6b82; display: grid; }
.sva-ii-lijst.and > div { padding: 13px 18px; }
.sva-ii-dlg { background: #fff; border-radius: 18px; box-shadow: 0 6px 22px rgba(2,42,75,.12); overflow: hidden; }
.sva-ii-dlg .kop { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #eef0f6; color: #5b6b82; }
.sva-ii-dlg .kop b { color: #16324f; font-size: 13.5px; }
.sva-ii-dlg .kop .doel { position: relative; font-weight: 800; color: #f26a1b; padding: 4px 8px; border-radius: 10px; }
.sva-ii-dlg .rij { display: flex; align-items: center; gap: 12px; padding: 14px; }
.sva-ii-dlg .rij .sva-ii-appicoon { width: 46px; height: 46px; border-radius: 11px; font-size: 12px; }
.sva-ii-dlg .naam { font-size: 15px; font-weight: 700; color: #16324f; flex: 1; border-bottom: 1px solid #e3e6ef; padding-bottom: 6px; }
.sva-ii-dlg .naam small { display: block; font-weight: 400; color: #667089; font-size: 12px; }
.sva-ii-dlg.and .knoppen { display: flex; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; font-size: 14px; font-weight: 700; color: #5b6b82; }
.sva-ii-dlg.and .knoppen > span { position: relative; padding: 8px 14px; border-radius: 99px; }
.sva-ii-dlg.and .knoppen > .doel { background: #f26a1b; color: #fff; }

/* het doel in het plaatje: ring + tikvinger */
.sva-ii-scene .doel { position: relative; }
.sva-ii-scene .doel::before { content: ""; position: absolute; inset: -4px; border-radius: 14px; border: 2.5px solid #f26a1b; background: rgba(242,106,27,.13); animation: sva-ii-puls 1.4s ease-in-out infinite; pointer-events: none; }
.sva-ii-lijst > .doel { background: #fff4ec; }
.sva-ii-lijst > .doel::before { inset: 0; border-radius: 0; border-width: 0 0 0 4px; background: transparent; animation: none; }
.sva-ii-tik { position: absolute; right: -6px; bottom: -14px; width: 30px; height: 30px; pointer-events: none; animation: sva-ii-tik 1.4s ease-in-out infinite; z-index: 2; }
.sva-ii-tik i { display: block; width: 100%; height: 100%; border-radius: 50%; background: rgba(2,42,75,.78); border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.sva-ii-lijst > .doel .sva-ii-tik { right: 18px; bottom: -6px; }
@keyframes sva-ii-puls { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .6; } }
@keyframes sva-ii-tik { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4px,-4px) scale(.88); } }
@keyframes sva-ii-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* gedeeld: sluitknop, klaar-scherm */
.sva-ii-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #e9edf5; color: #16324f; cursor: pointer; flex: none; box-shadow: none; }
.sva-ii-x.licht { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; background: rgba(255,255,255,.14); color: #fff; z-index: 2; }
.sva-ii-klaar { text-align: center; padding: 6px 0 4px; position: relative; }
.sva-ii-klaar .sva-ii-appicoon { margin: 4px auto 14px; }
.sva-ii-vink { position: absolute; left: 50%; top: 50px; margin-left: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; border: 3px solid #f2f4f9; animation: sva-ii-pop .4s cubic-bezier(.2,1.4,.4,1) both .15s; }
@keyframes sva-ii-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* uitvoering: pijl */
.sva-ii-l-pijl { z-index: 2147483600; }
.sva-ia-achter.dun { background: rgba(8,12,24,.62); }
.sva-ii-pkaart { position: absolute; left: 12px; right: 12px; background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.35); animation: sva-ia-op .3s cubic-bezier(.2,.8,.2,1); }
.sva-ii-pkaart.onder { bottom: calc(max(0px, env(safe-area-inset-bottom)) + 108px); }
.sva-ii-pkaart.boven { top: calc(max(0px, env(safe-area-inset-top)) + 86px); }
.sva-ii-prij { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sva-ii-ptxt { flex: 1; min-width: 0; }
.sva-ii-ptxt small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f26a1b; }
.sva-ii-ptxt b { display: block; font-size: 17px; color: #16324f; line-height: 1.25; }
.sva-ii-ptxt span { display: block; font-size: 13px; color: #667089; line-height: 1.4; margin-top: 1px; }
.sva-ii-pacties { display: flex; flex-direction: column; gap: 4px; }
.sva-ii-pacties .sva-ii-knop { margin: 0 0 4px; }
.sva-ii-wijs { position: absolute; left: 50%; width: 76px; height: 76px; margin-left: -38px; display: grid; place-items: center; color: #fff; pointer-events: none; transition: opacity .25s; }
.sva-ii-wijs.weg { opacity: 0; }
.sva-ii-wijs.onder { bottom: max(2px, env(safe-area-inset-bottom)); }
.sva-ii-wijs.onder .pijl { animation: sva-ii-hupp 1s ease-in-out infinite; }
.sva-ii-wijs.boven { top: calc(max(0px, env(safe-area-inset-top)) + 8px); left: auto; right: 6px; margin-left: 0; }
.sva-ii-wijs.boven .pijl { transform: rotate(180deg); animation: sva-ii-hupp-b 1s ease-in-out infinite; }
.sva-ii-wijs .ring { position: absolute; inset: 8px; border-radius: 50%; border: 3px solid #f26a1b; background: rgba(242,106,27,.28); animation: sva-ii-puls 1.4s ease-in-out infinite; }
.sva-ii-wijs .pijl { position: relative; display: grid; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.sva-ii-wijs .pijl svg { width: 38px; height: 38px; stroke-width: 2.6; }
@keyframes sva-ii-hupp { 0%,100% { transform: translateY(-14px); } 50% { transform: translateY(2px); } }
@keyframes sva-ii-hupp-b { 0%,100% { transform: rotate(180deg) translateY(-14px); } 50% { transform: rotate(180deg) translateY(2px); } }

/* uitvoering: welkom (schermvullend) */
.sva-ii-l-welkom { align-items: stretch; }
.sva-ii-scherm { position: relative; width: 100%; overflow-y: auto; color: #fff; background: radial-gradient(120% 70% at 50% 0%, #0d4a7a 0%, #022a4b 55%, #021c33 100%); padding: max(56px, calc(env(safe-area-inset-top) + 44px)) 22px max(26px, env(safe-area-inset-bottom)); display: flex; animation: sva-ia-op .3s cubic-bezier(.2,.8,.2,1); }
.sva-ii-inh { margin: auto; width: 100%; max-width: 420px; text-align: center; }
.sva-ii-gloed { position: relative; display: grid; place-items: center; margin: 0 0 22px; }
.sva-ii-gloed::before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(242,106,27,.55), rgba(242,106,27,0) 68%); animation: sva-ii-puls 3s ease-in-out infinite; }
.sva-ii-gloed .sva-ii-appicoon { position: relative; }
.sva-ii-wt { margin: 0 0 8px; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.sva-ii-wp { margin: 0 0 22px; font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.5; }
.sva-ii-voordelen { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; text-align: left; }
.sva-ii-voordelen li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.08); }
.sva-ii-voordelen li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #f26a1b; color: #fff; flex: none; }
.sva-ii-voordelen b { display: block; font-size: 15px; color: #fff; }
.sva-ii-voordelen small { display: block; font-size: 13px; color: rgba(255,255,255,.7); }
.sva-ii-l-welkom .sva-ii-tekstknop { color: rgba(255,255,255,.75); }
.sva-ii-l-welkom .sva-ii-knop.licht { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.sva-ii-l-welkom .sva-ii-t, .sva-ii-l-welkom .sva-ii-st { color: #fff; }
.sva-ii-l-welkom .sva-ii-p, .sva-ii-l-welkom .sva-ii-ss { color: rgba(255,255,255,.75); }
.sva-ii-l-welkom .sva-ii-dot { background: rgba(255,255,255,.28); }
.sva-ii-l-welkom .sva-ii-dot.af { background: #fff; }
.sva-ii-l-welkom .sva-ii-dot.nu { background: #f26a1b; }
.sva-ii-l-welkom .sva-ii-knop.terug { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.sva-ii-l-welkom .sva-ii-vink { border-color: #022a4b; }
.sva-ii-l-welkom .sva-ii-link { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.sva-ii-terugtekst { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 6px 10px 6px 4px; background: none; border: 0; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; cursor: pointer; align-self: flex-start; box-shadow: none; }
.sva-ii-inh:has(.sva-ii-terugtekst) { text-align: left; }
.sva-ii-inh:has(.sva-ii-terugtekst) .sva-ii-tel, .sva-ii-inh:has(.sva-ii-terugtekst) .sva-ii-st, .sva-ii-inh:has(.sva-ii-terugtekst) .sva-ii-ss { text-align: center; }

/* uitvoering: balk bovenaan */
.sva-ii-balk { position: fixed; z-index: 2147483000; left: 10px; right: 10px; top: calc(max(0px, env(safe-area-inset-top)) + 8px); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 20px; background: #fff; color: #16324f; box-shadow: 0 10px 30px rgba(2,42,75,.28); animation: sva-ii-balk-in .45s cubic-bezier(.2,1.1,.3,1) .1s both; transition: opacity .25s, transform .25s; }
.sva-ii-balk.weg { opacity: 0; transform: translateY(-20px); }
.sva-ii-btxt { flex: 1; min-width: 0; }
.sva-ii-btxt b { display: block; font-size: 14px; line-height: 1.2; }
.sva-ii-btxt span { display: block; font-size: 12px; color: #667089; margin-top: 1px; }
.sva-ii-bhoe { flex: none; padding: 10px 16px; border: 0; border-radius: 99px; background: #f26a1b; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none; }
@keyframes sva-ii-balk-in { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sva-ii-scene > *, .sva-ii-tik, .sva-ii-scene .doel::before, .sva-ii-wijs *, .sva-ii-gloed::before, .sva-ii-balk, .sva-ii-pkaart, .sva-ii-scherm { animation: none !important; } }
.sva-ii-scene.s-menu, .sva-ii-scene.s-item-and { height: 176px; }
.sva-ii-dlg .kop .doel .sva-ii-tik { right: -4px; bottom: -22px; }
.sva-ii-dlg.and .knoppen { padding-bottom: 22px; }
.sva-ii-dlg.and .knoppen .doel .sva-ii-tik { right: -2px; bottom: -16px; }
.sva-ii-dlg.and .knoppen .doel::before { border-radius: 99px; }
.sva-ii-scene.s-voeg-and { height: 184px; }
.sva-ii-dlg.and .knoppen .doel::before { inset: 0; }
.sva-ii-dlg.and .knoppen .doel .sva-ii-tik { right: 2px; bottom: -6px; width: 24px; height: 24px; }
.sva-ii-dlg.and .knoppen { align-items: center; }


/* 9.99.209: keuze C met het menu van de website bovenaan: het inlogscherm begint onder de kop van het thema */
html.sva-met-kop body.sva-app-inlog .sva-op-login-wrapper{top:var(--sva-kop,0px)}