.sva-op-app, .sva-op-login-wrapper, .sva-op-intake-wrapper, .sva-op-ask-modal, .sva-op-modal-vorm, .sva-op-doc-modal {
	--sva-primary: #5b6cf0;
	--sva-primary-dark: #4453d6;
	--sva-bg: #f5f6fb;
	--sva-card: #ffffff;
	--sva-border: #e7e8f3;
	--sva-text: #23233a;
	--sva-muted: #797c93;
	--sva-success: #17b26a;
	--sva-warning: #f79009;
	--sva-danger: #f04438;
	--sva-radius: 16px;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--sva-text);
}

.sva-op-muted { color: var(--sva-muted); }
.sva-op-center { text-align: center; }

/* ---------- App layout ---------- */
.sva-op-app {
	display: flex;
	min-height: 640px;
	background: var(--sva-bg);
	border-radius: var(--sva-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20,20,50,.06);
}

/*
 * v9.15.126: op verzoek - op laptop-breedtes (het thema centreert de
 * pagina-inhoud met een vaste, smallere containerbreedte, dus links en
 * rechts van het portaal bleef veel witruimte over) breekt het portaal
 * hier bewust uit die thema-container, gecentreerd op de VIEWPORT in
 * plaats van op de ouder - dat werkt ongeacht welke containerbreedte
 * het thema zelf instelt. Met een max-width als bovengrens, zodat het
 * op zeer brede/ultrawide schermen niet eindeloos doorgroeit.
 * Mobiel (zie @media max-width: 780px verderop) blijft ongemoeid.
 *
 * v9.15.127: op verzoek - iets minder breed dan de vorige poging
 * (max-width 1560px voelde te ruim); nu 1400px.
 */
@media (min-width: 1024px) {
	.sva-op-app {
		width: calc(100vw - 48px);
		max-width: 1400px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

/*
 * v9.15.127: op verzoek - iets breder dan voorheen (240px -> 270px),
 * plus vanaf nu zelf versleepbaar door de ZZP'er (zie
 * .sva-op-sidebar-grip hieronder en de JS in assets/js/portal.js). Die
 * voorkeur wordt onthouden in localStorage (per browser/apparaat), dus
 * width hier is alleen de STARTWAARDE voor wie nog nooit heeft
 * versleept - JS overschrijft dit bij het laden met de eigen, eerder
 * gekozen breedte indien aanwezig.
 */
.sva-op-sidebar {
	width: 270px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #23233a 0%, #171727 100%);
	color: #fff;
	padding: 28px 18px;
	display: flex;
	flex-direction: column;
}

.sva-op-brandmark {
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: .04em;
	background: linear-gradient(135deg, var(--sva-primary), #9b8cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 32px;
	padding-left: 4px;
}

.sva-op-login-card .sva-op-brandmark { margin-bottom: 6px; }

/*
 * v9.12.1: logovariant van het merkteken. De verloopvulling hierboven is
 * bedoeld voor tekst; bij een afbeelding moet die juist wegblijven, anders
 * krijgt het logo een gekleurde achtergrond en verdwijnt de transparantie
 * van een PNG.
 */
.sva-op-brandmark-logo {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	padding-left: 0;
}
.sva-op-brandmark-logo img {
	max-width: 100%;
	max-height: 46px;
	width: auto;
	height: auto;
	display: block;
}

.sva-op-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.sva-op-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	color: rgba(255,255,255,.7);
	padding: 11px 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease, color .15s ease;
}

.sva-op-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sva-op-nav-link.active { background: var(--sva-primary); color: #fff; }
.sva-op-nav-link .dashicons { font-size: 18px; width: 18px; height: 18px; }

/*
 * v9.15.115: Dossierwissel - vaste schakelaar bovenaan het menu om tussen
 * sollicitaties/dossiers te wisselen, op elk tabblad zichtbaar. Vervangt de
 * pillen die eerder alleen bovenaan Voortgang stonden.
 */
.sva-op-dossierwissel {
	position: relative;
	margin-bottom: 18px;
}
.sva-op-dossierwissel summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 10px;
	padding: 9px 12px;
	cursor: pointer;
	list-style: none;
	color: #fff;
}
.sva-op-dossierwissel summary::-webkit-details-marker { display: none; }
.sva-op-dossierwissel summary:hover { background: rgba(255,255,255,.1); }
.sva-op-dossierwissel[open] summary { border-color: var(--sva-primary); }
.sva-op-dossierwissel-label {
	font-size: .68rem;
	font-weight: 700;
	color: rgba(255,255,255,.48);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.sva-op-dossierwissel-rij { display: flex; align-items: center; gap: 8px; }
.sva-op-dossierwissel-naam { flex: 1; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-op-dossierwissel-pct { font-size: .74rem; color: rgba(255,255,255,.6); font-weight: 800; }
.sva-op-dossierwissel summary .dashicons { font-size: 16px; width: 16px; height: 16px; color: rgba(255,255,255,.5); }
.sva-op-dossierwissel[open] summary .dashicons-arrow-down-alt2 { transform: rotate(180deg); }
.sva-op-dossierwissel-lijst {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	background: #23233a;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 12px 28px rgba(0,0,0,.35);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sva-op-dossierwissel-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-size: .86rem;
	font-weight: 600;
}
.sva-op-dossierwissel-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sva-op-dossierwissel-item.active { background: rgba(91,108,240,.25); color: #fff; }
.sva-op-dossierwissel-item-naam { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-op-dossierwissel-item-pct { font-size: .74rem; color: rgba(255,255,255,.55); font-weight: 800; }
.sva-op-dossierwissel-item .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--sva-primary); }
.sva-op-dossierwissel .sva-op-traject-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/*
 * v9.12.4: het schuine accenthoekje stond ook op het actieve tabblad,
 * maar dat werd te druk in een lijst van zes menu-items. Het blijft
 * alleen waar het als losse knop leest: de uitlog-link hieronder en de
 * zwevende in-/uitlogknop.
 */

.sva-op-sidebar-footer { margin-top: auto; }

.sva-op-logout {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.55);
	text-decoration: none;
	font-size: .85rem;
	padding: 10px 14px;
}
.sva-op-logout:hover { color: #fff; }

/*
 * v9.15.127: op verzoek - versleepbare grip tussen menu en inhoud, zodat
 * de ZZP'er de breedte van het menu zelf kan aanpassen (bv. als een
 * sollicitatienaam wordt afgekapt). Alleen zinvol op bredere schermen
 * met een echte muis/trackpad - op mobiel/tablet (zie @media max-width:
 * 780px verderop, waar .sva-op-app naar een verticale kolom omschakelt)
 * wordt hij met display:none verborgen, daar is "breedte" geen
 * bruikbaar concept meer.
 */
.sva-op-sidebar-grip {
	width: 6px;
	flex-shrink: 0;
	cursor: col-resize;
	background: transparent;
	position: relative;
}
.sva-op-sidebar-grip::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 2px;
	width: 2px;
	border-radius: 2px;
	background: var(--sva-border);
}
.sva-op-sidebar-grip:hover::after,
.sva-op-sidebar-grip.sva-op-grip-actief::after {
	background: var(--sva-primary);
}
/*
 * v9.15.128: op verzoek - de grip zelf (een dun, 6px streepje) was niet
 * duidelijk genoeg als "hier kun je slepen". Een klein, altijd zichtbaar
 * pilletje met drie verticale streepjes erin (het gangbare "grip"-icoon)
 * maakt dat in één oogopslag duidelijk, met de title="..." hierboven als
 * native tooltip bij hover. position:sticky houdt het icoon halverwege
 * het zichtbare deel van het scherm, ook tijdens scrollen door een lange
 * pagina.
 */
.sva-op-sidebar-grip-handle {
	position: sticky;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 16px;
	height: 30px;
	margin-left: -5px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sva-border);
	box-shadow: 0 1px 3px rgba(20,20,50,.12);
}
.sva-op-sidebar-grip-handle span {
	width: 2px;
	height: 14px;
	border-radius: 2px;
	background: var(--sva-muted, #9a9dbd);
}
.sva-op-sidebar-grip:hover .sva-op-sidebar-grip-handle,
.sva-op-sidebar-grip.sva-op-grip-actief .sva-op-sidebar-grip-handle {
	border-color: var(--sva-primary);
}
.sva-op-sidebar-grip:hover .sva-op-sidebar-grip-handle span,
.sva-op-sidebar-grip.sva-op-grip-actief .sva-op-sidebar-grip-handle span {
	background: var(--sva-primary);
}

.sva-op-main {
	flex: 1;
	padding: 32px 40px;
	overflow-y: auto;
}

.sva-op-announcement {
	display: flex; align-items: flex-start; gap: 10px;
	background: #eef0fe; border: 1px solid var(--sva-primary);
	color: var(--sva-text); border-radius: 12px; padding: 12px 14px;
	margin-bottom: 14px; font-size: .92rem;
}
.sva-op-announcement .dashicons-megaphone { color: var(--sva-primary); flex-shrink: 0; margin-top: 1px; }
.sva-op-announcement-tekst { flex: 1; }
.sva-op-announcement-sluit {
	background: none; border: 0; cursor: pointer; padding: 0; line-height: 1;
	color: var(--sva-muted); flex-shrink: 0;
}
.sva-op-announcement-sluit:hover { color: var(--sva-text); }
.sva-op-announcement-belangrijk {
	background: #fdecea; border-color: var(--sva-danger);
}
.sva-op-announcement-belangrijk .dashicons-megaphone { color: var(--sva-danger); }

.sva-op-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28px;
}

.sva-op-topbar h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; }

/* ---------- Progress ring ---------- */
.sva-op-progress-ring {
	--pct: 0;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: conic-gradient(var(--sva-primary) calc(var(--pct) * 1%), #e4e5f5 0);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sva-op-progress-ring-inner {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--sva-card);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sva-op-progress-number { font-weight: 800; font-size: 1rem; }

/*
 * v9.15.382: BUGFIX op verzoek, gevonden via de Console-diagnose in
 * portal.js ("[SVA-OP sticky] LET OP: voorouder-element
 * <section class="sva-op-tab-panel"> heeft een transform...") - deze
 * animatie eindigde op `transform: translateY(0)` i.p.v.
 * `transform: none`. Zelfs een "nul"-transform (geen zichtbare
 * verschuiving) telt voor de browser nog steeds als een transform, en
 * dat verandert voor élke position:fixed-nakomeling (dus ook de
 * sticky kalender) het referentiepunt van "het browserscherm" naar dit
 * paneel - waardoor "vast" positioneren niet meer klopt zolang dit
 * paneel zichtbaar is.
 *
 * Overigens bleek dit stuk CSS toch al dode code: verderop in dit
 * bestand (zie "7. Zachte overgang bij tabwissel") staat een TWEEDE,
 * latere regel met dezelfde selector en een net iets andere animatie
 * die door de cascade won - en die eindigt terecht wél op
 * `transform: none`. Deze eerste, overbodige/foutieve versie is nu
 * verwijderd i.p.v. alleen gerepareerd.
 */

/* ---------- Timeline ---------- */
.sva-op-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sva-op-timeline-item {
	display: flex;
	gap: 16px;
	position: relative;
	padding-bottom: 28px;
}
.sva-op-timeline-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 42px;
	bottom: 0;
	width: 2px;
	background: var(--sva-border);
}
.sva-op-timeline-marker {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sva-card);
	border: 2px solid var(--sva-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--sva-muted);
	z-index: 1;
}
.sva-op-status-approved .sva-op-timeline-marker,
.sva-op-status-completed .sva-op-timeline-marker { background: var(--sva-success); border-color: var(--sva-success); color: #fff; }
.sva-op-status-submitted .sva-op-timeline-marker { background: var(--sva-warning); border-color: var(--sva-warning); color: #fff; }
.sva-op-status-rejected .sva-op-timeline-marker { background: var(--sva-danger); border-color: var(--sva-danger); color: #fff; }
.sva-op-status-pending .sva-op-timeline-marker,
.sva-op-status-in_progress .sva-op-timeline-marker { background: var(--sva-primary); border-color: var(--sva-primary); color: #fff; }
.sva-op-status-locked .sva-op-timeline-marker { opacity: .5; }

.sva-op-timeline-content {
	background: var(--sva-card);
	border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius);
	padding: 18px 22px;
	flex: 1;
}
.sva-op-status-locked .sva-op-timeline-content { opacity: .55; }

.sva-op-step-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sva-op-step-icon { color: var(--sva-primary); font-size: 20px; }
.sva-op-step-title { font-weight: 700; font-size: 1.02rem; }

.sva-op-badge {
	margin-left: auto;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eceefc;
	color: var(--sva-primary-dark);
}
.sva-op-badge-approved, .sva-op-badge-completed { background: #e1f7ec; color: #0d7a48; }
.sva-op-badge-submitted { background: #fdf1de; color: #a15c00; }
.sva-op-badge-rejected { background: #fde3e1; color: #b3251d; }
.sva-op-badge-locked { background: #eee; color: #888; }

.sva-op-step-description { margin-top: 8px; color: var(--sva-muted); font-size: .92rem; }
.sva-op-step-description p { margin: 0 0 6px; }

.sva-op-alert { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.sva-op-alert-warning { background: #fdece9; color: #a3291f; }
.sva-op-alert-info { background: #eef1fe; color: var(--sva-primary-dark); }
/* v9.10: gebruikt door het CRM-formulier (en herbruikbaar voor elk ander
   eigen formulier) voor een geslaagde/mislukte inzending. */
.sva-op-alert-success { background: #e6f7ee; color: #0d7a48; }
.sva-op-alert-error   { background: #fdece9; color: #a3291f; }

.sva-op-step-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sva-border); }

/*
 * v9.15.37: "Indienen" en een eventuele "Annuleren"-knop (bij een via
 * het potlood-icoon heropende stap) stonden zonder enige tussenruimte
 * strak tegen elkaar aan - ze werden achter elkaar geëchood zonder
 * scheidingsteken, en knoppen zijn standaard inline-block zonder eigen
 * marge. Nu een aparte rij eromheen: "Indienen" links, "Annuleren" -
 * indien aanwezig - rechts uitgelijnd, met ruimte ertussen. Geldt op
 * zowel laptop als mobiel; flex-wrap zorgt dat de knoppen bij een zeer
 * smal scherm netjes onder elkaar vallen in plaats van overlappen.
 */
.sva-op-step-form-acties {
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 10px; margin-top: 4px;
}

/*
 * v9.15.340/341/343: op verzoek - niet-verplichte bestandsvelden staan
 * verborgen achter een bewuste keuze, als één samenhangende lichtblauwe
 * kaart (#eef0fe, dezelfde tint als .sva-op-alert-info en de
 * "voorlopig"-legenda elders in dit bestand - een uitnodiging, geen
 * waarschuwing, dus bewust dezelfde rustige "info"-kleur). De koprij en
 * het uitgeklapte gedeelte zitten nu in DEZELFDE afgeronde kaart (i.p.v.
 * de koprij als eigen los kaartje en de rest als platte, losstaande
 * inhoud erna) - "overflow: hidden" zorgt dat het lichtere binnenvlak
 * netjes binnen de afgeronde hoeken blijft. De gestippelde
 * scheidingslijn staat ONDER de hele kaart, als afscheiding vóór de
 * "Indienen"-knop.
 */
.sva-op-optionele-uploads {
	grid-column: 1 / -1; margin-top: 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--sva-border);
}
.sva-op-optionele-uploads-kaart {
	background: #eef0fe; border-radius: 12px; overflow: hidden;
}
.sva-op-optionele-uploads-toggle {
	display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; cursor: pointer;
	padding: 12px 16px; color: var(--sva-primary-dark, var(--sva-primary));
}
.sva-op-optionele-uploads-toggle .dashicons { color: var(--sva-primary); font-size: 19px; width: 19px; height: 19px; flex: none; margin-left: auto; }
/*
 * v9.15.344: KRITIEKE BUGFIX op verzoek - het plus- én het min-icoon
 * stonden allebei tegelijk zichtbaar, in zowel de in- als uitgeklapte
 * stand. Oorzaak: WordPress' eigen ".dashicons"-basisstijl zet
 * "display: inline-block" via gewone (auteur-)CSS - en auteur-CSS wint
 * altijd van de ingebouwde, lage-prioriteit "[hidden] { display: none }"
 * van de browser zelf, ongeacht specificiteit. Het "hidden"-attribuut
 * werd zo dus stilzwijgend genegeerd. Hier expliciet, met een hogere
 * specificiteit dan de kale ".dashicons"-regel, alsnog afgedwongen.
 */
.sva-op-optionele-uploads-icoon-plus[hidden],
.sva-op-optionele-uploads-icoon-min[hidden] { display: none; }
.sva-op-optionele-uploads-tekst { flex: 1; }
.sva-op-optionele-uploads-toggle input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; }
/*
 * v9.15.343: iets lichtere tint dan de koprij (#f6f7fe t.o.v. #eef0fe),
 * zodat het uitgeklapte gedeelte visueel te onderscheiden blijft van de
 * koprij, zonder dat het los oogt van de kaart als geheel.
 */
.sva-op-optionele-uploads-inhoud { background: #f6f7fe; padding: 4px 16px 16px; }
.sva-op-optionele-uploads-uitleg { margin: 0 0 8px; font-size: .8rem; color: var(--sva-primary-dark, var(--sva-primary)); }
.sva-op-optionele-uploads-keuzelijst {
	display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
/*
 * v9.15.343: op verzoek visueel aantrekkelijker gemaakt - elke optie nu
 * een eigen, witte afgeronde rij (i.p.v. een kale regel met alleen een
 * selectievakje), met een vast, generiek documenticoon. Bewust GEEN
 * icoon per specifiek document (bv. "BHV" of "EHBO"): welke optionele
 * velden er zijn is volledig vrij in te stellen door de beheerder, dus
 * een icoon per label zou hier moeten "raden" wat voor soort document
 * het is - dat kan bij onbekende/nieuwe labels verkeerd uitpakken.
 */
.sva-op-optionele-upload-keuze {
	display: flex; align-items: center; gap: 10px; font-size: .88rem; cursor: pointer;
	background: #fff; border-radius: var(--sva-radius, 10px); padding: 10px 12px;
}
.sva-op-optionele-upload-keuze .dashicons { color: var(--sva-primary); font-size: 17px; width: 17px; height: 17px; flex: none; }
/*
 * v9.15.344: op verzoek - het uitgeklapte veld erfde de lichtblauwe
 * achtergrond van ".sva-op-optionele-uploads-inhoud" eromheen, terwijl
 * de andere (verplichte) uploadvelden gewoon wit zijn. Nu een eigen
 * witte kaart, zodat het geüploade veld er precies zo uitziet als elk
 * ander uploadveld op de pagina.
 */
.sva-op-optioneel-upload-veld { margin-top: 14px; background: #fff; border-radius: 12px; padding: 14px 16px; }
.sva-op-optioneel-upload-veld[hidden] { display: none; }

/*
 * v9.15.321: op verzoek - "Concept opgeslagen om HH:MM"-melding, zodat
 * duidelijk is dat tussentijds getypte antwoorden niet verloren gaan.
 * Bewust rustig/onopvallend (geen felle kleur) - dit is een
 * geruststelling, geen waarschuwing of foutmelding.
 *
 * v9.15.324: op verzoek - staat nu naast de indien-knop i.p.v. erboven,
 * dus geen eigen regelafstand meer nodig; een licht achtergrondkader
 * maakt duidelijk dat dit een apart, afgerond statuselement is (net als
 * de statuslabels elders), niet zomaar losse tekst in de rij.
 */
.sva-op-concept-status {
	display: flex; align-items: center; gap: 5px;
	font-size: .8rem; color: var(--sva-muted); margin: 0;
	background: #f4f6fa; border-radius: 20px; padding: 6px 12px;
}
.sva-op-concept-status .dashicons { font-size: 15px; width: 15px; height: 15px; color: #3a9d5d; }

/*
 * v9.15.39: elk upload-veld (titel + "Nu geüpload"-regel + dropzone +
 * toegestane bestandstypen) krijgt een eigen kader, zodat bij een stap
 * met meerdere bijlagen (bv. Certificaten/Diploma's) in één oogopslag
 * duidelijk is welke titel bij welk uploadvak hoort - zonder kader liep
 * dat bij veel tekst en meerdere velden door elkaar. Geldt op zowel
 * mobiel als desktop; op desktop claimt het upload-veld toch al de
 * volle raster-breedte (zie hieronder), dus dit kader past daar
 * gewoon binnen.
 */
.sva-op-step-form .sva-op-type-file {
	border: 1.5px solid var(--sva-border, #e2e4ec);
	border-radius: 12px;
	padding: 14px 16px 16px;
	margin-bottom: 16px;
}
.sva-op-step-form .sva-op-type-file .sva-op-dropzone { margin-top: 6px; }
.sva-op-step-form .sva-op-type-file .sva-op-help-inline:last-child { margin-bottom: 0; }

/*
 * v9.15.24: op grotere schermen staan gewone velden (Voornaam,
 * Achternaam, e.d.) naast elkaar, twee per rij, i.p.v. steeds de volle
 * breedte te gebruiken voor één enkel invoerveld. Upload-velden,
 * handtekeningen, adresvelden (die al hun eigen interne indeling hebben)
 * en de knoppen onderaan blijven bewust over de volle breedte staan.
 * Op mobiel (zie media query verderop) blijft alles gewoon onder
 * elkaar staan.
 */
@media (min-width: 900px) {
	.sva-op-step-form {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start;
	}
	.sva-op-step-form .sva-op-form-group { grid-column: span 1; }
	.sva-op-step-form .sva-op-type-file,
	.sva-op-step-form .sva-op-type-signature,
	.sva-op-step-form .sva-op-type-textarea,
	.sva-op-step-form .sva-op-type-checkbox,
	.sva-op-step-form .sva-op-type-radio,
	.sva-op-step-form .sva-op-form-message {
		grid-column: 1 / -1;
	}
	/*
	 * v9.15.29: knoppen niet meer laten uitrekken naar de volle
	 * raster-breedte - grid-items rekken standaard uit ("stretch") om
	 * hun hele vak te vullen, ook als het item zelf (zoals een knop)
	 * daar niet om vraagt. justify-self: start houdt de knop op zijn
	 * natuurlijke, kortere breedte, terwijl hij toch over de volle
	 * breedte van de rij bereikbaar blijft (grid-column: 1/-1).
	 *
	 * v9.15.37: was rechtstreeks op de knoppen zelf (.sva-op-step-form >
	 * button); nu op de nieuwe wrapper .sva-op-step-form-acties eromheen
	 * (zie hieronder in dit bestand voor de flex-indeling zelf, die
	 * "Indienen" links en "Annuleren" rechts zet) - de wrapper zelf mag
	 * juist WEL de volle breedte innemen, vandaar geen justify-self hier.
	 */
	.sva-op-step-form .sva-op-step-form-acties {
		grid-column: 1 / -1;
	}

	/*
	 * v9.15.36: BUGFIX/verfijning op v9.15.29 - postcode+huisnummer
	 * deelden nog altijd samen één kolombreedte (elk dus smaller dan een
	 * gewoon veld als Voornaam), terwijl straatnaam en plaats wél de
	 * volle kolombreedte kregen. Dat oogde ongelijk uitgelijnd, zeker
	 * zodra er een veld ná het adres bijkwam en in het lege vakje naast
	 * "Plaats" vloeide.
	 *
	 * Nu krijgt ELK van de vier adresvelden zijn EIGEN volle
	 * kolombreedte, in een nette 2x2-indeling die verder als gewone
	 * rijen meetelt in hetzelfde raster als de rest van het formulier:
	 * rij 1: postcode | huisnummer - rij 2: straatnaam | plaats. Ook de
	 * wrapper om postcode+huisnummer wordt daarom nu "display: contents"
	 * (net als de twee wrappers erboven), zodat de twee velden daarin
	 * elk apart als rastercel meetellen in plaats van samen als één.
	 */
	.sva-op-step-form .sva-op-type-address,
	.sva-op-step-form .sva-op-address-group,
	.sva-op-step-form .sva-op-adres-postcode-huisnr {
		display: contents;
	}
	.sva-op-step-form .sva-op-type-address > label { grid-column: 1 / -1; }
	.sva-op-step-form .sva-op-adres-postcode { grid-column: 1; margin-bottom: 14px; }
	.sva-op-step-form .sva-op-adres-huisnummer { grid-column: 2; margin-bottom: 14px; }
	.sva-op-step-form .sva-op-adres-straat { grid-column: 1; margin-bottom: 14px; }
	.sva-op-step-form .sva-op-adres-plaats-wrap { grid-column: 2; }
}

/* ---------- Form elements ---------- */
.sva-op-form-group { margin-bottom: 14px; }
.sva-op-form-group label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: 5px; }
.sva-op-req { color: var(--sva-danger); }

/*
 * v9.15.323/324: op verzoek - een klein grijs cijfer vóór elk veldlabel,
 * in invulvolgorde, zodat direct duidelijk is welk veld na welk komt.
 * Staat nu BINNEN het label zelf (zie render_field() in class-sva-op-
 * fields.php) - dat gaat altijd automatisch mee waar het label ook
 * staat, ook bij het adresveld dat intern "display: contents" gebruikt
 * (zie de @media-regel voor .sva-op-type-address verderop) - een apart
 * broer-element zou daar juist zélf een los rastervak zijn geworden.
 */
.sva-op-veld-nr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 15px; height: 15px; border-radius: 4px; vertical-align: middle;
	background: #eef0f5; color: #8b8fa3; font-size: .64rem; font-weight: 700;
	margin-right: 5px; position: relative; top: -1px;
}

.sva-op-form-group input[type="text"],
.sva-op-form-group input[type="email"],
.sva-op-form-group input[type="tel"],
.sva-op-form-group input[type="number"],
.sva-op-form-group input[type="date"],
.sva-op-form-group select,
.sva-op-form-group textarea {
	width: 100%;
	max-width: 440px;
	padding: 10px 13px;
	border: 1.5px solid var(--sva-border);
	border-radius: 10px;
	font-size: .92rem;
	font-family: inherit;
	background: #fff;
	transition: border-color .15s ease;
	box-sizing: border-box;
}
.sva-op-form-group input:focus,
.sva-op-form-group select:focus,
.sva-op-form-group textarea:focus {
	outline: none;
	border-color: var(--sva-primary);
	box-shadow: 0 0 0 3px rgba(91,108,240,.12);
}

.sva-op-radio-option, .sva-op-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin-bottom: 6px;
}

.sva-op-address-group { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.sva-op-address-group input { flex: 1 1 200px; }
.sva-op-address-group input.sva-op-w-small { flex: 0 1 110px; }
/*
 * v9.15.25: basisregel (geldt op elke schermgrootte) - de wrapper om
 * postcode+huisnummer moet altijd flex zijn, ook op mobiel, anders
 * stapelen die twee zich onder elkaar in plaats van naast elkaar te
 * staan. De @media (min-width: 900px)-regel hierboven voegt er alleen
 * de kolomplaatsing in het grotere formulier-grid aan toe.
 */
.sva-op-adres-postcode-huisnr { display: flex; gap: 8px; flex: 1 1 200px; }
.sva-op-adres-postcode-huisnr input.sva-op-w-small { flex: 1 1 0; min-width: 0; }
/*
 * v9.15.29: basisregel voor de nieuwe plaats+status-wrapper (zie
 * class-sva-op-fields.php) - flex: 1 1 200px zodat hij zich op mobiel
 * hetzelfde gedraagt als toen "Plaats" nog een losse input was
 * (.sva-op-address-group input { flex: 1 1 200px; }), en de input
 * daarbinnen vult de wrapper altijd volledig.
 */
.sva-op-adres-plaats-wrap { flex: 1 1 200px; }
.sva-op-adres-plaats-wrap .sva-op-adres-plaats { width: 100%; }

/*
 * v9.15.327: op verzoek - straat/plaats zijn nu écht vergrendeld
 * (readonly) totdat postcode+huisnummer een adres hebben opgeleverd,
 * i.p.v. alleen een grijze achtergrond (v9.15.325/326). Bewust een
 * EIGEN klasse i.p.v. .sva-op-readonly hergebruiken: die laatste zet
 * via een :has()-selector ook een hangslotje bij het LABEL van het
 * hele veld ("Adres"), wat hier misleidend zou zijn omdat alleen
 * straat/plaats vergrendeld zijn, niet postcode/huisnummer.
 */
.sva-op-adres-vergrendeld { background: #f3f4fa !important; color: #98a0b3 !important; cursor: not-allowed; border-style: dashed !important; }

.sva-op-help, .sva-op-help-inline { color: var(--sva-muted); font-size: .78rem; margin: 4px 0 0; }

/*
 * v9.15.335: op verzoek - "of upload een afbeelding..." (met de
 * "Bestand kiezen"-knop) staat nu naast de canvas i.p.v. eronder. Bewust
 * een kleine, in zichzelf besloten wijziging: alleen de indeling BINNEN
 * dit ene veld verandert (canvas-wrap en de actions-rij naast elkaar
 * i.p.v. gestapeld) - niets aan de knop "Nu ondertekenen" of de rest
 * van het formulier wordt aangeraakt (dat leidde eerder tot problemen,
 * zie de toelichting bij class-sva-op-portal.php over v9.15.332/333/334).
 * flex-wrap zorgt dat dit op een smal scherm gewoon weer onder elkaar
 * valt (samen met de bestaande mobiele max-width:100%-regel hieronder).
 *
 * v9.15.336: KRITIEKE BUGFIX op verzoek - v9.15.335 werkte niet op de
 * live site, ook niet ná bevestiging dat de juiste versie actief stond.
 * Oorzaak: het thema van deze site (Avada) overschrijft agressief
 * plugin-CSS voor generieke elementen als <div> - een bekend, al
 * meermaals eerder gemeld probleem in dit bestand (zie bijvoorbeeld de
 * toelichting bij ".sva-op-linklike" en de rode-rand-fix hierboven, die
 * om dezelfde reden "!important" nodig hadden). Zonder "!important" won
 * Avada's eigen, generieke "display: block"-regel het van deze
 * flex-indeling. Nu, zoals elders in dit bestand bij ditzelfde
 * terugkerende probleem, met "!important" op elke eigenschap die voor
 * de indeling zelf uitmaakt.
 */
.sva-op-signature-pad {
	max-width: 900px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 20px !important;
}
/*
 * v9.15.139: op verzoek - "Opnieuw tekenen" is geen aparte knop meer
 * onder het canvas, maar een klein kruisje rechtsboven IN het canvas
 * zelf. .sva-op-signature-canvas-wrap is de positioneringscontext
 * daarvoor (position: relative), zodat het kruisje absoluut t.o.v. het
 * canvas geplaatst kan worden ongeacht de canvasbreedte.
 */
/*
 * v9.15.338: op verzoek - canvas en upload-optie moeten elk 50% van de
 * beschikbare breedte gebruiken (niet vaste, kleine pixelbreedtes die
 * ruimte onbenut lieten - zie de melding met screenshot). Beide flex-
 * items krijgen dezelfde grondslag (flex-basis) en groeifactor
 * (flex-grow: 1), dus ze delen de beschikbare ruimte altijd precies
 * gelijk, ongeacht de daadwerkelijke containerbreedte. flex-basis
 * (280px) is de MINIMALE breedte voordat een item alsnog naar een
 * nieuwe regel wordt geduwd - dat is meteen het punt waarop het op
 * mobiel/smal scherm netjes terugvalt op onder elkaar (samen met de
 * bestaande mobiele max-width-regel verderop).
 */
.sva-op-signature-canvas-wrap { position: relative; flex: 1 1 280px; max-width: 600px; }
.sva-op-signature-canvas {
	width: 100%;
	max-width: 600px;
	height: 160px;
	background: #fff;
	/*
	 * v9.15.334: op verzoek - de rand duidelijker/dikker gemaakt zodat
	 * meteen zichtbaar is waar getekend moet worden. Verder bewust
	 * niets anders aangepast: de eerdere pogingen om ook nog de knop te
	 * verplaatsen zijn teruggedraaid (zie de toelichting in class-sva-
	 * op-portal.php) - dit is nu de enige wijziging.
	 */
	border: 3px dashed #9098ad;
	border-radius: 10px;
	touch-action: none;
	cursor: crosshair;
}
.sva-op-signature-clear {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 2;
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--sva-border);
	border-radius: 50%;
	color: var(--sva-muted, #797c93);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.sva-op-signature-clear:hover { color: var(--sva-tekst-rood, #b3261e); border-color: var(--sva-tekst-rood, #b3261e); }

/* ---------- Buttons ---------- */
.sva-op-btn, .sva-op-btn-primary, .sva-op-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: 10px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	font-family: inherit;
}
.sva-op-btn, .sva-op-btn-primary { background: var(--sva-primary); color: #fff; }
.sva-op-btn:hover, .sva-op-btn-primary:hover { background: var(--sva-primary-dark); }
.sva-op-btn-block { width: 100%; justify-content: center; }
.sva-op-btn-ghost { background: transparent; color: var(--sva-primary); border: 1.5px solid var(--sva-border); }
/*
 * v9.15.24: deze klasse werd al gebruikt (login-pagina, documentviewer)
 * maar had nooit een eigen CSS-regel - de knop viel dan terug op de
 * gewone, opgevulde .sva-op-btn-stijl in plaats van er "outline" uit te
 * zien. Zelfde opmaak als .sva-op-btn-ghost.
 */
.sva-op-btn-outline { background: transparent; color: var(--sva-primary); border: 1.5px solid var(--sva-border); }
.sva-op-btn-outline:hover { border-color: var(--sva-primary); }
.sva-op-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Cards / misc ---------- */
.sva-op-form-card {
	background: var(--sva-card);
	border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius);
	padding: 26px 28px;
}
.sva-op-form-card h2 { margin-top: 0; }

.sva-op-form-message { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .88rem; }
.sva-op-form-message.success { background: #e1f7ec; color: #0d7a48; }
.sva-op-form-message.error { background: #fde3e1; color: #b3251d; }
/*
 * v9.15.67: op verzoek - de toelichting staat direct BOVEN het
 * specifieke veld zelf i.p.v. als los blok bovenaan de hele stap (was
 * .sva-op-stap-hergebruik-info, v9.15.66) - duidelijker bij een stap
 * met meerdere velden, want je hoeft niet meer zelf te zoeken welk
 * veld de melding bedoelt.
 *
 * v9.15.68: BUGFIX/verzoek - stond als losse <p> vóór render_field(),
 * dus als EXTRA cel in het 2-koloms rasterrooster van de velden - dat
 * verschoof alle velden erna een plek op, waardoor de melding naast
 * een heel ander veld leek te horen. Nu door render_field() zelf ná
 * het openen van de eigen .sva-op-form-group-wrapper geplaatst (zie
 * de $sva_hergebruik_notitie-parameter in class-sva-op-fields.php),
 * dus altijd binnen de kaders van het juiste veld - bij een upload-
 * veld letterlijk binnen de kaartrand van dat uploadvak, boven de
 * veldtitel. Ook terug naar het herkenbare gekleurde blok (zoals
 * v9.15.66) i.p.v. platte tekst, op verzoek.
 */
.sva-op-veld-hergebruik-ontbreekt {
	display: flex; align-items: flex-start; gap: 8px;
	background: #eafaf1; color: #0d7a48; border-radius: 8px;
	padding: 8px 12px; margin-bottom: 10px; font-size: .82rem; line-height: 1.5;
}
.sva-op-veld-hergebruik-ontbreekt .dashicons { flex-shrink: 0; margin-top: 1px; font-size: 15px; width: 15px; height: 15px; }

.sva-op-documents { list-style: none; margin: 0; padding: 0; }
.sva-op-documents li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sva-border); }
.sva-op-documents a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sva-text); font-weight: 600; }
.sva-op-doc-date { color: var(--sva-muted); font-size: .82rem; }

.sva-op-empty-state { text-align: center; padding: 50px 20px; color: var(--sva-muted); }
.sva-op-empty-state .dashicons { font-size: 36px; width: 36px; height: 36px; opacity: .4; margin-bottom: 10px; }

/* ---------- Login / intake ---------- */
.sva-op-login-wrapper, .sva-op-intake-wrapper { max-width: 460px; margin: 0 auto; }
/*
 * v9.10.21: het CRM-formulier hergebruikt bewust .sva-op-intake-wrapper
 * (voor dezelfde lettertype-/veldstijl), maar erft daarmee ook de vaste
 * max-breedte van 460px en de centrering mee - bedoeld voor de
 * losstaande, op zichzelf staande login-/sollicitatiepagina. Een
 * CRM-formulier staat meestal ALS ONDERDEEL van een bredere pagina van
 * het thema (bv. een kolom naast contactgegevens, zoals op de
 * contactpagina) - daar hoort het de volledige breedte van die kolom te
 * vullen, niet zijn eigen smalle, gecentreerde balk te blijven. Twee
 * klassen samen geven hogere specificiteit dan de regel hierboven, dus
 * dit wint gegarandeerd, ongeacht de volgorde in het bestand.
 */
.sva-op-crmform-wrapper.sva-op-intake-wrapper { max-width: none; width: 100%; margin: 0; }
/*
 * v9.10.22: de wrapper vult nu de volledige breedte (hierboven), maar
 * elk veld ZELF had daarnaast nóg een eigen, onafhankelijke
 * max-width: 440px (zie .sva-op-form-group hieronder in dit bestand) -
 * bedoeld om een veld binnen de smalle, 460px-brede sollicitatie-/
 * loginpagina niet de volle breedte te geven. Binnen het CRM-formulier
 * is dat precies andersom gewenst: elk veld hoort de volle breedte van
 * de (nu bredere) kaart te vullen. Alleen hier opgeheven; de
 * sollicitatie- en loginschermen blijven op hun oorspronkelijke,
 * bewust compacte veldbreedte.
 */
.sva-op-crmform-wrapper.sva-op-intake-wrapper .sva-op-form-group input,
.sva-op-crmform-wrapper.sva-op-intake-wrapper .sva-op-form-group select,
.sva-op-crmform-wrapper.sva-op-intake-wrapper .sva-op-form-group textarea { max-width: none; }
/* v9.10.9: honeypot - buiten beeld gepositioneerd i.p.v. display:none,
   want dat laatste wordt door een deel van de spam-scripts al herkend
   en overgeslagen. Blijft voor een schermlezer als "verborgen" gemarkeerd. */
.sva-op-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.sva-op-login-card { text-align: left; }
.sva-op-login-card h2 { margin: 6px 0 2px; }
.sva-op-login-card form p { margin-bottom: 14px; }
.sva-op-login-card label { font-weight: 600; font-size: .87rem; display:block; margin-bottom: 4px;}
.sva-op-login-card input[type="text"], .sva-op-login-card input[type="password"] {
	width: 100%; padding: 10px 13px; border: 1.5px solid var(--sva-border); border-radius: 10px; box-sizing: border-box;
}
.sva-op-login-card input[type="submit"] {
	background: var(--sva-primary); color: #fff; border: none; border-radius: 10px; padding: 11px 20px; font-weight: 700; cursor: pointer; width: 100%;
}

/* ---------- Responsive: compacte mobiele weergave (tabbalk bovenaan) ---------- */
@media (max-width: 780px) {
	.sva-op-app { flex-direction: column; }
	.sva-op-sidebar-grip { display: none; }

	/* Menu wordt een compacte, vastgeplakte tabbalk bovenaan. Alle tabbladen
	   blijven bereikbaar: past het net niet, dan scrollt de balk horizontaal
	   met een vervaagrandje als hint. */
	.sva-op-sidebar {
		position: sticky; top: 0; z-index: 99990;
		width: auto; flex-direction: row; align-items: center; gap: 4px;
		padding: 8px 10px;
		box-shadow: 0 4px 18px rgba(10, 15, 40, .18);
	}
	body.admin-bar .sva-op-sidebar { top: 46px; }
	/*
	 * v9.15.380: BUGFIX op verzoek - dit was een pre-existing regel, niet
	 * onderdeel van de nieuwe "Diensten en beschikbaarheid combineren"-
	 * module en niet aangeraakt in de recente sessie daaraan. De regel
	 * verbergt het logo in de mobiele, vastgeplakte tabbalk van de
	 * INGELOGDE app - maar was niet afgebakend tot ".sva-op-app", en
	 * ".sva-op-brandmark" is dezelfde klasse die ook de inlogpagina
	 * (".sva-op-login-card .sva-op-brandmark") voor het logo gebruikt.
	 * Onder de 780px-grens (elke iPhone, in portrait altijd het geval)
	 * verdween het logo daardoor ook op het inlogscherm zelf - bij het
	 * invullen van het e-mailadres én bij het invullen van de
	 * tancode/inlogcode. Nu correct afgebakend tot alleen de ingelogde
	 * app; de inlogpagina en aanmeldwrapper (die dezelfde brandmark-
	 * functie ook gebruiken) blijven ongemoeid.
	 */
	.sva-op-app .sva-op-brandmark { display: none; }
	.sva-op-nav {
		flex-direction: row; flex: 1; gap: 4px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		mask-image: linear-gradient(to right, #000 92%, transparent);
		-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
	}
	.sva-op-nav::-webkit-scrollbar { display: none; }

	/* Dossierwissel: op mobiel geen volle balk (geen ruimte in de rij naast
	   de tabs), maar een compact knopje vóór de tabbalk. De lijst blijft
	   even breed genoeg om namen en percentages leesbaar te tonen, ook al
	   is het knopje zelf smal. */
	.sva-op-dossierwissel { flex: 0 0 auto; margin: 0 6px 0 0; order: -1; }
	.sva-op-dossierwissel summary { padding: 9px 10px; flex-direction: row; align-items: center; gap: 6px; }
	.sva-op-dossierwissel-label { display: none; }
	.sva-op-dossierwissel-naam { display: none; }
	.sva-op-dossierwissel-pct { display: none; }
	.sva-op-dossierwissel-lijst { left: 0; right: auto; width: 260px; max-width: calc(100vw - 20px); }
	.sva-op-nav-link {
		flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px;
		padding: 9px 12px; min-height: 40px; font-size: .8rem; font-weight: 700;
		border-radius: 10px; white-space: nowrap;
	}
	.sva-op-nav-link .dashicons { font-size: 17px; width: 17px; height: 17px; }
	.sva-op-nav-count { margin-left: 2px; }

	/* Uitloggen: klein icoon rechts in de balk, geen volwaardige tab. */
	.sva-op-sidebar-footer { margin: 0; flex: 0 0 auto; }
	.sva-op-sidebar-footer a {
		display: flex; align-items: center; justify-content: center;
		width: 40px; height: 40px; border-radius: 10px; font-size: 0;
	}
	.sva-op-sidebar-footer .dashicons { font-size: 19px; width: 19px; height: 19px; }

	.sva-op-main { padding: 16px 14px 28px; }

	/* Kop compact: welkom + voortgang op een rij, knoppen eronder. */
	.sva-op-topbar { flex-wrap: wrap; align-items: center; gap: 10px; }
	.sva-op-topbar h1 { font-size: 1.15rem; margin: 0; }
	.sva-op-topbar-sub, .sva-op-topbar p { font-size: .8rem; margin: 2px 0 0; }
	.sva-op-progress-ring { transform: scale(.72); transform-origin: right center; margin-left: auto; }
	.sva-op-tool-label { display: none; }
	.sva-op-tool-btn, .sva-op-bell { min-height: 40px; min-width: 40px; }

	/* Stappen en kaarten: volle breedte, rustiger marges. */
	.sva-op-timeline-item { padding-left: 0; }
	.sva-op-step-card, .sva-op-form-card, .sva-op-vraag { padding: 16px 14px; border-radius: 14px; }
	.sva-op-opvolger-blok { margin-left: 0; }
	.sva-op-opvolger-form { max-width: none; }

	/* Documentenlijst netjes laten omlopen. */
	.sva-op-documents li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 0; }
	.sva-op-documents .sva-op-doc-open { min-height: 40px; text-align: left; }
	.sva-op-doc-date { flex-basis: 100%; margin-left: 26px; }
	.sva-op-doc-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }

	/* Formulieren: geen inzoomen op iOS, comfortabele raakvlakken. */
	.sva-op-app input[type="text"], .sva-op-app input[type="email"], .sva-op-app input[type="tel"],
	.sva-op-app input[type="date"], .sva-op-app input[type="password"], .sva-op-app input[type="number"],
	.sva-op-app select, .sva-op-app textarea,
	.sva-op-login-wrapper input, .sva-op-intake-wrapper input, .sva-op-intake-wrapper select, .sva-op-intake-wrapper textarea {
		font-size: 16px; min-height: 42px;
	}
	.sva-op-btn, .sva-op-btn-sm { min-height: 42px; }

	/* Popups: schermvullend met interne scroll. */
	.sva-op-ask-inner { width: calc(100vw - 20px); padding: 18px 16px; }
	.sva-op-doc-modal-inner { width: calc(100vw - 12px); height: calc(100dvh - 20px); border-radius: 12px; }

	.sva-op-chat-bubble { max-width: 88%; }
	.sva-op-signature-pad, .sva-op-signature-pad canvas { max-width: 100% !important; }
}

/* Heel smalle telefoons: kop nog iets compacter. */
@media (max-width: 480px) {
	.sva-op-nav-link, .sva-op-sidebar-footer a { font-size: .6rem; }
	.sva-op-topbar h1 { font-size: 1.05rem; }
}

/* ============ Beveiligde document-popup ============ */
body.sva-op-modal-open { overflow: hidden; }
.sva-op-doc-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; }
.sva-op-doc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 35, .62); backdrop-filter: blur(3px); }
.sva-op-doc-modal-inner {
	position: relative; background: #fff; border-radius: 16px; width: min(920px, 94vw);
	height: min(86vh, 900px); display: flex; flex-direction: column; overflow: hidden;
	box-shadow: 0 24px 70px rgba(10, 10, 30, .35);
}
.sva-op-doc-modal-header {
	display: flex; align-items: center; gap: 12px; padding: 14px 18px;
	border-bottom: 1px solid #e6e8f2; background: #fafbff;
}
.sva-op-doc-modal-title { flex: 1; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-op-doc-modal-close {
	background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
	color: #667; padding: 2px 8px; border-radius: 8px;
}
.sva-op-doc-modal-close:hover { background: #eef0f8; color: #111; }
.sva-op-doc-modal-body { flex: 1; overflow: auto; background: #585c6e; display: flex; }
.sva-op-doc-frame { border: none; width: 100%; height: 100%; flex: 1; }
.sva-op-doc-imgwrap { margin: auto; padding: 20px; }
.sva-op-doc-imgwrap img { max-width: 100%; max-height: 74vh; border-radius: 6px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.sva-op-doc-loading, .sva-op-doc-error { margin: auto; color: #fff; font-size: .95rem; padding: 30px; text-align: center; }
.sva-op-doc-download .dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: -2px; }
button.sva-op-doc-open {
	background: none; border: none; padding: 0; cursor: pointer; color: inherit;
	font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
button.sva-op-doc-open:hover { text-decoration: underline; }
button.sva-op-doc-open .dashicons { color: #5b6cf0; }

/* ============ Avada-compatibiliteit popup + knoppen ============ */
.sva-op-doc-modal {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 100vw !important; height: 100vh !important;
	margin: 0 !important; padding: 0 !important;
	z-index: 2147483000 !important;
}
.sva-op-doc-modal-inner { z-index: 2; max-width: 94vw; }
.sva-op-doc-modal-backdrop { z-index: 1; }

/* Knopstijlen die het theme niet mag overschrijven */
.sva-op-doc-modal a.sva-op-doc-download,
.sva-op-doc-modal a.sva-op-doc-download:visited {
	display: inline-flex !important;
	align-items: center; gap: 6px;
	background: #fff !important; color: #3947c9 !important;
	border: 1.5px solid #cdd3f0 !important; border-radius: 9px !important;
	padding: 6px 13px !important; font-size: .82rem !important; font-weight: 700 !important;
	text-decoration: none !important; box-shadow: none !important; line-height: 1.4 !important;
	white-space: nowrap;
}
.sva-op-doc-modal a.sva-op-doc-download:hover { background: #5b6cf0 !important; color: #fff !important; border-color: #5b6cf0 !important; }
.sva-op-doc-modal .sva-op-doc-modal-close {
	background: none !important; border: none !important; box-shadow: none !important;
	font-size: 26px !important; line-height: 1 !important; color: #667 !important;
	padding: 2px 10px !important; border-radius: 8px; cursor: pointer; min-height: 0 !important;
}
.sva-op-doc-modal .sva-op-doc-modal-close:hover { background: #eef0f8 !important; color: #111 !important; }
.sva-op-doc-modal-header { flex-wrap: nowrap; }

/* Avada-hardening: popup altijd viewport-gevuld en boven alles */
.sva-op-doc-modal { z-index: 2147483000 !important; }
.sva-op-doc-modal-inner { height: min(86vh, 900px); height: min(86dvh, 900px); max-width: 94vw; }
.sva-op-doc-modal .sva-op-doc-modal-header { flex-shrink: 0; }
.sva-op-doc-modal-header .sva-op-btn-outline-sm,
.sva-op-doc-modal-header a.sva-op-doc-download {
	display: inline-flex !important; align-items: center; gap: 5px;
	border: 1.5px solid #d6d9ea; border-radius: 9px; padding: 6px 12px;
	font-size: .82rem; font-weight: 700; color: #3947c9; text-decoration: none; background: #fff;
}
.sva-op-doc-modal-header a.sva-op-doc-download:hover { border-color: #5b6cf0; }

/* Documenten: subtabbladen per categorie */
.sva-op-doc-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.sva-op-doc-subtab {
	background: #f1f2fa; border: 1.5px solid transparent; border-radius: 999px;
	padding: 7px 15px; font-size: .84rem; font-weight: 700; color: #4a4a68; cursor: pointer;
	display: inline-flex; align-items: center; gap: 7px; transition: all .12s ease;
}
.sva-op-doc-subtab:hover { border-color: #c9cdf0; }
.sva-op-doc-subtab.active { background: #5b6cf0; color: #fff; }
.sva-op-doc-subtab-count {
	background: rgba(255,255,255,.85); color: #4a4a68; border-radius: 999px;
	font-size: .72rem; padding: 1px 8px; font-weight: 800;
}
.sva-op-doc-subtab.active .sva-op-doc-subtab-count { background: rgba(255,255,255,.25); color: #fff; }

/* Eigen inlog/herstel-schermen */
.sva-op-auth-form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: .88rem; }
.sva-op-auth-form input { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid #d9dcec; border-radius: 10px; font-size: .95rem; }
.sva-op-auth-form input:focus { border-color: #5b6cf0; outline: none; box-shadow: 0 0 0 3px rgba(91,108,240,.12); }
.sva-op-auth-msg { border-radius: 10px; padding: 11px 14px; font-size: .88rem; margin-bottom: 16px; }
.sva-op-auth-error { background: #fde3e1; color: #9d221b; }
.sva-op-auth-ok { background: #e1f7ec; color: #0d6a3f; }

.sva-op-signature-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 0; flex: 1 1 280px; }
/*
 * v9.15.337: KRITIEKE BUGFIX op verzoek - de vorige poging (!important
 * tegen Avada) was de verkeerde diagnose. Met een ECHTE, gerenderde
 * meting (Chromium via Playwright, niet alleen berekende CSS-
 * eigenschappen zoals jsdom die geeft) bleek: ".sva-op-signature-
 * upload-label" wil van nature ~505px breed zijn (een <label> breekt
 * tekst niet vanzelf af), en samen met de 500px-brede canvas is dat
 * 1025px nodig - ruim meer dan een realistische portaalkolom (~700px)
 * biedt. flex-wrap deed dus precies waarvoor het bedoeld is: te weinig
 * ruimte, dus terugvallen op gestapeld - geen thema-conflict, gewoon
 * ruimtegebrek. Nu een expliciete max-breedte zodat de tekst zelf
 * afbreekt (net als een gewone alinea) i.p.v. geforceerd op één regel
 * te blijven staan.
 */
.sva-op-signature-upload-label { font-size: .82rem; color: #667; font-weight: 600; }
/*
 * v9.15.339: op verzoek - de knop "Nu ondertekenen" staat nu, in het
 * specifieke geval van een stap die uitsluitend uit een
 * handtekeningveld bestaat, HIER binnenin .sva-op-signature-actions
 * (zie class-sva-op-fields.php/class-sva-op-portal.php voor de
 * toelichting waarom dit als HTML-verplaatsing is gedaan, niet als
 * CSS-truc). "flex-basis: 100%" dwingt 'm altijd op een eigen regel,
 * onder de upload-knop, ongeacht de beschikbare breedte.
 */
.sva-op-onderteken-knop-onder-upload { flex-basis: 100%; margin-top: 10px; }
.sva-op-signature-upload-label input[type="file"] { font-size: .8rem; }
.sva-op-step-pdf-btn { font-size: .88rem; }

/* ============ Meerdere sollicitaties ============ */
.sva-op-nav-count {
	background: rgba(255,255,255,.22); border-radius: 999px; font-size: .7rem;
	padding: 1px 8px; margin-left: auto; font-weight: 800;
}
.sva-op-traject-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sva-op-traject-pill {
	display: inline-flex; align-items: center; gap: 8px; background: #fff;
	border: 1.5px solid #dfe2f0; border-radius: 999px; padding: 8px 16px;
	font-size: .85rem; font-weight: 700; color: #3a4256; text-decoration: none;
	transition: all .12s ease;
}
.sva-op-traject-pill:hover { border-color: #b9c0ea; }
.sva-op-traject-pill.active { border-color: #5b6cf0; box-shadow: 0 0 0 3px rgba(91,108,240,.12); color: #1a2233; }
.sva-op-traject-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sva-op-traject-pill-pct { font-size: .74rem; color: #778; font-weight: 800; }

.sva-op-sollicitatie-lijst { display: flex; flex-direction: column; gap: 10px; }
.sva-op-sollicitatie-item {
	display: grid; grid-template-columns: 12px minmax(0,1fr) auto 120px 44px;
	gap: 12px; align-items: center; padding: 14px 16px; border: 1.5px solid #e4e7f4;
	border-radius: 12px; text-decoration: none; color: #2a3145; transition: all .12s ease;
}
.sva-op-sollicitatie-item:hover { border-color: #b9c0ea; transform: translateY(-1px); }
.sva-op-sollicitatie-item.active { border-color: #5b6cf0; background: #f7f8ff; }
.sva-op-sollicitatie-naam { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-op-sollicitatie-datum { font-size: .78rem; color: #99a; }
.sva-op-sollicitatie-item .sva-op-mini-progress { display: block; height: 7px; background: #eceef8; border-radius: 99px; overflow: hidden; }
.sva-op-sollicitatie-item .sva-op-mini-progress-fill { display: block; height: 100%; border-radius: 99px; }
.sva-op-sollicitatie-pct { font-size: .8rem; font-weight: 800; text-align: right; }
@media (max-width: 640px) {
	.sva-op-sollicitatie-item { grid-template-columns: 12px 1fr 44px; }
	.sva-op-sollicitatie-datum, .sva-op-sollicitatie-item .sva-op-mini-progress { display: none; }
}

.sva-op-readonly { background: #f3f4fa !important; color: #667 !important; cursor: not-allowed; border-style: dashed !important; }
.sva-op-form-group:has(.sva-op-readonly) > label::after { content: " \1F512"; font-size: .8em; opacity: .55; }
.sva-op-prefill-hint { font-size: .78rem; color: var(--sva-muted, #797c93); margin-top: 3px; }
.sva-op-prefill-note { margin-bottom: 18px; }

/* ============ v3.4: account, upload, vraag, meldingen, verval ============ */
.sva-op-topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 16px; }
.sva-op-tool-btn {
	position: relative; display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border: 1.5px solid #dfe2f0; border-radius: 999px;
	padding: 8px 14px; font-size: .84rem; font-weight: 700; color: #3a4256; cursor: pointer;
}
.sva-op-tool-btn:hover { border-color: #b9c0ea; }
.sva-op-tool-btn .dashicons { font-size: 17px; width: 17px; height: 17px; color: #5b6cf0; }
.sva-op-bell { padding: 8px 11px; }
.sva-op-bell-badge {
	position: absolute; top: -6px; right: -6px; background: #e5484d; color: #fff;
	border-radius: 999px; font-size: .68rem; font-weight: 800; padding: 2px 7px; border: 2px solid #fff;
}
.sva-op-bell-wrap { position: relative; }
.sva-op-bell-panel {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 99999;
	background: #fff; border: 1px solid #e4e7f4; border-radius: 14px; width: 340px;
	box-shadow: 0 16px 44px rgba(20,30,60,.18); padding: 16px 18px; max-height: 420px; overflow: auto;
}
.sva-op-bell-panel h4 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #99a; }
.sva-op-bell-panel h4 + h4, .sva-op-bell-panel ul + h4 { margin-top: 14px; }
.sva-op-bell-panel ul { margin: 0; padding: 0; list-style: none; }
.sva-op-bell-panel li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #f0f1f8; font-size: .86rem; }
.sva-op-bell-panel li:last-child { border-bottom: none; }
.sva-op-bell-panel .dashicons { font-size: 16px; width: 16px; height: 16px; color: #5b6cf0; flex-shrink: 0; margin-top: 1px; }
.sva-op-melding-link { color: #2a3145; text-decoration: none; font-weight: 600; }
.sva-op-melding-link:hover { color: #3947c9; }
.sva-op-melding-recent li { color: #667; }
.sva-op-melding-datum { display: block; font-size: .74rem; color: #a5aabd; margin-top: 1px; }

.sva-op-expiry { border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 3px 10px; margin-left: 10px; }
.sva-op-expiry-rood { background: #fde3e1; color: #b3251d; }
.sva-op-expiry-oranje { background: #fdf1de; color: #a15c00; }
.sva-op-expiry-grijs { background: #eef0f6; color: #778; }

.sva-op-upload-box { margin: 6px 0 22px; }
.sva-op-upload-toggle { display: inline-block; cursor: pointer; list-style: none; }
.sva-op-upload-toggle::-webkit-details-marker { display: none; }
.sva-op-self-upload { margin-top: 16px; background: #f8f9fe; border: 1.5px dashed #d5d9ef; border-radius: 14px; padding: 18px; max-width: 520px; }
.sva-op-self-upload label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 12px; }
.sva-op-self-upload input, .sva-op-self-upload select { width: 100%; margin-top: 5px; }

.sva-op-ask-modal, .sva-op-modal-vorm { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; }
.sva-op-ask-inner {
	position: relative; background: #fff; border-radius: 16px; width: min(520px, 92vw);
	padding: 24px 26px; box-shadow: 0 24px 70px rgba(10,10,30,.35);
}
/*
 * v9.9.9: had geen eigen font-size/gewicht/kleur en erfde daardoor de
 * kale, te grote browser/thema-stijl voor h3 over - viel op zodra de
 * bevestigingspopup (v9.9.8) er ook gebruik van ging maken. Geldt voor
 * alle popups op basis van .sva-op-ask-inner (Vraag stellen, Sollicitatie
 * intrekken, Verwijderverzoek, Bevestigen), dus in één keer gefixt.
 */
.sva-op-ask-inner h3 {
	margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; line-height: 1.3;
	color: var(--sva-text, #23233a);
}
.sva-op-ask-text { width: 100%; border: 1.5px solid #d9dcec; border-radius: 10px; padding: 11px 13px; margin-top: 8px; }
.sva-op-ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.sva-op-step-ask { margin: 4px 0 0; }
.sva-op-step-ask a { font-size: .8rem; color: #8890ab; }
.sva-op-activity-list { list-style: none; margin: 0; padding: 0; }
.sva-op-activity-list li { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #f0f1f8; font-size: .9rem; }
.sva-op-activity-list .dashicons { color: #5b6cf0; }
.sva-op-activity-note { margin-top: 12px; font-size: .8rem; }
.sva-op-msg-success { background: #e1f7ec; color: #0d6a3f; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.sva-op-msg-error { background: #fde3e1; color: #9d221b; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }

/* v9.15.5: .sva-op-expiry-field/-label/-status stonden hier eerder ook
   gedefinieerd (voor de vroegere opzet: het datumveld ALS SIBLING onder
   het uploadvak). Nu het datumveld BINNEN het uploadvak zelf zit, staat
   de enige nog geldende definitie verderop in dit bestand (zoek op
   "v9.15.5" hieronder), inclusief de daarvoor benodigde z-index-regels. */
.sva-op-required { color: #e5484d; }

/* FIX: de donkere achtergrondlaag lag over de popup-inhoud, waardoor de knop
   "Vraag versturen" onzichtbaar was en klikken de popup juist sloot. */
.sva-op-ask-modal .sva-op-doc-modal-backdrop,
.sva-op-modal-vorm .sva-op-doc-modal-backdrop { z-index: 1; }
.sva-op-ask-inner { z-index: 2; }

/* Mijn vragen */
.sva-op-vragen-card { margin-top: 22px; }
.sva-op-vraag-lijst { list-style: none; margin: 0; padding: 0; }
.sva-op-vraag { border: 1.5px solid #e4e7f4; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.sva-op-vraag-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sva-op-vraag-tekst { margin: 0; font-size: .9rem; line-height: 1.6; }
.sva-op-vraag-antwoord { margin-top: 12px; padding: 12px 14px; background: #f4f6ff; border-radius: 10px; border-left: 3px solid #5b6cf0; }
.sva-op-vraag-antwoord p { margin: 6px 0 0; font-size: .9rem; line-height: 1.6; }
.sva-op-doc-tag { background: #eef0f6; color: #667; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 3px 10px; margin-left: 8px; }

/* ============================================================
   FIX: de popups worden door JavaScript naar <body> verplaatst
   (nodig voor Avada). Daarbuiten bestonden de kleurvariabelen niet,
   waardoor "Vraag versturen" wit-op-wit onzichtbaar werd. De popups
   dragen hun kleuren nu zelf, met harde kleuren als extra vangnet.
   ============================================================ */
.sva-op-ask-modal .sva-op-ask-send,
.sva-op-ask-modal .sva-op-btn-primary,
.sva-op-modal-vorm .sva-op-btn-primary {
	background: #5b6cf0 !important;
	color: #ffffff !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center;
	border-radius: 10px;
	padding: 11px 22px;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	font-family: inherit;
	opacity: 1 !important;
	visibility: visible !important;
}
.sva-op-ask-modal .sva-op-ask-send:hover { background: #4453d6 !important; }
.sva-op-ask-modal .sva-op-ask-send[disabled] { opacity: .6 !important; cursor: not-allowed; }
.sva-op-ask-modal .sva-op-btn-ghost,
.sva-op-modal-vorm .sva-op-btn-ghost {
	background: transparent !important;
	color: #5a6178 !important;
	border: 1.5px solid #dfe2f0 !important;
	border-radius: 10px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	font-family: inherit;
}
.sva-op-ask-actions { display: flex !important; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Tabblad Vragen */
.sva-op-vragen-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sva-op-vragen-kop h2 { margin: 0 0 4px; }
.sva-op-vragen-kop p { margin: 0; }
.sva-op-nav-count-open { background: #e5484d !important; color: #fff; }
.sva-op-vragen-leeg { text-align: center; padding: 34px 20px; color: #8890ab; }
.sva-op-vragen-leeg .dashicons { font-size: 40px; width: 40px; height: 40px; color: #c8cde4; }
.sva-op-vragen-leeg p { margin: 8px 0 0; }
.sva-op-vraag-open { border-color: #f1ddb4; background: #fffdf7; }
.sva-op-vraag-wacht { margin: 10px 0 0; font-size: .82rem; font-style: italic; }

/* ============ v3.11: documentfilters, deadlines, versies ============ */
.sva-op-doc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.sva-op-doc-filter {
	background: #fff; border: 1.5px solid #dfe2f0; border-radius: 999px;
	padding: 8px 16px; font-size: .84rem; font-weight: 700; color: #3a4256;
	cursor: pointer; font-family: inherit; transition: all .12s ease;
}
.sva-op-doc-filter:hover { border-color: #b9c0ea; }
.sva-op-doc-filter.active { border-color: #5b6cf0; background: #f7f8ff; color: #3947c9; box-shadow: 0 0 0 3px rgba(91,108,240,.12); }
.sva-op-doc-group { margin-bottom: 22px; }
.sva-op-doc-group-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: #99a; margin: 0 0 8px; }
.sva-op-doc-traject { background: #eef0f6; color: #667; }
.sva-op-doc-vervallen { background: #fde3e1; color: #9d221b; }
.sva-op-oude-versies { margin-top: 18px; }
.sva-op-oude-versies summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: #778; }
.sva-op-oude-versies .sva-op-documents li { opacity: .75; }

.sva-op-deadline { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; border-radius: 10px; padding: 9px 13px; margin: 8px 0 0; }
.sva-op-deadline .dashicons { font-size: 16px; width: 16px; height: 16px; }
.sva-op-deadline-rood { background: #fde3e1; color: #9d221b; }
.sva-op-deadline-oranje { background: #fdf1de; color: #a15c00; }
.sva-op-deadline-grijs { background: #f1f2f9; color: #5a6178; }

.sva-op-signature-save { display: block; margin-top: 10px; font-size: .82rem; color: #5a6178; font-weight: 600; }
.sva-op-signature-reuse { font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════
   v4.0 — MODERNISERING
   Het portaal erfde de typografie van het thema (Avada), waardoor
   koppen enorm werden. Hieronder zetten we binnen het portaal een
   eigen, compacte en strakke stijl neer. Alles is afgeschermd met
   .sva-op-app / .sva-op-intake-wrapper zodat de rest van de site
   ongemoeid blijft.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 1. Typografie vastzetten (belangrijkste fix) ---------- */
.sva-op-app,
.sva-op-app *,
.sva-op-login-wrapper,
.sva-op-login-wrapper *,
.sva-op-intake-wrapper,
.sva-op-intake-wrapper * {
	line-height: 1.55;
	letter-spacing: normal;
}

.sva-op-app h1, .sva-op-login-wrapper h1, .sva-op-intake-wrapper h1 {
	font-size: 1.6rem !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
	margin: 0 0 4px !important;
	color: var(--sva-text) !important;
	text-transform: none !important;
}
.sva-op-app h2, .sva-op-login-wrapper h2, .sva-op-intake-wrapper h2 {
	font-size: 1.05rem !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	margin: 0 0 4px !important;
	color: var(--sva-text) !important;
	text-transform: none !important;
	letter-spacing: -.01em !important;
}
.sva-op-app h3, .sva-op-login-wrapper h3, .sva-op-intake-wrapper h3 {
	font-size: .95rem !important;
	line-height: 1.35 !important;
	font-weight: 800 !important;
	margin: 0 0 4px !important;
	color: var(--sva-text) !important;
	text-transform: none !important;
}
.sva-op-app h4, .sva-op-intake-wrapper h4 {
	font-size: .86rem !important;
	font-weight: 800 !important;
	margin: 0 0 4px !important;
}
.sva-op-app p, .sva-op-login-wrapper p, .sva-op-intake-wrapper p {
	font-size: .9rem;
	margin: 0 0 10px;
}
.sva-op-app p:last-child, .sva-op-intake-wrapper p:last-child { margin-bottom: 0; }
.sva-op-app label, .sva-op-intake-wrapper label { font-size: .84rem; }
.sva-op-app input, .sva-op-app select, .sva-op-app textarea,
.sva-op-intake-wrapper input, .sva-op-intake-wrapper select, .sva-op-intake-wrapper textarea {
	font-size: .92rem !important;
	font-family: inherit !important;
}
.sva-op-app button, .sva-op-intake-wrapper button { font-family: inherit; }
.sva-op-app .sva-op-muted { font-size: .84rem; }

/* ---------- 2. Compactere kaarten met kopregel ---------- */
.sva-op-form-card {
	background: var(--sva-card);
	border: 1px solid var(--sva-border);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(20,20,50,.04);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.sva-op-form-card:hover { box-shadow: 0 4px 16px rgba(20,20,50,.07); }
.sva-op-form-card > h2:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 14px !important;
	border-bottom: 1px solid var(--sva-border);
}
.sva-op-form-card > h2:first-child + .sva-op-muted { margin-top: -8px; }

/* ---------- 3. Topbalk compacter ---------- */
.sva-op-topbar { padding: 20px 24px 14px !important; }
.sva-op-topbar h1 { font-size: 1.5rem !important; }
.sva-op-main { padding: 0 24px 24px !important; }

/* ---------- 4. Zijbalk: accentstreep bij actief item ---------- */
.sva-op-nav-link {
	position: relative;
	font-size: .88rem !important;
	padding: 10px 14px !important;
	border-radius: 9px !important;
	transition: background .12s ease, color .12s ease;
}
.sva-op-nav-link.active::before {
	content: '';
	position: absolute;
	left: -10px; top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 60%;
	border-radius: 0 3px 3px 0;
	background: #fff;
}
.sva-op-nav-count { margin-left: auto; }

/* ---------- 5. Formulieren: 2 kolommen + nette focus ---------- */
.sva-op-profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 18px;
}
.sva-op-app input[type="text"],
.sva-op-app input[type="email"],
.sva-op-app input[type="tel"],
.sva-op-app input[type="password"],
.sva-op-app input[type="date"],
.sva-op-app select,
.sva-op-app textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--sva-border);
	border-radius: 9px;
	background: #fff;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.sva-op-app input:focus,
.sva-op-app select:focus,
.sva-op-app textarea:focus {
	border-color: var(--sva-primary) !important;
	box-shadow: 0 0 0 3px rgba(91,108,240,.12) !important;
	outline: none !important;
}
.sva-op-app .sva-op-btn,
.sva-op-app .sva-op-btn-primary { padding: 10px 18px; font-size: .88rem; border-radius: 9px; }

/* ---------- 6. Toast-melding rechtsonder ---------- */
.sva-op-toast {
	position: fixed;
	right: 24px; bottom: 24px;
	z-index: 2147483001;
	display: flex; align-items: center; gap: 10px;
	background: #1d2333; color: #fff;
	padding: 13px 18px; border-radius: 11px;
	font-size: .88rem; font-weight: 600;
	box-shadow: 0 12px 34px rgba(10,10,30,.28);
	opacity: 0; transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
	max-width: 340px;
}
.sva-op-toast.zichtbaar { opacity: 1; transform: translateY(0); }
.sva-op-toast-ok { background: #0d6a3f; }
.sva-op-toast-fout { background: #9d221b; }
.sva-op-toast .dashicons { font-size: 17px; width: 17px; height: 17px; }

/* ---------- 7. Zachte overgang bij tabwissel ---------- */
.sva-op-tab-panel { animation: svaOpFade .18s ease; }
@keyframes svaOpFade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* ---------- 8. Documenten als kaartjes ---------- */
.sva-op-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sva-op-documents li {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: 11px; padding: 11px 14px;
	transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.sva-op-documents li:hover {
	border-color: #c3c9ee;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(20,20,50,.07);
}
.sva-op-documents .sva-op-doc-open {
	display: flex; align-items: center; gap: 9px;
	background: none; border: none; padding: 0; cursor: pointer;
	font-size: .89rem; font-weight: 700; color: var(--sva-text);
	text-align: left; flex: 1; min-width: 0;
}
.sva-op-documents .sva-op-doc-open .dashicons {
	color: var(--sva-primary);
	background: #eef0fd;
	border-radius: 7px;
	padding: 5px;
	font-size: 16px; width: 16px; height: 16px;
	box-sizing: content-box;
	flex-shrink: 0;
}
.sva-op-documents .sva-op-doc-open:hover { color: var(--sva-primary); }
.sva-op-doc-date { font-size: .76rem; color: var(--sva-muted); margin-left: auto; }

/* ---------- 9. Stap-rijen strakker ---------- */
.sva-op-step-card { border-radius: 12px !important; }
.sva-op-step-card h3 { font-size: .95rem !important; }

/* ═══════════════════ Chat: gesprekken ═══════════════════ */
.sva-op-chat-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.sva-op-chat-lijst {
	background: var(--sva-card);
	border: 1px solid var(--sva-border);
	border-radius: 14px;
	overflow: hidden;
}
.sva-op-chat-lijst-kop {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-bottom: 1px solid var(--sva-border);
}
.sva-op-chat-lijst-kop h2 { margin: 0 !important; }
.sva-op-btn-icon {
	background: var(--sva-primary); border: none; border-radius: 8px;
	width: 30px; height: 30px; cursor: pointer; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .12s ease;
}
.sva-op-btn-icon:hover { background: var(--sva-primary-dark); }
.sva-op-btn-icon .dashicons { font-size: 16px; width: 16px; height: 16px; }

.sva-op-thread-lijst { list-style: none; margin: 0; padding: 6px; max-height: 520px; overflow-y: auto; }
.sva-op-thread {
	display: block; width: 100%; text-align: left; cursor: pointer;
	background: none; border: none; border-radius: 10px;
	padding: 11px 12px; transition: background .12s ease;
}
.sva-op-thread:hover { background: #f4f5fc; }
.sva-op-thread.active { background: #eef0fd; box-shadow: inset 3px 0 0 var(--sva-primary); }
.sva-op-thread-kop { display: flex; align-items: center; gap: 8px; }
.sva-op-thread-titel {
	font-weight: 800; font-size: .86rem; color: var(--sva-text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sva-op-thread-badge {
	margin-left: auto; background: #e5484d; color: #fff;
	border-radius: 999px; font-size: .68rem; font-weight: 800;
	padding: 1px 7px; flex-shrink: 0;
}
.sva-op-thread-traject {
	display: inline-block; font-size: .7rem; color: var(--sva-muted);
	background: #f1f2f9; border-radius: 999px; padding: 1px 8px; margin: 4px 0 2px;
}
.sva-op-thread-preview {
	display: block; font-size: .78rem; color: var(--sva-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sva-op-thread-tijd { display: block; font-size: .7rem; color: #a5aabd; margin-top: 3px; }

.sva-op-chat-venster {
	background: var(--sva-card);
	border: 1px solid var(--sva-border);
	border-radius: 14px;
	display: flex; flex-direction: column;
	min-height: 480px;
}
.sva-op-chat-kop {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; border-bottom: 1px solid var(--sva-border);
}
.sva-op-chat-kop h3 { margin: 0 !important; }
.sva-op-chat-sub { display: flex; align-items: center; gap: 8px; margin: 3px 0 0 !important; flex-wrap: wrap; }
.sva-op-chat-terug {
	display: none; background: none; border: none; cursor: pointer;
	color: var(--sva-muted); padding: 4px;
}

.sva-op-chat-berichten {
	flex: 1; padding: 18px; overflow-y: auto; max-height: 420px;
	display: flex; flex-direction: column; gap: 10px;
	background: linear-gradient(#fbfbfe, #fbfbfe);
}
.sva-op-chat-datum { text-align: center; margin: 6px 0; }
.sva-op-chat-datum span {
	background: #eceef8; color: #8890ab; border-radius: 999px;
	font-size: .7rem; font-weight: 700; padding: 3px 11px;
}
.sva-op-bubble-rij { display: flex; }
.sva-op-bubble-rij.van-mij { justify-content: flex-end; }
.sva-op-bubble {
	max-width: 78%; border-radius: 14px; padding: 10px 13px;
	background: #f1f2f9; color: var(--sva-text);
	box-shadow: 0 1px 2px rgba(20,20,50,.05);
}
.sva-op-bubble-rij.van-mij .sva-op-bubble {
	background: var(--sva-primary); color: #fff;
	border-bottom-right-radius: 5px;
}
.sva-op-bubble-rij.van-sva .sva-op-bubble { border-bottom-left-radius: 5px; }
.sva-op-bubble-tekst { font-size: .88rem; line-height: 1.55; word-break: break-word; }
.sva-op-bubble-meta { font-size: .68rem; opacity: .65; margin-top: 4px; }

.sva-op-chat-antwoord { padding: 12px 18px 14px; border-top: 1px solid var(--sva-border); }
.sva-op-chat-invoer { display: flex; gap: 8px; align-items: flex-end; }
.sva-op-chat-tekst {
	flex: 1; resize: none; min-height: 42px; max-height: 140px;
	border: 1.5px solid var(--sva-border) !important; border-radius: 10px !important;
	padding: 11px 13px !important; line-height: 1.4 !important;
}
.sva-op-chat-verzend {
	background: var(--sva-primary); border: none; border-radius: 10px;
	width: 42px; height: 42px; cursor: pointer; color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: background .12s ease;
}
.sva-op-chat-verzend:hover { background: var(--sva-primary-dark); }
.sva-op-chat-verzend[disabled] { opacity: .5; cursor: not-allowed; }
.sva-op-chat-hint { font-size: .74rem !important; color: var(--sva-muted); margin: 7px 0 0 !important; }
.sva-op-chat-leeg { text-align: center; padding: 34px 18px; color: var(--sva-muted); }
.sva-op-chat-leeg .dashicons { font-size: 34px; width: 34px; height: 34px; color: #c8cde4; }
.sva-op-chat-leeg p { margin: 8px 0 12px !important; font-size: .86rem; }

@media (max-width: 860px) {
	.sva-op-chat-layout { grid-template-columns: 1fr; }
	.sva-op-chat-terug { display: block; }
	.sva-op-chat-layout .sva-op-chat-venster { display: none; }
	.sva-op-chat-layout.gesprek-open .sva-op-chat-lijst { display: none; }
	.sva-op-chat-layout.gesprek-open .sva-op-chat-venster { display: flex; }
}

/* Profielvelden in 2 kolommen */
.sva-op-profile-veld { min-width: 0; }
.sva-op-veld-breed { grid-column: 1 / -1; }
.sva-op-profile-grid .sva-op-form-group { margin-bottom: 0; }
.sva-op-form-card > h2 .dashicons { color: var(--sva-primary); font-size: 17px; width: 17px; height: 17px; }

/* Intrekken & privacy */
.sva-op-sollicitatie-rij { display: flex; align-items: center; gap: 8px; }
.sva-op-sollicitatie-rij .sva-op-sollicitatie-item { flex: 1; }
.sva-op-sollicitatie-item.is-ingetrokken { opacity: .6; }
.sva-op-withdraw-btn { font-size: .78rem; padding: 7px 12px; flex-shrink: 0; }
.sva-op-privacy-acties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sva-op-privacy-kaart { border: 1px solid var(--sva-border); border-radius: 11px; padding: 14px 16px; background: #fbfbfe; }
.sva-op-privacy-kaart h4 { margin: 0 0 6px !important; }
.sva-op-privacy-kaart .sva-op-btn-ghost { margin-top: 8px; font-size: .8rem; }
.sva-op-consent {
	display: flex; align-items: flex-start; gap: 9px;
	background: #f7f8ff; border: 1.5px solid #dfe3fa; border-radius: 11px;
	padding: 12px 14px; margin: 4px 0 16px; font-size: .84rem; line-height: 1.5;
}
.sva-op-consent input { margin-top: 2px; flex-shrink: 0; }
.sva-op-withdraw-modal .sva-op-ask-inner textarea,
.sva-op-privacy-modal .sva-op-ask-inner textarea {
	width: 100%; border: 1.5px solid #d9dcec; border-radius: 10px; padding: 11px 13px; margin-top: 8px;
}

/* v4.4.1: aangeleverde documenten binnen de stap-kaart */
.sva-op-step-docs { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0f6; }
/*
 * v9.15.226: op verzoek - overgezet naar een echte, kolomsgewijze indeling
 * (Document / Geldigheid / Actie) i.p.v. losse, opeenvolgende regels. Elke
 * rij is een eigen CSS-grid met drie vaste kolommen; op mobiel (zie de
 * media query hieronder) stapelt elke rij gewoon verticaal.
 */
.sva-op-step-doc-groep { padding: 10px 0; }
.sva-op-step-doc-groep + .sva-op-step-doc-groep { border-top: 1px solid #edf0f6; }
.sva-op-step-doc-groep:first-child { padding-top: 0; }
.sva-op-step-docs-kop { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a93a6; margin: 0 0 6px; }
.sva-op-doc-tabel-kop {
	display: grid; grid-template-columns: minmax(0, 1fr) 150px 240px; gap: 10px;
	padding: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: #b0b4c2;
}
.sva-op-doc-tabel-rij {
	display: grid; grid-template-columns: minmax(0, 1fr) 150px 240px; gap: 10px;
	align-items: center; padding: 6px 0;
}
.sva-op-doc-tabel-naam { min-width: 0; }
/*
 * v9.15.227: BUGFIX op verzoek - de documentnaam oogde groter dan de
 * staptitel erboven ("Certificaten/Diplomas"). Oorzaak: button.sva-op-doc-open
 * elders in dit bestand gebruikt "font: inherit" met hogere specificiteit
 * (element + class), waardoor die wint van een simpele .sva-op-step-pdf-btn-
 * regel. Hier bewust dezelfde combinatie (element + class) gebruikt om
 * gegarandeerd te winnen.
 */
.sva-op-doc-tabel-naam button.sva-op-step-pdf-btn { font-size: .85rem; line-height: 1.35; }
.sva-op-doc-tabel-relatie { display: block; font-size: .78rem; color: #8a93a6; margin: 2px 0 0 22px; }
/*
 * v9.15.229: BUGFIX op verzoek - "center" leek logisch, maar badges met
 * ongelijke tekstlengte (bv. "Verloopt over 13d" vs "Geldig t/m
 * 01-12-2026") kregen daardoor toch een ander linker startpunt - centreren
 * lijnt het MIDDEN uit, niet de rand. Nu links uitgelijnd, met de badge
 * zelf op een vaste minimumbreedte (zie .sva-op-doc-tabel-geldigheid
 * .sva-op-expiry hieronder) - dat lijnt zowel de linker- als de
 * rechterrand van alle badges gelijk uit, ongeacht de tekstlengte.
 */
.sva-op-doc-tabel-geldigheid { justify-content: flex-start; text-align: left; }
.sva-op-doc-tabel-geldigheid .sva-op-expiry { margin-left: 0; min-width: 132px; text-align: center; box-sizing: border-box; }
.sva-op-doc-tabel-geldigheid, .sva-op-doc-tabel-actie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sva-op-doc-tabel-actie-tekst { font-size: .82rem; color: #8a93a6; font-style: italic; }
.sva-op-step-doc-datum { font-size: .8rem; color: #8a93a6; }
/*
 * v9.15.228/229: BUGFIX op verzoek - het kader gaf de rij een eigen
 * padding, waardoor de GRID-kolommen erin een net iets andere breedte
 * kregen dan de rijen erboven/eronder (geen horizontale marge/padding) -
 * de Geldigheid/Actie-kolommen kwamen daardoor net niet uit. Met
 * calc(1fr + 24px) compenseert kolom 1 exact de 12px+12px padding, zodat
 * kolom 2 en 3 op precies dezelfde plek beginnen als in de rijen erboven.
 */
/*
 * v9.15.231: BUGFIX op eigen rekenfout - v9.15.230 vergat de RAND (border:
 * 1px) van het kader mee te tellen in de compensatie; die eet net als
 * padding ruimte weg aan de rechterkant vóór kolom 2 begint. Juiste
 * compensatie = padding-rechts (12px) + rand-rechts (1px) = 13px.
 * Doorgerekend met concrete getallen (inclusief rand ditmaal) vóór
 * opleveren, zie de bijbehorende test.
 */
.sva-op-doc-tabel-subrij { margin: 8px 0 0 10px; padding: 10px 12px; border: 1px solid #c7cdfb; background: #f7f9ff; border-radius: 8px; grid-template-columns: minmax(0, calc(1fr + 13px)) 150px 240px; }
/*
 * v9.15.227: BUGFIX op verzoek - de knop "Nieuw document aanleveren" was te
 * hoog (tekst viel om naar 2 regels in de 220px-kolom). Kleinere tekst +
 * strakkere regelhoogte + niet meer omslaan lost dit op; de kolom is breed
 * genoeg voor deze specifieke tekst op één regel bij deze lettergrootte.
 */
.sva-op-doc-tabel-actie .sva-op-opvolger-knop { padding: 6px 10px !important; font-size: .74rem !important; line-height: 1.3 !important; white-space: nowrap; }
/*
 * v9.15.231: op verzoek - "Wacht op controle" moet even breed ogen als de
 * knop "Nieuw document aanleveren" ernaast/erboven. Beide krijgen dezelfde
 * vaste minimumbreedte + gecentreerde inhoud, zodat ze in de praktijk
 * gelijk breed ogen ongeacht hun (verschillende) teksten.
 */
.sva-op-doc-tabel-actie .sva-op-opvolger-knop,
.sva-op-doc-tabel-actie .sva-op-doc-tag { min-width: 190px; justify-content: center; box-sizing: border-box; }
.sva-op-doc-tabel-actie .sva-op-doc-tag { font-size: .74rem; padding: 6px 8px; display: inline-flex; align-items: center; gap: 4px; }
/*
 * De uitklap-knop "Nieuw document aanleveren" moet in de Actie-kolom
 * compact blijven zolang hij dicht is, maar het formulier erin (met
 * keuzerondjes, uploadvak, enz.) past niet in een smalle kolom - bij het
 * openen neemt hij daarom de volle breedte van de kaart in.
 */
/*
 * v9.15.226: BUGFIX in eigen ontwerp - de <details> zit genest in
 * .sva-op-doc-tabel-actie (een flex-container), niet rechtstreeks in de
 * grid-rij zelf - "grid-column" op het <details>-element alléén heeft dan
 * geen enkel effect (die eigenschap doet pas iets als het element een
 * DIRECT kind van de grid-container is). De omliggende flex-kolom moet
 * daarom zelf ook de volle breedte innemen zodra hij een geopende
 * <details> bevat.
 */
.sva-op-doc-tabel-actie:has(details[open]) { grid-column: 1 / -1; }
.sva-op-opvolger-blok[open] { margin-top: 8px; width: 100%; }

@media (max-width: 700px) {
	.sva-op-doc-tabel-kop { display: none; }
	.sva-op-doc-tabel-rij, .sva-op-doc-tabel-subrij { grid-template-columns: 1fr; gap: 2px; }
	.sva-op-doc-tabel-subrij { margin-left: 16px; }
}

/*
 * v9.15.38: was een gevulde grijze blok ONDER de dropzone; op verzoek nu
 * een compacte tekstregel VLAK BOVEN de dropzone (zie de 'file'-case in
 * class-sva-op-fields.php, render_field()) - zo weet je al vóórdat je
 * een nieuw bestand kiest precies wat er nu voor dit veld staat, in
 * plaats van dat pas na het uploadvak te zien. Groene vinkje + rustige
 * kleur geeft duidelijk "dit staat er al" aan, zonder als kader of
 * waarschuwing te ogen - het moet naast de andere veldlabels gewoon een
 * regel tekst blijven, geen apart blokje.
 */
.sva-op-veld-huidig-document {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
	margin: 0 0 6px; font-size: .76rem; color: #4a4d5e;
}
.sva-op-veld-huidig-label { display: inline-flex; align-items: center; gap: 4px; color: #2e7d4f; font-weight: 600; }
.sva-op-veld-huidig-label .dashicons { font-size: 15px; width: 15px; height: 15px; }
.sva-op-veld-huidig-document .sva-op-doc-open { font-size: inherit; padding: 0; font-weight: 600; }

/*
 * v9.15.54: de losse "Hergebruikt van [traject]"-weergave en de
 * bijbehorende blauwe bronvermelding per veld zijn vervallen - een
 * hergebruikt document/veld toont zich nu identiek aan een gewoon "Nu
 * geüpload"-document (zie class-sva-op-fields.php). De per-stap "alles
 * klaar"-banner uit 9.15.53 is om dezelfde reden ook vervallen - zie
 * render_hergebruik_info_signaal() in class-sva-op-portal.php voor de
 * ene, duidelijke melding die dit nu in plaats daarvan dekt.
 */

/* v4.5: opvolger klaarzetten */
.sva-op-doc-klaargezet { background: #e3ecfd; color: #2451b5; }
/*
 * v9.15.224: op verzoek - een lichte inspringing + een klein verbindend
 * randje links, zodat ook zónder de tekst te lezen meteen duidelijk is dat
 * deze regel bij het document erboven hoort (i.p.v. een losse, even
 * belangrijk ogende regel ernaast).
 */
.sva-op-opvolger-blok { margin: 2px 0 8px 26px; }
.sva-op-opvolger-blok > summary { cursor: pointer; color: #5b6cf0; font-size: .85rem; font-weight: 600; }
.sva-op-opvolger-form { background: #f7f8fc; border: 1px solid #e4e8f2; border-radius: 10px; padding: 12px 14px; margin-top: 8px; max-width: 420px; }
.sva-op-opvolger-form label { font-size: .85rem; font-weight: 600; color: #3c4356; }
.sva-op-opvolger-form input[type="date"], .sva-op-opvolger-form input[type="file"] { margin-top: 4px; }
.sva-op-veld-hint { font-size: .78rem; color: #8a93a6; font-weight: 400; }
.sva-op-klaargezet-blok { margin-top: 18px; padding: 14px 16px; background: #f3f7ff; border: 1px solid #dbe6fb; border-radius: 12px; }
.sva-op-doc-groep-titel { margin: 0 0 4px; font-size: 1rem; }
/*
 * v9.15.223/227: op verzoek - binnen de nieuwe documentkaart (zie
 * .sva-op-step-doc-groep hierboven) mag deze knop zelf kleiner/minder
 * dominant zijn dan de documentnaam erboven. De daadwerkelijke afmeting
 * staat nu bij ".sva-op-doc-tabel-actie .sva-op-opvolger-knop" hierboven
 * (specifieker, dus die wint) - hier alleen nog de margin-reset.
 */
.sva-op-step-doc-groep .sva-op-opvolger-blok { margin-left: 0; }
/*
 * v9.15.232: BUGFIX op verzoek - "max-width: 420px" op .sva-op-opvolger-form
 * (bedoeld voor de OUDE, smallere weergave) beperkte het formulier nog
 * steeds, ook al kreeg de omliggende kolom al de volle breedte (zie
 * ":has(details[open])" hierboven). Binnen de documenttabel-context, zodra
 * geopend, die beperking + de vaste marge loslaten.
 */
.sva-op-doc-tabel-actie .sva-op-opvolger-blok[open] { width: 100%; margin: 8px 0 0; }
.sva-op-doc-tabel-actie .sva-op-opvolger-blok[open] .sva-op-opvolger-form { max-width: none; }
/*
 * v9.15.232: op verzoek - de knop bleef staan boven het geopende
 * formulier, wat oogde als "twee keer dezelfde knop". Nu verdwijnt de knop
 * zelf zodra het formulier openstaat, en komt er in de rechterbovenhoek
 * van het grijze vlak een kruisje om het weer te sluiten (zie
 * sva-op-opvolger-sluiten in portal.js voor de klik-afhandeling).
 */
.sva-op-doc-tabel-actie .sva-op-opvolger-blok[open] > summary { display: none; }
.sva-op-opvolger-form { position: relative; }
.sva-op-opvolger-sluiten {
	position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;
	color: #8a93a6; font-size: 1.1rem; line-height: 1; padding: 4px; border-radius: 6px;
}
.sva-op-opvolger-sluiten:hover { background: #e7e9f2; color: #3c4356; }

/* v4.6: popup kan nooit buiten beeld vallen op kleine schermen */
.sva-op-ask-inner, .sva-op-doc-modal-inner { max-height: calc(100vh - 48px); overflow: auto; }

/* v4.6.1: opvolger-knop gepromoveerd; alleen zichtbaar als de stap dicht is */
.sva-op-opvolger-blok > summary.sva-op-opvolger-knop {
	display: inline-flex; align-items: center; gap: 6px; color: #fff;
	list-style: none; cursor: pointer;
}
.sva-op-opvolger-blok > summary.sva-op-opvolger-knop::-webkit-details-marker { display: none; }
.sva-op-opvolger-knop .dashicons { font-size: 16px; width: 16px; height: 16px; }
.sva-op-opvolger-urgent { background: #e08c1f !important; }
.sva-op-opvolger-urgent:hover { background: #c97a12 !important; }
.sva-op-opvolger-uitleg { display: block; margin: 8px 0 0; max-width: 420px; }

/* v4.7: inloggen in twee stappen */
.sva-op-twofa-input { font-size: 26px !important; letter-spacing: 10px; text-align: center; font-weight: 800; }
.sva-op-twofa-trust { display: flex; gap: 8px; align-items: center; font-size: .86rem; margin: 10px 0 14px; }
.sva-op-twofa-trust input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 0; }
.sva-op-twofa-resend { margin-top: 12px; }
/*
 * v9.15.97: BUGFIX - Avada's eigen thema-stijl voor <button> won het
 * hiervan zonder !important: de knop bleef fysiek op de juiste plek
 * staan (correcte breedte/hoogte, correcte tekst in de HTML), maar
 * kleur en onderstreping vielen weg - onzichtbaar, ook al werkte de
 * knop functioneel gewoon (klikbaar, deed het juiste). Precies
 * hetzelfde patroon als elders in dit bestand al is toegepast (bv.
 * h1/h2/h3 hierboven, .sva-op-actiekaart-knop verderop): Avada-stijl
 * voor knoppen/koppen is agressief genoeg om zonder !important te
 * winnen. Trof specifiek de knop "Geen code ontvangen? Nieuwe code
 * versturen" op het inlogscherm, en elke andere knop met deze klasse.
 */
.sva-op-linklike {
	background: none !important; border: none !important; color: var(--sva-primary, #5b6cf0) !important;
	cursor: pointer; padding: 0; font-size: .88rem; text-decoration: underline !important; width: auto;
}
.sva-op-linklike:hover { color: var(--sva-primary-dark, #4453d6) !important; }

/* v4.15: inlogcode-blokjes */
.sva-op-twofa-label { display: block; font-weight: 700; margin-bottom: 8px; }
.sva-op-twofa-boxes { display: flex; gap: 8px; justify-content: center; margin: 4px 0 14px; }
.sva-op-twofa-box {
	width: 46px; height: 56px; text-align: center; font-size: 26px; font-weight: 800;
	border: 2px solid var(--sva-border, #d9dfe8); border-radius: 10px; padding: 0;
}
.sva-op-twofa-box:focus { border-color: var(--sva-primary, #5b6cf0); outline: none; }
@media (max-width: 420px) { .sva-op-twofa-box { width: 40px; height: 50px; font-size: 22px; } }

/* v4.24: drop-zones frontend */
.sva-op-dropzone { position: relative; border: 2px dashed var(--sva-border, #d9dfe8); border-radius: 12px; background: #fafbff; transition: border-color .15s, background .15s; cursor: pointer; }
.sva-op-dropzone:hover { border-color: var(--sva-primary, #5b6cf0); background: #f4f6ff; }
.sva-op-dropzone.sleep-over { border-color: var(--sva-primary, #5b6cf0); background: #eef1ff; }
.sva-op-dropzone.heeft-bestand { border-style: solid; border-color: var(--sva-success, #17b26a); background: #f0fbf5; }
.sva-op-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sva-op-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; text-align: center; pointer-events: none; }
.sva-op-dropzone-icon { font-size: 28px; width: 28px; height: 28px; color: var(--sva-primary, #5b6cf0); }
.sva-op-dropzone-text { font-size: .9rem; color: var(--sva-muted, #797c93); }
.sva-op-dropzone-text strong { color: var(--sva-text, #23233a); }
.sva-op-dropzone-naam { font-size: .84rem; font-weight: 700; color: var(--sva-success, #17b26a); }
.sva-op-dropzone.heeft-bestand .sva-op-dropzone-icon { color: var(--sva-success, #17b26a); }

/*
 * v9.15.5: het einddatum-veld staat nu BINNEN het (groene) uploadvak,
 * als een eigen blauw vak - zo is bij meerdere documenten met een
 * einddatum op één pagina meteen zichtbaar welk datumveld bij welk
 * document hoort, zonder dat de volgorde op het scherm dat hoeft te
 * suggereren.
 *
 * position:relative + z-index is hier geen stijlkeuze maar noodzaak: de
 * onzichtbare bestandsinvoer (.sva-op-dropzone-input) ligt met
 * position:absolute; inset:0 over het HELE uploadvak heen, zodat een
 * klik overal in het vak de bestandskiezer opent. Zonder deze regels zou
 * die onzichtbare laag ook over dit datumveld heen liggen en elke klik
 * daarop de bestandskiezer openen in plaats van het veld te bereiken.
 */
.sva-op-expiry-field {
	position: relative;
	z-index: 2;
	margin: 0 16px 16px;
	padding: 12px 14px;
	background: #eef4ff;
	border: 1.5px solid #b9cdfa;
	border-radius: 10px;
	text-align: left;
	cursor: default;
}
.sva-op-expiry-label {
	display: block;
	font-size: .82rem;
	font-weight: 700;
	color: var(--sva-text, #23233a);
	margin-bottom: 6px;
}
.sva-op-expiry-input {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #fff;
}
.sva-op-expiry-field .sva-op-expiry-status {
	margin: 6px 0 0;
	color: var(--sva-muted, #797c93);
}

/* v4.25: nette file-selector-knop bij de handtekening-upload (portaal) */
.sva-op-signature-upload-label input[type="file"]::file-selector-button {
	font-family: inherit; border: 1px solid var(--sva-border, #d9dfe8); background: #fff;
	color: var(--sva-text, #23233a); border-radius: 8px; padding: 6px 12px;
	font-weight: 600; font-size: .82rem; cursor: pointer; margin-right: 10px;
}
.sva-op-signature-upload-label input[type="file"]::file-selector-button:hover {
	border-color: var(--sva-primary, #5b6cf0); color: var(--sva-primary, #5b6cf0);
}

/* Punt 3: ingevulde gegevens in een afgeronde stap */
.sva-op-ingevuld-blok { margin: 12px 0; padding: 14px 16px; background: #f7f8fc; border: 1px solid var(--sva-border, #e7e8f3); border-radius: 12px; }
/*
 * v9.15.139: op verzoek - dit blok is nu <details> i.p.v. een kale
 * <div>, dus de kop is een klikbare <summary> geworden (in-/uitklapbaar)
 * met een pijltje erbij, plus een uitleg-zin eronder waarom deze
 * gegevens hier staan.
 */
.sva-op-ingevuld-kop {
	font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
	color: var(--sva-muted, #797c93); margin: 0 0 10px;
}
/*
 * v9.15.408: op verzoek - "zodra alles klaar is, zie je geen tekst" -
 * slimme afrondmelding boven het ondertekende document (wanneer,
 * welke functie, door wie, welk documentnummer), zie
 * render_step_pdf_preview() in class-sva-op-portal.php. Zelfde groene
 * toon als de rest van een "afgerond"-status in het portaal.
 */
/*
 * v9.15.409: op verzoek - het groene vak (v9.15.408) paste niet bij de
 * rest van het portaal en voelde te nadrukkelijk. Nu gewone platte
 * tekst, dezelfde stijl als ".sva-op-ingevuld-kop" hierboven.
 */
.sva-op-ondertekend-melding { margin: 0 0 16px; }
.sva-op-ondertekend-tekst { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--sva-ink, #23233a); }
.sva-op-ondertekend-nummer { margin: 6px 0 0; font-size: .82rem; color: var(--sva-muted, #797c93); }
/*
 * v9.15.140: BUGFIX op verzoek - de pijl gebruikte een ander icoon/
 * draaigedrag dan elders in het portaal (bv. de stappenlijst op
 * Voortgang, ".sva-op-bord-pijl"). Nu hetzelfde dashicon
 * (dashicons-arrow-down-alt2) met dezelfde 180°-draai, voor een
 * consistente uitstraling.
 */
summary.sva-op-ingevuld-kop { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
summary.sva-op-ingevuld-kop::-webkit-details-marker { display: none; }
.sva-op-ingevuld-kop-pijl { color: var(--sva-muted, #9aa0b5); margin-left: auto; transition: transform .2s; }
.sva-op-ingevuld-blok[open] > summary.sva-op-ingevuld-kop .sva-op-ingevuld-kop-pijl { transform: rotate(180deg); }
.sva-op-ingevuld-uitleg { margin: 0 0 12px; font-size: .82rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--sva-muted, #797c93); }

/*
 * v9.15.142/143/144: op verzoek - inline PDF-voorbeeld van het concept-
 * document bij een ondertekenstap (vervangt "Gegevens uit voorgaande
 * stappen" wanneer er een documentsjabloon is - zie
 * render_vergrendelde_gegevens() in class-sva-op-portal.php). De
 * <iframe> is gewoon interactief (scrollen/zoomen kan); een klein
 * vierkant knopje in de hoek opent de bestaande, beveiligde
 * documentenpopup (.sva-op-doc-modal, zie portal.js) voor de volledige
 * weergave.
 *
 * v9.15.144: BUGFIX/verbetering op verzoek - de brede knop ONDER het
 * voorbeeld viel te veel op voor wat hier verder een rustige stap is;
 * vervangen door een klein, vierkant icoon-knopje IN de hoek van het
 * voorbeeld zelf (vandaar position:relative op de kaart hieronder).
 */
.sva-op-concept-preview { margin: 12px 0; }
.sva-op-concept-preview-kaart {
	position: relative;
	border: 1px solid var(--sva-border, #e7e8f3);
	border-radius: 12px;
	overflow: hidden;
	background: #f7f8fc;
	padding: 10px;
}
.sva-op-concept-preview-frame {
	display: block;
	width: 100%;
	height: 360px;
	border: 1px solid var(--sva-border, #e7e8f3);
	border-radius: 8px;
	background: #fff;
}
/*
 * v9.15.145: de post-ondertekenen variant (render_step_pdf_preview())
 * hergebruikt ".sva-op-doc-open" functioneel (bestaand document-ID,
 * bestaande popup-klikhandler) en krijgt zijn styling daarom via deze
 * context-selector, niet via ".sva-op-concept-preview-btn" zelf (die
 * blijft gereserveerd voor de losstaande preview-popup van vóór het
 * ondertekenen, met zijn eigen klikhandler in portal.js).
 */
.sva-op-concept-preview-btn,
.sva-op-concept-preview-kaart .sva-op-doc-open {
	position: absolute;
	top: 20px; right: 20px;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--sva-border, #e7e8f3);
	border-radius: 6px;
	color: var(--sva-muted, #797c93);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 1px 3px rgba(20,20,50,.1);
}
.sva-op-concept-preview-btn:hover,
.sva-op-concept-preview-kaart .sva-op-doc-open:hover { color: var(--sva-primary, #5b6cf0); border-color: var(--sva-primary, #5b6cf0); }
.sva-op-concept-preview-btn .dashicons,
.sva-op-concept-preview-kaart .sva-op-doc-open .dashicons { font-size: 17px; width: 17px; height: 17px; }
/*
 * v9.15.402: op verzoek - "op iPhone zie ik enkel de eerste pagina" -
 * op iOS toont een <iframe> met een PDF-bron geen interactieve
 * meerpagina-viewer, maar een statische afbeelding van uitsluitend
 * pagina 1. Vanaf hetzelfde 780px-breekpunt waar de iframe al kleiner
 * werd (v9.15.145, regel hieronder), wordt hij nu helemaal vervangen
 * door een directe link naar het PDF-bestand zelf - buiten de iframe
 * om, zodat Safari zijn eigen, volwaardige viewer gebruikt.
 */
/*
 * v9.15.402/403: op verzoek - "op iPhone zie ik enkel de eerste
 * pagina" - op iOS toont een <iframe> met een PDF-bron geen
 * interactieve meerpagina-viewer, maar een statische afbeelding van
 * uitsluitend pagina 1. Vanaf hetzelfde 780px-breekpunt waar de iframe
 * al kleiner werd (v9.15.145, regel hieronder), wordt hij nu
 * vervangen door een LIVE canvas-weergave (PDF.js, zie
 * portal-pdfjs.js) - alle pagina's, doorlopend scrollbaar, op elk
 * platform identiek. Een rechtstreekse link blijft als stille fallback
 * aanwezig voor als JavaScript om wat voor reden dan ook niet laadt.
 */
.sva-op-concept-preview-mobiel-link,
.sva-op-pdfjs-doel { display: none; }
@media (max-width: 780px) {
	.sva-op-concept-preview-frame { display: none; }
	/*
	 * v9.15.410: op verzoek - "voor de pijltjes hoeft dan niet meer,
	 * geen popup, want die heeft geen toegevoegde waarde" - nu het
	 * document zelf al kan pannen/scrollen bij het inzoomen (zie de
	 * pinch-zoom-bugfix in portal-pdfjs.js), voegt de aparte
	 * popup-weergave niets meer toe. Deze knop wordt sinds v9.15.407
	 * niet meer verplaatst naar de werkbalk, dus zonder deze regel zou
	 * hij weer los zwevend in de hoek verschijnen (zijn oorspronkelijke,
	 * voor-mobiel-bedoelde positionering, zie hierboven) - vandaar hier
	 * weer verborgen.
	 */
	.sva-op-concept-preview-btn,
	.sva-op-concept-preview-kaart .sva-op-doc-open { display: none; }
	.sva-op-pdfjs-doel {
		display: flex; flex-direction: column; width: 100%; max-height: 70vh;
		background: #d8dae8; border-radius: 8px; overflow: hidden;
	}
	/* Zodra het tekenen lukt (".sva-op-pdfjs-gevuld" op de kaart, zie
	   portal-pdfjs.js) is de fallback-link overbodig geworden. */
	.sva-op-pdfjs-gevuld .sva-op-pdfjs-fallback-link { display: none; }
	.sva-op-concept-preview-mobiel-link {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		background: var(--sva-primary, #5b6cf0); color: #fff;
		border-radius: 8px; padding: 14px 16px;
		font-weight: 700; font-size: .92rem; text-decoration: none;
		min-height: 120px;
	}
	.sva-op-concept-preview-mobiel-link .dashicons { font-size: 20px; width: 20px; height: 20px; }
	.sva-op-concept-preview-mobiel-link:hover { background: var(--sva-primary-dark, #4453d6); color: #fff; }
}
/*
 * v9.15.403: het canvas-blokje zelf - los van het 780px-breekpunt
 * hierboven, want ditzelfde blokje wordt ook binnen de grote
 * documentenpopup gebruikt (zie ".sva-op-doc-mobiel-pdf" verderop),
 * waar altijd dezelfde weergave gewenst is, ongeacht schermbreedte op
 * dat moment (de popup zelf toont sowieso alleen de mobiele variant).
 */
/*
 * v9.15.405: op verzoek - in-/uitzoomen en een downloadmogelijkheid
 * toegevoegd, nadat bevestigd was dat de live weergave zelf werkte.
 * Werkbalk boven de pagina's, blijft zichtbaar tijdens het scrollen
 * (position: sticky) zodat de knoppen altijd binnen handbereik zijn.
 */
/*
 * v9.15.406: op verzoek - de +/− zoomknoppen (v9.15.405) vervangen door
 * ECHT pinch-gedrag (twee vingers, zie svaOpPinchZoom() in
 * portal-pdfjs.js). Blijft zichtbaar tijdens het scrollen
 * (position: sticky).
 *
 * v9.15.410: op verzoek - de hint-tekst ("Knijp om in/uit te zoomen")
 * en de vergrootknop-in-de-werkbalk (v9.15.407) zijn hier weg - zie de
 * toelichting bij ".sva-op-concept-preview-btn" in de mobiele
 * mediaquery hierboven. Alleen nog Downloaden (linksboven) en de
 * paginateller.
 */
/*
 * v9.15.413: op verzoek - "kan het ook alle richtingen, schuin naar
 * beneden bijvoorbeeld?" - de vorige opzet verdeelde verticaal en
 * horizontaal scrollen over TWEE verschillende elementen (het
 * buitenste blok deed verticaal, dit binnenste deed horizontaal). Dat
 * werkte, maar niet vloeiend diagonaal: een vingerbeweging wordt door
 * de browser altijd aan ÉÉN scrollend element tegelijk toegewezen, dus
 * schuin bewegen werd als "eerst het een, dan het ander" ervaren i.p.v.
 * gelijktijdig. Nu draagt dit ENE element beide richtingen
 * ("overflow: auto" i.p.v. losse overflow-x/y over twee elementen) -
 * dat ondersteunt native, vloeiend diagonaal schuiven in elke richting.
 * De werkbalk hierboven hoeft niet meer "position: sticky" te zijn: nu
 * ALLEEN dit element scrollt (niet meer ".sva-op-pdfjs-doel" erboven),
 * staat de werkbalk als vaste flex-rij al vanzelf boven het scrollende
 * gebied, nooit overlapt door de inhoud.
 */
.sva-op-pdfjs-werkbalk {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none;
	background: #eceefa; border-bottom: 1px solid #d8dae8;
	padding: 8px 10px; border-radius: 8px 8px 0 0;
}
.sva-op-pdfjs-paginateller {
	margin-left: auto; font-size: .76rem; color: var(--sva-muted, #797c93);
}
.sva-op-pdfjs-downloadknop {
	display: flex; align-items: center; gap: 4px;
	background: var(--sva-primary, #5b6cf0); color: #fff; text-decoration: none;
	border-radius: 6px; padding: 0 10px; height: 30px; font-size: .78rem; font-weight: 700;
}
.sva-op-pdfjs-downloadknop .dashicons { font-size: 15px; width: 15px; height: 15px; }
/*
 * Zoomen kan pagina's breder dan het blokje maken - deze wrapper mag
 * dan horizontaal scrollen/pannen, los van de verticale scroll van het
 * hele blokje (.sva-op-pdfjs-doel / .sva-op-doc-mobiel-pdf hierboven).
 * "touch-action: none" laat de browser het tweevinger-gebaar met rust
 * volledig aan onze eigen svaOpPinchZoom()-handlers over (anders zou
 * iOS zelf ook nog willen scrollen/zoomen tijdens hetzelfde gebaar).
 */
/*
 * v9.15.412: KRITIEKE BUGFIX op verzoek ("kan niet naar rechts/links
 * scrollen") - "touch-action: pan-y" stond hier de browser expliciet
 * ALLEEN verticaal vegen toe - dat blokkeerde horizontaal scrollen dus
 * volledig, ook al is de pagina na de vorige fix (v9.15.411) terecht
 * breder dan het kadertje geworden. Nu "pan-x pan-y": beide richtingen
 * toegestaan voor gewoon (één vinger) vegen; het pinch-gebaar met twee
 * vingers wordt nog steeds apart onderschept door svaOpPinchZoom() in
 * portal-pdfjs.js (die roept e.preventDefault() aan, maar alleen als
 * e.touches.length === 2 - dat blijft dus ongemoeid).
 */
.sva-op-pdfjs-paginas {
	flex: 1; min-height: 0; overflow: auto; padding: 10px 0;
	touch-action: pan-x pan-y;
}
/*
 * v9.15.406: KRITIEKE BUGFIX op verzoek ("brak de pixels, niet
 * scherp") - "max-width: 100%" comprimeerde een ingezoomde canvas altijd
 * terug tot de containerbreedte, ongeacht hoe scherp er intern
 * gerenderd was (canvas.width, het echte pixel-aantal, was wél
 * correct - de op het scherm GETOONDE grootte werd alleen achteraf
 * platgedrukt door deze regel). Verwijderd: een ingezoomde pagina mag nu
 * daadwerkelijk breder zijn dan het blokje, met horizontaal scrollen.
 */
.sva-op-pdfjs-pagina {
	display: block; margin: 0 auto 10px; height: auto;
	box-shadow: 0 2px 8px rgba(20,20,50,.15); background: #fff;
}
.sva-op-pdfjs-pagina:last-child { margin-bottom: 0; }
/*
 * v9.15.411: KRITIEKE BUGFIX op verzoek ("nergens zie ik rechts/links
 * scroll, pagina past altijd aan het scherm aan") - grondig verder
 * uitgezocht, en de v9.15.406-fix bleek ONVOLDOENDE: er bestaat een
 * OUDERE, algemene regel verderop in dit bestand
 * (".sva-op-app img, .sva-op-app canvas, .sva-op-app iframe {
 * max-width: 100%; }", bedoeld om geüploade afbeeldingen/embeds
 * overal in de portal binnen hun kader te houden) die ELKE canvas in
 * de hele portal beperkt tot de containerbreedte - dus ook deze
 * PDF-pagina's. Die regel combineert een klasse- én een element-
 * selector (".sva-op-app" + "canvas"), en heeft daardoor een HOGERE
 * CSS-specificiteit dan de losse klasse ".sva-op-pdfjs-pagina" - hij
 * won dus altijd, ongeacht de volgorde van de regels in dit bestand.
 * Vandaar dat een ingezoomde pagina, ondanks de vorige fix, alsnog
 * stilzwijgend werd teruggeknepen naar schermbreedte - precies het
 * gerapporteerde gedrag (nooit horizontale scroll, pagina past altijd
 * aan het scherm aan). Deze regel overschrijft die algemene regel nu
 * expliciet, met voldoende specificiteit (twee klassen) om altijd te
 * winnen, ongeacht waar in het bestand ze staan.
 */
.sva-op-app .sva-op-pdfjs-pagina { max-width: none; }
.sva-op-pdfjs-laden {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 40px 16px; color: var(--sva-muted, #797c93); font-size: .88rem;
}
.sva-op-pdfjs-spin { animation: sva-op-pdfjs-draaien 1.1s linear infinite; }
@keyframes sva-op-pdfjs-draaien { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sva-op-pdfjs-fout { background: #fdeceb; }
/*
 * v9.15.402: dezelfde link, maar dan binnen de grote documentenpopup
 * (.sva-op-doc-modal, zie svaOpPdfPreviewHtml() in portal.js) i.p.v.
 * de kleine inline-kaart hierboven - iets meer ademruimte, want de
 * popup zelf is groter.
 */
/*
 * v9.15.402/403: dezelfde weergave, maar dan binnen de grote
 * documentenpopup (.sva-op-doc-modal, zie svaOpPdfPreviewHtml() in
 * portal.js) i.p.v. de kleine inline-kaart hierboven - hier altijd
 * getoond (de popup zelf is al de mobiele variant), dus niet
 * afhankelijk van het 780px-breekpunt.
 */
/*
 * v9.15.412: KRITIEKE BUGFIX op verzoek ("pop-up niet gecentreerd,
 * document heel klein na inzoomen") - deze wrapper verving de oude,
 * simpele <iframe class="sva-op-doc-frame"> in de popup, maar kreeg
 * niet dezelfde "width: 100%; flex: 1;" mee die die iframe wél had
 * (zie ".sva-op-doc-frame" hierboven). Zonder die regel krimpt deze
 * wrapper, als kind van de rij-flex ".sva-op-doc-modal-body", terug
 * tot zijn eigen (kleine) inhoud i.p.v. de popup te vullen - en komt
 * door de standaard flex-uitlijning linksboven te staan i.p.v.
 * gecentreerd. Dat verklaarde zowel het "niet gecentreerd" als het
 * "heel klein"-effect: de binnenkant (".sva-op-pdfjs-doel", flex:1)
 * probeerde te groeien binnen een buitenkant die zelf nooit meegroeide.
 */
.sva-op-doc-mobiel-pdf { display: flex; flex-direction: column; width: 100%; height: 100%; flex: 1; }
.sva-op-doc-mobiel-pdf .sva-op-pdfjs-doel {
	display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #d8dae8;
}
.sva-op-doc-mobiel-pdf .sva-op-concept-preview-mobiel-link {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--sva-primary, #5b6cf0); color: #fff;
	border-radius: 8px; padding: 14px 16px; margin: 24px;
	font-weight: 700; font-size: .92rem; text-decoration: none;
	min-height: 120px;
}
.sva-op-doc-mobiel-pdf.sva-op-pdfjs-gevuld .sva-op-pdfjs-fallback-link { display: none; }
.sva-op-ingevuld-lijst { margin: 0; }
.sva-op-ingevuld-rij { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sva-border, #eceef6); }
.sva-op-ingevuld-rij:last-child { border-bottom: 0; }
.sva-op-ingevuld-rij dt { flex: 0 0 38%; font-weight: 600; color: var(--sva-text, #23233a); margin: 0; font-size: .88rem; }
.sva-op-ingevuld-rij dd { flex: 1; margin: 0; color: var(--sva-text, #23233a); font-size: .88rem; }
.sva-op-wijzig-stap { margin-top: 12px; }

/* v4.27.1: vergrendelde keuzevelden (select/radio/checkbox) in inzage-modus */
.sva-op-readonly-lock { position: relative; }
.sva-op-readonly-lock select,
.sva-op-readonly-lock input[type="radio"],
.sva-op-readonly-lock input[type="checkbox"] {
	pointer-events: none; opacity: .7; background: #f3f4fa; cursor: not-allowed;
}
.sva-op-readonly-lock label { color: #667; }
.sva-op-ingevuld-velden .sva-op-form-group { margin-bottom: 10px; }
.sva-op-ingevuld-velden input, .sva-op-ingevuld-velden textarea, .sva-op-ingevuld-velden select { background: #f3f4fa !important; }

/* ============================================================
   v5.8: actiekaart, beheerweergave en mobiele verfijning
   ============================================================ */

/* --- Kaart met de stap die nu aan de beurt is --- */
.sva-op-actiekaart {
	background: linear-gradient(135deg, var(--sva-primary, #5b6cf0), var(--sva-primary-dark, #4756d6));
	color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px;
	box-shadow: 0 8px 26px rgba(60, 72, 200, .22);
}
.sva-op-actiekaart-label { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.sva-op-actiekaart-label .dashicons { font-size: 15px; width: 15px; height: 15px; }
.sva-op-actiekaart-titel { margin: 6px 0 2px; font-size: 1.15rem; color: #fff; }
.sva-op-actiekaart-stap { margin: 0 0 8px; font-weight: 600; opacity: .95; }
.sva-op-actiekaart-tekst { margin: 0 0 12px; font-size: .88rem; opacity: .92; }
.sva-op-actiekaart-knop {
	background: #fff !important; color: var(--sva-primary, #5b6cf0) !important;
	font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.sva-op-actiekaart-knop:hover { background: #f3f4ff !important; }
.sva-op-actiekaart-wacht { background: #eef1ff; color: var(--sva-text, #23233a); box-shadow: none; border: 1px solid #d5daff; }
.sva-op-actiekaart-wacht .sva-op-actiekaart-label { color: #3f4bc4; opacity: 1; }
.sva-op-actiekaart-wacht .sva-op-actiekaart-tekst { margin-bottom: 0; opacity: 1; }

/* Kort oplichten van de stap waar de knop naartoe springt. */
.sva-op-stap-gemarkeerd .sva-op-step-card { box-shadow: 0 0 0 3px rgba(91, 108, 240, .35); transition: box-shadow .3s; }

/* --- Beheerweergave (alles afgerond) --- */
.sva-op-klaarkaart { display: flex; gap: 10px; align-items: flex-start; background: #eefaf2; border: 1px solid #bfe6cf; border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; position: relative; }

/*
 * v9.15.7: sluitbare, puur informatieve meldingen (niet de echte
 * waarschuwingen - die missen deze klasse bewust, zie portal.js).
 */
.sva-op-dismissible { position: relative; padding-right: 38px; }
.sva-op-dismiss-btn {
	position: absolute; top: 8px; right: 8px;
	width: 24px; height: 24px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .05); border: none; border-radius: 50%;
	color: inherit; opacity: .6; cursor: pointer;
	transition: opacity .15s ease, background .15s ease;
}
.sva-op-dismiss-btn:hover { opacity: 1; background: rgba(0, 0, 0, .1); }
.sva-op-dismiss-btn .dashicons { font-size: 15px; width: 15px; height: 15px; }

/*
 * v9.15.22: blijft staan nadat een melding is verborgen - zodat die
 * niet spoorloos verdwijnt en desgewenst teruggehaald kan worden. Een
 * echte knop met een duidelijk label + actie-patroon (icoon + naam +
 * "Weer tonen"), met hetzelfde icoon en dezelfde kleur als de melding
 * waar hij bij hoort - i.p.v. een kale, onderstreepte tekstlink.
 */
/*
 * v9.15.30: gezamenlijke zone voor alle ingeklapte meldingen. Op een
 * brede weergave staan de streepjes naast elkaar (rij, met terugval naar
 * een nieuwe regel als ze niet meer passen); zie de mediaquery
 * hieronder voor de volle breedte + onder-elkaar op mobiel.
 */
.sva-op-melding-streepjes-zone {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
	margin-bottom: 10px;
}
.sva-op-melding-streepjes-zone:empty { display: none; margin-bottom: 0; }

.sva-op-melding-streepje {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1.5px solid transparent; border-radius: 10px;
	padding: 7px 8px 7px 12px; margin-bottom: 10px;
	font-size: .8rem; cursor: pointer;
	background: #fff; color: var(--sva-text, #23233a);
	box-shadow: 0 1px 2px rgba(20, 20, 50, .05);
	transition: box-shadow .15s ease, border-color .15s ease;
}
/* Binnen de gezamenlijke zone regelt de zone zelf de tussenruimte. */
.sva-op-melding-streepjes-zone .sva-op-melding-streepje { margin-bottom: 0; }
.sva-op-melding-streepje:hover { box-shadow: 0 3px 10px rgba(20, 20, 50, .1); }
.sva-op-melding-streepje .dashicons { font-size: 15px; width: 15px; height: 15px; flex: 0 0 auto; }
.sva-op-melding-streepje-tekst { font-weight: 600; }
.sva-op-melding-streepje-actie {
	font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 7px;
	color: #fff;
}
.sva-op-melding-streepje-rood { background: #fdeceb; border-color: #f5c9c5; color: #b3261e; }
.sva-op-melding-streepje-rood .sva-op-melding-streepje-actie { background: #b3261e; }
.sva-op-melding-streepje-oranje { background: #fff7ea; border-color: #f3ddb5; color: #a35b00; }
.sva-op-melding-streepje-oranje .sva-op-melding-streepje-actie { background: #a35b00; }
.sva-op-melding-streepje-blauw { background: #f2f5ff; border-color: #d5ddff; color: #3f4bc4; }
.sva-op-melding-streepje-blauw .sva-op-melding-streepje-actie { background: #3f4bc4; }
.sva-op-melding-streepje-groen { background: #eefaf2; border-color: #bfe6cf; color: #1f9d55; }
.sva-op-melding-streepje-groen .sva-op-melding-streepje-actie { background: #1f9d55; }
.sva-op-melding-streepje-rustig { background: #eef3fb; border-color: #cfe0f2; color: #1c5c8c; }
.sva-op-melding-streepje-rustig .sva-op-melding-streepje-actie { background: #1c5c8c; }
/*
 * v9.15.222: op verzoek - "donkerblauw" toegevoegd. Toevallig al bijna
 * dezelfde kleurwaarde als "rustig" hierboven (#1c5c8c) - dat verklaart
 * ook waarom de "Weer tonen"-knop bij "rustig" al donkerblauw oogde,
 * terwijl de openstaande banner zelf bij "rustig" juist een neutrale
 * tekstkleur toont (zie .sva-op-melding-rustig hieronder). Met een eigen,
 * losse "donkerblauw"-optie is dat nu voor beide consistent dezelfde kleur.
 */
.sva-op-melding-streepje-donkerblauw { background: #eef3fb; border-color: #c9dcee; color: #1c5c8c; }
.sva-op-melding-streepje-donkerblauw .sva-op-melding-streepje-actie { background: #1c5c8c; }

/*
 * v9.15.28: hoofdtitel + subtitel (.sva-op-melding-body) blijven ALTIJD
 * zichtbaar, ook tijdens het aftellen - die tekst wordt nooit meer
 * verborgen of overschreven. Alleen een klein, los getal naast het
 * kruisje telt zichtbaar af.
 */
.sva-op-verbergt.sva-op-dismissible { padding-right: 56px; }
.sva-op-melding-aftel {
	position: absolute; top: 8px; right: 36px;
	min-width: 18px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
	color: inherit; opacity: .65;
}

.sva-op-klaarkaart-icoon { color: #1f9d55; font-size: 18px; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.sva-op-klaarkaart h3 { margin: 0 0 2px; font-size: .9rem; }
.sva-op-klaarkaart p { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--sva-muted, #5c6070); }
.sva-op-geldigheid { background: #fff; border: 1px solid var(--sva-border, #e7e8f3); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.sva-op-geldigheid h4 { margin: 0 0 8px; font-size: .95rem; }
.sva-op-geldigheid-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--sva-border, #eceef6); }
.sva-op-geldigheid-rij:last-of-type { border-bottom: 0; }
.sva-op-geldigheid-naam { background: none; border: 0; padding: 0; color: var(--sva-primary, #5b6cf0); font-weight: 600; cursor: pointer; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.sva-op-geldigheid-datum { font-size: .8rem; padding: 2px 9px; border-radius: 20px; background: #eefaf2; color: #1f7a4c; white-space: nowrap; }
.sva-op-geldigheid-bijna .sva-op-geldigheid-datum { background: #fff5e6; color: #a35b00; }
.sva-op-geldigheid-verlopen .sva-op-geldigheid-datum { background: #fdeceb; color: #b3261e; }
.sva-op-beheer-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.sva-op-historie-kop { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sva-muted, #797c93); }
/* v9.9.6: klaarkaart staat weer boven de stappenlijst (zie portal.php);
   de v9.9.5-regel hieronder is daarmee overbodig en weggehaald. */
.sva-op-timeline-historie .sva-op-step-card { opacity: .92; }

/* --- Mobiele verfijning: voorkomen dat inhoud buiten beeld valt --- */
/* Lange e-mailadressen, bestandsnamen en URL's braken nergens af en duwden
   daardoor kaarten breder dan het scherm. */
.sva-op-app, .sva-op-intake-wrapper, .sva-op-login-wrapper { overflow-wrap: break-word; }
.sva-op-step-card, .sva-op-form-card, .sva-op-vraag, .sva-op-ingevuld-blok,
.sva-op-documents li, .sva-op-chat-bubble, .sva-op-geldigheid { min-width: 0; }
.sva-op-ingevuld-rij dd, .sva-op-step-doc-naam, .sva-op-doc-open,
.sva-op-geldigheid-naam, .sva-op-chat-bubble { overflow-wrap: anywhere; }
.sva-op-app img, .sva-op-app canvas, .sva-op-app iframe { max-width: 100%; }

@media (max-width: 640px) {
	/* Label boven waarde: op een telefoon is een vaste 38%-kolom te smal. */
	.sva-op-ingevuld-rij { flex-direction: column; gap: 2px; padding: 8px 0; }
	.sva-op-ingevuld-rij dt { flex: 1 1 auto; font-size: .78rem; color: var(--sva-muted, #797c93); }
	.sva-op-ingevuld-rij dd { font-size: .92rem; }

	.sva-op-actiekaart { padding: 16px; border-radius: 14px; }
	.sva-op-actiekaart-titel { font-size: 1.05rem; }
	.sva-op-beheer-acties .sva-op-btn { flex: 1 1 100%; justify-content: center; }
	.sva-op-klaarkaart { padding: 14px; }
	.sva-op-geldigheid-rij { padding: 10px 0; }

	/* Knoppen onder een stap over de volle breedte, comfortabel te raken. */
	.sva-op-step-card .sva-op-btn:not(.sva-op-btn-sm) { width: 100%; justify-content: center; }
	.sva-op-wijzig-stap .sva-op-btn { width: 100%; }
	.sva-op-address-group { max-width: none; }
	.sva-op-address-group input { flex: 1 1 100%; }
	.sva-op-address-group input.sva-op-w-small { flex: 1 1 46%; }
}

/* v5.8.1: doorlopen stappen als openklapbare borden */
.sva-op-borden { display: flex; flex-direction: column; gap: 10px; }
.sva-op-bord { background: #fff; border: 1px solid var(--sva-border, #e7e8f3); border-radius: 14px; overflow: hidden; transition: box-shadow .18s, border-color .18s; }
.sva-op-bord:hover { border-color: #cdd3f5; box-shadow: 0 4px 16px rgba(30, 34, 51, .07); }
.sva-op-bord[open] { box-shadow: 0 6px 22px rgba(30, 34, 51, .09); }
.sva-op-bord-kop { display: flex; align-items: center; gap: 9px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; }
.sva-op-bord-kop::-webkit-details-marker { display: none; }
.sva-op-bord-icoon { color: var(--sva-primary, #5b6cf0); flex: 0 0 auto; }
.sva-op-bord-titel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.sva-op-bord-pijl { color: var(--sva-muted, #9aa0b5); flex: 0 0 auto; transition: transform .2s; }
.sva-op-bord[open] .sva-op-bord-pijl { transform: rotate(180deg); }
.sva-op-stap-wijzigbaar-icoon {
	color: var(--sva-primary, #5b6cf0); flex: 0 0 auto; font-size: 16px;
	width: 16px; height: 16px; opacity: .75;
}
/* v9.8.17: neemt dezelfde plek in als het echte icoon, maar toont niets -
 * zo blijft de pijl (en het label) bij elke stap in dezelfde kolom staan,
 * ook als de ene stap wel en de andere geen wijzig-icoon heeft. */
.sva-op-stap-wijzigbaar-icoon-leeg { visibility: hidden; }
.sva-op-bord-body { padding: 0 16px 16px; border-top: 1px solid var(--sva-border, #f0f1f8); padding-top: 14px; }
.sva-op-bord .sva-op-badge { flex: 0 0 auto; }
.sva-op-geldigheid-link { font-size: .8rem; flex-basis: 100%; }
@media (max-width: 640px) {
	.sva-op-bord-kop { padding: 13px 14px; }
	.sva-op-bord-body { padding: 12px 14px 14px; }
}

/* ============================================================
   v5.10: rustige stappenweergave met duidelijke hiërarchie
   ============================================================ */
.sva-op-stappen { display: flex; flex-direction: column; gap: 12px; }

/* --- De stap die aan de beurt is: alle aandacht, zonder schreeuwen --- */
.sva-op-focus-kaart {
	background: #fff; border: 1px solid #dfe3fb; border-radius: 16px;
	box-shadow: 0 10px 30px rgba(60, 72, 200, .10);
	overflow: hidden; position: relative;
}
.sva-op-focus-kaart::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, var(--sva-primary, #5b6cf0), #8b97ff);
}
/*
 * v9.15.323: op verzoek - .sva-op-focus-kop toonde voorheen een los label
 * BOVEN de titel (twee regels, visueel losstaand). Nu een rij: nummer-
 * vakje (.sva-op-stapnr, hergebruikt van de afgeronde-stappenlijst
 * hieronder) + titel + statuslabel rechts uitgelijnd - dezelfde opzet als
 * .sva-op-bord-kop, voor visuele consistentie tussen een actieve en een
 * afgeronde stap.
 */
.sva-op-focus-kop { display: flex; align-items: center; gap: 10px; padding: 18px 22px 0 24px; }
.sva-op-focus-kop .sva-op-stapnr { width: 26px; height: 26px; font-size: .82rem; }
.sva-op-focus-titel { margin: 0; font-size: 1.28rem; line-height: 1.25; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; }
.sva-op-focus-kop .sva-op-statuslabel { flex: none; }
.sva-op-focus-body { padding: 4px 22px 20px 24px; }
.sva-op-focus-body .sva-op-step-description { margin: 8px 0 14px; color: var(--sva-muted, #5c6070); font-size: .92rem; }
.sva-op-focus-body .sva-op-btn-primary, .sva-op-focus-body button[type="submit"] { min-height: 46px; font-size: .96rem; }

/* --- Gewone open stap (als er meerdere tegelijk openstaan) --- */
.sva-op-stap-kaart { background: #fff; border: 1px solid var(--sva-border, #e7e8f3); border-radius: 14px; padding: 16px 18px; }
.sva-op-stap-body { margin-top: 4px; }

/* --- Toekomstige stap: één rustige regel --- */
.sva-op-toekomst-rij {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 16px; border-radius: 12px;
	background: #fafbfd; border: 1px dashed var(--sva-border, #e7e8f3);
	color: var(--sva-muted, #8b8fa3);
}
.sva-op-toekomst-rij .dashicons { font-size: 16px; width: 16px; height: 16px; flex: 0 0 auto; }
.sva-op-toekomst-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.sva-op-toekomst-hint { font-size: .76rem; white-space: nowrap; }

/* --- Voortgang: concreet in plaats van alleen een percentage --- */
.sva-op-voortgang-blok { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sva-op-voortgang-tekst { font-size: .82rem; font-weight: 600; color: var(--sva-muted, #5c6070); white-space: nowrap; }

/* --- Afgeronde stappen in actiemodus: borden onder elkaar --- */
.sva-op-stappen .sva-op-bord { border-radius: 12px; }
.sva-op-stappen .sva-op-bord-kop { padding: 12px 16px; }

@media (max-width: 640px) {
	.sva-op-focus-kop { padding: 15px 16px 0 18px; }
	.sva-op-focus-body { padding: 4px 16px 16px 18px; }
	.sva-op-focus-titel { font-size: 1.12rem; }
	.sva-op-voortgang-tekst { display: none; }
	.sva-op-toekomst-rij { padding: 11px 13px; }
}

/* v5.11: stapnummers, gelijk aan wat SVA in het dossier ziet */
.sva-op-stapnr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
	background: #eef1ff; color: #3f4bc4; font-size: .74rem; font-weight: 700;
}
.sva-op-stapnr-stil { background: #eef0f5; color: #8b8fa3; }
.sva-op-step-header .sva-op-stapnr { margin-right: 2px; }

/* v5.13: uitleg waarom een afgeronde stap weer openstaat */
.sva-op-heropen-melding {
	display: flex; gap: 10px; align-items: flex-start;
	background: #f2f5ff; border: 1px solid #d5ddff; border-radius: 12px;
	padding: 12px 14px; margin: 0 0 14px;
}
.sva-op-heropen-icoon { color: var(--sva-primary, #5b6cf0); flex: 0 0 auto; margin-top: 1px; }
.sva-op-heropen-melding strong { display: block; font-size: .92rem; margin-bottom: 2px; }
.sva-op-heropen-melding p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--sva-text, #23233a); }

/* ============================================================
   v5.14: instelbare statuslabels + mobiele stapregels
   ============================================================ */
.sva-op-statuslabel {
	display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
	padding: 4px 10px; border-radius: 20px;
	font-size: .74rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.sva-op-statuslabel .dashicons { font-size: 14px; width: 14px; height: 14px; }
.sva-op-statuslabel-kort { display: none; }

/* Kleuren, instelbaar per status in de backend */
.sva-op-statuslabel-groen  { background: #e8f6ee; color: #1f7a4c; }
.sva-op-statuslabel-blauw  { background: #eef1ff; color: #3f4bc4; }
/*
 * v9.15.218: dezelfde kleur als .sva-op-melding-streepje-rustig hierboven
 * (#1c5c8c) - de donkerdere marineblauw die al bij de Welkomstmelding
 * wordt gebruikt, nu ook beschikbaar als statuslabel-kleur.
 */
.sva-op-statuslabel-donkerblauw { background: #eef3fb; color: #1c5c8c; }
.sva-op-statuslabel-oranje { background: #fff5e6; color: #a35b00; }
.sva-op-statuslabel-rood   { background: #fdeceb; color: #b3261e; }
.sva-op-statuslabel-grijs  { background: #f0f1f5; color: #6b6e85; }

/*
 * v9.15.234: op verzoek - twee losse instellingen (desktop/mobiel) i.p.v.
 * één gecombineerde. "Afgerond" = alleen het vinkje op een groot scherm;
 * het woord voegt daar niets toe. Van toepassing zolang de admin voor DIT
 * label bewust "Alleen pictogram" koos bij "Weergave (groot scherm)".
 */
.sva-op-statuslabel-klaar-desktop { padding: 5px; border-radius: 50%; }
.sva-op-statuslabel-klaar-desktop .sva-op-statuslabel-tekst { display: none; }

/* Titelregel van een stap: titel krijgt de ruimte, pijl blijft op zijn plek.
 * Zes kolommen (niet vijf): stapnr, titel, "vervalt binnenkort"-label
 * (v9.15.213, moet VOOR het statuslabel staan), statuslabel, optioneel
 * wijzig-icoon, pijl. Zonder precies dit aantal kolommen valt een element
 * buiten het grid en wordt de pijl naar een eigen regel eronder geduwd -
 * dat gebeurde al eerder bij het wijzig-icoon, en weer bij het nieuwe label. */
.sva-op-bord-kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: 10px; align-items: center; }
.sva-op-bord-titel { font-size: .95rem; }

@media (max-width: 700px) {
	/* Label naar een eigen regel onder de titel: geen afgekapte teksten meer. */
	.sva-op-bord-kop { grid-template-columns: auto minmax(0, 1fr) auto auto auto; row-gap: 4px; padding: 12px 14px; }
	/*
	 * v9.15.233: BUGFIX op verzoek - "Certificaten/Diplomas" en
	 * "Persoonlijke gegevens" sprongen op mobiel naar 2 regels doordat de
	 * tekst even groot bleef als op desktop, terwijl er op een smal scherm
	 * veel minder breedte beschikbaar is naast het stapnummer, het
	 * statuslabel en de pijl. Iets kleiner (nog steeds ruim leesbaar,
	 * vergelijkbaar met normale broodtekst op een telefoon) lost dit in de
	 * meeste gevallen op.
	 */
	.sva-op-bord-titel { font-size: .88rem; }
	.sva-op-statuslabel.sva-op-vervalt-label { grid-row: 2; grid-column: 2 / 3; justify-self: start; margin-left: 0; }
	.sva-op-statuslabel:not(.sva-op-vervalt-label) { grid-row: 1; grid-column: 3; justify-self: end; }
	.sva-op-stap-wijzigbaar-icoon { grid-row: 1; grid-column: 4; }
	/*
	 * v9.15.236: op verzoek - op mobiel is de ruimte schaars, en klikken op
	 * een afgeronde stap laat toch vanzelf zien of er iets te wijzigen
	 * valt. Alleen op mobiel weg, desktop blijft ongewijzigd (daar is wél
	 * genoeg ruimte en geeft het icoon nog steeds nuttig, vooraf, aan
	 * welke afgeronde stappen nog bewerkbaar zijn).
	 */
	.sva-op-stap-wijzigbaar-icoon { display: none !important; }
	.sva-op-bord-pijl { grid-row: 1; grid-column: 5; }
	/*
	 * v9.15.234: op mobiel telt nu de APARTE "Weergave (mobiel)"-instelling,
	 * los van de desktop-instelling hierboven. Standaard (geen van beide
	 * gekozen): korte tekst tonen, net als voorheen.
	 */
	.sva-op-statuslabel-klaar-mobiel { padding: 4px 10px; border-radius: 20px; }
	.sva-op-statuslabel-tekst { display: none; }
	.sva-op-statuslabel-kort { display: inline; }
	.sva-op-statuslabel-klaar-mobiel .sva-op-statuslabel-kort { display: none; }

	.sva-op-step-header { flex-wrap: wrap; row-gap: 4px; }
	.sva-op-step-title { flex: 1 1 100%; order: 2; }
	.sva-op-step-header .sva-op-statuslabel { order: 3; }
}

/* v5.16: inlogscherm */
.sva-op-auth-form-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sva-border, #e7e8f3); }
.sva-op-auth-form-alt label { font-size: .86rem; color: var(--sva-muted, #5c6070); }
.sva-op-login-uitleg { margin-top: 12px; font-size: .84rem; line-height: 1.5; }
.sva-op-resend-btn[disabled] { opacity: .6; cursor: default; }

/* v5.17: inlogscherm met keuze */
.sva-op-auth-form .sva-op-btn + .sva-op-btn { margin-top: 8px; }
.sva-op-linklike-klein { font-size: .82rem; color: var(--sva-muted, #6b6e85); }
.sva-op-ww-veld[hidden] { display: none; }

/* v5.18: melding bij de knop + zichtbare doorverwijzing */
.sva-op-form-card .sva-op-form-message { margin-top: 12px; margin-bottom: 0; }
.sva-op-doorstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .86rem; }
.sva-op-doorstuur .sva-op-btn { padding: 6px 14px; font-size: .82rem; }



/* ============================================================
   v5.20: tabblad Documenten — statusstrip en één rijontwerp
   ============================================================ */
.sva-op-doc-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.sva-op-doc-strip-item {
	display: inline-flex; align-items: center; gap: 5px;
	background: #f2f4f9; color: var(--sva-ink-soft, #4a4f66);
	border: 1px solid transparent; border-radius: 20px;
	padding: 5px 12px; font-size: .8rem; line-height: 1.3;
}
button.sva-op-doc-strip-item { cursor: pointer; }
button.sva-op-doc-strip-item:hover { border-color: currentColor; }
.sva-op-doc-strip-item .dashicons { font-size: 14px; width: 14px; height: 14px; }
.sva-op-doc-strip-oranje { background: #fff5e6; color: #a35b00; }
.sva-op-doc-strip-rood { background: #fdeceb; color: #b3261e; }
.sva-op-doc-strip-blauw { background: #eef1ff; color: #3f4bc4; }
.sva-op-doc-strip-reset { background: none; border: 0; text-decoration: underline; cursor: pointer; font-size: .8rem; color: var(--sva-muted, #6b6e85); }

/* Documentrij: icoon met statusbolletje, naam, metaregel, knoppen rechts. */
.sva-op-documents { list-style: none; margin: 0; padding: 0; }
.sva-op-doc-item {
	display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px;
	align-items: center; padding: 12px 4px;
	border-bottom: 1px solid var(--sva-border, #f0f1f8);
}
.sva-op-doc-item:last-child { border-bottom: 0; }
.sva-op-doc-icoon { position: relative; display: inline-flex; color: #9aa0b5; }
.sva-op-doc-icoon .dashicons { font-size: 24px; width: 24px; height: 24px; }
.sva-op-doc-stip { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.sva-op-doc-stip-geldig { background: #1f9d55; }
.sva-op-doc-stip-bijna { background: #e0912f; }
.sva-op-doc-stip-verlopen { background: #d1453b; }
.sva-op-doc-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sva-op-doc-naam { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.sva-op-doc-meta { font-size: .78rem; color: var(--sva-muted, #8b8fa3); overflow-wrap: anywhere; }
.sva-op-doc-tijd { font-size: .74rem; font-weight: 700; white-space: nowrap; padding: 3px 10px; border-radius: 20px; }
.sva-op-doc-tijd-geldig { background: #e8f6ee; color: #1f7a4c; }
.sva-op-doc-tijd-bijna { background: #fff5e6; color: #a35b00; }
.sva-op-doc-tijd-verlopen { background: #fdeceb; color: #b3261e; }
.sva-op-doc-knoppen { display: flex; gap: 6px; justify-self: end; }
.sva-op-doc-knoppen .sva-op-btn { padding: 5px 12px; font-size: .8rem; }

/* Klaargezette versies: blauw accent, want die liggen bij SVA. */
.sva-op-klaargezet-blok { margin-top: 20px; padding: 14px 16px; background: #f4f6ff; border: 1px solid #d9e0ff; border-radius: 14px; }
.sva-op-klaargezet-blok h3 { margin: 0 0 4px; font-size: .95rem; color: #3f4bc4; }

/* Signaalregel op de voortgangspagina. */
.sva-op-doc-signaal {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 18px; padding: 12px 16px; border-radius: 12px;
	font-size: .88rem; font-weight: 600;
}
.sva-op-doc-signaal-oranje { background: #fff7ea; border: 1px solid #f3ddb5; color: #a35b00; }
.sva-op-doc-signaal-rood { background: #fdeceb; border: 1px solid #f5c9c5; color: #b3261e; }
.sva-op-doc-signaal-tekst { flex: 1 1 auto; min-width: 0; }
.sva-op-doc-signaal .sva-op-btn { background: #fff; border: 1px solid currentColor; color: inherit; }

@media (max-width: 780px) {
	.sva-op-doc-item { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; padding: 14px 0; }
	.sva-op-doc-tijd { grid-column: 2 / 3; justify-self: start; }
	.sva-op-doc-knoppen { grid-column: 1 / -1; }
	.sva-op-doc-knoppen .sva-op-btn { flex: 1 1 auto; justify-content: center; }
	.sva-op-doc-signaal .sva-op-btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   v5.21.2: de documentenlijst kende nog opmaak uit een eerdere
   versie (rij als flexbox, naam-als-knop met flex:1). Die won het
   van het nieuwe ontwerp, waardoor de naam midden in de rij zweefde
   en "Bekijken" als platte tekst verscheen. Deze regels zetten het
   nieuwe ontwerp definitief bovenaan.
   ------------------------------------------------------------ */
.sva-op-documents { display: block; gap: 0; }
.sva-op-documents li.sva-op-doc-item {
	display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto;
	gap: 12px; align-items: center; flex-wrap: nowrap;
	background: #fff; border: 1px solid var(--sva-border, #e7e8f3);
	border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.sva-op-documents li.sva-op-doc-item:hover { border-color: #cdd3f5; transform: none; box-shadow: 0 3px 12px rgba(30,34,51,.06); }

/* De naam is geen knop meer, maar tekst; het icoon staat los ervoor. */
.sva-op-doc-item .sva-op-doc-icoon .dashicons {
	color: #9aa0b5; background: none; padding: 0;
	font-size: 24px; width: 24px; height: 24px; box-sizing: content-box;
}
.sva-op-doc-item .sva-op-doc-tekst { flex: 0 1 auto; }

/* "Bekijken" is een echte knop, geen tekstlink. */
.sva-op-documents li.sva-op-doc-item .sva-op-doc-open {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; padding: 5px 12px; border-radius: 8px;
	border: 1px solid var(--sva-border, #e7e8f3); background: #fff;
	font-size: .8rem; font-weight: 600; color: var(--sva-ink-soft, #4a4f66);
}
.sva-op-documents li.sva-op-doc-item .sva-op-doc-open:hover {
	border-color: var(--sva-primary, #5b6cf0); color: var(--sva-primary, #5b6cf0); background: #f7f8ff;
}

@media (max-width: 780px) {
	.sva-op-documents li.sva-op-doc-item { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
	.sva-op-doc-item .sva-op-doc-tijd { grid-column: 2 / 3; justify-self: start; }
	.sva-op-doc-item .sva-op-doc-knoppen { grid-column: 1 / -1; }
	.sva-op-documents li.sva-op-doc-item .sva-op-doc-open,
	.sva-op-doc-item .sva-op-doc-knoppen .sva-op-btn { flex: 1 1 auto; }
}
/* Klaargezette versies gebruiken nog de oorspronkelijke rijvorm; die houdt
   zijn eigen tussenruimte nu de container geen raster meer is. */
.sva-op-documents li:not(.sva-op-doc-item) + li:not(.sva-op-doc-item) { margin-top: 8px; }

/* v5.22: "nieuwe versie alvast aanleveren" krijgt dezelfde vorm als het
   gewone uploadveld, inclusief datumvelden op volle breedte. */
.sva-op-opvolger-label { display: block; font-weight: 600; font-size: .86rem; margin: 12px 0 5px; }
.sva-op-opvolger-datum { width: 100%; max-width: 260px; }
.sva-op-opvolger-form .sva-op-dropzone { margin-bottom: 4px; }
.sva-op-opvolger-form .sva-op-help-inline { margin: 4px 0 0; }

/* v5.22: documenticoon toont het bestandstype — herkenbaarder dan een leeg vel */
.sva-op-documents li.sva-op-doc-item { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.sva-op-doc-item .sva-op-doc-icoon {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 44px; border-radius: 7px 7px 7px 3px;
	background: #eef0f6; color: #6b7189;
	font-size: .58rem; font-weight: 800; letter-spacing: .04em;
	box-shadow: inset -6px 6px 0 -5px rgba(0,0,0,.10);
}
.sva-op-doc-item .sva-op-doc-icoon::after {
	content: ''; position: absolute; top: 0; right: 0;
	border-width: 0 9px 9px 0; border-style: solid;
	border-color: transparent #fff transparent transparent;
}
.sva-op-doc-icoon-pdf { background: #fdecec; color: #c0392b; }
.sva-op-doc-icoon-beeld { background: #eaf4fd; color: #1c6ea4; }
.sva-op-doc-icoon-tekst { background: #eef1ff; color: #3f4bc4; }
.sva-op-doc-ext { position: relative; z-index: 1; }
.sva-op-doc-item .sva-op-doc-stip { right: -3px; bottom: -3px; width: 12px; height: 12px; border: 2px solid #fff; }

@media (max-width: 780px) {
	.sva-op-documents li.sva-op-doc-item { grid-template-columns: 42px minmax(0, 1fr); }
}

/* v5.22: documenticoon toont het bestandstype — herkenbaarder dan een leeg vel */
.sva-op-documents li.sva-op-doc-item { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.sva-op-doc-item .sva-op-doc-icoon {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 42px; border-radius: 6px 6px 6px 3px;
	background: #eef0f6; color: #6b7189;
	font-size: .56rem; font-weight: 800; letter-spacing: .03em;
}
.sva-op-doc-icoon-pdf { background: #fdecec; color: #c0392b; }
.sva-op-doc-icoon-beeld { background: #eaf4fd; color: #1c6ea4; }
.sva-op-doc-icoon-tekst { background: #eef1ff; color: #3f4bc4; }
.sva-op-doc-icoon-overig { background: #eef0f6; color: #6b7189; }
.sva-op-doc-ext { position: relative; z-index: 1; }
.sva-op-doc-item .sva-op-doc-stip { right: -3px; bottom: -3px; width: 12px; height: 12px; border: 2px solid #fff; }

@media (max-width: 780px) {
	.sva-op-documents li.sva-op-doc-item { grid-template-columns: 42px minmax(0, 1fr); }
}

/* ============================================================
   v5.22: mobiel — de beschikbare breedte echt benutten
   Op een telefoon ging veel ruimte verloren aan marges van de pagina,
   de app-container en de kaarten samen. Die stapelden op elkaar,
   waardoor de inhoud in een smalle kolom in het midden bleef hangen.
   ============================================================ */
@media (max-width: 780px) {
	/* De app mag van rand tot rand; de themapagina houdt vaak zelf al marge. */
	.sva-op-app { border-radius: 12px; }
	.sva-op-topbar { padding: 16px 14px 10px !important; }
	.sva-op-main { padding: 0 12px 20px !important; }

	/* Kaarten en panelen: minder binnenruimte, meer inhoud. */
	.sva-op-step-card, .sva-op-form-card, .sva-op-focus-kaart,
	.sva-op-klaarkaart, .sva-op-geldigheid-kaart, .sva-op-vraag {
		padding-left: 14px; padding-right: 14px;
	}
	.sva-op-focus-kop { padding-left: 14px; padding-right: 14px; }
	.sva-op-focus-body { padding-left: 14px; padding-right: 14px; }
	.sva-op-bord-kop, .sva-op-bord-body { padding-left: 12px; padding-right: 12px; }
	.sva-op-documents li.sva-op-doc-item { padding-left: 10px; padding-right: 10px; }

	/* Invoervelden en het tekenveld over de volle breedte. */
	.sva-op-form-card input[type="text"], .sva-op-form-card input[type="email"],
	.sva-op-form-card input[type="tel"], .sva-op-form-card input[type="date"],
	.sva-op-form-card input[type="number"], .sva-op-form-card select,
	.sva-op-form-card textarea, .sva-op-signature-wrap, .sva-op-opvolger-datum {
		width: 100% !important; max-width: none !important;
	}
	.sva-op-ingevuld-blok { padding: 12px 14px; }
}

@media (max-width: 480px) {
	.sva-op-app { border-radius: 0; margin-left: -8px; margin-right: -8px; }
	.sva-op-main { padding: 0 10px 18px !important; }
	.sva-op-topbar { padding: 14px 10px 8px !important; }
	.sva-op-step-card, .sva-op-form-card, .sva-op-focus-kaart,
	.sva-op-klaarkaart, .sva-op-geldigheid-kaart, .sva-op-vraag {
		padding-left: 12px; padding-right: 12px; border-radius: 12px;
	}
}

/* v5.22.1: het documentsignaal compacter en met lucht naar de melding eronder.
   Zelfde tekstgrootte als de "In behandeling"-melding, kleinere knop. */
.sva-op-doc-signaal {
	margin-top: 0; margin-bottom: 12px;
	padding: 10px 14px; gap: 8px;
	font-size: .84rem; font-weight: 500; line-height: 1.45;
}
.sva-op-doc-signaal .dashicons { font-size: 16px; width: 16px; height: 16px; }
.sva-op-doc-signaal-tekst { font-weight: 600; }
.sva-op-doc-signaal .sva-op-btn {
	padding: 5px 12px; font-size: .78rem; font-weight: 600; line-height: 1.3;
	flex: 0 0 auto;
}
/* Ook de wachtmelding en de klaarkaart iets meer lucht eronder. */
.sva-op-actiekaart-wacht, .sva-op-klaarkaart { margin-bottom: 14px; }

@media (max-width: 640px) {
	.sva-op-doc-signaal { padding: 10px 12px; font-size: .82rem; }
	.sva-op-doc-signaal .sva-op-btn { flex: 1 1 100%; justify-content: center; margin-top: 2px; }
}

/* v5.22.2: document met een klaargezette nieuwe versie — wacht op SVA */
.sva-op-doc-stip-wacht { background: #3f4bc4; }
.sva-op-doc-tijd-wacht { background: #eef1ff; color: #3f4bc4; }

/* ============================================================
   v5.23: één meldingszone boven de stappen — alle meldingen in
   dezelfde vorm: pictogram, titel, uitleg, en waar nodig één knop.
   ============================================================ */
.sva-op-melding {
	display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
	padding: 11px 14px; border-radius: 12px; margin-bottom: 10px;
	border: 1px solid transparent;
}
.sva-op-melding:last-of-type { margin-bottom: 14px; }
.sva-op-melding-icoon { flex: 0 0 auto; font-size: 17px; width: 17px; height: 17px; margin-top: 1px; }
.sva-op-melding-tekst { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* v9.9.5: font-weight expliciet, want het thema vlakt <strong> af tot bijna
   dezelfde weging als de regel eronder. .sva-op-melding-titel is dezelfde
   vorm in kopelement, zodat een melding als "Nieuwe dienst beschikbaar"
   net zo leest als "Onboarding afgerond". */
.sva-op-melding-tekst strong,
.sva-op-melding .sva-op-melding-titel { font-size: .9rem; line-height: 1.35; font-weight: 700; }
.sva-op-melding .sva-op-melding-titel { margin: 0; padding: 0; color: inherit; }
.sva-op-melding-tekst span { font-size: .83rem; line-height: 1.5; opacity: .92; }
/*
 * v9.15.376: op verzoek - "in de oranje notificatie moet een knop komen
 * ... zoals wij dat in de backend bij dossier hebben van de ZZP'er" -
 * een opsomming van de betreffende diensten binnen de melding, elk met
 * een eigen "Nu ondertekenen"-knop.
 */
.sva-op-melding-dienstlijst {
	list-style: none; margin: 6px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.sva-op-melding-dienstlijst li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: rgba(255, 255, 255, .55); border-radius: 8px; padding: 6px 8px 6px 10px;
}
.sva-op-melding-dienstlijst-naam { font-size: .83rem; font-weight: 600; opacity: 1; }
.sva-op-melding-dienstlijst .sva-op-btn-sm { flex: none; }
.sva-op-melding .sva-op-btn {
	flex: 0 0 auto; align-self: center;
	padding: 5px 12px; font-size: .78rem; font-weight: 600;
	background: #fff; border: 1px solid currentColor; color: inherit;
}
.sva-op-melding-rood { background: #fdeceb; border-color: #f5c9c5; color: #b3261e; }
.sva-op-melding-oranje { background: #fff7ea; border-color: #f3ddb5; color: #a35b00; }
.sva-op-melding-blauw { background: #f2f5ff; border-color: #d5ddff; color: #3f4bc4; }
/*
 * v9.15.222: op verzoek - "donkerblauw" toegevoegd aan het meldingssysteem
 * (bestond al bij de statuslabels, .sva-op-statuslabel-donkerblauw,
 * dezelfde kleurwaarde hier hergebruikt voor consistentie).
 */
.sva-op-melding-donkerblauw { background: #eef3fb; border-color: #c9dcee; color: #1c5c8c; }
/*
 * v9.15.110: BUGFIX op verzoek - het grijs (v9.15.109) viel te veel
 * weg tegen de lichtgrijze paginaondergrond, waardoor het vlak
 * nauwelijks nog als eigen kaart herkenbaar was. Wit, met een duidelijke
 * rand, sluit aan bij hoe andere kaarten (bv. "Beschikbare diensten")
 * op deze pagina al ogen.
 */
.sva-op-melding-neutraal { background: #fff; border-color: var(--sva-border, #e2e4ec); color: #4a4f66; }
/* v9.15.54: module "Hergebruik tussen sollicitaties" - de melding "alvast voor u ingevuld". */
.sva-op-melding-groen { background: #eafaf1; border-color: #b9e6cc; color: #0d7a48; }
.sva-op-melding-rustig { background: #f4f6fb; border-color: #e3e7f2; color: var(--sva-text, #23233a); }
.sva-op-melding-rustig .sva-op-melding-icoon { color: var(--sva-muted, #6b6e85); }

/*
 * v9.15.13: gegroepeerde, inklapbare meldingsvorm (2+ items) - net als
 * het vergelijkbare patroon in de backend. .sva-op-melding-groep is een
 * <details>-element, dus summary/marker-stijlen zijn hier bewust nodig.
 */
.sva-op-melding-groep { display: block; padding: 0; }
.sva-op-melding-groep > summary {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	list-style: none; cursor: pointer; padding: 11px 40px 11px 14px;
}
.sva-op-melding-groep > summary::-webkit-details-marker { display: none; }
.sva-op-melding-samenvatting .sva-op-melding-tekst { flex: 1 1 auto; }
.sva-op-melding-pijl { flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px; transition: transform .15s ease; }
.sva-op-melding-groep[open] .sva-op-melding-pijl { transform: rotate(180deg); }
.sva-op-melding-lijst { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.sva-op-melding-lijst li {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	background: rgba(255, 255, 255, .55); border-radius: 8px; padding: 7px 10px;
}
.sva-op-melding-lijst-titel { font-weight: 700; font-size: .84rem; }
.sva-op-melding-lijst-sub { font-size: .8rem; opacity: .9; flex: 1 1 160px; }
.sva-op-melding-lijst .sva-op-btn-ghost-sm {
	flex: 0 0 auto; margin-left: auto;
	background: none; border: 1px solid currentColor; color: inherit;
	padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; cursor: pointer;
}
.sva-op-melding-lijst .sva-op-btn-ghost-sm:hover { background: rgba(255, 255, 255, .6); }

/* Korte herinnering binnen de stap zelf. */
.sva-op-heropen-kort {
	display: flex; align-items: flex-start; gap: 7px;
	margin: 0 0 12px; padding: 8px 11px;
	background: #f2f5ff; border-radius: 9px;
	font-size: .83rem; line-height: 1.5; color: #3f4bc4;
}
.sva-op-heropen-kort .dashicons { flex: 0 0 auto; font-size: 15px; width: 15px; height: 15px; margin-top: 1px; }

@media (max-width: 640px) {
	.sva-op-melding { padding: 11px 12px; }
	.sva-op-melding .sva-op-btn { flex: 1 1 100%; justify-content: center; margin-top: 4px; }

	/*
	 * v9.15.30: op mobiel is er geen ruimte om meldingen-streepjes naast
	 * elkaar te zetten - dan onder elkaar, elk over de volle breedte, net
	 * als de meldingen zelf.
	 */
	.sva-op-melding-streepjes-zone { flex-direction: column; gap: 8px; }
	.sva-op-melding-streepje { width: 100%; }
	.sva-op-melding-streepje-tekst { flex: 1 1 auto; }
}

/* v5.25.1: "In behandeling" had zijn kleur verloren toen alle meldingen één
   vorm kregen. Hij krijgt zijn blauwe tint terug, maar in een andere tint dan
   "opnieuw ondertekenen" zodat de twee naast elkaar te onderscheiden blijven. */
.sva-op-melding-rustig {
	background: #eef3fb;
	border-color: #cfe0f2;
	color: #1c5c8c;
}
.sva-op-melding-rustig .sva-op-melding-icoon { color: #2f6ea5; }
.sva-op-melding-rustig .sva-op-melding-tekst span { color: #23233a; opacity: .88; }

/* v5.25.2: één kleursysteem op basis van wie er aan zet is.
   rood = probleem · oranje = komt eraan · indigo = ZZP'er moet iets doen ·
   blauwgrijs = ligt bij SVA. De wachtmelding in de stap krijgt daarom
   dezelfde tint als de melding bovenaan. */
.sva-op-alert-wacht {
	background: #eef3fb;
	border: 1px solid #cfe0f2;
	color: #1c5c8c;
}

/* v6.1: melding bij het automatisch aanvullen van een adres */
/*
 * v9.15.326: op verzoek, uitlijning gecorrigeerd - "flex: 1 1 100%" had
 * hier nooit enig effect: .sva-op-adres-plaats-wrap (de ouder) is geen
 * flex-container, dus deze eigenschap werd altijd genegeerd. Nu gewoon
 * een blok met een kleine marge erboven, zodat de tekst netjes onder
 * "Plaats" komt te staan in plaats van er strak tegenaan.
 */
.sva-op-adres-status { display: block; margin-top: 4px; font-size: .78rem; color: var(--sva-muted, #6b6e85); min-height: 1em; }
.sva-op-adres-status.sva-op-adres-fout { color: #b3261e; }

/* v6.2: gegevens uit de stappen in "Mijn gegevens" */
.sva-op-gegevens-bron { font-size: .76rem; }
.sva-op-ingevuld-rij dd .sva-op-linklike {
	background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
	color: var(--sva-primary, #5b6cf0); font-size: .82rem; font-weight: 600; text-decoration: underline;
}
.sva-op-ingevuld-rij dd .sva-op-linklike:hover { color: var(--sva-primary-dark, #4453d6); }
@media (max-width: 640px) {
	.sva-op-ingevuld-rij dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
	.sva-op-gegevens-bron { flex: 1 1 100%; }
}

/* ============================================================
 *  v6.6 — Beschikbaarheidsagenda
 * ============================================================ */

.sva-op-agenda-uitleg {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--sva-primary-soft, #eef1fe);
	border-radius: var(--sva-radius, 16px);
	padding: 14px 18px; margin-bottom: 20px;
}
.sva-op-agenda-uitleg.sva-op-dismissible { padding-right: 38px; }
.sva-op-agenda-uitleg .dashicons { color: var(--sva-primary); flex: none; margin-top: 2px; }
.sva-op-agenda-uitleg p { margin: 0; font-size: .92rem; line-height: 1.55; }

.sva-op-agenda-kolommen {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
	gap: 22px; align-items: start;
}

/* ---- De kalender ---- */
.sva-op-agenda-kalender { position: relative; }
.sva-op-agenda-kalender.sva-op-agenda-laden { opacity: .55; pointer-events: none; }

.sva-op-agenda {
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius, 16px); padding: 16px;
}
.sva-op-agenda-kop {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 14px;
}
.sva-op-agenda-kop strong { font-size: 1.02rem; text-transform: capitalize; }
.sva-op-agenda-nav {
	background: transparent; border: 1px solid var(--sva-border);
	border-radius: 10px; width: 34px; height: 34px; cursor: pointer;
	font-size: 1.25rem; line-height: 1; color: var(--sva-text, #23233a);
}
.sva-op-agenda-nav:hover { border-color: var(--sva-primary); color: var(--sva-primary); }
/*
 * v9.15.374: op verzoek - "de week-navigatie ziet er kaal uit,
 * niet grafisch zoals bij Maand". De week-/dagweergave (week_html(),
 * dag_agenda_html()) gebruikt een eigen klasse
 * (.sva-op-dienst-agenda-nav) voor exact dezelfde pijltjesknoppen,
 * maar had daar nog nooit eigen styling voor - vandaar het kale
 * standaard-knopje. Nu hergebruikt hij gewoon dezelfde, al bestaande
 * opmaak als de maandweergave hierboven.
 */
.sva-op-dienst-agenda-nav {
	background: transparent; border: 1px solid var(--sva-border);
	border-radius: 10px; width: 34px; height: 34px; cursor: pointer;
	font-size: 1.25rem; line-height: 1; color: var(--sva-text, #23233a);
	flex: none;
}
.sva-op-dienst-agenda-nav:hover { border-color: var(--sva-primary); color: var(--sva-primary); }

.sva-op-agenda-weekdagen,
.sva-op-agenda-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.sva-op-agenda-weekdagen span {
	text-align: center; font-size: .74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--sva-muted); padding-bottom: 6px;
}

.sva-op-agenda-dag {
	position: relative; aspect-ratio: 1 / 1; min-height: 40px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--sva-border); border-radius: 10px;
	background: #fff; cursor: pointer; font-size: .9rem; font-weight: 600;
	color: var(--sva-text, #23233a);
	transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.sva-op-agenda-dag:hover { border-color: var(--sva-primary); transform: translateY(-1px); }
.sva-op-agenda-leeg { min-height: 40px; }

.sva-op-agenda-vrij { background: #fff; }
.sva-op-agenda-blok { background: #fdecea; border-color: #f5c2bd; color: #a4261f; }
.sva-op-agenda-deels { background: #fdf3e2; border-color: #f0d3a0; color: #8a5a00; }
.sva-op-agenda-patroon { background: #f2f3f8; border-color: #e2e3ee; color: var(--sva-muted); }
.sva-op-agenda-uitzondering { background: #e9f8f0; border-color: #b7e5cd; color: #0f7a4d; }

.sva-op-agenda-verleden { opacity: .45; }
.sva-op-agenda-vandaag { box-shadow: 0 0 0 2px var(--sva-primary) inset; }
.sva-op-agenda-gekozen { border-color: var(--sva-primary); box-shadow: 0 0 0 2px var(--sva-primary); }

.sva-op-agenda-stip {
	position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
	width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}

.sva-op-agenda-legenda {
	display: flex; flex-wrap: wrap; gap: 6px 16px;
	margin-top: 14px; font-size: .8rem; color: var(--sva-muted);
}
.sva-op-agenda-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sva-op-agenda-legenda i {
	width: 12px; height: 12px; border-radius: 4px; display: inline-block;
	border: 1px solid var(--sva-border);
}
.sva-op-legenda-vrij { background: #fff; }
.sva-op-legenda-blok { background: #fdecea; border-color: #f5c2bd; }
.sva-op-legenda-deels { background: #fdf3e2; border-color: #f0d3a0; }
.sva-op-legenda-patroon { background: #f2f3f8; border-color: #e2e3ee; }

#sva-op-agenda-melding {
	margin: 10px 0 0; font-size: .86rem; font-weight: 600; color: #0f7a4d;
	min-height: 1.2em;
}
#sva-op-agenda-melding.sva-op-agenda-fout { color: var(--sva-danger, #f04438); }

/* ---- Panelen ernaast ---- */
.sva-op-agenda-zijkant { display: flex; flex-direction: column; gap: 14px; }
.sva-op-agenda-paneel {
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius, 16px); padding: 16px 18px;
}
.sva-op-agenda-paneel h4 { margin: 0 0 6px; font-size: .95rem; text-transform: capitalize; }
.sva-op-agenda-paneel p { font-size: .85rem; line-height: 1.5; margin: 0 0 12px; }
.sva-op-agenda-paneel input[type="text"],
.sva-op-agenda-paneel input[type="date"] {
	width: 100%; padding: 9px 12px; border: 1px solid var(--sva-border);
	border-radius: 10px; font-size: .9rem; margin-bottom: 10px;
	font-family: inherit;
}
.sva-op-agenda-veld { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 2px; }

.sva-op-agenda-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sva-op-agenda-keuze {
	padding: 10px 8px; border: 1px solid var(--sva-border); background: #fff;
	border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 600;
	font-family: inherit; color: var(--sva-text, #23233a);
}
.sva-op-agenda-keuze:hover { border-color: var(--sva-primary); }
.sva-op-agenda-keuze.actief {
	border-color: var(--sva-primary); background: var(--sva-primary-soft, #eef1fe);
	color: var(--sva-primary-dark, #4453d6);
}

.sva-op-agenda-sub { margin-bottom: 8px !important; }
.sva-op-agenda-dagdelen,
.sva-op-agenda-patroon { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sva-op-agenda-dagdeel {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--sva-border); border-radius: 999px;
	padding: 6px 12px; font-size: .84rem; cursor: pointer;
	text-transform: capitalize;
}
.sva-op-agenda-dagdeel.aangevinkt,
.sva-op-agenda-dagdeel:has(input:checked) {
	border-color: var(--sva-primary); background: var(--sva-primary-soft, #eef1fe);
	color: var(--sva-primary-dark, #4453d6); font-weight: 600;
}
.sva-op-agenda-dagdeel input { margin: 0; }
.sva-op-agenda-reeksknoppen { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 900px) {
	.sva-op-agenda-kolommen { grid-template-columns: 1fr; }
	.sva-op-agenda-zijkant { order: 2; }
	.sva-op-agenda-dag { min-height: 44px; font-size: .95rem; }
}

/* ============================================================
 *  v6.7 — Diensten in het portaal
 * ============================================================ */

.sva-op-diensten-kop { font-size: 1.05rem; margin: 22px 0 12px; }
.sva-op-diensten-kop:first-child { margin-top: 0; }

.sva-op-dienstkaart {
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius, 16px); padding: 18px 20px; margin-bottom: 14px;
	transition: border-color .15s ease;
}
.sva-op-dienstkaart-wacht { border-color: #f0d3a0; background: #fffdf8; }
.sva-op-dienstkaart-mijn { border-color: #b7e5cd; background: #fbfefc; }
/*
 * v9.15.369: op verzoek - teruggedraaid t.o.v. v9.15.368: niet de hele
 * kaart lichtblauw, maar (zie .sva-op-dienstkaart-feiten-blok hieronder)
 * een apart, los blokje binnen een neutrale, witte kaart - zoals het
 * Beschikbaarheid-tabblad dat ook doet (losse, eigen gekleurde
 * onderdelen met witruimte ertussen, niet één kaart in één kleur).
 */
details.sva-op-dienstkaart-mijn {
	border-color: var(--sva-border); background: var(--sva-card, #fff);
}
/*
 * v9.15.365: op verzoek - de kaart was al inklapbaar (<details>, sinds
 * v9.15.364) maar toonde dat nergens: display:flex op <summary>
 * onderdrukt in de meeste browsers het standaard driehoekje, zonder dat
 * er een vervanging was toegevoegd. Nu een duidelijk, eigen pijltje dat
 * meedraait, plus een compactere kop wanneer de kaart als <details>
 * gebruikt wordt (de nieuwe module) - de oude, altijd-open <div>-vorm
 * (module uit) blijft qua opmaak ongewijzigd.
 */
details.sva-op-dienstkaart { padding: 14px 18px; }
details.sva-op-dienstkaart-oud { padding: 12px 16px; margin-bottom: 8px; }
/*
 * v9.15.368: op verzoek - "Oude diensten" blijft bewust neutraal/grijs
 * (niet de nieuwe lichtblauwe kleur van actuele bevestigde diensten) -
 * die kleur hoort bij "dit is relevant/aankomend", niet bij het
 * archief. Hogere specificiteit dan .sva-op-dienstkaart-mijn hierboven,
 * dus deze wint.
 */
details.sva-op-dienstkaart-oud.sva-op-dienstkaart-mijn {
	background: var(--sva-bg, #f5f6fb); border-color: var(--sva-border);
}
details.sva-op-dienstkaart summary.sva-op-dienstkaart-kop {
	list-style: none; cursor: pointer; margin-bottom: 0; padding: 4px 0;
}
details.sva-op-dienstkaart summary.sva-op-dienstkaart-kop::-webkit-details-marker { display: none; }
details.sva-op-dienstkaart summary.sva-op-dienstkaart-kop::after {
	content: ""; flex: none; width: 9px; height: 9px;
	border-right: 2px solid var(--sva-muted); border-bottom: 2px solid var(--sva-muted);
	transform: rotate(45deg); margin-left: 4px; transition: transform .15s ease;
}
details[open].sva-op-dienstkaart summary.sva-op-dienstkaart-kop::after { transform: rotate(-135deg); }
details.sva-op-dienstkaart summary.sva-op-dienstkaart-kop:hover h4 { color: var(--sva-primary); }
details.sva-op-dienstkaart > *:not(summary) { margin-top: 12px; }
details.sva-op-dienstkaart-oud .sva-op-dienstkaart-feiten { margin-bottom: 0; }
/*
 * v9.15.369: op verzoek - het feiten-blokje (datum, locatie) als eigen,
 * los lichtblauw vak, exact dezelfde kleur/opzet als "U werkt deze dag"
 * op het Beschikbaarheid-tabblad (icoon + tekst). Alleen aanwezig als
 * de module aanstaat.
 */
.sva-op-dienstkaart-feiten-blok {
	display: flex; gap: 10px; align-items: flex-start;
	background: #e6f0ff; border-radius: var(--sva-radius, 12px); padding: 11px 13px;
}
.sva-op-dienstkaart-feiten-blok .dashicons { color: #14428f; flex: none; margin-top: 1px; }
.sva-op-dienstkaart-feiten-blok .sva-op-dienstkaart-feiten { margin: 0; }
/*
 * v9.15.370: op verzoek - zoals bij "U werkt deze dag" op Beschikbaarheid
 * (.sva-op-agenda-dienstkop/-dienstregel): alleen het icoon is blauw, niet
 * alle tekst. De eerste regel (wanneer) krijgt de gewone tekstkleur, een
 * eventuele tweede regel (locatie) blijft gedempt grijs - i.p.v. voorheen
 * alles in dezelfde blauwe kleur.
 */
.sva-op-dienstkaart-feiten-blok .sva-op-dienstkaart-feiten li { padding: 1px 0; color: var(--sva-text); }
.sva-op-dienstkaart-feiten-blok .sva-op-dienstkaart-feiten li:not(:first-child) { color: var(--sva-muted); }
/*
 * v9.15.346: op verzoek - het ondertekenblok voor een aanvullende
 * overeenkomst op dienst-niveau, binnen de "Bevestigd"-dienstkaart.
 * Bewust dezelfde signature-pad-opmaak als het bestaande ondertekenveld
 * (zie eerder in dit bestand) - hergebruikt daardoor ook visueel exact
 * hetzelfde, al vertrouwde patroon.
 */
.sva-op-dienst-overeenkomst-blok { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sva-border); }
.sva-op-dienst-overeenkomst-blok h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .95rem; }
.sva-op-dienst-overeenkomst-blok .sva-op-signature-pad { margin: 10px 0; }
.sva-op-dienst-overeenkomst-ondertekenen { margin-top: 8px; }
.sva-op-dienst-overeenkomst-status { margin-left: 10px; font-size: .85rem; }
.sva-op-dienst-overeenkomst-status.sva-op-adres-fout { color: #b3261e; }
/*
 * v9.15.370: op verzoek - de "ondertekend"-bevestiging stond als losse,
 * ongekleurde tekst onder de kaart. Nu een eigen geel blokje, zelfde vorm
 * als het bestaande gele .sva-op-agenda-vast-blokje elders, met de tekst
 * in dezelfde blauwe kleur als het feiten-blokje hierboven (i.p.v. de
 * vorige groene tekst zonder achtergrond).
 */
.sva-op-dienst-overeenkomst-klaar {
	display: flex; align-items: center; gap: 8px; font-weight: 500;
	color: #14428f; background: #fdf3e2; border-radius: var(--sva-radius, 12px);
	padding: 11px 13px; margin: 14px 0 0;
}
.sva-op-dienst-overeenkomst-klaar .dashicons { color: #14428f; flex: none; }
.sva-op-dienst-overeenkomst-klaar a { color: #14428f; text-decoration: underline; }
.sva-op-dienst-overeenkomst-klaar .sva-op-muted { color: #8a5a00; }
.sva-op-dienst-overeenkomst-deadline { font-size: 13px; color: #5a5f78; margin: 4px 0 10px; }
.sva-op-dienst-overeenkomst-deadline-dringend { display: flex; align-items: center; gap: 6px; color: #b3261e; font-weight: 600; background: #fdeceb; border: 1px solid #f3b8b3; border-radius: 8px; padding: 8px 12px; }

.sva-op-dienstkaart-bezig { opacity: .65; }

.sva-op-dienstkaart-kop {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 12px; margin-bottom: 12px;
}
/*
 * v9.15.370: op verzoek - bij de <details>-vorm (nieuwe agenda-module)
 * telt het inklap-pijltje (::after hieronder) als DERDE flex-item mee in
 * de space-between-verdeling, waardoor de status-badge niet tegen de
 * rand aan kwam te staan maar in het midden bleef hangen, met het
 * pijltje er los van aan de echte rand. Door het eerste item (titel,
 * eventueel met kleurvakje) margin-right:auto te geven, absorbeert dat
 * item alle vrije ruimte en komen badge + pijltje als vaste groep
 * tegen de rand aan te staan - ongeacht of er 2 of 3 flex-items zijn.
 */
.sva-op-dienstkaart-kop > *:first-child { margin-right: auto; }
.sva-op-dienstkaart-kop h4 { margin: 0; font-size: 1.02rem; }
.sva-op-dienstkaart-status {
	flex: none; font-size: .76rem; font-weight: 700; padding: 4px 10px;
	border-radius: 999px; background: #fdf3e2; color: #8a5a00;
	text-transform: uppercase; letter-spacing: .03em;
}
.sva-op-dienstkaart-vast { background: #e9f8f0; color: #0f7a4d; }
/*
 * v9.15.374: op verzoek - duidelijk te onderscheiden van het rustige
 * groene "Ingepland"-label: een dienst die nog op een handtekening
 * wacht is een openstaande actie, geen afgeronde situatie.
 */
.sva-op-dienstkaart-actie { background: #fff2df; color: #a35b00; }

.sva-op-dienstkaart-feiten { list-style: none; margin: 0 0 12px; padding: 0; }
.sva-op-dienstkaart-feiten li {
	display: flex; align-items: center; gap: 8px;
	font-size: .9rem; padding: 3px 0; text-transform: capitalize;
}
.sva-op-dienstkaart-feiten .dashicons { color: var(--sva-muted); font-size: 18px; width: 18px; height: 18px; flex: none; }

.sva-op-dienstkaart-tekst { font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }
.sva-op-dienstkaart-klein { font-size: .84rem; margin: 10px 0 0; }
.sva-op-dienstkaart-wachttekst {
	font-size: .88rem; margin: 0 0 10px; color: #8a5a00;
}
/*
 * v9.15.99: op verzoek - module "Diensten van een andere functie". Deze
 * variant bevat een directe, klikbare link naar de handtekening-stap en
 * mag daarom net iets meer opvallen dan de gewone, passieve wachttekst -
 * dit vraagt namelijk wél iets van de ZZP'er, de gewone wachttekst niet.
 */
.sva-op-dienstkaart-wacht-handtekening {
	background: #fff8ec; border: 1px solid #ecc78f; border-radius: 10px; padding: 10px 12px; color: #8a5a00;
}
.sva-op-dienstkaart-wacht-handtekening a { font-weight: 700; text-decoration: underline !important; color: #8a5a00 !important; }

/*
 * v9.15.99/100: module "Diensten van een andere functie" - de eigen
 * voorkeur bovenaan Diensten.
 */
.sva-op-kruisfunctie-voorkeur { display: none; } /* v9.15.103: klasse niet meer gebruikt, zie .sva-op-kruisfunctie-melding hieronder - blijft staan als vangnet mocht ergens nog oude, gecachete HTML rondzweven. */

/*
 * v9.15.103: op verzoek volledig omgebouwd naar een inklapbare melding
 * (native <details>/<summary>, zelfde bewezen patroon als elders op het
 * portaal, bv. "Eerdere reacties" en de stappenkaarten bij Voortgang) -
 * in plaats van een los, altijd-open blokje.
 */
.sva-op-kruisfunctie-melding summary {
	cursor: pointer; list-style: none;
}
.sva-op-kruisfunctie-melding summary::-webkit-details-marker,
.sva-op-kruisfunctie-melding summary::marker { display: none; content: ''; }
.sva-op-kruisfunctie-melding .sva-op-melding-tekst { flex-direction: row; align-items: center; }
.sva-op-kruisfunctie-pijl { margin-left: auto; transition: transform .15s ease; flex-shrink: 0; }
.sva-op-kruisfunctie-melding[open] .sva-op-kruisfunctie-pijl { transform: rotate(180deg); }
.sva-op-kruisfunctie-inhoud { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d5daff; }
.sva-op-kruisfunctie-intro { margin: 0 0 14px; font-size: .82rem; line-height: 1.55; color: var(--sva-muted, #6b6e85); }
/*
 * v9.15.108: BUGFIX/verbetering op verzoek - volledig omgebouwd van
 * losse, gestapelde blokken naar een tabelweergave (kolom "Functie" +
 * kolom "Toekomstige diensten accepteren" met schuifknop). Gebruikt
 * CSS grid i.p.v. een echte <table>, zodat de kop netjes meeschuift
 * op smalle schermen.
 */
/*
 * v9.15.109: BUGFIX op verzoek - kop en rijen zijn twee losse
 * rastercontainers; met "auto" als tweede kolom berekent elk zijn
 * eigen breedte op basis van ZIJN EIGEN inhoud (de lange kop-tekst
 * vs. de veel kortere schuifknop+label in de rijen) - daardoor liepen
 * kop en inhoud niet synchroon. Vaste breedte op beide lost dat op:
 * gegarandeerd dezelfde kolombreedte, ongeacht de inhoud.
 */
.sva-op-kruisfunctie-tabel-kop {
	display: grid; grid-template-columns: 1fr 130px; gap: 12px; padding: 0 0 8px;
	font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
	color: var(--sva-muted, #6b6e85); border-bottom: 1.5px solid #d5daff;
}
.sva-op-kruisfunctie-tabel-kop span:last-child { text-align: right; line-height: 1.3; }
.sva-op-kruisfunctie-tabel-rij {
	display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: center;
	padding: 12px 0; border-bottom: 1px solid #e7e9fb;
}
.sva-op-kruisfunctie-tabel-rij:last-child { border-bottom: none; padding-bottom: 4px; }
.sva-op-kruisfunctie-functie-naam { display: block; margin: 0 0 3px; font-size: .9rem; }
.sva-op-kruisfunctie-functie-tekst { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--sva-muted, #6b6e85); }
/*
 * v9.15.129: op verzoek - functies waarvoor al een dossier klaarstaat
 * blijven zichtbaar (i.p.v. stilletjes te verdwijnen), maar duidelijk
 * "afgerond": lichtgrijze tekst, geen schuifknop meer (er valt niets
 * meer te kiezen), een vinkje i.p.v. een schakelaar.
 */
.sva-op-kruisfunctie-tabel-rij-bevestigd { opacity: .6; }
.sva-op-kruisfunctie-tabel-rij-bevestigd .sva-op-kruisfunctie-functie-naam,
.sva-op-kruisfunctie-tabel-rij-bevestigd .sva-op-kruisfunctie-functie-tekst { color: var(--sva-muted, #6b6e85); }
.sva-op-kruisfunctie-tabel-rij-bevestigd .sva-op-kruisfunctie-tabel-actie { justify-content: flex-end; }
.sva-op-kruisfunctie-tabel-rij-bevestigd .dashicons-yes-alt { color: #1a9c5c; font-size: 22px; width: 22px; height: 22px; }
/*
 * v9.15.120: op verzoek - was een kale linktekst, alleen zichtbaar bij
 * "Nee". Nu een uitgelichte, ter-info-achtige melding met een echte
 * knop, alleen zichtbaar bij "Ja" (zie de toelichting bij de PHP
 * hierboven voor waarom die voorwaarde is omgedraaid).
 *
 * v9.15.123: had hier !important-regels staan die de knopkleur
 * forceerden - die zijn toen verwijderd in de veronderstelling dat het
 * thema de kale .sva-op-btn-klassen daarna vanzelf net zo zou stylen
 * als "Document uploaden". Dat bleek fout: zonder die regels vielen de
 * knoppen HIER (dieper genest, binnen dit .sva-op-melding-blok) terug
 * op een wit thema-uiterlijk (Avada wint hier van de kale klasse), waar
 * dat bij "Document uploaden" niet gebeurt.
 *
 * v9.15.124: BUGFIX op verzoek ("kleur moet zwartachtig zijn") - de
 * achtergrondkleur alsnog geforceerd, nu met de donkere marineblauw/
 * zwarttint van de sidebar (dezelfde familie als de rest van de site,
 * i.p.v. de vorige, te "flatte" merkkleur), plus een eigen
 * hover-overgang zodat het knopgevoel niet plat aanvoelt ondanks het
 * ontbreken van Avada's eigen hover-animatie in deze context.
 *
 * v9.15.125: BUGFIX op verzoek - de melding bleef zichtbaar ongeacht
 * "Ja"/"Nee". Oorzaak gevonden: ".sva-op-kruisfunctie-nu-al-verborgen
 * { display:none }" en ".sva-op-kruisfunctie-nu-al-info { display:flex
 * }" hebben EXACT dezelfde specificiteit (1 klasse), en de tweede regel
 * staat later in dit bestand - bij gelijke specificiteit wint bij een
 * CSS-conflict altijd de regel die later staat, dus "flex" won altijd
 * van "none", wat er ook aan klassen bij stond. Nu met een
 * samengestelde selector (.info.verborgen) die een hogere specificiteit
 * heeft dan .info alleen, plus !important als extra zekerheid - dit wint
 * nu gegarandeerd, ongeacht de volgorde in het bestand.
 */
.sva-op-kruisfunctie-nu-al-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.sva-op-kruisfunctie-nu-al-info .sva-op-btn-primary {
	background: #1c1c2e !important;
	color: #fff !important;
	border: none !important;
	transition: background-color .15s ease;
}
.sva-op-kruisfunctie-nu-al-info .sva-op-btn-primary:hover {
	background: #2d2d47 !important;
}
.sva-op-kruisfunctie-nu-al-vereist { margin: -4px 0 8px !important; font-size: .72rem !important; font-weight: 700; color: var(--sva-primary-dark, #4453d6); flex: 1 1 100%; }
.sva-op-kruisfunctie-pending .sva-op-kruisfunctie-nu-al-info { border-color: #d97706; background: #fff7ed; }
.sva-op-kruisfunctie-pending .sva-op-kruisfunctie-nu-al-info .dashicons,
.sva-op-kruisfunctie-pending .sva-op-kruisfunctie-nu-al-info p,
.sva-op-kruisfunctie-pending .sva-op-kruisfunctie-nu-al-vereist { color: #b45309; }
.sva-op-kruisfunctie-nu-al-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--sva-primary-soft, #eef1fe);
	border: 1px solid var(--sva-primary, #5b6cf0);
	border-radius: 8px;
}
.sva-op-kruisfunctie-nu-al-info.sva-op-kruisfunctie-nu-al-verborgen { display: none !important; }
.sva-op-kruisfunctie-nu-al-info .dashicons { color: var(--sva-primary, #5b6cf0); font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.sva-op-kruisfunctie-nu-al-info p { margin: 0 0 8px; font-size: .78rem; line-height: 1.5; color: var(--sva-primary-dark, #4453d6); flex: 1 1 100%; }
.sva-op-kruisfunctie-nu-al-info .sva-op-kruisfunctie-nu-al-knoppen { flex: 1 1 100%; margin: 0; }
.sva-op-kruisfunctie-nu-al-info .sva-op-kruisfunctie-nu-al-form { margin: 0; }
.sva-op-kruisfunctie-tabel-actie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
/*
 * v9.15.108: de schuifknop zelf - een verborgen checkbox met een
 * zelfgetekende "pil"-vorm eromheen, het gangbare patroon voor een
 * aan/uit-schuifje zonder externe afbeeldingen nodig te hebben.
 */
.sva-op-kruisfunctie-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.sva-op-kruisfunctie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sva-op-kruisfunctie-switch-schuif {
	position: absolute; inset: 0; background: #d5d8e8; border-radius: 999px; transition: background .15s ease;
}
.sva-op-kruisfunctie-switch-schuif::before {
	content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
	background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.sva-op-kruisfunctie-switch input:checked + .sva-op-kruisfunctie-switch-schuif { background: var(--sva-primary, #5b6cf0); }
.sva-op-kruisfunctie-switch input:checked + .sva-op-kruisfunctie-switch-schuif::before { transform: translateX(18px); }
.sva-op-kruisfunctie-switch input:focus-visible + .sva-op-kruisfunctie-switch-schuif { outline: 2px solid var(--sva-primary, #5b6cf0); outline-offset: 2px; }
.sva-op-kruisfunctie-switch-label { font-size: .82rem; font-weight: 700; min-width: 24px; }
.sva-op-kruisfunctie-status {
	grid-column: 1 / -1; margin: 4px 0 0; font-size: .76rem; font-weight: 600; color: #0f7a4d; min-height: 1.1em;
}
/*
 * v9.15.107: het losse cijfertje bij "Diensten van andere functies"
 * zelf - hergebruikt dezelfde ronde-badge-stijl als het cijfertje bij
 * het menu-item "Diensten" (.sva-op-nav-count), maar dan inline i.p.v.
 * in de zijbalk.
 */
.sva-op-kruisfunctie-count { margin: 0; }
@media (max-width: 560px) {
	.sva-op-kruisfunctie-tabel-actie { flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
}

.sva-op-dienstkaart-acties { display: flex; gap: 10px; flex-wrap: wrap; }
.sva-op-dienst-melding {
	margin: 10px 0 0; font-size: .86rem; font-weight: 600; color: #0f7a4d; min-height: 1.1em;
}
.sva-op-dienst-melding.sva-op-dienst-fout { color: var(--sva-danger, #f04438); }

.sva-op-diensten-leeg {
	text-align: center; padding: 46px 24px;
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius, 16px);
}
.sva-op-diensten-leeg .dashicons {
	font-size: 40px; width: 40px; height: 40px; color: var(--sva-primary); opacity: .5;
}
.sva-op-diensten-leeg h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.sva-op-diensten-leeg p { margin: 0 auto; max-width: 46ch; font-size: .9rem; line-height: 1.6; color: var(--sva-muted); }

.sva-op-diensten-historie { margin-top: 22px; }
.sva-op-diensten-historie summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.sva-op-diensten-historie ul { list-style: none; padding: 12px 0 0; margin: 0; }
.sva-op-diensten-historie li {
	display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
	padding: 8px 0; border-bottom: 1px solid var(--sva-border); font-size: .88rem;
}

/*
 * v9.15.364: op verzoek - de nieuwe "Agendaweergave op het
 * Diensten-tabblad"-module. Eigen, apart CSS-blok - raakt geen van de
 * bestaande .sva-op-agenda-*-stijlen hierboven (die blijven voor het
 * Beschikbaarheid-tabblad en de oude, eenvoudige kalender ongewijzigd).
 */
.sva-op-dienst-agenda-blok {
	background: var(--sva-card, #fff); border: 1px solid var(--sva-border);
	border-radius: var(--sva-radius, 16px); padding: 20px 22px; margin-bottom: 22px;
	box-shadow: 0 1px 2px rgba(35,35,58,.04);
}
.sva-op-dienst-agenda-blok .sva-op-diensten-kop { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.sva-op-dienst-agenda-blok .sva-op-diensten-kop .dashicons { color: var(--sva-primary); }
.sva-op-dienst-agenda-schakelaar {
	display: inline-flex; background: var(--sva-bg, #f5f6fb); border-radius: 10px; padding: 3px;
	margin-bottom: 16px;
}
.sva-op-dienst-agenda-weergave-knop {
	background: transparent; border: none; border-radius: 8px; cursor: pointer;
	font-size: .84rem; padding: 7px 16px; color: var(--sva-muted);
	transition: color .15s ease;
}
.sva-op-dienst-agenda-weergave-knop:hover { color: var(--sva-text); }
.sva-op-dienst-agenda-weergave-knop.sva-op-actief {
	background: var(--sva-card, #fff); color: var(--sva-text); font-weight: 600;
	box-shadow: 0 1px 3px rgba(35,35,58,.1);
}
.sva-op-dienst-agenda-inhoud.sva-op-agenda-laden { opacity: .5; pointer-events: none; }
.sva-op-dienst-agenda-help { font-size: .82rem; color: var(--sva-muted); margin: 12px 0 0; }

.sva-op-dienst-agenda-week .sva-op-agenda-kop,
.sva-op-dienst-agenda-dag .sva-op-agenda-kop { margin-bottom: 12px; }
.sva-op-dienst-agenda-weekgrid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.sva-op-dienst-agenda-weekdag {
	background: var(--sva-bg, #f5f6fb); border: 1.5px solid transparent; border-radius: 12px;
	padding: 10px 6px; min-height: 68px; font-size: .8rem; text-align: center;
	cursor: default; transition: background .15s ease, border-color .15s ease;
}
.sva-op-dienst-agenda-weekdag-naam { display: block; color: var(--sva-muted); font-weight: 500; margin-bottom: 6px; }
.sva-op-dienst-agenda-weekdag.sva-op-dienst-agenda-vandaag { border-color: var(--sva-primary); }
.sva-op-dienst-agenda-weekdag.sva-op-dienst-agenda-heeft-dienst {
	background: color-mix(in srgb, var(--sva-primary) 10%, var(--sva-card, #fff)); cursor: pointer;
}
.sva-op-dienst-agenda-weekdag.sva-op-dienst-agenda-heeft-dienst:hover {
	background: color-mix(in srgb, var(--sva-primary) 18%, var(--sva-card, #fff));
}
.sva-op-dienst-agenda-weekdag.sva-op-dienst-agenda-niveau-definitief { background: color-mix(in srgb, var(--sva-primary) 20%, var(--sva-card, #fff)); }
.sva-op-dienst-agenda-weekdienst {
	display: block; font-size: .74rem; font-weight: 600; margin-top: 4px; color: var(--sva-primary-dark);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sva-op-dienst-agenda-dagkaart {
	display: flex; align-items: center; gap: 12px;
	background: color-mix(in srgb, var(--sva-primary) 8%, var(--sva-card, #fff));
	border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: background .15s ease;
}
.sva-op-dienst-agenda-dagkaart:hover { background: color-mix(in srgb, var(--sva-primary) 14%, var(--sva-card, #fff)); }
.sva-op-dienst-agenda-dagkaart .dashicons { color: var(--sva-primary); font-size: 24px; width: 24px; height: 24px; flex: none; }
.sva-op-dienst-agenda-dagkaart strong { display: block; font-size: .94rem; }
.sva-op-dienst-agenda-dagkaart span { font-size: .84rem; color: var(--sva-muted); }

/* De ZZP'er die net vanuit de agenda naar een kaart is gesprongen. */
.sva-op-dienstkaart-gemarkeerd { outline: 2px solid var(--sva-primary); outline-offset: -2px; transition: outline-color .3s; }

/*
 * v9.15.365: op verzoek - CSS voor de overige, kiesbare indelingen
 * ("Indeling" bij Instellingen). "agenda_boven"/"kaarten_boven"/
 * "week_compact" hergebruiken allemaal al bestaande stijlen hierboven -
 * alleen "naast_elkaar" en "tabbladen" hebben eigen, aanvullende CSS
 * nodig.
 */
.sva-op-diensten-zij-aan-zij {
	display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(280px, 1fr);
	gap: 20px; align-items: start;
}
.sva-op-diensten-zij-aan-zij .sva-op-dienst-agenda-blok { margin-bottom: 0; }
/*
 * Kalender vast op het scherm bij de "naast elkaar"-indeling - zodat
 * hij zichtbaar blijft terwijl een lange lijst kaarten ernaast scrolt.
 * De positionering zelf gebeurt via JS (portal.js, zie het blok bij
 * ".sva-op-diensten-zij-aan-zij-agenda"), met !important gezet zodat
 * het wint van externe stylesheet-regels. Expliciete grid-column op
 * beide kolommen hieronder voorkomt dat de kaartenkolom naar links
 * opschuift zodra de agenda-kolom "fixed" wordt (en daardoor buiten de
 * grid-flow valt). Deze CSS-regel hier is puur nog visueel
 * (achtergrond/schaduw) plus een vangnet-`!important` op de positie
 * zelf, mocht de inline stijl om wat voor reden dan ook niet aankomen.
 */
.sva-op-diensten-zij-aan-zij-agenda { grid-column: 1; }
.sva-op-diensten-zij-aan-zij-kaarten { grid-column: 2; }
.sva-op-diensten-zij-aan-zij-agenda.sva-op-diensten-agenda-fixed {
	background: var(--sva-bg, #f5f6fb);
	box-shadow: 0 6px 20px rgba(20, 25, 50, .12);
	border-radius: var(--sva-radius, 16px);
	position: fixed !important;
}
@media (max-width: 860px) {
	.sva-op-diensten-zij-aan-zij { grid-template-columns: 1fr; }
	.sva-op-diensten-zij-aan-zij-agenda,
	.sva-op-diensten-zij-aan-zij-kaarten { grid-column: 1; }
}

.sva-op-dienst-agenda-tabs {
	display: inline-flex; background: var(--sva-bg, #f5f6fb); border-radius: 10px;
	padding: 3px; margin-bottom: 16px;
}
.sva-op-dienst-agenda-tab-knop {
	background: transparent; border: none; border-radius: 8px; cursor: pointer;
	font-size: .86rem; padding: 8px 18px; color: var(--sva-muted);
	display: inline-flex; align-items: center; gap: 6px;
}
.sva-op-dienst-agenda-tab-knop .dashicons { font-size: 16px; width: 16px; height: 16px; }
.sva-op-dienst-agenda-tab-knop.sva-op-actief {
	background: var(--sva-card, #fff); color: var(--sva-text); font-weight: 600;
	box-shadow: 0 1px 3px rgba(35,35,58,.1);
}
.sva-op-dienst-agenda-tab-inhoud[hidden] { display: none; }

/*
 * v9.15.367: op verzoek - kleurvakje (kaart + agenda), compacte
 * actieknoppen in de ingeklapte samenvatting, en het inklap-pijltje
 * voor "Beschikbare diensten"/"In behandeling" (de kaarten die al
 * <details> waren voor "Uw diensten", nu ook voor deze twee).
 */
.sva-op-dienst-kleurvak {
	width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid;
	flex: none; display: inline-block;
}
.sva-op-dienstkaart-acties-compact { display: flex; align-items: center; gap: 6px; flex: none; }
/*
 * v9.15.371: op verzoek - een "Nieuw"-label vóór de Ja/Niet-voor-mij-
 * knopjes, in de <summary> en dus altijd zichtbaar (ook ingeklapt) -
 * zodat direct duidelijk is dat het om een nog onbeantwoorde, nieuwe
 * dienst gaat. Zelfde blauwe kleur als het feiten-blokje eronder, zodat
 * ze visueel bij elkaar horen.
 */
.sva-op-dienstkaart-status-nieuw { background: #e6f0ff; color: #14428f; }
/*
 * v9.15.372: op verzoek - de compacte Ja/Niet-voor-mij-knopjes in de
 * samenvatting stonden ook nog te zien wanneer de kaart al was
 * uitgeklapt, terwijl daar dan al de grote versie van diezelfde knoppen
 * onderin de kaart staat - een dubbeling. Nu verdwijnen alleen de
 * knopjes zodra de <details> openstaat (het "Nieuw"-label blijft wel
 * zichtbaar); bij het weer inklappen verschijnen ze vanzelf weer, puur
 * CSS, geen JS nodig.
 */
details.sva-op-dienstkaart[open] > summary .sva-op-dienstkaart-acties-compact .sva-op-btn-sm,
details.sva-op-dienstkaart[open] > summary .sva-op-dienstkaart-acties-compact .sva-op-btn-ghost-sm {
	display: none;
}
.sva-op-btn-sm {
	background: var(--sva-primary); color: #fff; border: none; border-radius: 8px;
	padding: 5px 12px; font-size: .78rem; cursor: pointer;
}
.sva-op-btn-sm:hover { background: var(--sva-primary-dark); }
.sva-op-btn-ghost-sm {
	background: transparent; border: 1px solid var(--sva-border); border-radius: 8px;
	padding: 5px 12px; font-size: .78rem; cursor: pointer; color: var(--sva-text);
}
.sva-op-btn-ghost-sm:hover { border-color: var(--sva-muted); }
/*
 * v9.15.371: op verzoek - begeleidende tekst boven de gegevens in het
 * lichtblauwe blokje bij "Beschikbare diensten" ("Nieuwe dienst
 * beschikbaar - zie de gegevens hieronder."), zodat meteen duidelijk is
 * waar dit blokje over gaat - niet alleen kale datum/locatie-regels.
 */
/*
 * v9.15.373: op verzoek - de intro-tekst moet, net als het feiten-
 * blokje eronder, een lichtblauwe achtergrond hebben - blijft wel een
 * LOS blokje (zie de PHP-toelichting), niet samengevoegd met het
 * feiten-blokje. Gebruikt zowel bij "Beschikbare diensten" als bij
 * "Uw diensten".
 */
.sva-op-dienstkaart-feiten-intro {
	margin: 0 0 10px; font-size: .88rem; font-weight: 600; color: #14428f;
	background: #e6f0ff; border-radius: var(--sva-radius, 12px); padding: 11px 13px;
}
/*
 * v9.15.375: op verzoek - "de labelkleur en de intro-kleur moeten
 * overeenkomen". Deze twee modifiers geven de intro-tekst dezelfde
 * kleur als de status-badge ernaast in de kop van de kaart
 * (.sva-op-dienstkaart-vast = groen "Ingepland",
 * .sva-op-dienstkaart-actie = oranje "Nog ondertekenen" - zie de
 * kleurwaarden daar). De blauwe basisklasse hierboven blijft ongewijzigd
 * en dus in gebruik bij "Beschikbare diensten", waar de bijpassende
 * badge ("NIEUW") ook al blauw is.
 */
.sva-op-dienstkaart-feiten-intro-groen { background: #e9f8f0; color: #0f7a4d; }
.sva-op-dienstkaart-feiten-intro-actie { background: #fff2df; color: #a35b00; }

@media (max-width: 600px) {
	.sva-op-dienstkaart-acties { flex-direction: column; }
	.sva-op-dienstkaart-acties .sva-op-btn,
	.sva-op-dienstkaart-acties .sva-op-btn-ghost { width: 100%; }
	.sva-op-dienst-agenda-weekdienst { display: none; } /* te smal voor tekst; het gekleurde vak volstaat */
	.sva-op-dienst-agenda-schakelaar { display: flex; }
	.sva-op-dienst-agenda-weergave-knop { flex: 1; text-align: center; }
}

/* ---------- v6.9 — Diensten zichtbaar in de agenda ---------- */
.sva-op-agenda-heeft-dienst { position: relative; }
.sva-op-agenda-dienstbalk {
	position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
	width: 16px; height: 3px; border-radius: 2px; background: currentColor;
}
/*
 * Voorlopig: dezelfde gestippelde-rand-behandeling als "definitief"
 * hieronder, maar zonder de vaste kleur - zie de definitieve, actieve
 * kleuren verderop bij ".sva-op-agenda-dienst-toegewezen" (v9.15.396).
 */
.sva-op-agenda-dienst-toegewezen .sva-op-agenda-dienstbalk { opacity: .55; }

/*
 * v9.15.396: op verzoek - "gereageerd" (wacht op de keuze van SVA) was
 * amper zichtbaar (alleen een klein stipje, geen kleur op de cel
 * zelf), terwijl het bijbehorende label ("U heeft gereageerd") wel
 * duidelijk oranje is. Nu dezelfde oranje familie als dat label, zodat
 * een blik op de kalender alleen al laat zien welke dagen nog op een
 * beslissing wachten.
 */
.sva-op-agenda-dienst-gereageerd {
	background: #fdf3e2; border-color: #f0d3a0; color: #8a5a00;
}
.sva-op-agenda-dienst-gereageerd .sva-op-agenda-dienstbalk {
	width: 5px; height: 5px; border-radius: 50%; opacity: .55;
}
/*
 * v9.15.372: op verzoek - een nog onbeantwoorde, beschikbare dienst
 * ("Beschikbare diensten") stond nog nergens in de agenda, i.t.t. een
 * bevestigde dienst. Fallback-styling voor als er (nog) geen kleur voor
 * deze dienst bekend is - normaliter overschrijft de per-dienst kleur
 * (inline style, zie maand_html()) dit toch.
 *
 * v9.15.396: op verzoek - stond eerst in dezelfde oranje familie als
 * "gereageerd", wat de twee volledig onbeantwoord/wél-al-gereageerd-
 * statussen niet meer van elkaar liet onderscheiden. Nu lichtblauw,
 * dezelfde kleur als het blauwe "NIEUW"-label op de dienstkaart
 * (.sva-op-dienstkaart-status-nieuw hieronder) - oranje betekent nu
 * overal consequent "er is al een reactie/keuze, wacht op een
 * beslissing", blauw betekent "nieuw, nog niets mee gedaan".
 */
.sva-op-agenda-dienst-uitgenodigd { background: #e6f0ff; border-color: #9dc0f5; color: #14428f; }
.sva-op-agenda-stip-nieuw { background: #9dc0f5; }
.sva-op-legenda-dienst { background: #e6f0ff; border-color: #9dc0f5; }

.sva-op-agenda-dienstblok {
	display: flex; gap: 10px; align-items: flex-start;
	background: #e6f0ff; border-radius: 12px; padding: 11px 13px; margin-bottom: 12px;
}
.sva-op-agenda-dienstblok-toegewezen { background: #eef1fe; }
.sva-op-agenda-dienstblok-gereageerd { background: #f4f5fb; }
.sva-op-agenda-dienstblok .dashicons { color: #14428f; flex: none; margin-top: 1px; }
.sva-op-agenda-dienstkop { display: block; font-size: .88rem; }
.sva-op-agenda-dienstregel { display: block; font-size: .84rem; color: var(--sva-muted); margin-top: 2px; }

.sva-op-agenda-vast p {
	margin: 0; font-size: .87rem; line-height: 1.55;
	background: #fdf3e2; color: #8a5a00; border-radius: 12px; padding: 11px 13px;
}

/* ---------- v7.0 — Lichte variant en duwtje ---------- */

/* Alleen-lezen kalender: geen klikgedrag, geen hoverbelofte. */
.sva-op-agenda-alleenlezen .sva-op-agenda-dag { cursor: default; }
.sva-op-agenda-alleenlezen .sva-op-agenda-dag:hover {
	border-color: var(--sva-border); transform: none;
}

.sva-op-diensten-kalender { margin-bottom: 24px; }
.sva-op-diensten-kalendertekst {
	margin: 10px 0 0; font-size: .86rem; line-height: 1.55; max-width: 60ch;
}

/* Duwtje zodra de agenda aanstaat maar nog leeg is. */
.sva-op-agenda-duw {
	display: flex; gap: 12px; align-items: flex-start;
	background: #fdf3e2; border: 1px solid #f0d3a0;
	border-radius: var(--sva-radius, 16px);
	padding: 14px 18px; margin-bottom: 14px;
}
.sva-op-agenda-duw.sva-op-dismissible { padding-right: 38px; }
.sva-op-agenda-duw .dashicons { color: #a86400; flex: none; margin-top: 2px; }
.sva-op-agenda-duw p { margin: 0; font-size: .9rem; line-height: 1.55; color: #7a4f00; }

/* ---------- v7.1 — Actie bovenaan, agenda onderaan ---------- */
.sva-op-diensten-actiekop {
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(135deg, #eef1fe, #e8ecff);
	border: 1px solid #c9d2fb; border-radius: 12px;
	padding: 10px 14px; margin-bottom: 12px;
}
.sva-op-diensten-actiebel {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--sva-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
/* v9.9.5: de bel was vrijwel onzichtbaar. Oorzaak was niet de bel zelf maar
   de ondertitel-selector hieronder: "span span" matchte ook de dashicon in
   de cirkel en kleurde die grijs op indigo. Die selector is nu weg (de
   ">"-variant dekte de ondertitel al af) en de bel krijgt expliciet wit. */
.sva-op-diensten-actiebel .dashicons { font-size: 15px; width: 15px; height: 15px; color: #fff; }
.sva-op-diensten-actiekop strong,
.sva-op-diensten-actiekop .sva-op-actiekop-titel { display: block; margin: 0; font-size: .9rem; font-weight: 700; }
.sva-op-diensten-actiekop > div > span { font-size: .82rem; color: var(--sva-muted); }

/* Agenda: naslag, dus ingeklapt en kleiner. */


/* ---------- v7.3 — Afzeggen in het portaal ---------- */
.sva-op-afzeg { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sva-border); }
/*
 * v9.15.370: op verzoek - "de witte knop valt weg". .sva-op-btn-ghost
 * gebruikt standaard een bijna-witte rand (var(--sva-border)), wat op de
 * blauwe kaart van v9.15.368 nog opviel maar op de weer-witte kaart van
 * v9.15.369 vrijwel onzichtbaar is. Alleen deze specifieke knop (niet
 * .sva-op-btn-ghost overal elders in de plugin) krijgt een duidelijke
 * rand in de merkkleur, zodat hij als knop herkenbaar blijft.
 */
.sva-op-afzeg-open.sva-op-btn-ghost { border-color: var(--sva-primary); }
.sva-op-afzeg-open.sva-op-btn-ghost:hover { background: var(--sva-primary); color: #fff; }
.sva-op-afzeg .sva-op-dienstkaart-klein { display: block; margin-top: 6px; }

.sva-op-afzeg-form {
	margin-top: 14px; padding: 14px 16px;
	background: #fdf3e2; border-radius: 12px;
}
.sva-op-afzeg-form label {
	display: block; font-size: .85rem; font-weight: 600; margin-bottom: 10px;
}
.sva-op-afzeg-form select,
.sva-op-afzeg-form input[type="text"] {
	width: 100%; margin-top: 5px; padding: 9px 12px;
	border: 1px solid #e6cfa4; border-radius: 10px;
	font-family: inherit; font-size: .9rem; box-sizing: border-box;
	background: #fff;
}
.sva-op-afzeg-form input[type="text"] { margin-bottom: 10px; }
.sva-op-afzeg-form p { font-size: .84rem; line-height: 1.55; color: #7a4f00; margin: 0 0 12px; }
.sva-op-afzeg-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 600px) {
	.sva-op-afzeg-knoppen { flex-direction: column; }
	.sva-op-afzeg-knoppen .sva-op-btn,
	.sva-op-afzeg-knoppen .sva-op-btn-ghost { width: 100%; }
}

/* ---------- v7.5 — Binnenkomen via een gedeelde link ---------- */
.sva-op-linkmelding {
	display: flex; gap: 12px; align-items: flex-start;
	border-radius: var(--sva-radius, 16px); padding: 15px 18px; margin-bottom: 18px;
}
.sva-op-linkmelding p { margin: 0; font-size: .9rem; line-height: 1.55; }
.sva-op-linkmelding .dashicons { flex: none; margin-top: 1px; }
.sva-op-linkmelding strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.sva-op-linkmelding ul { margin: 0 0 6px; padding-left: 18px; font-size: .88rem; line-height: 1.55; }
.sva-op-linkmelding span { font-size: .86rem; }

.sva-op-linkmelding-goed { background: #e9f8f0; border: 1px solid #b7e5cd; color: #0f7a4d; }
.sva-op-linkmelding-goed .dashicons { color: #12996a; }
.sva-op-linkmelding-let-op { background: #fdf3e2; border: 1px solid #f0d3a0; color: #7a4f00; }
.sva-op-linkmelding-let-op .dashicons { color: #a86400; }
.sva-op-linkmelding-fout { background: #fdecea; border: 1px solid #f5c2bd; color: #a4261f; }
.sva-op-linkmelding-fout .dashicons { color: #c0392b; }

/* ---------- v7.9 — Statuskaart op het tabblad Diensten ---------- */
.sva-op-status {
	display: flex; gap: 10px; align-items: flex-start;
	border-radius: 12px; padding: 12px 15px; margin-bottom: 12px;
	border: 1px solid transparent;
}
.sva-op-status-icoon { flex: none; font-size: 18px; width: 18px; height: 18px; margin-top: 1px; }
.sva-op-status-tekst { min-width: 0; flex: 1; }
.sva-op-status-tekst strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.sva-op-status-tekst p { margin: 0; font-size: .84rem; line-height: 1.5; }
.sva-op-status-tekst ul {
	margin: 6px 0 0; padding-left: 18px; font-size: .83rem; line-height: 1.5;
}
.sva-op-status-knop { margin-top: 8px; }

.sva-op-status-goed { background: #eef9f3; border-color: #c6e8d7; color: #145c3d; }
.sva-op-status-goed .sva-op-status-icoon { color: #12996a; }
.sva-op-status-let_op { background: #fdf3e2; border-color: #f0d3a0; color: #7a4f00; }
.sva-op-status-let_op .sva-op-status-icoon { color: #a86400; }
.sva-op-status-geblokkeerd { background: #fdecea; border-color: #f5c2bd; color: #8c231d; }
.sva-op-status-geblokkeerd .sva-op-status-icoon { color: #c0392b; }

.sva-op-status-tip {
	display: flex; gap: 9px; align-items: flex-start;
	background: #fff; border: 1px solid var(--sva-border);
	border-radius: 12px; padding: 11px 14px; margin-bottom: 12px;
}
.sva-op-status-tip .dashicons { color: var(--sva-primary); flex: none; margin-top: 1px; font-size: 17px; width: 17px; height: 17px; }
.sva-op-status-tip p { margin: 0; font-size: .83rem; line-height: 1.5; }
.sva-op-status-tip .sva-op-status-knop { margin-top: 6px; }
.sva-op-status-tip > div { min-width: 0; }

/* ============================================================
 *  v8.0 — Agenda compacter, diensten echt zichtbaar
 * ============================================================ */

/* Hij rekte mee tot de volle paneelbreedte voor 31 getallen; daardoor oogde
   hij dominanter dan hij is. */


/*
 * Een streepje onder het cijfer zei niets. Een gevulde dag met de starttijd
 * erin zegt wél iets: dat u werkt, en wanneer u moet beginnen.
 */
/*
 * v9.15.396: op verzoek - "de kleur die nu zwart/grijs is, dezelfde
 * kleur maken als het label" - deze cel gebruikte tot nu toe de
 * algemene thema-accentkleur (--sva-primary, kan per site donker/
 * navy-achtig ogen), los van de kleur die het bijbehorende label
 * ("Ingepland") elders al gebruikt. Nu dezelfde groene tint als
 * .sva-op-dienstkaart-vast hierboven, zodat "groen = ingepland"
 * overal hetzelfde betekent - in de kalender én op de dienstkaart.
 */
.sva-op-agenda-dienst-definitief {
	background: #0f7a4d; border-color: #0f7a4d; color: #fff;
	font-weight: 700;
}
.sva-op-agenda-dienst-definitief:hover { border-color: #0c6540; }
.sva-op-agenda-dienst-definitief .sva-op-agenda-nummer { line-height: 1; }

/*
 * v9.15.396: "voorlopig toegewezen" is net als "gereageerd" een
 * NOG-WACHT-status (geen belofte), dus dezelfde oranje familie als de
 * "Nog ondertekenen"/"U heeft gereageerd"-labels - i.p.v. de eerdere
 * blauwe tint, die niets meer met een status-label overeenkwam. De
 * gestippelde rand blijft het onderscheid t.o.v. "gereageerd"
 * hieronder: nog geen belofte, wel al een keuze van SVA.
 */
.sva-op-agenda-dienst-toegewezen {
	background: #fff2df; border: 1.5px dashed #a35b00; color: #a35b00; font-weight: 700;
}

.sva-op-agenda-heeft-dienst { flex-direction: column; gap: 1px; justify-content: center; }
.sva-op-agenda-tijd {
	font-size: .58rem; font-weight: 700; letter-spacing: -.02em;
	line-height: 1; opacity: .95;
	display: flex; align-items: center; justify-content: center; gap: 2px;
}
/*
 * v9.15.398: op verzoek - het klokicoontje vóór de starttijd (zie
 * class-sva-op-planning.php) op dezelfde piepkleine schaal als de
 * tekst zelf, zodat "07:00" ondubbelzinnig als kloktijd leest i.p.v.
 * als een aantal uren.
 */
.sva-op-agenda-tijd .dashicons {
	font-size: 8px; width: 8px; height: 8px; line-height: 1;
}
.sva-op-agenda-stip-reactie { background: #a35b00; }

/* Op een telefoon is er geen ruimte voor een tijd in het vakje. */
@media (max-width: 600px) {
	.sva-op-agenda-tijd { display: none; }
}

.sva-op-legenda-dienst { background: var(--sva-primary); border-color: var(--sva-primary); }
.sva-op-legenda-voorlopig { background: #e8ecff; border: 1.5px dashed var(--sva-primary); }

/* De regel die de kalender afmaakt: wanneer moet u waar zijn? */
.sva-op-kalender-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.sva-op-kalender-lijst li {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 9px 0; border-bottom: 1px solid var(--sva-border); font-size: .88rem;
}
.sva-op-kalender-lijst li:last-child { border-bottom: 0; }
.sva-op-kalender-lijst-dag {
	flex: none; min-width: 52px; font-weight: 700; color: var(--sva-primary);
	text-transform: capitalize;
}
.sva-op-kalender-lijst .sva-op-muted { font-size: .84rem; }


/* ============================================================
 *  v8.2 — Volwaardige agenda, en alles binnen de kaders
 * ============================================================ */

/*
 * De agenda was een dichtgeklapte samenvatting ("Juli 2026 — 0 diensten").
 * Nu een gewoon blok waarin u vooruit en terug kunt bladeren: werk staat
 * zelden alleen in de huidige maand.
 */
.sva-op-diensten-kalender { margin-top: 26px; }
.sva-op-diensten-kalender .sva-op-agenda { max-width: 480px; padding: 14px; }
.sva-op-diensten-kalender .sva-op-agenda-dag { min-height: 32px; font-size: .8rem; }
.sva-op-diensten-kalender .sva-op-agenda-leeg { min-height: 32px; }
.sva-op-diensten-kalender.sva-op-agenda-laden { opacity: .55; pointer-events: none; }
.sva-op-kalender-onder { max-width: 480px; }

/* ---------- Binnen de kaders blijven ----------
 * Een raster van zeven kolommen en een paar lange regels vragen erom dat
 * er iets uitsteekt op een telefoon. Deze regels zetten dat vast.
 */
.sva-op-tab-panel { min-width: 0; }
.sva-op-agenda,
.sva-op-agenda-wrap,
.sva-op-diensten-wrap,
.sva-op-dienstkaart,
.sva-op-status,
.sva-op-status-tip { max-width: 100%; box-sizing: border-box; }

/* Flex-kinderen krimpen niet vanzelf; zonder dit duwt een lange
   locatienaam of dienstitel de kaart uit beeld. */
.sva-op-dienstkaart-feiten li,
.sva-op-kalender-lijst li,
.sva-op-status-tekst,
.sva-op-agenda-uitleg p,
.sva-op-agenda-duw p,
.sva-op-status-tip p { min-width: 0; overflow-wrap: anywhere; }
.sva-op-dienstkaart-kop h4 { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
	/* De agenda mag de volle breedte gebruiken, maar niet meer dan dat. */
	.sva-op-diensten-kalender .sva-op-agenda,
	.sva-op-kalender-onder { max-width: none; }
	.sva-op-agenda { padding: 10px; }
	.sva-op-agenda-grid, .sva-op-agenda-weekdagen { gap: 3px; }
	.sva-op-agenda-dag, .sva-op-agenda-leeg { min-height: 38px; }
	.sva-op-agenda-kop strong { font-size: .95rem; }
	.sva-op-agenda-nav { width: 32px; height: 32px; }

	/* Panelen naast de agenda komen eronder en vullen de breedte. */
	.sva-op-agenda-kolommen { grid-template-columns: 1fr; gap: 16px; }
	.sva-op-agenda-keuzes { grid-template-columns: 1fr; }
	.sva-op-agenda-legenda { gap: 5px 12px; font-size: .76rem; }

	/* De regel onder de agenda wordt een blokje in plaats van een rij. */
	.sva-op-kalender-lijst li { flex-direction: column; align-items: flex-start; gap: 2px; }
	.sva-op-kalender-lijst-dag { min-width: 0; }

	.sva-op-diensten-actiekop { padding: 14px 16px; gap: 11px; }
	.sva-op-status, .sva-op-status-tip { padding: 14px 16px; gap: 11px; }
	.sva-op-dienstkaart { padding: 15px 16px; }
}

/* v9.13.8: aftelling van de geldigheid van de inlogcode. */
.sva-op-code-teller {
	font-size: .84rem;
	color: var(--sva-muted, #797c93);
	margin: -4px 0 14px;
}
.sva-op-code-teller.sva-op-code-verlopen {
	color: var(--sva-danger, #f04438);
	font-weight: 600;
}

/* v9.13.7: knop tijdens het verzenden - laat zien dat er iets gebeurt, en
   maakt visueel duidelijk dat nog een keer klikken geen zin heeft. */
.sva-op-bezig {
	opacity: .72;
	cursor: progress !important;
}

/* Het meldingenpaneel had een vaste breedte van 340px; op een smalle
   telefoon steekt dat aan de rechterkant uit. */
.sva-op-bell-panel { max-width: calc(100vw - 24px); box-sizing: border-box; }

/*
 * v9.13.6: op een telefoon viel het paneel links buiten beeld. Het lijnt
 * namelijk uit op het belicoon (rechts in de kop) en groeit van daaruit
 * naar links - bij een schermbreedte van rond de 390px begint een paneel
 * van 340px dan op een negatieve positie. De maximumbreedte hierboven
 * loste dat niet op: die beperkt alleen de breedte, niet waar het paneel
 * begint.
 *
 * Op smalle schermen lijnt het daarom uit op het scherm zelf in plaats
 * van op de knop, en verschijnt het gecentreerd als een dialoogvenster.
 */
@media (max-width: 600px) {
	.sva-op-bell-panel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		max-width: none;
		max-height: 72vh;
	}
}

/*
 * Vangnet, maar gericht: alleen binnen de twee planningstabbladen. Een
 * regel als ".sva-op-app *" zou ook de horizontaal scrollende navigatie en
 * de documentmodal raken - die hebben juist ruimte nodig.
 */
#sva-op-tab-diensten,
#sva-op-tab-beschikbaarheid { min-width: 0; overflow-x: hidden; }
#sva-op-tab-diensten *,
#sva-op-tab-beschikbaarheid * { max-width: 100%; box-sizing: border-box; }

/* ---------- v8.3 — Aangetikte dag in de lijst ---------- */
/*
 * In de lichte variant is de agenda alleen om te kijken. Een dag zonder
 * dienst reageert dus niet; een dag mét dienst wel, en licht de regel
 * eronder op.
 */
.sva-op-agenda-alleenlezen .sva-op-agenda-heeft-dienst { cursor: pointer; }
.sva-op-agenda-alleenlezen .sva-op-agenda-heeft-dienst:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(30, 34, 51, .16);
}
.sva-op-kalender-lijst-actief {
	background: var(--sva-primary-soft, #eef1fe);
	border-radius: 10px; padding-left: 10px; padding-right: 10px;
	box-shadow: inset 3px 0 0 var(--sva-primary);
}

/* ============================================================
 *  v8.4 — Binnenkomen via een gedeelde link
 * ============================================================ */

/* Op het inlogscherm: waarvóór log je in? */
.sva-op-login-doel {
	display: flex; gap: 12px; align-items: flex-start; text-align: left;
	background: var(--sva-primary-soft, #eef1fe); border: 1px solid #c9d2fb;
	border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.sva-op-login-doel .dashicons { color: var(--sva-primary); flex: none; margin-top: 1px; }
.sva-op-login-doel > div { min-width: 0; }
.sva-op-login-doel strong { display: block; font-size: .95rem; }
.sva-op-login-doel span { display: block; font-size: .85rem; color: var(--sva-muted); }
.sva-op-login-doel-uitleg { margin-top: 6px; color: var(--sva-primary-dark, #4453d6) !important; font-weight: 600; }
/*
 * v9.15.269: op verzoek - foutvariant voor een ongeldige/verouderde
 * deel-link (verkeerd zoektoken, of dienst inmiddels verwijderd), zodat
 * dit duidelijk anders oogt dan het gewone "u opende een dienst"-blok.
 */
.sva-op-login-doel-fout {
	background: #fff8e8; border-color: #f0d99a;
}
.sva-op-login-doel-fout .dashicons { color: #a15c00; }

.sva-op-login-aanmelden {
	font-size: .86rem; text-align: center; margin: -6px 0 16px; color: var(--sva-muted);
}
.sva-op-login-aanmelden a { font-weight: 600; }

/* Op de voortgangspagina: wat moet ik doen om die dienst te kunnen zien? */
.sva-op-doelmelding {
	position: relative;
	display: flex; gap: 14px; align-items: flex-start;
	background: #fdf3e2; border: 1px solid #f0d3a0;
	border-radius: var(--sva-radius, 16px);
	padding: 17px 44px 17px 20px; margin-bottom: 20px;
}
.sva-op-doelmelding-icoon { color: #a86400; flex: none; margin-top: 2px; }
.sva-op-doelmelding > div { min-width: 0; }
.sva-op-doelmelding strong { display: block; font-size: 1rem; color: #7a4f00; }
.sva-op-doelmelding p { margin: 6px 0 0; font-size: .89rem; line-height: 1.6; color: #7a4f00; }
.sva-op-doelmelding-dienst {
	font-weight: 700; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
}
.sva-op-doelmelding-dienst .sva-op-muted { font-weight: 500; font-size: .85rem; }
.sva-op-doelmelding-eerlijk { font-style: italic; opacity: .85; }
.sva-op-doelmelding-sluit {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; cursor: pointer;
	font-size: 1.4rem; line-height: 1; color: #a86400; opacity: .6; padding: 4px 8px;
}
.sva-op-doelmelding-sluit:hover { opacity: 1; }

@media (max-width: 640px) {
	.sva-op-doelmelding { padding: 15px 40px 15px 16px; gap: 11px; }
}

/* ---------- v8.5 — Nieuwe versie klaarzetten ---------- */
/* Buiten het venster: geen knop, wel een uitleg met een uitweg. */
.sva-op-opvolger-later {
	background: #f7f8fc; border-radius: 10px; padding: 9px 13px;
	font-size: .84rem; line-height: 1.55; margin: 6px 0 0;
}
/* Klopt de einddatum van de klaargezette versie niet, dan hoort dat op te
   vallen op de plek waar hij staat. */
.sva-op-doc-fout {
	background: #fdecea; color: #a4261f; border-radius: 8px;
	padding: 3px 9px; font-size: .78rem; font-weight: 600;
	display: inline-block; margin-left: 4px;
}

/* ---------- v8.6 — Verlenging of vervanging ---------- */
.sva-op-opvolger-soort {
	border: 0; padding: 0; margin: 0 0 14px;
}
.sva-op-opvolger-soort legend {
	font-size: .88rem; font-weight: 700; padding: 0; margin-bottom: 8px;
}
.sva-op-opvolger-keuze {
	display: flex; gap: 10px; align-items: flex-start;
	border: 1px solid var(--sva-border); border-radius: 12px;
	padding: 11px 14px; margin-bottom: 8px; cursor: pointer;
	background: #fff; transition: border-color .12s ease, background .12s ease;
}
.sva-op-opvolger-keuze:hover { border-color: var(--sva-primary); }
.sva-op-opvolger-keuze input { margin-top: 3px; flex: none; }
.sva-op-opvolger-keuze > span { min-width: 0; }
.sva-op-opvolger-keuze strong { display: block; font-size: .89rem; }
.sva-op-opvolger-keuze .sva-op-muted { display: block; font-size: .82rem; line-height: 1.5; margin-top: 2px; }
.sva-op-opvolger-keuze.aangevinkt,
.sva-op-opvolger-keuze:has(input:checked) {
	border-color: var(--sva-primary); background: var(--sva-primary-soft, #eef1fe);
}

/* Een vervanging is ingrijpender: dat mag je zien aan het blok. */
.sva-op-opvolger-is-vervanging .sva-op-opvolger-soort .sva-op-opvolger-keuze.aangevinkt,
.sva-op-opvolger-keuze:has(input:checked) {
	border-color: #e0a437; background: #fdf3e2;
}

/* ---------- v8.7 — Het oude document vertelt wat er komt ---------- */
.sva-op-doc-wordt-vervangen {
	background: #eef1fe; color: #3d4bb8; border-radius: 8px;
	padding: 3px 9px; font-size: .76rem; font-weight: 600;
	display: inline-block; margin-left: 4px;
}

/* ---------- v9.2 — Gegevens bij een document ---------- */
.sva-op-opvolger-velden {
	background: #fbfbfe; border: 1px solid var(--sva-border);
	border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.sva-op-opvolger-velden h5 {
	/*
	 * v9.4.4: dit thema (Avada) heeft een eigen, veel grotere stijl voor
	 * kale h5-elementen. Onze eigen waarden expliciet herhalen zodat ze
	 * niet worden overstemd, in plaats van te vertrouwen op wat de browser
	 * toevallig als standaard voor h5 gebruikt.
	 */
	margin: 0 0 3px !important;
	font-size: .92rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: inherit !important;
	font-family: inherit !important;
}
.sva-op-opvolger-velden > .sva-op-veld-hint { margin: 0 0 12px; }
.sva-op-opvolger-velden label { display: block; margin-bottom: 12px; }
.sva-op-opvolger-velden label:last-child { margin-bottom: 0; }

/* ---------- v9.3 — Waarschuwing bij gevolgen ---------- */
.sva-op-veld-waarschuwing {
	display: flex; gap: 8px; align-items: flex-start;
	background: #fdf3e2; border: 1px solid #f0d3a0; color: #7a4f00;
	border-radius: 10px; padding: 10px 13px; margin: 0 0 14px;
	font-size: .85rem; line-height: 1.55;
}
.sva-op-veld-waarschuwing .dashicons { flex: none; color: #a86400; margin-top: 1px; }

/* ---------- v9.4 — Hangende wijziging: tweede pil + waarschuwing ---------- */
.sva-op-bord-titel + .sva-op-statuslabel + .sva-op-statuslabel,
.sva-op-step-title + .sva-op-statuslabel + .sva-op-statuslabel {
	margin-left: 6px;
}
.sva-op-geraakt-waarschuwing {
	display: flex; gap: 10px; align-items: flex-start;
	background: #eef1ff; border: 1px solid #c9d2fb; color: #3f4bc4;
	border-radius: 12px; padding: 13px 15px; margin: 0 0 14px;
}
.sva-op-geraakt-waarschuwing .dashicons { flex: none; margin-top: 1px; }
.sva-op-geraakt-waarschuwing strong { display: block; font-size: .92rem; margin-bottom: 3px; }
.sva-op-geraakt-waarschuwing p { margin: 0; font-size: .87rem; line-height: 1.55; }

/* ---------- v9.4.1 — Nieuwe gegevens (in behandeling) ---------- */
.sva-op-ingevuld-nieuw {
	background: #eef1ff; border-color: #c9d2fb;
}
.sva-op-ingevuld-nieuw .sva-op-ingevuld-kop { color: #3f4bc4; }
.sva-op-ingevuld-nieuw .sva-op-veld-hint { margin: 0 0 10px; font-size: .82rem; }
.sva-op-ingevuld-gewijzigd dd { font-weight: 700; color: #3f4bc4; }

/* ---------- v9.4.2 — Banner bij een hangende wijziging, en labels ---------- */
.sva-op-klaarkaart-hangend {
	background: #eef1ff; border-color: #c9d2fb;
}
.sva-op-klaarkaart-hangend .sva-op-klaarkaart-icoon { color: #3f4bc4; }
.sva-op-klaarkaart-hangend p { color: #3f4bc4; }
.sva-op-klaarkaart-hangend strong { color: #2f3aa0; }

/* Het "wat komt er straks te staan"-blokje in de waarschuwing bij een
   geraakte stap. */
.sva-op-geraakt-nieuwe-waarden {
	margin-top: 10px; padding-top: 10px; border-top: 1px solid #c9d2fb;
}
.sva-op-geraakt-nieuwe-waarden .sva-op-veld-hint { margin: 0 0 6px; font-size: .82rem; }
.sva-op-geraakt-nieuwe-waarden .sva-op-ingevuld-rij { padding: 3px 0; border-bottom: 0; }
.sva-op-geraakt-nieuwe-waarden dt { font-weight: 600; font-size: .84rem; }
.sva-op-geraakt-nieuwe-waarden dd { font-weight: 700; font-size: .84rem; }

/* ---------- v9.8.9 — Reeds aangeleverd bestand bij Persoonlijke gegevens ---------- */
.sva-op-veld-label {
	font-weight: 600; font-size: .84rem; margin: 0 0 4px; color: var(--sva-tekst, #2a2c3a);
}
.sva-op-huidig-bestand-rij {
	display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
}
.sva-op-huidig-bestand-vervangen summary {
	cursor: pointer; font-size: .82rem; color: var(--sva-primary, #5b6cf0); margin-bottom: 6px;
}

/*
 * v9.15.41: "Extra functie aanvragen" (module "Hergebruik tussen
 * sollicitaties", zie class-sva-op-hergebruik.php). Volledig eigen,
 * losse stijlblok - raakt geen bestaande klasse.
 */
.sva-op-tab-titel { margin: 0 0 6px; font-size: 1.2rem; }
.sva-op-extra-functie-lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sva-op-extra-functie-kaart {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	border: 1.5px solid var(--sva-border, #e2e4ec); border-radius: 12px; padding: 14px 16px;
}
.sva-op-extra-functie-info strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.sva-op-extra-functie-info p { margin: 0; font-size: .85rem; }
.sva-op-extra-functie-dekking {
	display: flex; align-items: center; gap: 4px; margin: 6px 0 0 !important;
	font-size: .8rem !important; color: #5b3fd6;
}
.sva-op-extra-functie-dekking .dashicons { font-size: 14px; width: 14px; height: 14px; }
/*
 * v9.15.102: op verzoek - iets sterker laten opvallen wanneer alles al
 * klaarstaat (op de handtekening na) dan wanneer het pas gedeeltelijk
 * is - dat verschil is nu net het hele punt van deze tekst.
 */
.sva-op-extra-functie-dekking-volledig { color: #0d7a48; font-weight: 600; }
/*
 * v9.15.106: op verzoek - korte, inklapbare lijst met de concrete
 * eisen zelf (elk met een vinkje), i.p.v. alleen een kale telling.
 * Zelfde <details>/<summary>-patroon als elders op het portaal.
 */
.sva-op-extra-functie-eisen { margin: 6px 0 0; font-size: .8rem; }
.sva-op-extra-functie-eisen summary { cursor: pointer; color: var(--sva-primary, #5b6cf0); font-weight: 600; }
.sva-op-extra-functie-eisen summary::-webkit-details-marker,
.sva-op-extra-functie-eisen summary::marker { display: none; content: ''; }
.sva-op-extra-functie-eisen ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sva-op-extra-functie-eisen li { display: flex; align-items: center; gap: 5px; color: var(--sva-text, #23233a); }
.sva-op-extra-functie-eisen li .dashicons { font-size: 15px; width: 15px; height: 15px; flex-shrink: 0; }
.sva-op-extra-functie-eis-voldaan .dashicons { color: #0d7a48; }
.sva-op-extra-functie-eis-open { color: var(--sva-muted, #6b6e85); }
.sva-op-extra-functie-eis-open .dashicons { color: var(--sva-muted, #6b6e85); }
/* v9.15.52: het formulier rond de knop mag geen eigen box-gedrag toevoegen. */
.sva-op-extra-functie-form { flex-shrink: 0; margin: 0; }
.sva-op-extra-functie-start { flex-shrink: 0; }
@media (max-width: 640px) {
	.sva-op-extra-functie-kaart { flex-direction: column; align-items: stretch; }
	.sva-op-extra-functie-form { width: 100%; }
	.sva-op-extra-functie-start { width: 100%; justify-content: center; }
}

/* ---------- v9.15.205 — per-veld foutmarkering bij inzending ---------- */
/*
 * Consistent met de bestaande rode kleuren elders in de plugin
 * (.sva-op-badge-rejected, .sva-op-form-message.error: #b3251d op
 * #fde3e1). Zie toonVeldFouten()/wisVeldFouten() in portal.js.
 */
/*
 * v9.15.208: BUGFIX op verzoek - geverifieerd (server geeft de fout
 * correct terug, JS crasht niet, de class werd wel/niet toegepast bleek
 * onduidelijk) dat de rode rand het soms verliest van een specifiekere of
 * later geladen thema-regel (Avada is hier eerder al eens de oorzaak van
 * gebleken - zie eerdere toelichtingen elders in dit bestand over
 * ".sva-op-linklike" die om dezelfde reden !important nodig had).
 * Specificiteit fors verhoogd (klasse herhaald i.p.v. een ID te
 * gebruiken - dat zou weer andere dingen kunnen breken) én de VOLLEDIGE
 * "border"-eigenschap gezet i.p.v. alleen "border-color", voor het geval
 * een thema de hele "border"-shorthand met !important zet (dat zou anders
 * gewoon de kleur weer terugzetten, ook al "wint" border-color zelf).
 */
/*
 * v9.15.219: BUGFIX op verzoek - de rand was dikker dan een normaal veld
 * (2px + een extra schaduw-ring eromheen) en de foutmelding stond
 * vetgedrukt. Nu exact dezelfde dikte als een gewoon veld (1.5px, zie de
 * normale veldstijl hierboven), alleen rood - en de schaduw-ring eraf
 * (bleek niet meer nodig: de eerdere, bevestigde Avada-overschrijving werd
 * al opgelost door de border zelf met !important te zetten, de schaduw was
 * alleen een extra zekerheidslaag die de rand onnodig dik maakte).
 */
.sva-op-form-group.sva-op-veld-fout.sva-op-form-group.sva-op-veld-fout input,
.sva-op-form-group.sva-op-veld-fout.sva-op-form-group.sva-op-veld-fout select,
.sva-op-form-group.sva-op-veld-fout.sva-op-form-group.sva-op-veld-fout textarea,
.sva-op-form-group.sva-op-veld-fout.sva-op-form-group.sva-op-veld-fout .sva-op-dropzone {
	border: 1.5px solid #b3251d !important;
}
.sva-op-form-group.sva-op-veld-fout.sva-op-form-group.sva-op-veld-fout > label {
	color: #b3251d !important;
}
.sva-op-veld-foutmelding {
	margin: 4px 0 0;
	font-size: .82rem;
	color: #b3251d;
	font-weight: normal;
}

/* ---------- v9.15.217 — "vervalt binnenkort" gebruikt nu .sva-op-statuslabel ---------- */
/*
 * v9.15.215: de "leeg" (niet van toepassing) variant houdt zijn plek in de
 * rij bezet (i.p.v. helemaal te ontbreken) - anders schuiven latere
 * kolommen op tussen rijen (zie de uitgebreide toelichting bij
 * verlopend_document_label() in class-sva-op-portal.php). Alleen relevant
 * voor DIT ene statuslabel (het is het enige dat conditioneel getoond
 * wordt) - de overige statuslabels staan altijd, dus die hebben dit niet
 * nodig.
 */
.sva-op-statuslabel-leeg { visibility: hidden; }