/* WP Ultimate — admin styling
   Design-systeem: indigo + slate, met categorie-kleuren voor veldtypes.
   Pas de look aan via de variabelen hieronder. */

:root {
	--wpu-primary: #4f46e5;
	--wpu-primary-dark: #4338ca;
	--wpu-primary-soft: #eef2ff;
	--wpu-ink: #1e293b;
	--wpu-muted: #64748b;
	--wpu-danger: #e11d48;
	--wpu-bg: #f8fafc;
	--wpu-card: #ffffff;
	--wpu-border: #e2e8f0;
	--wpu-border-strong: #cbd5e1;
	--wpu-radius: 8px;
	--wpu-radius-sm: 6px;
	--wpu-shadow: 0 1px 2px rgba(15, 23, 42, .06);
	--wpu-ring: 0 0 0 3px rgba(79, 70, 229, .18);
	--wpu-shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
	--wpu-shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);
	--wpu-grad: linear-gradient(135deg, #6366f1, #4f46e5);
	--wpu-hover: #f5f7ff;
}

/* ============ metabox velden ============ */

.wpu-fields { padding: 2px 0; }

.wpu-field {
	position: relative;
	padding: 14px 16px;
	border-bottom: 1px solid var(--wpu-border);
	box-sizing: border-box;
	vertical-align: top;
}
.wpu-fields > .wpu-field:last-child { border-bottom: 0; }
.wpu-fields.wpu-labels-left .wpu-field { display: flex; gap: 20px; }
.wpu-fields.wpu-labels-left .wpu-label { width: 25%; flex-shrink: 0; }
.wpu-fields.wpu-labels-left .wpu-input { flex: 1; }
.wpu-field[style*="width"] { display: inline-block; }

.wpu-label label {
	font-weight: 600;
	font-size: 13px;
	color: var(--wpu-ink);
	display: block;
	margin-bottom: 6px;
}
.wpu-required { color: var(--wpu-danger); font-weight: 700; }
/* hide_label-instelling: label visueel verbergen maar bereikbaar houden voor
   schermlezers (invoervelden behouden zo hun toegankelijke naam). */
.wpu-label.is-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.wpu-instructions { margin: -2px 0 8px; color: var(--wpu-muted); font-style: italic; font-size: 12px; }

.wpu-field.wpu-hidden,
.wpu-field.wpu-tab-hidden { display: none !important; }
.wpu-field.wpu-invalid { box-shadow: inset 3px 0 0 var(--wpu-danger); background: #fff1f2; }

/* inputs */
.wpu-input input[type="text"],
.wpu-input input[type="url"],
.wpu-input input[type="email"],
.wpu-input input[type="password"],
.wpu-input input[type="number"],
.wpu-input input[type="time"],
.wpu-input input[type="tel"],
.wpu-input textarea,
.wpu-input select {
	width: 100%;
	max-width: 600px;
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	box-shadow: none;
	transition: border-color .12s, box-shadow .12s;
}
/* Explicit chevron on every select the plugin renders (also outside the
   wpu-ui shell, e.g. field-group builder metaboxes on a normal post-edit
   screen), so it reads as a dropdown rather than a button. */
.wpu-input select,
.wpu-b-setting-input select,
.wpu-b-rule select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpu-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 14px;
	padding-right: 32px;
}
.wpu-input input:focus,
.wpu-input textarea:focus,
.wpu-input select:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}
.wpu-input input[type="number"] { max-width: 140px; }

/* File Upload-veld. De browser-native "Choose file / no file selected" valt
   volledig uit de toon naast de andere velden; ::file-selector-button trekt
   de knop in de plugin-stijl. Werkt in alle evergreen-browsers — zonder
   ondersteuning blijft de kale input over, dus geen functieverlies.
   Bewust hier en niet in form-builder.css: dit veld rendert via dezelfde
   Form::render_field() op de front-end, en dáár moet het er net zo uitzien. */
.wpu-input input[type="file"] {
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	/* 7px houdt de totale hoogte op de 40px van de tekstvelden ernaast. */
	padding: 7px 8px;
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	font-size: 13px;
	color: var(--wpu-muted);
	transition: border-color .12s, box-shadow .12s;
}
.wpu-input input[type="file"]:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}
.wpu-input input[type="file"]::file-selector-button {
	margin: 0 10px 0 0;
	padding: 4px 12px;
	background: var(--wpu-bg);
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	color: var(--wpu-ink);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .12s, color .12s;
}
.wpu-input input[type="file"]::file-selector-button:hover {
	border-color: var(--wpu-primary);
	color: var(--wpu-primary);
}

.wpu-prepend, .wpu-append {
	display: inline-block;
	padding: 5px 12px;
	background: var(--wpu-bg);
	border: 1px solid var(--wpu-border-strong);
	color: var(--wpu-muted);
	font-size: 12px;
}
.wpu-prepend { border-right: 0; border-radius: var(--wpu-radius-sm) 0 0 var(--wpu-radius-sm); }
.wpu-append { border-left: 0; border-radius: 0 var(--wpu-radius-sm) var(--wpu-radius-sm) 0; }
.wpu-prepend + input, span.wpu-prepend ~ input { max-width: 400px; width: auto; border-radius: 0; }
span.wpu-prepend ~ input:last-child { border-radius: 0 var(--wpu-radius-sm) var(--wpu-radius-sm) 0; }

.wpu-range { display: flex; align-items: center; gap: 14px; max-width: 600px; }
.wpu-range input[type="range"] { flex: 1; accent-color: var(--wpu-primary); }
.wpu-range-value {
	min-width: 44px;
	text-align: center;
	font-weight: 600;
	color: var(--wpu-primary-dark);
	background: var(--wpu-primary-soft);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
}

/* choice-lijsten */
.wpu-choice-list { margin: 0; }
.wpu-choice-list li { margin: 0 0 6px; }
.wpu-choice-list.wpu-layout-horizontal li { display: inline-block; margin-right: 18px; }
.wpu-choice-list input[type="checkbox"]:checked,
.wpu-choice-list input[type="radio"]:checked { accent-color: var(--wpu-primary); }
.wpu-taxonomy-list {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius-sm);
	padding: 10px 12px;
	background: var(--wpu-card);
}

.wpu-button-group { display: inline-flex; }
.wpu-button-group label {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--wpu-border-strong);
	background: var(--wpu-card);
	color: var(--wpu-ink);
	cursor: pointer;
	margin-right: -1px;
	font-size: 13px;
	transition: background .12s, color .12s;
}
.wpu-button-group label:first-child { border-radius: var(--wpu-radius-sm) 0 0 var(--wpu-radius-sm); }
.wpu-button-group label:last-child { border-radius: 0 var(--wpu-radius-sm) var(--wpu-radius-sm) 0; }
.wpu-button-group label.selected,
.wpu-button-group label:has(input:checked) {
	background: var(--wpu-primary);
	color: #fff;
	border-color: var(--wpu-primary);
	position: relative;
	z-index: 1;
}
.wpu-button-group input { display: none; }

/* true/false toggle */
.wpu-true-false { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--wpu-muted); }
.wpu-true-false .wpu-tf-check { display: none; }
.wpu-tf-slider {
	width: 40px; height: 22px; border-radius: 999px;
	background: var(--wpu-border-strong);
	position: relative;
	transition: background .15s;
	flex-shrink: 0;
}
.wpu-tf-slider::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	transition: left .15s;
}
.wpu-tf-check:checked + .wpu-tf-slider { background: var(--wpu-primary); }
.wpu-tf-check:checked + .wpu-tf-slider::after { left: 20px; }

/* media velden */
.wpu-image-field .wpu-image-preview img {
	max-width: 220px; height: auto; display: block;
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius-sm);
	box-shadow: var(--wpu-shadow);
}
.wpu-image-field:not(.has-value) .wpu-image-remove,
.wpu-file-field:not(.has-value) .wpu-file-remove { display: none; }
.wpu-file-name:empty::before { content: "\2014"; color: var(--wpu-border-strong); }
.wpu-file-name { color: var(--wpu-ink); }

.wpu-gallery-items { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.wpu-gallery-item { position: relative; margin: 0; cursor: move; }
.wpu-gallery-item img {
	width: 90px; height: 90px; object-fit: cover; display: block;
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius-sm);
}
.wpu-gallery-remove {
	position: absolute; top: -7px; right: -7px;
	background: var(--wpu-danger); color: #fff;
	border-radius: 50%; text-decoration: none;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.wpu-link-field { max-width: 600px; }
.wpu-link-field label { display: block; font-size: 12px; color: var(--wpu-muted); margin-bottom: 2px; }

.wpu-map-field { max-width: 600px; }
.wpu-map-coords { display: flex; gap: 8px; }
.wpu-map-coords input { max-width: 140px; }
.wpu-map-preview {
	width: 100%; height: 260px;
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	margin-top: 10px;
}

/* zoekvelden */
.wpu-post-select { position: relative; max-width: 600px; }
.wpu-selected-items { margin: 0 0 8px; }
.wpu-selected-items li, .wpu-rel-selected li {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--wpu-primary-soft);
	border: 1px solid #c7d2fe;
	border-radius: var(--wpu-radius-sm);
	color: var(--wpu-ink);
	padding: 5px 10px; margin-bottom: 5px;
	font-size: 13px;
}
.wpu-item-remove { color: var(--wpu-muted); text-decoration: none; transition: color .12s; }
.wpu-item-remove:hover { color: var(--wpu-danger); }
.wpu-search-results {
	position: absolute; z-index: 100; left: 0; right: 0;
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius-sm);
	box-shadow: var(--wpu-shadow-md);
	max-height: 220px; overflow-y: auto;
	margin: 4px 0 0; display: none;
}
.wpu-search-results li { padding: 7px 12px; margin: 0; cursor: pointer; font-size: 13px; }
.wpu-search-results li:hover { background: var(--wpu-primary); color: #fff; }

.wpu-relationship { display: flex; gap: 14px; max-width: 700px; }
.wpu-rel-left, .wpu-rel-right {
	flex: 1;
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	background: var(--wpu-card);
	padding: 10px;
	min-height: 180px;
}
.wpu-rel-choices { margin: 8px 0 0; max-height: 240px; overflow-y: auto; }
.wpu-rel-choices li {
	padding: 6px 10px; margin: 0 0 2px; cursor: pointer;
	border-radius: var(--wpu-radius-sm);
	font-size: 13px;
	transition: background .1s;
}
.wpu-rel-choices li:hover { background: var(--wpu-primary-soft); color: var(--wpu-primary-dark); }
.wpu-rel-selected li { cursor: move; }

/* ---- repeater / flexible content ---- */

.wpu-repeater {
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	background: var(--wpu-bg);
	overflow: visible;
}
.wpu-rows { min-height: 8px; }
.wpu-row {
	display: flex; align-items: stretch;
	background: var(--wpu-card);
	border-bottom: 1px solid var(--wpu-border);
	position: relative;
}
.wpu-rows > .wpu-row:first-child { border-radius: calc(var(--wpu-radius) - 1px) calc(var(--wpu-radius) - 1px) 0 0; }
.wpu-row-handle {
	width: 34px; flex-shrink: 0; cursor: grab;
	background: var(--wpu-bg);
	border-right: 1px solid var(--wpu-border);
	display: flex; align-items: flex-start; justify-content: center;
	padding-top: 14px;
}
.wpu-row-handle:active { cursor: grabbing; }
.wpu-row-order {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px;
	background: var(--wpu-primary-soft);
	color: var(--wpu-primary-dark);
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
}
.wpu-fc-handle {
	width: auto; min-width: 34px; padding: 10px 14px;
	align-items: center; justify-content: flex-start;
	gap: 10px; display: flex; flex-direction: row;
}
.wpu-fc-handle strong { color: var(--wpu-ink); font-size: 13px; }
.wpu-fc-row { flex-wrap: wrap; }
.wpu-fc-row > .wpu-fc-handle {
	width: 100%; box-sizing: border-box;
	border-bottom: 1px solid var(--wpu-border);
	border-right: 0; padding-top: 10px;
	background: linear-gradient(to right, var(--wpu-primary-soft), var(--wpu-bg));
}
/* flex-basis (niet width): "flex: 1" zou de width negeren en de rij laten overlopen */
.wpu-fc-row > .wpu-row-fields { flex: 1 1 100%; }
/* controls in de header-balk i.p.v. een eigen kolom — voorkomt wrap-rekenwerk */
.wpu-fc-row > .wpu-row-controls {
	position: absolute; top: 11px; right: 10px;
	width: auto; padding: 0;
}
.wpu-fc-row > .wpu-fc-handle { padding-right: 100px; }
.wpu-row-fields { flex: 1; min-width: 0; }
.wpu-row-fields .wpu-field:last-child { border-bottom: 0; }
.wpu-row-controls {
	width: 90px; flex-shrink: 0; text-align: right; padding: 12px 10px;
	display: flex; gap: 8px; align-items: flex-start; justify-content: flex-end;
}
.wpu-row-controls a {
	color: var(--wpu-border-strong);
	text-decoration: none;
	transition: color .12s;
}
.wpu-row:hover > .wpu-row-controls a { color: var(--wpu-muted); }
.wpu-row-controls a:hover { color: var(--wpu-primary) !important; }
.wpu-row-controls .wpu-row-remove:hover { color: var(--wpu-danger) !important; }
.wpu-row.collapsed > .wpu-row-fields { display: none; }
.wpu-row.collapsed > .wpu-row-controls .wpu-row-collapse { transform: rotate(180deg); }
.wpu-repeater-footer { padding: 12px; position: relative; }
.wpu-repeater-footer .button.button-primary,
.wpu-repeater-footer .button {
	background: var(--wpu-primary);
	border-color: var(--wpu-primary);
	color: #fff;
	border-radius: var(--wpu-radius-sm);
	transition: background .12s;
}
.wpu-repeater-footer .button:hover { background: var(--wpu-primary-dark); border-color: var(--wpu-primary-dark); color: #fff; }
.wpu-repeater-layout-table .wpu-row-fields { display: flex; flex-wrap: wrap; }
.wpu-repeater-layout-table .wpu-row-fields > .wpu-field { flex: 1; min-width: 150px; border-bottom: 0; border-right: 1px solid var(--wpu-border); }

.wpu-layout-popup {
	position: absolute; bottom: 48px; left: 12px; z-index: 100;
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	box-shadow: var(--wpu-shadow-lg);
	margin: 0; min-width: 220px; padding: 4px;
}
.wpu-layout-popup li {
	padding: 8px 14px; margin: 0; cursor: pointer;
	border-radius: var(--wpu-radius-sm);
	font-weight: 600; font-size: 13px; color: var(--wpu-ink);
}
.wpu-layout-popup li:hover { background: var(--wpu-primary); color: #fff; }

/* ---- tabs & accordion ---- */

.wpu-tab-nav {
	display: flex; gap: 4px; margin: 0; padding: 0 12px;
	border-bottom: 2px solid var(--wpu-border);
	background: transparent;
}
.wpu-tab-nav li {
	margin: 0 0 -2px; padding: 11px 16px; cursor: pointer;
	font-weight: 600; font-size: 13px;
	color: var(--wpu-muted);
	border-bottom: 2px solid transparent;
	transition: color .12s, border-color .12s;
}
.wpu-tab-nav li:hover { color: var(--wpu-ink); }
.wpu-tab-nav li.active {
	color: var(--wpu-primary-dark);
	border-bottom-color: var(--wpu-primary);
	background: transparent;
}

/* WP Ultimate-dashboard (landingspagina). */
/* Navigatietegels: één rij, gelijke breedtes. grid-auto-flow met auto-columns
   i.p.v. grid-template-columns, om dezelfde reden als bij .wpu-dash-actions —
   het aantal tegels beweegt mee met de actieve features (1 t/m 5). Met
   auto-fill/minmax(220px) viel de vijfde tegel alleen op een tweede regel. */
.wpu-dash-cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 16px;
}
/* Vijf tegels naast elkaar wordt onleesbaar op een smal scherm; daar twee
   kolommen onder elkaar, net als de knoppenrij eronder. */
@media screen and (max-width: 782px) {
	.wpu-dash-cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.wpu-dash-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 20px;
	background: var(--wpu-card, #fff);
	border: 1px solid var(--wpu-border, #e2e8f0);
	border-radius: var(--wpu-radius, 8px);
	text-decoration: none;
	color: var(--wpu-ink, #1e293b);
	transition: border-color .12s, box-shadow .12s;
}
.wpu-dash-card:hover {
	border-color: var(--wpu-primary, #4f46e5);
	box-shadow: 0 1px 6px rgba(79, 70, 229, .15);
	color: var(--wpu-ink, #1e293b);
}
.wpu-dash-card strong { display: block; font-size: 14px; }
.wpu-dash-card span { color: var(--wpu-muted, #64748b); font-size: 12px; }
/* Ondertitel onder de titel. Gescoped op de sibling-combinator i.p.v. een kale
   `span`, zodat de icoonbadge (ook een span) er buiten valt. */
.wpu-dash-card strong + span { display: block; margin-top: 4px; line-height: 1.4; }
/* Tabs in de builder-veldinstellingen (hergebruikt .wpu-tab-nav-stijl). */
.wpu-b-tab-nav { padding: 0; margin-bottom: 4px; }
.wpu-b-tab-pane { padding-top: 4px; }

.wpu-field-accordion { padding: 0; }
.wpu-accordion-header {
	padding: 13px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
	color: var(--wpu-ink);
	background: var(--wpu-bg);
	display: flex; justify-content: space-between; align-items: center;
	transition: background .12s;
}
.wpu-accordion-header:hover { background: var(--wpu-primary-soft); }
.wpu-accordion-header .dashicons { color: var(--wpu-muted); transition: transform .15s; }
.wpu-field-accordion.open .wpu-accordion-header .dashicons { transform: rotate(180deg); }

.wpu-message { color: var(--wpu-muted); }
.wpu-group-sub-fields {
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	background: var(--wpu-card);
	overflow: hidden;
}

/* ---- eigen builder-shell (i.p.v. WP-metaboxes) ---- */

.wpu-builder-shell {
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	box-shadow: var(--wpu-shadow);
	overflow: hidden;
}
.wpu-builder-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--wpu-border);
}
/* ID i.p.v. class: WP-core's input[type="text"]-regel (attribuut+element =
   specificity 11) wint anders van een enkele class (10) — zie ook de
   #post-body-margin-fix hierboven, zelfde soort specificity-gevecht. */
#wpu-builder-title-proxy.wpu-builder-title-input {
	flex: 1;
	border: 1px solid var(--wpu-border);
	background: var(--wpu-bg);
	font-size: 20px;
	font-weight: 600;
	color: var(--wpu-ink);
	padding: 4px 8px;
	border-radius: var(--wpu-radius-sm);
	box-shadow: none;
	transition: border-color .12s, background-color .12s;
}
#wpu-builder-title-proxy.wpu-builder-title-input:hover { border-color: var(--wpu-border-strong); }
#wpu-builder-title-proxy.wpu-builder-title-input:focus {
	outline: none;
	background: var(--wpu-card);
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
}
#wpu-builder-title-proxy.wpu-builder-title-input::placeholder { color: var(--wpu-muted); font-weight: 400; }
.wpu-builder-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.wpu-builder-info {
	padding: 10px 16px;
	border-bottom: 1px solid var(--wpu-border);
	background: var(--wpu-bg);
	font-size: 13px;
}
.wpu-builder-info p:first-child { margin-top: 0; }
/* Shortcode/PHP-snippet-velden: WP-core's .code-class geeft een grijs,
   donker vlak — eigen kleuren + een merkbaar getinte achtergrond (i.p.v.
   het egale --wpu-bg van het infostrookje eromheen) zodat het duidelijk
   iets is om te kopiëren, niet zomaar tekst. */
.wpu-usage-field { display: flex; gap: 8px; align-items: center; }
.wpu-builder-info input.code {
	flex: 1;
	background: var(--wpu-primary-soft);
	color: var(--wpu-primary-dark);
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
}
.wpu-usage-copy { flex-shrink: 0; }
/* Tools-pagina "Export as PHP"-resultaat: zelfde behandeling als de
   Usage-shortcode/PHP-velden hierboven, i.p.v. WP-core's grijze .code-stijl. */
.wpu-card textarea.code {
	background: var(--wpu-primary-soft);
	color: var(--wpu-primary-dark);
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
}
.wpu-code-copy-wrap { position: relative; }
.wpu-code-copy-wrap .wpu-code-copy-btn { position: absolute; top: 8px; right: 8px; }
.wpu-builder-tabs { padding: 0 16px; }
.wpu-builder-panes { padding: 16px; }
/* Fields-tab: .wpu-builder had zijn eigen negative-margin-bleed-truc voor de
   oude WP-metabox-.inside-padding (12px). In de nieuwe shell (0 padding,
   overflow:hidden) telt die niet meer op — reset 'm hier i.p.v. de oude regel
   verderop in dit bestand aan te passen (die geldt nog voor eventuele andere
   contexten). */
.wpu-builder-panes > .wpu-builder-pane:has(.wpu-builder) { padding: 0; }
.wpu-builder-pane .wpu-builder { margin: 0; }

/* ============ field group builder ============ */

.wpu-builder { margin: -6px -12px -12px; background: var(--wpu-bg); }
.wpu-b-fields { padding: 12px 12px 0; }
.wpu-b-empty {
	padding: 28px 16px; margin: 0 0 12px;
	color: var(--wpu-muted); text-align: center;
	border: 2px dashed var(--wpu-border-strong);
	border-radius: var(--wpu-radius);
	background: var(--wpu-card);
}
.wpu-b-footer { padding: 0 12px 12px; }
.wpu-b-field-body .wpu-b-footer,
.wpu-b-layouts .wpu-b-footer { padding: 10px 0 0; }
/* "+ Add Field" binnen Sub Fields (repeater/group): zonder eigen ruimte
   staat de knop precies in de hoek van de Sub Fields-doos. */
.wpu-b-field-body .wpu-b-footer .button-primary { margin: 0 0 12px 12px; }
/* "+ Add Field" binnen een flexible-layout: niet tegen de rand aan.
   (Maar niet de Close-footer ín een geneste veld-editor.) */
.wpu-b-layout .wpu-b-footer { padding: 10px 12px 12px; }
.wpu-b-layout .wpu-b-field-body .wpu-b-footer { padding: 10px 0 0; }
.wpu-b-footer .button-primary,
.wpu-b-footer .button {
	border-radius: var(--wpu-radius-sm);
}
.wpu-b-footer .button-primary {
	background: var(--wpu-primary);
	border-color: var(--wpu-primary);
}
.wpu-b-footer .button-primary:hover { background: var(--wpu-primary-dark); border-color: var(--wpu-primary-dark); }

.wpu-b-field {
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	margin-bottom: 8px;
	box-shadow: var(--wpu-shadow);
	transition: box-shadow .15s, border-color .15s;
}
.wpu-b-field:hover { border-color: var(--wpu-border-strong); }

.wpu-b-field-header {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 14px; cursor: pointer;
	border-radius: var(--wpu-radius);
}
.wpu-b-drag {
	cursor: grab;
	color: var(--wpu-border-strong);
	transition: color .12s;
}
.wpu-b-field-header:hover .wpu-b-drag { color: var(--wpu-muted); }
.wpu-b-h-label { flex: 1; color: var(--wpu-ink); font-size: 13px; }
.wpu-b-h-name {
	color: var(--wpu-muted);
	background: var(--wpu-bg);
	border-radius: 4px;
	padding: 2px 7px;
	font-size: 11px;
}
.wpu-b-h-controls { opacity: 0; transition: opacity .12s; }
.wpu-b-field-header:hover .wpu-b-h-controls,
.wpu-b-layout-head:hover .wpu-b-h-controls { opacity: 1; }
.wpu-b-h-controls a { text-decoration: none; margin-left: 6px; font-size: 12px; color: var(--wpu-primary); }
.wpu-b-delete { color: var(--wpu-danger) !important; }

/* categorie-badges voor veldtypes */
.wpu-b-h-type {
	width: auto; min-width: 110px; text-align: center;
	font-size: 11px; font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1f5f9; color: #475569;
}
.wpu-b-h-type.wpu-cat-content { background: #e0f2fe; color: #0369a1; }
.wpu-b-h-type.wpu-cat-choice { background: #d1fae5; color: #047857; }
.wpu-b-h-type.wpu-cat-relational { background: #fef3c7; color: #b45309; }
.wpu-b-h-type.wpu-cat-jquery { background: #ede9fe; color: #6d28d9; }
.wpu-b-h-type.wpu-cat-layout { background: #e0e7ff; color: #4338ca; }

.wpu-b-field-body {
	padding: 4px 16px 14px;
	background: var(--wpu-card);
	border-top: 1px solid var(--wpu-border);
	border-radius: 0 0 var(--wpu-radius) var(--wpu-radius);
}

.wpu-b-setting { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--wpu-bg); }
.wpu-b-setting:last-of-type { border-bottom: 0; }
.wpu-b-setting-label {
	width: 180px; flex-shrink: 0;
	font-weight: 600; font-size: 13px;
	color: var(--wpu-ink);
	padding-top: 5px;
}
.wpu-b-setting-input { flex: 1; max-width: 600px; }

/* Geneste veld-editors (sub fields in repeater/flexible layouts) zijn smal:
   label boven de input i.p.v. ernaast, en compactere tabs. */
.wpu-b-field .wpu-b-field .wpu-b-setting,
.wpu-b-layout .wpu-b-setting { display: block; }
.wpu-b-field .wpu-b-field .wpu-b-setting-label,
.wpu-b-layout .wpu-b-setting-label { width: auto; padding: 0 0 4px; }
.wpu-b-field .wpu-b-field .wpu-b-setting-input,
.wpu-b-layout .wpu-b-setting-input { max-width: none; }
.wpu-b-field .wpu-b-field .wpu-b-tab-nav { flex-wrap: wrap; }
.wpu-b-field .wpu-b-field .wpu-b-tab-nav li { padding: 8px 10px; font-size: 12px; }

/* Rijen die een veld-lijst bevatten (Sub Fields / Layouts): volle breedte. */
.wpu-b-setting:has(.wpu-b-fields) { display: block; }
.wpu-b-setting:has(.wpu-b-fields) > .wpu-b-setting-label { width: auto; padding: 0 0 6px; }
.wpu-b-setting:has(.wpu-b-fields) > .wpu-b-setting-input { max-width: none; }
/* Conditional Logic: checkbox + regelbouwer onder het label i.p.v. ernaast —
   zelfde behandeling als hierboven, anders staan de regels naast een leeg
   label-kolom i.p.v. eronder. De toggle-checkbox zelf staat ín het label
   (achter de tekst "Conditional Logic"), vandaar de flex-uitlijning hier. */
.wpu-b-setting:has(.wpu-b-conditions) { display: block; }
.wpu-b-setting:has(.wpu-b-conditions) > .wpu-b-setting-label {
	width: auto; padding: 0 0 6px;
	display: flex; align-items: center; gap: 8px;
}
.wpu-b-setting:has(.wpu-b-conditions) > .wpu-b-setting-label input[type="checkbox"] {
	margin: 2px 0 0 85px;
}
.wpu-b-setting:has(.wpu-b-conditions) > .wpu-b-setting-input { max-width: none; }
.wpu-b-conditions .wpu-b-rule-group,
.wpu-b-conditions > .description { max-width: 700px; }
.wpu-b-setting-input input[type="text"],
.wpu-b-setting-input input[type="number"],
.wpu-b-setting-input textarea,
.wpu-b-setting-input select {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	box-shadow: none;
}
/* WP-core's .wp-core-ui select { max-width: 25rem } capt elke <select> op
   400px, ook met .widefat erbij — laat 'm net zo breed zijn als de
   tekstvelden erboven/eronder. */
.wpu-b-setting-input select.widefat { max-width: none; }
.wpu-b-setting-input input:focus,
.wpu-b-setting-input textarea:focus,
.wpu-b-setting-input select:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}
.wpu-b-setting-input .description { color: var(--wpu-muted); font-size: 12px; }
/* Kale checkboxes (Required, Conditional Logic-toggle, hide_label/asterisk)
   verticaal op de labeltekst uitlijnen — het label heeft padding-top:5px,
   dus een checkbox bovenaan de kolom stond te hoog. */
.wpu-b-setting-input > input[type="checkbox"] { margin-top: 6px; }

/* geneste veldenlijsten (sub fields) */
.wpu-b-field-list .wpu-b-field-list,
.wpu-b-setting-input .wpu-b-field-list {
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	background: var(--wpu-bg);
}

/* location & conditional rules */
.wpu-b-rule-group {
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	padding: 12px;
	margin-bottom: 6px;
}
#wpu-builder-location .wpu-b-rule-group { max-width: 700px; }
.wpu-b-rule { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.wpu-b-rule:last-child { margin-bottom: 0; }
.wpu-b-rule select, .wpu-b-rule input { flex: 1; border-radius: var(--wpu-radius-sm); border-color: var(--wpu-border-strong); }
.wpu-b-rule .button { border-radius: var(--wpu-radius-sm); }
.wpu-b-or {
	font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--wpu-muted); margin: 8px 0;
}
/* "Or"-knop (nieuwe conditional-logic-regelgroep toevoegen): indigo i.p.v.
   WP-core's grijze .button, zodat 'ie opvalt als primaire actie. Extra
   specificity nodig (element + eigen class) om WP-core's ".wp-core-ui
   .button" (2 classes) te verslaan. */
.wpu-b-conditions a.wpu-b-or-btn.button {
	background: var(--wpu-primary) !important; border-color: var(--wpu-primary) !important; color: #fff !important;
	border-radius: var(--wpu-radius-sm);
}
.wpu-b-conditions a.wpu-b-or-btn.button:hover {
	background: var(--wpu-primary-dark) !important; border-color: var(--wpu-primary-dark) !important; color: #fff !important;
}

/* flexible content layouts in de builder */
.wpu-b-layout {
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	background: var(--wpu-card);
	margin-bottom: 10px;
	overflow: hidden;
}
.wpu-b-layout-head {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	background: linear-gradient(to right, var(--wpu-primary-soft), var(--wpu-card));
	border-bottom: 1px solid var(--wpu-border);
}
.wpu-b-layout-head strong { flex: 1; color: var(--wpu-ink); font-size: 13px; }
.wpu-b-layout-body { padding: 6px 14px 14px; }

#wpu-builder-settings .wpu-b-setting { display: block; border-bottom: 0; padding: 8px 0; }
#wpu-builder-settings .wpu-b-setting-label { width: auto; margin-bottom: 4px; padding-top: 0; }

/* options page */
.wpu-options-page .postbox {
	border-radius: var(--wpu-radius);
	border: 1px solid var(--wpu-border);
	box-shadow: var(--wpu-shadow);
	max-width: 900px;
	overflow: hidden;
}
.wpu-options-page .postbox-header {
	border-bottom: 1px solid var(--wpu-border);
	background: var(--wpu-bg);
}
/* Zonder .hndle krijgt de h2 generieke koppen-styling (grote marges); hier compact maken. */
.wpu-options-page .postbox-header h2 {
	font-size: 14px;
	font-weight: 600;
	color: var(--wpu-ink);
	margin: 0;
	padding: 12px 16px;
}
.wpu-options-page .postbox .inside { margin: 0; padding: 0; }
.wpu-options-page .wpu-fields { padding: 0; }
.wpu-options-page p.submit { max-width: 900px; }

/* ============ validatie ============ */

.wpu-field-error {
	margin-top: 6px;
	padding: 6px 10px;
	background: #fff1f2;
	border-left: 3px solid var(--wpu-danger);
	color: #9f1239;
	font-size: 12px;
	border-radius: 0 var(--wpu-radius-sm) var(--wpu-radius-sm) 0;
}

/* ============ toegankelijkheid ============ */

/* Zichtbare focus voor alle interactieve elementen. */
.wpu-fields a:focus-visible,
.wpu-builder a:focus-visible,
.wpu-row-controls a:focus-visible,
.wpu-b-h-controls a:focus-visible,
.wpu-item-remove:focus-visible,
.wpu-gallery-remove:focus-visible,
.wpu-tab-nav li:focus-visible,
.wpu-accordion-header:focus-visible,
.wpu-layout-popup li:focus-visible,
.wpu-true-false:focus-within .wpu-tf-slider,
.wpu-repeater-footer .button:focus-visible {
	outline: 2px solid var(--wpu-primary);
	outline-offset: 2px;
	border-radius: var(--wpu-radius-sm);
}

/* Controls altijd zichtbaar voor toetsenbordgebruikers. */
.wpu-b-h-controls:focus-within,
.wpu-b-field-header:focus-within .wpu-b-h-controls { opacity: 1; }
.wpu-row-controls a:focus-visible { color: var(--wpu-muted); }

/* Grotere klikdoelen voor icoon-knoppen. */
.wpu-row-controls a,
.wpu-item-remove,
.wpu-gallery-remove { padding: 2px; }

@media (prefers-reduced-motion: reduce) {
	.wpu-tf-slider, .wpu-tf-slider::after,
	.wpu-b-field, .wpu-b-h-controls,
	.wpu-button-group label, .wpu-row-controls a,
	.wpu-tab-nav li, .wpu-accordion-header,
	.wpu-input input, .wpu-input textarea, .wpu-input select {
		transition: none !important;
	}
}

/* ============ content type editors (post types / taxonomieën / options pages) ============ */

.wpu-ct-form { margin: -6px -12px -12px; background: var(--wpu-card); }
.wpu-ct-row { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--wpu-bg); }
.wpu-ct-label { width: 180px; flex-shrink: 0; font-weight: 600; font-size: 13px; color: var(--wpu-ink); padding-top: 5px; }
.wpu-ct-input { flex: 1; max-width: 600px; }
.wpu-ct-input input[type="text"] {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
}
.wpu-ct-input input[type="text"]:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}
.wpu-ct-input .description { color: var(--wpu-muted); font-size: 12px; }
.wpu-ct-checklist { margin: 0; columns: 2; max-width: 500px; }
.wpu-ct-checklist li { margin: 0 0 6px; break-inside: avoid; }
.wpu-ct-checklist input:checked { accent-color: var(--wpu-primary); }

/* ============ dashicon-kiezer ============ */

.wpu-icon-picker { position: relative; display: flex; gap: 8px; align-items: center; max-width: 600px; }
/* Only matches once icon-picker.js has wrapped the input (see buildPicker())
   -- without JS the plain input stays visible/usable as a fallback. Once
   wrapped, the swatch + grid fully replace it as the interaction, so the
   raw class-name text is just visual noise; the input keeps submitting its
   value as normal, just off-screen instead of display:none so it stays in
   the tab order for keyboard users. */
.wpu-icon-picker input.wpu-icon-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.wpu-icon-preview {
	width: 40px; height: 40px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 22px;
	background: var(--wpu-primary-soft);
	color: var(--wpu-primary-dark);
	border: 1px solid #c7d2fe;
	border-radius: var(--wpu-radius-sm);
	cursor: pointer;
	transition: background .12s;
}
.wpu-icon-preview:hover { background: #e0e7ff; }
.wpu-icon-preview:focus-visible { outline: 2px solid var(--wpu-primary); outline-offset: 2px; }
/* left/right:0 laat het paneel meeschalen met de wrapper, maar die krimpt tot
   40px (alleen de swatch) zodra de picker een flex-item is en de tekst-input
   visueel verborgen uit de flow staat -- zoals in het Menu Organizer-bewerk-
   paneel. De min-width geeft het paneel dan een bruikbare bodem; bij een brede
   wrapper (Add menu item, field-group-builder) doet hij niets. */
.wpu-icon-panel {
	position: absolute; z-index: 120; top: 46px; left: 0; right: 0;
	min-width: 300px;
	background: var(--wpu-card);
	border: 1px solid var(--wpu-border);
	border-radius: var(--wpu-radius);
	box-shadow: var(--wpu-shadow-lg);
	padding: 10px;
}
.wpu-icon-search {
	width: 100%;
	margin-bottom: 8px;
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
}
.wpu-icon-search:focus { border-color: var(--wpu-primary); box-shadow: var(--wpu-ring); outline: none; }
.wpu-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	gap: 2px;
	max-height: 240px;
	overflow-y: auto;
}
.wpu-icon-grid button {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wpu-radius-sm);
	color: var(--wpu-ink);
	cursor: pointer;
}
.wpu-icon-grid button:hover { background: var(--wpu-primary-soft); color: var(--wpu-primary-dark); }
.wpu-icon-grid button.selected { background: var(--wpu-primary); color: #fff; }
.wpu-icon-grid button:focus-visible { outline: 2px solid var(--wpu-primary); outline-offset: -2px; }

/* block preview in de editor */
.wpu-block-preview { min-height: 30px; }

/* SEO-metabox: live Google-preview + tellers. */
.wpu-seo-box { max-width: 500px; }
.wpu-seo-box .wpu-seo-preview {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	padding: 12px 14px;
	margin-bottom: 14px;
	background: #fff;
}
.wpu-seo-preview-title { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.wpu-seo-preview-url { color: #006621; font-size: 13px; margin: 2px 0 4px; }
.wpu-seo-preview-desc { color: #4d5156; font-size: 13px; line-height: 1.5; }
.wpu-seo-box label { font-weight: 600; display: block; margin: 10px 0 4px; }
.wpu-seo-count { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--wpu-muted); }
.wpu-seo-count.is-near { color: #b45309; }
.wpu-seo-count.is-over { color: var(--wpu-danger); font-weight: 600; }
.wpu-seo-box .wpu-seo-inline { font-weight: 400; display: block; }

/* Variable inserter (title/description "insert variable" button). Mirrors
   the .wpu-var-* rules in admin-ui.css, but admin-ui.css is deliberately only
   enqueued on WP Ultimate's own admin screens (Admin_Tabs::is_plugin_screen())
   -- this metabox lives on post.php/post-new.php, a screen we don't own, so
   it needs its own scoped copy here instead of loading admin-ui.css there. */
.wpu-seo-box .wpu-var-field { position: relative; display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.wpu-seo-box .wpu-var-field .wpu-var-input { flex: 1; width: auto; max-width: none; margin: 0; }
.wpu-seo-box .wpu-var-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	min-height: 30px;
	border-radius: var(--wpu-radius-sm);
	background: var(--wpu-primary);
	border-color: var(--wpu-primary);
	color: #fff;
}
.wpu-seo-box .wpu-var-btn:hover { background: var(--wpu-primary-dark); border-color: var(--wpu-primary-dark); color: #fff; }
/* Core's .wp-core-ui .button:focus (2 classes + 1 pseudo-class) outranks our
   plain .wpu-seo-box .wpu-var-btn (2 classes) on specificity, so after a
   click the button keeps focus (mouse leaving doesn't blur it) and core's
   focus rule resets the background to transparent -- !important is the only
   way to reliably win here since we can't add more classes to WP core's own
   markup. Also swaps core's blue focus ring for the plugin's own. */
.wpu-seo-box .wpu-var-btn:focus {
	background: var(--wpu-primary-dark) !important;
	border-color: var(--wpu-primary-dark) !important;
	color: #fff !important;
	box-shadow: var(--wpu-ring) !important;
	outline: none !important;
}
.wpu-seo-box .wpu-var-btn .dashicons { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; vertical-align: middle; color: #fff; }
.wpu-seo-box .wpu-var-menu {
	position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
	min-width: 240px; max-height: 260px; overflow-y: auto;
	background: var(--wpu-card); border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm); box-shadow: var(--wpu-shadow-md); padding: 4px;
}
.wpu-seo-box .wpu-var-item { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: var(--wpu-radius-sm); cursor: pointer; }
.wpu-seo-box .wpu-var-item:hover { background: var(--wpu-primary-soft); }
.wpu-seo-box .wpu-var-item code { color: var(--wpu-primary-dark); font-size: 12px; background: none; padding: 0; }
.wpu-seo-box .wpu-var-item span { color: var(--wpu-muted); font-size: 12px; }

/* SEO media-picker (OG-afbeelding) — metabox + settings. */
.wpu-seo-media { margin: 4px 0 10px; }
.wpu-seo-media-preview { display: block; max-width: 260px; height: auto; border: 1px solid var(--wpu-border); border-radius: var(--wpu-radius-sm); margin-bottom: 6px; }
.wpu-seo-media-remove { color: var(--wpu-danger); text-decoration: none; }
.wpu-seo-at { color: var(--wpu-muted); margin-right: 2px; }

/* Social-share-preview (Open Graph-kaart) in de metabox. */
.wpu-seo-social {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	overflow: hidden;
	max-width: 320px;
	margin: 4px 0 14px;
	background: #fff;
}
.wpu-seo-social-img { height: 160px; background-size: cover; background-position: center; background-color: var(--wpu-bg); }
.wpu-seo-social-img.is-empty { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px); }
.wpu-seo-social-meta { padding: 10px 12px; }
.wpu-seo-social-domain { font-size: 11px; text-transform: uppercase; color: var(--wpu-muted); letter-spacing: .03em; }
.wpu-seo-social-title { font-size: 15px; font-weight: 600; color: var(--wpu-ink); line-height: 1.3; margin: 2px 0; }
.wpu-seo-social-desc { font-size: 12px; color: var(--wpu-muted); line-height: 1.4; }
/* Metabox-inputs in de plugin-stijl (ronde hoeken + focus-ring). */
.wpu-seo-box input[type="text"],
.wpu-seo-box input[type="url"],
.wpu-seo-box textarea {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	box-shadow: none;
}
.wpu-seo-box input[type="text"]:focus,
.wpu-seo-box input[type="url"]:focus,
.wpu-seo-box textarea:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}

/* Eigen shell vervangt titelveld en Publish-box op de twee builder-schermen.
   edit_form_after_title (waar Builder_Shell op print) rendert vóór #poststuff
   maar wél binnen #post-body-content, dus #poststuff zelf blijft nodig —
   alleen de (dan lege) metabox-containers gaan weg. WP-core body-classes
   (post-type-{cpt}) zijn altijd aanwezig, geen extra PHP-hook nodig. */
body.post-type-wpu-field-group #titlediv,
body.post-type-wpu-field-group #postbox-container-1,
body.post-type-wpu-field-group #postbox-container-2,
body.post-type-wpu-form #titlediv,
body.post-type-wpu-form #postbox-container-1,
body.post-type-wpu-form #postbox-container-2,
body.post-type-wpu-snippet #titlediv,
body.post-type-wpu-snippet #postbox-container-1,
body.post-type-wpu-snippet #postbox-container-2 {
	display: none;
}
/* #poststuff #post-body.columns-2 (WP-core, specificity 2 ID's + 1 class)
   reserveert 300px marge rechts voor de (nu verborgen) zijkolom — zonder
   reset blijft dat een lege strook naast de shell. Zelfde specificity-vorm
   (2 ID's + 2 classes) nodig om te winnen, cascade-volgorde is hier niet
   genoeg. */
body.post-type-wpu-field-group #poststuff #post-body.columns-2,
body.post-type-wpu-form #poststuff #post-body.columns-2,
body.post-type-wpu-snippet #poststuff #post-body.columns-2 {
	margin-right: 0;
}

/* ---------- Snippet-editor ---------- */
.wpu-snippet-code {
	width: 100%;
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
	line-height: 1.5;
}
/* Code-pane als flexrij: editor links, Fullscreen-knop rechts ernaast met 12px
   ertussen. Eerder was de knop een float, die geen ruimte reserveert en dus
   tegen de editor aan kwam te liggen. snippets.js zet de knop als eerste in de
   DOM (prepend), dus de volgorde draaien we met order: om -- dat scheelt een
   wrapper-div in de JS. De beschrijvingen eronder pakken de volle breedte. */
.wpu-builder-pane[data-pane="code"] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}
/* Dezelfde valkuil als .wpu-b-setting[hidden] verderop: onze display:flex
   hierboven wint van de UA-regel [hidden]{display:none}, waardoor de Code-tab
   (editor + Fullscreen-knop) zichtbaar bleef terwijl je op Settings/Conditions/
   Revisions/Log stond. Alle andere panes hebben geen eigen display en gingen
   wel netjes weg. */
.wpu-builder-pane[data-pane="code"][hidden] { display: none; }
.wpu-builder-pane[data-pane="code"] > .wpu-snippet-fullscreen { order: 2; margin: 0; }
.wpu-builder-pane[data-pane="code"] > .CodeMirror { order: 1; flex: 1 1 auto; min-width: 0; }
/* Zonder CodeMirror (highlighter uit) blijft de kale textarea over; die is er
   dan in z'n eentje en mag de volle breedte houden. */
.wpu-builder-pane[data-pane="code"] > .wpu-snippet-code { order: 1; flex: 1 1 100%; }
.wpu-builder-pane[data-pane="code"] > .notice { order: 0; flex-basis: 100%; }
.wpu-builder-pane[data-pane="code"] > p.description,
.wpu-builder-pane[data-pane="code"] > .wpu-snippet-php-only { order: 3; flex-basis: 100%; margin: 0; }
body.wpu-snippet-fullscreen-on .wpu-builder-pane[data-pane="code"] .CodeMirror {
	position: fixed;
	inset: 32px 0 0 0;
	z-index: 9999;
	height: auto;
}
/* In fullscreen dekt de editor (z-index 9999 hierboven) de knop af — zonder
   dit blijft er geen weg terug behalve Escape (zie snippets.js). Vaste positie
   rechtsboven, ruim boven de editor z-index, buiten het codegebied. */
body.wpu-snippet-fullscreen-on .wpu-snippet-fullscreen {
	position: fixed;
	top: 40px;
	right: 24px;
	z-index: 10001;
	margin: 0;
}
body.wpu-snippet-fullscreen-on #wpadminbar { z-index: 10000; }
.wpu-builder-pane .CodeMirror { height: 520px; border: 1px solid var(--wpu-border, #d5d8e0); border-radius: 6px; }
/* Regelnummers mogen niet meegesleept worden bij het selecteren van code. */
.wpu-builder-pane .CodeMirror-gutters,
.wpu-builder-pane .CodeMirror-linenumber {
	user-select: none;
}

/* [hidden] verliest van .wpu-b-setting{display:flex} hierboven (gelijke
   specificiteit, maar onze regel staat later in de cascade) -- zonder deze
   override blijven alle vier de "Run on"-selects in de Settings-tab
   zichtbaar, terwijl snippets.js er maar één (h)erkent. Zelfde valkuil als
   eerder bij Menu Organizer (.wpu-mo-edit-panel[hidden]). Scope op de
   snippet-post-type, niet globaal op .wpu-b-setting[hidden] -- die klasse
   wordt ook door de field-group-builder gebruikt. */
body.post-type-wpu-snippet .wpu-b-setting[hidden] { display: none; }

/* ---------- Snippet-condities ---------- */
/* De uitleg boven de regelbouwer zit strak op de Match-select; wat lucht. */
.wpu-builder-pane[data-pane="conditions"] > p.description { margin-bottom: 12px; }
.wpu-cond-logic-row { margin-bottom: 12px; }
.wpu-cond-rule {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--wpu-bg);
}
/* Velden in dezelfde stijl als de Settings-/SEO-/SMTP-pagina's (die staan in
   admin-ui.css per pagina gescoped; de snippet-editor is post.php en heeft daar
   geen eigen scope-klasse, dus hier). Scope op de wrapper i.p.v. op losse
   .wpu-cond-*-klassen: WP-core's .wp-core-ui select zet zelf border-color en
   border-radius, en verslaat een enkele klasse. Dat liet de "Match all rules"-
   select in WP-core-grijs staan terwijl de regelvelden (.wpu-cond-rule select,
   gelijke specificiteit maar later in de cascade) wel goed stonden.
   Geen eigen hoogte: WP-admin geeft velden en knoppen hier allemaal 40px, dus
   ze lijnen vanzelf uit -- net als op de Settings-pagina. */
.wpu-snippet-conditions select,
.wpu-snippet-conditions input[type="text"],
.wpu-snippet-conditions input[type="date"] {
	border: 1px solid var(--wpu-border-strong);
	border-radius: var(--wpu-radius-sm);
	background-color: var(--wpu-card);
	box-shadow: none;
}
.wpu-snippet-conditions select,
.wpu-snippet-conditions input[type="text"] { max-width: 240px; }
.wpu-snippet-conditions select:focus,
.wpu-snippet-conditions input[type="text"]:focus,
.wpu-snippet-conditions input[type="date"]:focus {
	border-color: var(--wpu-primary);
	box-shadow: var(--wpu-ring);
	outline: none;
}
.wpu-cond-daterange { display: inline-flex; gap: 6px; align-items: center; }
.wpu-cond-add { margin-top: 12px; }
/* Een opgeslagen regel wiens param niet beschikbaar is voor het huidige type
   (zie snippets.js) blijft zichtbaar met zijn echte waarde -- alleen gedempt,
   nooit stilzwijgend verborgen of vervangen. */
.wpu-cond-rule-unavailable { opacity: 0.6; }

/* --- Veldnaam-conflicten (field-group- en form-builder) --------------- */
/* De rode variant markeert een echte botsing binnen dezelfde scope: twee
   velden schrijven dan naar dezelfde meta-key. De grijze is puur
   informatief — dezelfde naam in een andere field group is legitiem.
   Gescoped op .wpu-b-setting-input (i.p.v. los "input.wpu-name-dupe") omdat
   .wpu-b-setting-input input[type="text"] hierboven (0,2,1) anders wint van
   een ongescoopte (0,1,1)-regel — deze plugin is die specificity-val al
   twee keer eerder tegengekomen (2 aug 2026, zie CLAUDE.md). Met
   [type="text"] erbij staat dit op (0,3,1)/(0,4,1): wint altijd, ongeacht
   brondocumentvolgorde. */
.wpu-b-setting-input input[type="text"].wpu-name-dupe,
.wpu-b-setting-input input[type="text"].wpu-name-dupe:focus {
	border-color: #d63638;
	box-shadow: 0 0 0 1px #d63638;
}
.wpu-b-h-name.wpu-name-dupe {
	color: #d63638;
	font-weight: 600;
}
.wpu-name-error,
.wpu-name-note {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
}
.wpu-name-error { color: #d63638; }
.wpu-name-note { color: #646970; font-style: italic; }