/* Afbeelding bewerken
   ===================
   De popup .pop-up-afbeelding-filters. Zelfde opzet als .pop-up-afbeelding:
   op mobiel vult hij het scherm, op desktop zweeft hij midden in beeld met de
   achtergrond vervaagd (.blur-overall). Kop, body en voet volgen de indeling
   van .pop-up-grafische-service, zodat de drie grote pop-ups er hetzelfde
   uitzien.

   Gedrag en berekeningen staan in js/customizer-afbeelding-bewerker.js; die
   zet ook de pixelmaten van .bewerker-stage, .bewerker-vlak en de <img>. */

.pop-up-open-afbeelding-filters .pop-up-afbeelding-filters {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
}

.pop-up-afbeelding-filters.tool-pop-up {
	padding: unset;
	min-width: unset;
	box-shadow: var(--pop-up-shadow-soft);
}

/* align-self overschrijft de align-items: center van .tool-pop-up; zonder die
   regel wordt de inhoud op zijn eigen hoogte gecentreerd in plaats van de
   pop-up te vullen. */
.pop-up-afbeelding-filters .pop-up-content {
	height: auto;
	align-self: stretch;
	min-height: 0;
	width: 100%;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: unset;
	justify-content: unset;
	padding: unset;
	gap: unset;
}

/* Kop
   --- */
.pop-up-afbeelding-filters .pop-up-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 0 auto;
	padding: 10px 13px;
	border-bottom: 1px solid var(--border-color);
}

.pop-up-afbeelding-filters .pop-up-header-title {
	font-size: 16px;
	font-weight: 600;
}

/* Bestandsnaam en afmetingen onder de titel. min-width: 0 laat een lange
   bestandsnaam afkappen in plaats van de sluitknop weg te duwen. */
.pop-up-afbeelding-filters .pop-up-header-titel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pop-up-afbeelding-filters .bewerker-bestand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--light-text-color);
	min-width: 0;
}

.pop-up-afbeelding-filters .bewerker-bestandsnaam {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pop-up-afbeelding-filters .bewerker-afmetingen {
	flex: 0 0 auto;
}

/* Puntje tussen bestandsnaam en afmetingen. Hij hangt aan de afmetingen zelf,
   zodat hij met de :empty-regel hieronder mee verdwijnt zolang de JS de maten
   nog niet heeft ingevuld. De ruimte links komt van de gap op .bewerker-bestand. */
.pop-up-afbeelding-filters .bewerker-afmetingen::before {
	content: "\00b7";
	margin-right: 8px;
}

.pop-up-afbeelding-filters .bewerker-afmetingen:empty {
	display: none;
}

/* Body
   ---- */
/* min-height: 0 is nodig om een flex-item kleiner dan zijn inhoud te laten
   worden; zonder die regel groeit de preview buiten de pop-up. */
.pop-up-afbeelding-filters .pop-up-body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 13px;
	overflow-y: auto;
}

/* Op mobiel staat alles onder elkaar en scrollt .pop-up-body. De blokken
   houden dan hun eigen hoogte (flex: 0 0 auto); zouden ze mogen krimpen, dan
   schuift de zijbalk over het bijsnijden heen. */
.pop-up-afbeelding-filters .bewerker-hoofd {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

/* Preview
   ------- */
/* Het ruitjespatroon laat zien waar de afbeelding doorzichtig is; op het
   canvas van de tool schijnt daar het product doorheen. */
.pop-up-afbeelding-filters .bewerker-preview {
	/* Vaste hoogte zolang de pop-up onder elkaar staat; op desktop krijgt de
	   preview de ruimte die overblijft. */
	flex: 0 0 auto;
	height: 38dvh;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: var(--pop-up-radius);
	background-color: var(--background-color);
	background-image:
		linear-gradient(45deg, #eceef3 25%, transparent 25%, transparent 75%, #eceef3 75%),
		linear-gradient(45deg, #eceef3 25%, transparent 25%, transparent 75%, #eceef3 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

.pop-up-afbeelding-filters .bewerker-stage {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
}

.pop-up-afbeelding-filters .bewerker-vlak {
	position: absolute;
	/* isolation houdt het overvloeien van .bewerker-blend binnen dit vlak; het
	   ruitjespatroon eronder blijft er zo buiten. */
	isolation: isolate;
}

.pop-up-afbeelding-filters .bewerker-afbeelding {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: center center;
	object-fit: fill;
	user-select: none;
	-webkit-user-drag: none;
}

/* De kleurfilters die de tool met BlendColor 'add' maakt: een kleurlaag die
   bij het beeld wordt opgeteld. plus-lighter doet precies dat optellen;
   browsers die het niet kennen vallen terug op screen, dat er dichtbij zit.

   De laag ligt op dezelfde plek als de <img> en krijgt in JS dezelfde maten en
   transform. Het masker is de afbeelding zelf, zodat de kleur alleen valt waar
   de afbeelding ondoorzichtig is - de BlendColor van de tool laat het
   alfakanaal immers ongemoeid. */
.pop-up-afbeelding-filters .bewerker-blend {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: center center;
	pointer-events: none;
	mix-blend-mode: screen;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

@supports (mix-blend-mode: plus-lighter) {
	.pop-up-afbeelding-filters .bewerker-blend {
		mix-blend-mode: plus-lighter;
	}
}

/* Bijsnijden
   ---------- */
.pop-up-afbeelding-filters .bewerker-crop {
	position: absolute;
	inset: 0;
	display: none;
}

.pop-up-afbeelding-filters.bewerker-bijsnijden-actief .bewerker-crop {
	display: block;
}

/* De schaduw met een grote spread verduistert alles buiten het kader, zonder
   dat daar een los element voor nodig is. */
.pop-up-afbeelding-filters .bewerker-crop-kader {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid #ffffff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
	cursor: move;
	touch-action: none;
}

.pop-up-afbeelding-filters .bewerker-crop-greep {
	position: absolute;
	width: 18px;
	height: 18px;
	background-color: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 3px;
	touch-action: none;
}

.pop-up-afbeelding-filters .bewerker-crop-greep[data-greep="nw"] {
	left: -9px;
	top: -9px;
	cursor: nwse-resize;
}

.pop-up-afbeelding-filters .bewerker-crop-greep[data-greep="ne"] {
	right: -9px;
	top: -9px;
	cursor: nesw-resize;
}

.pop-up-afbeelding-filters .bewerker-crop-greep[data-greep="se"] {
	right: -9px;
	bottom: -9px;
	cursor: nwse-resize;
}

.pop-up-afbeelding-filters .bewerker-crop-greep[data-greep="sw"] {
	left: -9px;
	bottom: -9px;
	cursor: nesw-resize;
}

/* Filteropties
   ------------ */
/* De rij is breder dan de pop-up en schuift opzij; met de muis gaat dat door
   hem te slepen (zie motBewerkerStartFilterSlepen).

   De ruimte rondom is er voor het randje van de thumbnails: dat is een
   box-shadow en die valt buiten het element. Een scrollcontainer knipt alles
   wat buiten zijn kader valt, dus zonder die paar pixels is de bovenrand van
   elke thumbnail weg - en bij het begin van de rij ook de linkerrand. */
.pop-up-afbeelding-filters .bewerker-filters {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 2px 2px 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pop-up-afbeelding-filters .bewerker-filters::-webkit-scrollbar {
	display: none;
}

/* Vervaging aan de kant waar nog filters buiten beeld staan: hetzelfde masker
   als .show-fade in customizer-main.css, maar dan opzij. De classes zet
   motBewerkerFilterFade(); staan ze er allebei, dan vervagen beide randen. */
.pop-up-afbeelding-filters .bewerker-filters.fade-rechts {
	-webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
	mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.pop-up-afbeelding-filters .bewerker-filters.fade-links {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%);
	mask-image: linear-gradient(to right, transparent 0%, black 10%);
}

.pop-up-afbeelding-filters .bewerker-filters.fade-links.fade-rechts {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.pop-up-afbeelding-filters .bewerker-filter {
	flex: 0 0 auto;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	user-select: none;
	font-size: 11px;
	color: var(--light-text-color);
	text-align: center;
}

.pop-up-afbeelding-filters .bewerker-filter-thumb {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 74px;
	height: 74px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--pop-up-radius);
	background-color: var(--background-color);
	box-shadow: 0 0 0 1px var(--border-color);
}

.pop-up-afbeelding-filters .bewerker-filter-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Zelfde masker als in de preview; de thumbnail schaalt met object-fit:
   contain, dus doet het masker dat ook. */
.pop-up-afbeelding-filters .bewerker-filter-blend {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

@supports (mix-blend-mode: plus-lighter) {
	.pop-up-afbeelding-filters .bewerker-filter-blend {
		mix-blend-mode: plus-lighter;
	}
}

.pop-up-afbeelding-filters .bewerker-filter:hover .bewerker-filter-thumb {
	box-shadow: 0 0 0 1px var(--accent-color);
}

.pop-up-afbeelding-filters .bewerker-filter.active .bewerker-filter-thumb {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 1px var(--accent-color);
}

.pop-up-afbeelding-filters .bewerker-filter.active .bewerker-filter-label {
	color: var(--accent-color);
	font-weight: 600;
}

/* Secties (bijsnijden en zijbalk)
   ------------------------------- */
.pop-up-afbeelding-filters .bewerker-sectie {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pop-up-afbeelding-filters .bewerker-sectie-kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pop-up-afbeelding-filters .bewerker-sectie-titel {
	font-size: 13px;
	font-weight: 600;
}

.pop-up-afbeelding-filters .bewerker-crop-formaat {
	font-size: 12px;
	color: var(--light-text-color);
}

.pop-up-afbeelding-filters .bewerker-crop-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pop-up-afbeelding-filters .bewerker-knop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	background-color: var(--background-color-white);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pop-up-afbeelding-filters .bewerker-knop:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

/* De knop om te beginnen met bijsnijden en die om ermee te stoppen wisselen
   elkaar af; welke van de twee er staat hangt af van de cropmodus. */
.pop-up-afbeelding-filters .bewerker-crop-klaar,
.pop-up-afbeelding-filters.bewerker-bijsnijden-actief .bewerker-crop-start {
	display: none;
}

.pop-up-afbeelding-filters.bewerker-bijsnijden-actief .bewerker-crop-klaar {
	display: flex;
	border-color: var(--accent-color);
	background-color: var(--accent-color);
	color: #ffffff;
}

.pop-up-afbeelding-filters.bewerker-bijsnijden-actief .bewerker-crop-klaar:hover {
	color: #ffffff;
}

/* "Uitsnede wissen" komt er pas bij als er in deze preview iets weggesneden is;
   de class zet motBewerkerToonCropHerstel(). */
.pop-up-afbeelding-filters .bewerker-crop-herstel {
	display: none;
}

.pop-up-afbeelding-filters.bewerker-uitgesneden .bewerker-crop-herstel {
	display: flex;
}

/* Zijbalk
   ------- */
.pop-up-afbeelding-filters .bewerker-sidebar {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 13px;
	border-top: 1px solid var(--border-color);
}

.pop-up-afbeelding-filters .bewerker-schuif {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pop-up-afbeelding-filters .bewerker-schuif-kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
}

.pop-up-afbeelding-filters .bewerker-schuif-waarde {
	color: var(--light-text-color);
	font-variant-numeric: tabular-nums;
}

.pop-up-afbeelding-filters .bewerker-schuif.active .bewerker-schuif-label,
.pop-up-afbeelding-filters .bewerker-schuif.active .bewerker-schuif-waarde {
	color: var(--accent-color);
	font-weight: 600;
}

/* De schuif zelf krijgt de gedeelde opmaak van .mot-schuif in
   customizer-main.css, dezelfde als "Tekst buigen" in de tekst-popup. */

.pop-up-afbeelding-filters .bewerker-transformaties {
	display: flex;
	gap: 6px;
}

/* Alle vier op een regel: een flex-basis van 0 verdeelt de ruimte gelijk over de
   knoppen zonder naar de inhoud te kijken, zodat een langer woord de ene knop
   niet breder maakt dan de andere. Border-box houdt rand en binnenruimte binnen
   die breedte; anders past de vierde knop er net niet meer naast. */
.pop-up-afbeelding-filters .bewerker-transformatie {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 4px;
	border: 1px solid var(--border-color);
	border-radius: var(--pop-up-radius);
	background-color: var(--background-color-white);
	font-size: 11px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, color 0.15s;
}

.pop-up-afbeelding-filters .bewerker-transformatie:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.pop-up-afbeelding-filters .bewerker-transformatie svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Voet
   ---- */
.pop-up-afbeelding-filters .pop-up-footer {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 13px;
	border-top: 1px solid var(--border-color);
}

.pop-up-afbeelding-filters .bewerker-controle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--light-text-color);
}

/* Het schildje staat naast de tekst en mag niet meekrimpen als de regel afbreekt.
   De kleur komt van .mot-svg (zwart) af, dus die zetten we hier zelf. */
.pop-up-afbeelding-filters .bewerker-controle .mot-svg {
	flex: 0 0 auto;
	color: #7FCE9C;
}

.pop-up-afbeelding-filters .bewerker-controle strong {
	color: var(--text-color);
	font-weight: 600;
}

/* Foutmelding bij het opslaan of doorsturen. De pop-up blijft dan open staan
   met alle bewerkingen erin, dus de melding hoort naast de knoppen. */
.pop-up-afbeelding-filters .bewerker-melding {
	display: none;
	width: 100%;
	font-size: 12px;
	color: var(--reject-color);
}

.pop-up-afbeelding-filters .bewerker-melding.active {
	display: block;
}

.pop-up-afbeelding-filters .bewerker-acties {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.pop-up-afbeelding-filters .bewerker-annuleren,
.pop-up-afbeelding-filters .bewerker-bevestigen {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.pop-up-afbeelding-filters .bewerker-annuleren {
	border: 1px solid var(--border-color);
	background-color: var(--background-color-white);
	color: var(--text-color);
}

.pop-up-afbeelding-filters .bewerker-bevestigen {
	border: 1px solid var(--confirm-color);
	background-color: var(--confirm-color);
	color: #ffffff;
}

/* Tijdens het opslaan en doorsturen mag er niets meer aangeklikt worden; het
   laadscherm van de tool ligt er dan overheen. */
.pop-up-afbeelding-filters.bewerker-bezig .pop-up-body,
.pop-up-afbeelding-filters.bewerker-bezig .bewerker-acties {
	pointer-events: none;
	opacity: 0.6;
}

/* De SVG-filters (helderheid/contrast en wit verwijderen) worden alleen door
   de preview aangeroepen en hoeven zelf niets in beeld te brengen. */
.pop-up-afbeelding-filters .bewerker-svg-filters {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	/* Zwevend venster midden in beeld, net als .pop-up-afbeelding. */
	.pop-up-open-afbeelding-filters .pop-up-afbeelding-filters {
		position: absolute;
		width: 1100px;
		/* Op een smaller scherm blijft er zo altijd 45px over aan weerszijden. */
		max-width: calc(100dvw - 90px);
		height: 80dvh;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		box-shadow: var(--pop-up-shadow);
	}

	/* Preview met filteropties links, de instellingen in een vaste kolom
	   rechts. */
	.pop-up-afbeelding-filters .pop-up-body {
		flex-direction: row;
		gap: 20px;
		overflow: hidden;
	}

	/* Naast elkaar hoeft er niets meer te scrollen: de preview neemt de ruimte
	   die de filters en het bijsnijden overlaten. */
	.pop-up-afbeelding-filters .bewerker-hoofd {
		flex: 1 1 auto;
		min-height: 0;
	}

	.pop-up-afbeelding-filters .bewerker-preview {
		flex: 1 1 auto;
		height: auto;
	}

	.pop-up-afbeelding-filters .bewerker-sidebar {
		flex: 0 0 280px;
		width: 280px;
		padding-top: 0;
		padding-left: 20px;
		border-top: unset;
		border-left: 1px solid var(--border-color);
		overflow-y: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.pop-up-afbeelding-filters .bewerker-sidebar::-webkit-scrollbar {
		display: none;
	}
}