/* Transoplast Brochure Generator - front-end styles */
@import url( 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' );

:root {
	--tpb-primary: #c9142d;
	--tpb-primary-dark: #a3101f;
	--tpb-secondary: #1a3a5c;
	--tpb-ink: #1d2430;
	--tpb-muted: #667085;
	--tpb-border: #e2e5ea;
	--tpb-border-strong: #d3d7de;
	--tpb-bg: #f4f6f9;
	--tpb-card: #ffffff;
	--tpb-radius: 12px;
	--tpb-radius-sm: 9px;
	--tpb-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.04);
	--tpb-focus: 0 0 0 3px rgba(201, 20, 45, 0.18);
}

/* ------------------------------------------------------------------ *
 * Basis
 * ------------------------------------------------------------------ */
.tpb-frontend-body {
	margin: 0;
	background: var(--tpb-bg);
	color: var(--tpb-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tpb-frontend-body,
.tpb-frontend button,
.tpb-frontend input,
.tpb-frontend select,
.tpb-frontend textarea {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tpb-frontend.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 56px;
}

.tpb-frontend h1 {
	font-size: 28px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--tpb-secondary);
}

.tpb-frontend h2 {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tpb-secondary);
	margin-top: 0;
}

.tpb-frontend .tpb-intro {
	max-width: 780px;
	color: var(--tpb-muted);
	font-size: 14px;
}

.tpb-frontend .description {
	color: var(--tpb-muted);
	font-size: 12.5px;
}

.tpb-frontend a {
	color: var(--tpb-primary);
}

.tpb-frontend .tpb-credit {
	margin-top: 32px;
	color: #98a2b3;
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Cards & layout
 * ------------------------------------------------------------------ */
.tpb-frontend .tpb-card {
	background: var(--tpb-card);
	border: 1px solid var(--tpb-border);
	border-radius: var(--tpb-radius);
	padding: 26px;
	box-shadow: var(--tpb-shadow);
}

.tpb-frontend .tpb-grid {
	gap: 26px;
}

/* ------------------------------------------------------------------ *
 * Tabbladen
 * ------------------------------------------------------------------ */
.tpb-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 22px 0 26px;
	padding: 5px;
	background: transparent;
	border: 1px solid var(--tpb-border);
	border-radius: 10px;
	width: fit-content;
	max-width: 100%;
}

.tpb-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 7px;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpb-muted);
	cursor: pointer;
	transition: all 0.15s ease;
}

.tpb-tab:hover {
	color: var(--tpb-secondary);
}

.tpb-tab.is-active {
	background: rgba(201, 20, 45, 0.08);
	color: var(--tpb-primary);
	box-shadow: none;
}

.tpb-panel {
	display: none;
	animation: tpb-fade 0.2s ease;
}

.tpb-panel.is-active {
	display: block;
}

@keyframes tpb-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * Formuliervelden
 * ------------------------------------------------------------------ */
.tpb-frontend .tpb-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--tpb-ink);
	margin: 16px 0 6px;
}

.tpb-frontend .tpb-text,
.tpb-frontend .tpb-textarea {
	width: 100%;
	border: 1px solid var(--tpb-border-strong);
	border-radius: var(--tpb-radius-sm);
	padding: 10px 13px;
	font-size: 13.5px;
	color: var(--tpb-ink);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.tpb-frontend .tpb-text:focus,
.tpb-frontend .tpb-textarea:focus,
.tpb-frontend input:focus,
.tpb-frontend select:focus,
.tpb-frontend textarea:focus {
	outline: none;
	border-color: var(--tpb-primary);
	box-shadow: var(--tpb-focus);
}

.tpb-frontend select.tpb-text {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 36px;
}

.tpb-frontend input[type="color"] {
	width: 52px;
	height: 38px;
	padding: 3px;
	border: 1px solid var(--tpb-border-strong);
	border-radius: var(--tpb-radius-sm);
	background: #fff;
	cursor: pointer;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
.tpb-frontend .button,
.tpb-frontend button.button,
.tpb-frontend a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--tpb-secondary);
	background: #fff;
	border: 1px solid var(--tpb-border-strong);
	border-radius: var(--tpb-radius-sm);
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.tpb-frontend .button:hover {
	background: #f5f7fa;
	border-color: #c2c8d1;
	color: var(--tpb-secondary);
}

.tpb-frontend .button:focus {
	outline: none;
	box-shadow: var(--tpb-focus);
	border-color: var(--tpb-primary);
}

.tpb-frontend .button:active {
	transform: translateY(1px);
}

.tpb-frontend .button:disabled,
.tpb-frontend .button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Primaire knop */
.tpb-frontend .button-primary,
.tpb-frontend #tpb-fetch.button-primary,
.tpb-frontend #tpb-download.button-primary {
	background: var(--tpb-primary);
	border-color: var(--tpb-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(201, 20, 45, 0.25);
}

.tpb-frontend .button-primary:hover,
.tpb-frontend #tpb-fetch.button-primary:hover,
.tpb-frontend #tpb-download.button-primary:hover {
	background: var(--tpb-primary-dark);
	border-color: var(--tpb-primary-dark);
	color: #fff;
}

/* Secundaire hero-knop (bv. PDF genereren) */
.tpb-frontend .button-hero {
	padding: 12px 22px;
	font-size: 14px !important;
	height: auto !important;
}

.tpb-frontend #tpb-generate.button-hero:not(:disabled) {
	background: var(--tpb-secondary);
	border-color: var(--tpb-secondary);
	color: #fff;
}

.tpb-frontend #tpb-generate.button-hero:not(:disabled):hover {
	background: #14304c;
	border-color: #14304c;
}

.tpb-frontend .button-small {
	padding: 6px 12px;
	font-size: 12.5px;
	border-radius: 7px;
}

.tpb-frontend .button-link-delete {
	background: transparent;
	border-color: transparent;
	color: var(--tpb-primary);
	box-shadow: none;
	padding: 8px 10px;
}

.tpb-frontend .button-link-delete:hover {
	background: rgba(201, 20, 45, 0.08);
	border-color: transparent;
	color: var(--tpb-primary-dark);
}

.tpb-frontend .tpb-actions {
	margin-top: 22px;
	gap: 12px;
}

/* Kopieer-link knop feedback */
.tpb-frontend .tpb-copy-link.is-copied {
	background: rgba(0, 163, 42, 0.1);
	border-color: rgba(0, 163, 42, 0.4);
	color: #0a7a26;
}

.tpb-frontend .tpb-result-action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Verwijder-knoppen in lijsten subtiel rood */
.tpb-frontend .tpb-del-brochure:hover,
.tpb-frontend .tpb-del-emp:hover {
	background: rgba(201, 20, 45, 0.08);
	border-color: rgba(201, 20, 45, 0.35);
	color: var(--tpb-primary-dark);
}

/* ------------------------------------------------------------------ *
 * Chips (geselecteerde producten)
 * ------------------------------------------------------------------ */
.tpb-frontend .tpb-chip {
	border-radius: 999px;
	background: #eef2f7;
	border: 1px solid #dfe5ec;
	color: var(--tpb-secondary);
	font-weight: 500;
}

.tpb-frontend .tpb-chip-remove {
	color: var(--tpb-muted);
}

.tpb-frontend .tpb-chip-remove:hover {
	color: var(--tpb-primary);
}

/* ------------------------------------------------------------------ *
 * Statusmeldingen
 * ------------------------------------------------------------------ */
.tpb-frontend .tpb-status {
	border-radius: var(--tpb-radius-sm);
	border-left-width: 4px;
	font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Tabellen (archief)
 * ------------------------------------------------------------------ */
.tpb-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 14px;
	font-size: 13px;
}

.tpb-table th,
.tpb-table td {
	text-align: left;
	padding: 11px 12px;
	border-bottom: 1px solid var(--tpb-border);
	vertical-align: middle;
}

.tpb-table th {
	background: #f7f9fb;
	color: var(--tpb-secondary);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tpb-table th:first-child { border-top-left-radius: 10px; }
.tpb-table th:last-child { border-top-right-radius: 10px; }

.tpb-table tbody tr:hover {
	background: #fafbfc;
}

.tpb-row-actions {
	white-space: nowrap;
	text-align: right;
}

.tpb-empty {
	color: #98a2b3;
	font-style: italic;
	margin: 12px 0 0;
}

/* ------------------------------------------------------------------ *
 * Paginering (archief)
 * ------------------------------------------------------------------ */
.tpb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
}

.tpb-pagination .tpb-page-num.is-active {
	background: var(--tpb-primary);
	border-color: var(--tpb-primary);
	color: #fff;
	pointer-events: none;
}

.tpb-pagination .tpb-pagination-info {
	margin-left: auto;
	color: #98a2b3;
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Medewerkerslijst
 * ------------------------------------------------------------------ */
.tpb-employee-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.tpb-emp-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--tpb-border);
	border-radius: var(--tpb-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpb-emp-item:hover {
	border-color: var(--tpb-border-strong);
	box-shadow: var(--tpb-shadow);
}

.tpb-emp-thumb {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: #eef1f5;
}

.tpb-emp-thumb-empty {
	display: inline-block;
	border: 1px dashed #c3c8d1;
}

.tpb-emp-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.tpb-emp-info strong {
	font-weight: 600;
	color: var(--tpb-ink);
}

.tpb-emp-meta {
	color: var(--tpb-muted);
	font-size: 12px;
	margin-top: 2px;
}

.tpb-emp-photo-preview {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
	margin-left: 6px;
	border: 1px solid var(--tpb-border);
}

/* ------------------------------------------------------------------ *
 * Instellingen
 * ------------------------------------------------------------------ */
#tpb-settings-form {
	max-width: 620px;
}

#tpb-settings-form h3 {
	margin: 26px 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tpb-secondary);
	border-top: 1px solid var(--tpb-border);
	padding-top: 20px;
}

#tpb-settings-form h3:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 8px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media screen and (max-width: 782px) {
	.tpb-frontend.wrap {
		padding: 24px 14px 40px;
	}

	.tpb-frontend h1 {
		font-size: 23px;
	}

	.tpb-tabs {
		width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
	}
}

/* ============================================================
   Huisstijl-header met logo + accent-strook
   ============================================================ */
.tpb-frontend .tpb-hero-header {
	background: var(--tpb-card);
	border: 1px solid var(--tpb-border);
	border-radius: var(--tpb-radius);
	overflow: hidden;
	box-shadow: var(--tpb-shadow);
	margin-bottom: 24px;
	position: relative;
}
.tpb-frontend .tpb-hero-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
}
.tpb-frontend .tpb-hero-brand { flex-shrink: 0; }
.tpb-frontend .tpb-hero-logo {
	display: block;
	height: 48px;
	width: auto;
}
.tpb-frontend .tpb-hero-title { flex: 1; min-width: 0; }
.tpb-frontend .tpb-hero-title h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--tpb-secondary);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.tpb-frontend .tpb-hero-sub {
	margin: 4px 0 0 0;
	font-size: 13px;
	color: var(--tpb-muted);
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
.tpb-frontend .tpb-active-country {
	font-weight: 500;
	color: var(--tpb-secondary);
}
.tpb-frontend .tpb-linkbtn {
	background: none;
	border: none;
	color: var(--tpb-primary);
	cursor: pointer;
	font-size: 12px;
	text-decoration: underline;
	padding: 0;
	font-family: inherit;
}
.tpb-frontend .tpb-linkbtn:hover { color: var(--tpb-primary-dark); }
.tpb-frontend .tpb-hero-accent {
	height: 4px;
	background: linear-gradient(to right, var(--tpb-primary) 0%, var(--tpb-primary) 33%, var(--tpb-secondary) 33%, var(--tpb-secondary) 100%);
}

/* Verberg de oude h1 als de nieuwe hero-header aanwezig is
   (zekerheid voor als een cache nog oude HTML terug zou geven). */
.tpb-frontend .tpb-hero-header + .tpb-tabs { margin-top: 0; }

/* ============================================================
   Landkeuze-popup — Transoplast-huisstijl
   ============================================================ */
.tpb-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.tpb-modal.is-open { display: flex; }
.tpb-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 42, 68, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.tpb-modal-panel {
	position: relative;
	background: #ffffff;
	border-radius: 16px;
	max-width: 720px;
	width: 100%;
	padding: 36px 40px 40px;
	box-shadow: 0 24px 60px rgba(17, 42, 68, 0.28);
	animation: tpb-modal-in 0.25s ease-out;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
@keyframes tpb-modal-in {
	from { opacity: 0; transform: translateY(-12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tpb-modal-brand {
	text-align: center;
	margin-bottom: 22px;
}
.tpb-modal-brand img {
	height: 52px;
	width: auto;
}
.tpb-modal-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tpb-secondary);
	text-align: center;
	margin: 0 0 8px 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.tpb-modal-sub {
	font-size: 14px;
	color: var(--tpb-muted);
	text-align: center;
	margin: 0 0 26px 0;
	line-height: 1.5;
}

.tpb-country-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (max-width: 520px) {
	.tpb-country-grid { grid-template-columns: 1fr; }
}
.tpb-country-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #ffffff;
	border: 2px solid var(--tpb-border);
	border-radius: var(--tpb-radius);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.05s, box-shadow 0.15s;
	text-align: left;
	font-family: inherit;
	width: 100%;
}
.tpb-country-btn:hover {
	border-color: var(--tpb-secondary);
	background: #f7fafd;
	transform: translateY(-1px);
	box-shadow: var(--tpb-shadow);
}
.tpb-country-btn:active { transform: translateY(0); }
.tpb-country-btn:focus-visible {
	outline: none;
	box-shadow: var(--tpb-focus);
	border-color: var(--tpb-primary);
}
.tpb-flag {
	display: block;
	width: 42px;
	height: 28px;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.tpb-flag svg { display: block; width: 100%; height: 100%; }
.tpb-country-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tpb-country-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--tpb-secondary);
	line-height: 1.2;
}
.tpb-country-lang {
	font-size: 12px;
	color: var(--tpb-muted);
	line-height: 1.2;
}

/* ============================================================
   Wachtwoord-pagina (voor IP's buiten de whitelist)
   ============================================================ */
.tpb-pw-body {
	margin: 0;
	min-height: 100vh;
	background: var(--tpb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--tpb-ink);
}
.tpb-pw-wrap {
	width: 100%;
	max-width: 460px;
}
.tpb-pw-card {
	background: #ffffff;
	border: 1px solid var(--tpb-border);
	border-radius: 16px;
	padding: 36px 40px 32px;
	box-shadow: 0 12px 40px rgba(17, 42, 68, 0.10);
	position: relative;
	overflow: hidden;
}
.tpb-pw-brand {
	text-align: center;
	margin-bottom: 20px;
}
.tpb-pw-brand img {
	height: 52px;
	width: auto;
	display: inline-block;
}
.tpb-pw-accent {
	height: 4px;
	background: linear-gradient(to right, var(--tpb-primary) 0%, var(--tpb-primary) 33%, var(--tpb-secondary) 33%, var(--tpb-secondary) 100%);
	margin: 0 -40px 26px;
}
.tpb-pw-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tpb-secondary);
	text-align: center;
	margin: 0 0 8px 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.tpb-pw-sub {
	font-size: 14px;
	color: var(--tpb-muted);
	text-align: center;
	margin: 0 0 24px 0;
	line-height: 1.5;
}
.tpb-pw-form { display: flex; flex-direction: column; }
.tpb-pw-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tpb-secondary);
	margin-bottom: 6px;
}
.tpb-pw-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tpb-border);
	border-radius: 9px;
	font-size: 15px;
	font-family: inherit;
	background: #ffffff;
	color: var(--tpb-ink);
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.tpb-pw-input:focus {
	outline: none;
	border-color: var(--tpb-secondary);
	box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.12);
}
.tpb-pw-submit {
	margin-top: 18px;
	padding: 13px 20px;
	background: var(--tpb-primary);
	color: #ffffff;
	border: 1px solid var(--tpb-primary);
	border-radius: 9px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.tpb-pw-submit:hover {
	background: var(--tpb-primary-dark);
	border-color: var(--tpb-primary-dark);
}
.tpb-pw-notice {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
}
.tpb-pw-notice-error {
	background: #fce8e8;
	color: #8b1414;
	border: 1px solid #f0b6b6;
}
.tpb-pw-notice-warn {
	background: #fff7e6;
	color: #7a4d00;
	border: 1px solid #ffd699;
}
.tpb-pw-footer {
	text-align: center;
	margin: 26px 0 0 0;
	font-size: 12px;
	color: #98a2b3;
}
.tpb-pw-brand-text {
	font-weight: 700;
	color: var(--tpb-secondary);
	letter-spacing: 0.05em;
}
.tpb-pw-sep {
	margin: 0 8px;
	color: var(--tpb-border);
}

/* ============================================================
   Klantnaam-veld en optionele-label styling
   ============================================================ */
.tpb-frontend .tpb-label-optional {
	font-weight: 400;
	color: var(--tpb-muted);
	font-size: 12px;
	margin-left: 4px;
}
.tpb-frontend .tpb-desc-flush {
	margin-top: 6px;
	margin-bottom: 14px;
}

/* ============================================================
   Archief — desktop (tabel) + mobiel (cards)
   ============================================================ */
.tpb-frontend .tpb-archive-cards { display: none; }
.tpb-frontend .tpb-archive-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tpb-frontend .tpb-archive-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.tpb-frontend .tpb-archive-table th,
.tpb-frontend .tpb-archive-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--tpb-border);
	font-size: 13px;
	vertical-align: middle;
}
.tpb-frontend .tpb-archive-table th {
	background: #f9fafb;
	color: var(--tpb-secondary);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tpb-frontend .tpb-archive-table tr:last-child td { border-bottom: none; }
.tpb-frontend .tpb-row-actions {
	white-space: nowrap;
	text-align: right;
}
.tpb-frontend .tpb-row-actions .button + .button { margin-left: 4px; }

/* ============================================================
   Mobiele layout — overal netter
   ============================================================ */
@media (max-width: 720px) {
	.tpb-frontend.wrap {
		padding: 20px 14px 40px;
	}

	.tpb-frontend h1 {
		font-size: 22px;
	}
	.tpb-frontend h2 {
		font-size: 16px;
	}

	/* Header-hero: logo boven, titel eronder, gecentreerd */
	.tpb-frontend .tpb-hero-inner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 20px 20px 18px;
	}
	.tpb-frontend .tpb-hero-logo {
		height: 40px;
	}
	.tpb-frontend .tpb-hero-title h1 {
		font-size: 20px;
	}
	.tpb-frontend .tpb-hero-sub {
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Tabs op mobiel: horizontaal scrollbaar met snap */
	.tpb-frontend .tpb-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		white-space: nowrap;
		display: flex;
		gap: 6px;
		margin: 0 -14px 20px;
		padding: 0 14px 4px;
	}
	.tpb-frontend .tpb-tab {
		scroll-snap-align: start;
		flex-shrink: 0;
		font-size: 13px;
		padding: 10px 14px;
	}

	/* Cards ademen wat meer maar houden nette padding */
	.tpb-frontend .tpb-card {
		padding: 18px 16px;
		border-radius: 10px;
	}

	/* Grid wordt één kolom, met minder gap */
	.tpb-frontend .tpb-grid {
		display: block;
	}
	.tpb-frontend .tpb-grid > .tpb-col {
		margin-bottom: 18px;
	}
	.tpb-frontend .tpb-grid > .tpb-col:last-child { margin-bottom: 0; }

	/* Zoekrij: knop onder het zoekveld ipv ernaast */
	.tpb-frontend .tpb-search-row {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.tpb-frontend .tpb-search-row .tpb-text { width: 100%; }
	.tpb-frontend .tpb-search-row .button { width: 100%; }

	/* Contactpersoon-velden: één kolom */
	.tpb-frontend .tpb-seller-fields-inline {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Actie-knoppen full-width en gestapeld */
	.tpb-frontend .tpb-actions {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.tpb-frontend .tpb-actions .button {
		width: 100%;
		text-align: center;
	}

	/* Foto-picker: label en knopjes onder elkaar */
	.tpb-frontend .tpb-seller-photo-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Preview-blok mag geen overloop veroorzaken */
	.tpb-frontend .tpb-preview,
	.tpb-frontend .tpb-selected { overflow: hidden; }

	/* Result-actieblok stapelen */
	.tpb-frontend .tpb-result-action {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.tpb-frontend .tpb-result-action .button { width: 100%; }

	/* ARCHIEF: tabel weg, cards zichtbaar */
	.tpb-frontend .tpb-archive-table-wrap { display: none; }
	.tpb-frontend .tpb-archive-cards {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.tpb-frontend .tpb-archive-card {
		background: #ffffff;
		border: 1px solid var(--tpb-border);
		border-radius: 10px;
		padding: 14px 16px;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	}
	.tpb-frontend .tpb-archive-card-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}
	.tpb-frontend .tpb-archive-card-title {
		font-weight: 600;
		font-size: 14px;
		color: var(--tpb-secondary);
		line-height: 1.35;
		flex: 1;
		min-width: 0;
		word-break: break-word;
	}
	.tpb-frontend .tpb-archive-lang {
		flex-shrink: 0;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.05em;
		background: var(--tpb-secondary);
		color: #ffffff;
		padding: 3px 8px;
		border-radius: 999px;
		line-height: 1.4;
	}
	.tpb-frontend .tpb-archive-meta {
		margin: 0 0 12px 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px 14px;
	}
	.tpb-frontend .tpb-archive-meta > div { min-width: 0; }
	.tpb-frontend .tpb-archive-meta dt {
		font-size: 11px;
		color: var(--tpb-muted);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin: 0 0 2px 0;
	}
	.tpb-frontend .tpb-archive-meta dd {
		margin: 0;
		font-size: 13px;
		color: var(--tpb-ink);
		word-break: break-word;
	}
	.tpb-frontend .tpb-archive-card-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding-top: 10px;
		border-top: 1px solid var(--tpb-border);
	}
	.tpb-frontend .tpb-archive-card-actions .button {
		flex: 1;
		min-width: 100px;
		text-align: center;
	}

	/* Paginatie op mobiel: knoppen wat compacter, met wrap */
	.tpb-frontend .tpb-pagination {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Landkeuze-popup */
	.tpb-modal-panel { padding: 24px 20px 26px; }
	.tpb-modal-title { font-size: 18px; }
	.tpb-modal-sub { font-size: 13px; margin-bottom: 20px; }
	.tpb-country-grid { grid-template-columns: 1fr; gap: 10px; }
	.tpb-country-btn { padding: 12px 14px; }
	.tpb-flag { width: 36px; height: 24px; }
	.tpb-country-name { font-size: 14px; }

	/* Wachtwoord-pagina */
	.tpb-pw-card {
		padding: 28px 24px 24px;
		border-radius: 12px;
	}
	.tpb-pw-accent { margin: 0 -24px 22px; }
	.tpb-pw-title { font-size: 20px; }
}

/* Ultra-smalle schermen (<420px) — nog wat compacter */
@media (max-width: 420px) {
	.tpb-frontend.wrap { padding: 16px 12px 32px; }
	.tpb-frontend .tpb-archive-meta { grid-template-columns: 1fr; }
	.tpb-frontend .tpb-archive-card-actions .button { flex: 1 1 100%; }
}

/* ============================================================
   UI-taalswitcher (rechtsboven in de header)
   ============================================================ */
.tpb-frontend .tpb-hero-inner {
	position: relative;
}
.tpb-frontend .tpb-ui-lang-switch {
	display: flex;
	gap: 4px;
	margin-left: auto;
	align-self: flex-start;
	flex-shrink: 0;
}
.tpb-frontend .tpb-ui-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tpb-frontend .tpb-ui-lang-btn:hover,
.tpb-frontend .tpb-ui-lang-btn:focus {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
}
.tpb-frontend .tpb-ui-lang-btn.is-active {
	background: #ffffff;
	color: var(--tpb-secondary);
	border-color: #ffffff;
	pointer-events: none;
	cursor: default;
}

/* Mobile: switcher onder de titel, gecentreerd */
@media (max-width: 720px) {
	.tpb-frontend .tpb-hero-inner {
		flex-direction: column;
		align-items: center;
	}
	.tpb-frontend .tpb-ui-lang-switch {
		margin: 4px 0 0 0;
		align-self: center;
	}
	.tpb-frontend .tpb-ui-lang-btn {
		min-width: 40px;
		height: 32px;
		font-size: 13px;
	}
}

/* ============================================================
   Taalswitcher onderaan wachtwoord-scherm
   ============================================================ */
.tpb-pw-lang-switch {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--tpb-border);
}
.tpb-pw-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 30px;
	padding: 0 10px;
	border-radius: 6px;
	background: #f3f4f6;
	color: var(--tpb-muted);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border: 1px solid var(--tpb-border);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tpb-pw-lang-btn:hover,
.tpb-pw-lang-btn:focus {
	background: #e5e7eb;
	color: var(--tpb-secondary);
	text-decoration: none;
}
.tpb-pw-lang-btn.is-active {
	background: var(--tpb-secondary);
	color: #ffffff;
	border-color: var(--tpb-secondary);
	pointer-events: none;
	cursor: default;
}

/* ============================================================
   VvO-STIJL LAYOUT (v2.0)
   Header-card + hoofdkaart + ingevouwen accordion-kaarten.
   ============================================================ */

.tpb-frontend.tpb-vvo {
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

/* ------ HEADER-CARD ------ */
.tpb-vvo-header {
	background: #ffffff;
	border-radius: 14px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
	margin-bottom: 16px;
	border: 1px solid var(--tpb-border);
}
.tpb-vvo-header-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	flex: 1;
}
.tpb-vvo-logo {
	height: 44px;
	width: auto;
	flex-shrink: 0;
}
.tpb-vvo-header-titles {
	min-width: 0;
}
.tpb-vvo-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tpb-secondary);
	margin: 0 0 2px 0;
	line-height: 1.2;
}
.tpb-vvo-subtitle {
	margin: 0;
	color: var(--tpb-muted);
	font-size: 13px;
	line-height: 1.4;
}

/* ------ TAALSWITCHER IN HEADER ------ */
.tpb-vvo-lang-switch {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.tpb-vvo-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--tpb-muted);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border: 1px solid var(--tpb-border);
	transition: all 0.15s;
}
.tpb-vvo-lang-btn:hover,
.tpb-vvo-lang-btn:focus {
	color: var(--tpb-secondary);
	border-color: var(--tpb-secondary);
	text-decoration: none;
}
.tpb-vvo-lang-btn.is-active {
	background: var(--tpb-secondary);
	color: #ffffff;
	border-color: var(--tpb-secondary);
	pointer-events: none;
}

/* ------ VvO CARDS ------ */
.tpb-vvo-card {
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid var(--tpb-border);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.03);
	margin-bottom: 16px;
	overflow: hidden;
}
.tpb-vvo-main-card .tpb-vvo-card-body {
	padding: 28px 32px;
}

/* Hoofd-grid: formulier links, preview rechts */
.tpb-vvo-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: 32px;
}
.tpb-vvo-col-form,
.tpb-vvo-col-preview {
	min-width: 0;
}
.tpb-vvo-h2 {
	font-size: 15px;
	font-weight: 600;
	color: var(--tpb-secondary);
	margin: 0 0 12px 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ------ ACCORDION HEADS ------ */
.tpb-vvo-accordion-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 20px 24px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: background 0.15s;
}
.tpb-vvo-accordion-head:hover {
	background: rgba(26, 58, 92, 0.03);
}
.tpb-vvo-accordion-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--tpb-secondary);
	color: #ffffff;
}
.tpb-vvo-accordion-title {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tpb-vvo-accordion-title-main {
	font-size: 16px;
	font-weight: 600;
	color: var(--tpb-secondary);
	line-height: 1.3;
}
.tpb-vvo-accordion-title-sub {
	font-size: 13px;
	color: var(--tpb-muted);
	line-height: 1.4;
}
.tpb-vvo-accordion-action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--tpb-border);
	border-radius: 8px;
	color: var(--tpb-secondary);
	font-size: 13px;
	font-weight: 600;
	background: #ffffff;
	transition: all 0.15s;
}
.tpb-vvo-accordion-head:hover .tpb-vvo-accordion-action {
	border-color: var(--tpb-secondary);
	background: var(--tpb-secondary);
	color: #ffffff;
}
.tpb-vvo-accordion-chevron {
	display: inline-flex;
	transition: transform 0.2s ease;
}
.tpb-vvo-accordion[aria-expanded="true"] .tpb-vvo-accordion-chevron,
.tpb-vvo-accordion.is-open .tpb-vvo-accordion-chevron {
	transform: rotate(180deg);
}
.tpb-vvo-accordion-body {
	padding: 0 24px 24px;
	border-top: 1px solid var(--tpb-border);
}
.tpb-vvo-accordion-body[hidden] {
	display: none;
}
.tpb-vvo-accordion.is-open .tpb-vvo-accordion-chevron svg {
	transform: rotate(180deg);
}

/* ------ MEDEWERKERS IN ACCORDION ------ */
.tpb-vvo-emp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	padding-top: 20px;
}

/* ------ MOBIEL ------ */
@media (max-width: 820px) {
	.tpb-vvo-grid,
	.tpb-vvo-emp-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}
@media (max-width: 720px) {
	.tpb-frontend.tpb-vvo {
		padding: 14px 12px 40px;
	}
	.tpb-vvo-header {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 20px 16px 16px;
		gap: 16px;
	}
	.tpb-vvo-header-brand {
		flex-direction: column;
		gap: 12px;
	}
	.tpb-vvo-title {
		font-size: 18px;
	}
	.tpb-vvo-lang-switch {
		justify-content: center;
		flex-wrap: wrap;
	}
	.tpb-vvo-lang-btn {
		min-width: 52px;
		height: 32px;
	}
	.tpb-vvo-main-card .tpb-vvo-card-body {
		padding: 20px 16px;
	}
	.tpb-vvo-accordion-head {
		padding: 16px;
		gap: 12px;
	}
	.tpb-vvo-accordion-icon {
		width: 36px;
		height: 36px;
	}
	.tpb-vvo-accordion-title-main {
		font-size: 14px;
	}
	.tpb-vvo-accordion-title-sub {
		font-size: 12px;
	}
	.tpb-vvo-accordion-action .tpb-vvo-accordion-open-label {
		display: none;
	}
	.tpb-vvo-accordion-action {
		padding: 8px;
	}
	.tpb-vvo-accordion-body {
		padding: 16px;
	}
}

/* ============================================================
   Actief land + wijzigen-link in de VvO-header
   ============================================================ */
.tpb-vvo-country-line {
	margin-left: 6px;
	color: var(--tpb-muted);
	white-space: nowrap;
}
.tpb-vvo-country-active {
	color: var(--tpb-secondary);
	font-weight: 600;
}
.tpb-vvo-country-line:empty,
.tpb-vvo-country-active:empty {
	display: none;
}
/* Verberg het hele "· land wijzigen" blok zolang er geen land actief is */
.tpb-vvo-country-active:empty + .tpb-vvo-country-change,
.tpb-vvo-country-line:has(.tpb-vvo-country-active:empty) {
	display: none;
}
.tpb-vvo-country-change {
	background: transparent;
	border: 0;
	color: var(--tpb-primary);
	font-size: inherit;
	font-family: inherit;
	padding: 0;
	margin-left: 6px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tpb-vvo-country-change:hover,
.tpb-vvo-country-change:focus {
	color: var(--tpb-secondary);
}
@media (max-width: 720px) {
	.tpb-vvo-country-line {
		display: block;
		margin-left: 0;
		margin-top: 4px;
		white-space: normal;
	}
}

/* ============================================================
   Archief-zoekveld (fuzzy search)
   ============================================================ */
.tpb-frontend .tpb-archive-search-row {
	margin-bottom: 16px;
	padding-top: 4px;
}
.tpb-frontend .tpb-archive-search {
	width: 100%;
	max-width: 480px;
	padding: 10px 14px;
	font-size: 14px;
	background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 12px center;
	padding-left: 40px;
}

/* Kleine admin-login link op wachtwoord-scherm */
.tpb-pw-admin-hint {
	text-align: center;
	margin: 18px 0 10px;
	font-size: 12px;
}
.tpb-pw-admin-hint a {
	color: var(--tpb-muted);
	text-decoration: none;
	border-bottom: 1px dotted var(--tpb-muted);
	padding-bottom: 1px;
}
.tpb-pw-admin-hint a:hover {
	color: var(--tpb-secondary);
	border-bottom-color: var(--tpb-secondary);
}

/* ============================================================
   Drag & drop herordenen van "Geselecteerd"-chips (bepaalt
   productvolgorde in de PDF). Chips zijn pill-shaped en wrappen
   over regels — drop-indicator is daarom een korte verticale
   accent-balk links of rechts van de chip.
   ============================================================ */
.tpb-frontend .tpb-selected-hint {
	display: inline-block;
	margin-left: 8px;
	color: var(--tpb-muted);
	font-weight: 400;
	font-size: 11px;
	font-style: italic;
}
.tpb-frontend .tpb-chip {
	cursor: grab;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: box-shadow 0.12s, opacity 0.12s, border-color 0.12s;
	position: relative;
}
.tpb-frontend .tpb-chip:active {
	cursor: grabbing;
}
.tpb-frontend .tpb-chip-grip {
	display: inline-flex;
	align-items: center;
	color: #94a3b8;
	margin-right: 2px;
}
.tpb-frontend .tpb-chip:hover {
	border-color: var(--tpb-secondary);
}
.tpb-frontend .tpb-chip:hover .tpb-chip-grip {
	color: var(--tpb-secondary);
}
.tpb-frontend .tpb-chip.is-dragging {
	opacity: 0.35;
	border-style: dashed;
}
.tpb-frontend .tpb-chip.is-drop-above {
	box-shadow: -3px 0 0 0 var(--tpb-primary);
}
.tpb-frontend .tpb-chip.is-drop-below {
	box-shadow: 3px 0 0 0 var(--tpb-primary);
}
.tpb-frontend .tpb-chip-remove {
	cursor: pointer;
}
@media (max-width: 720px) {
	.tpb-frontend .tpb-selected-hint { display: block; margin-left: 0; margin-top: 4px; }
}