/* Ziggo Former sætter selv en læsbar tekststørrelse på alle sine elementer,
 * så temaets CSS ikke kan klemme skriften helt ned (kendt problem på nogle temaer).
 * Alle skriftstørrelser er clamp()-baserede: de skalerer mellem en mobil- og en
 * desktop-værdi efter viewport-bredden, i stedet for at være låst til ét fast tal. */
.zf-wrap {
	width: 90% !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

/* ---------- Log ud-knap øverst ---------- */
.zf-logout-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.zf-logout-btn {
	display: inline-block;
	padding: 8px 16px !important;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important;
	background: #fff !important;
	color: var(--zf-accent, #2271b1) !important;
	border: 1px solid var(--zf-accent, #2271b1) !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	cursor: pointer;
}
.zf-logout-btn:hover { background: var(--zf-accent, #2271b1) !important; color: #fff !important; }

/* ---------- Login-formular ---------- */
.zf-login-box {
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: clamp(20px, 4vw, 32px);
	box-shadow: 0 4px 18px rgba(0,0,0,0.06);
	font-size: clamp(1.603rem, 1.451rem + 0.675vw, 1.772rem);
}
.zf-login-box h3 {
	margin: 0 0 8px 0;
	font-size: clamp(1.856rem, 1.688rem + 0.675vw, 2.279rem);
	text-align: center;
}
.zf-login-intro { text-align: center; color: #666; margin: 0 0 20px 0; font-size: clamp(1.434rem, 1.35rem + 0.423vw, 1.603rem); }
.zf-login-box #loginform { max-width: 100%; }
.zf-login-box #loginform p { margin-bottom: 16px; }
.zf-login-box #loginform label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem);
}
.zf-login-box #loginform input[type="text"],
.zf-login-box #loginform input[type="password"] {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	font-size: 26px !important; /* min. 1rem, så iOS ikke zoomer ind ved fokus */
}
.zf-login-box #loginform input[type="text"]:focus,
.zf-login-box #loginform input[type="password"]:focus {
	border-color: var(--zf-accent, #2271b1) !important;
	outline: none !important;
}
.zf-login-box .login-remember {
	font-weight: normal !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
}
.zf-login-box .login-remember label { display: inline; margin: 0; font-weight: normal; }
.zf-login-box .login-submit { margin-bottom: 0 !important; }
.zf-login-box #wp-submit {
	width: 100%;
	padding: 11px !important;
	background: var(--zf-accent, #2271b1) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	font-size: clamp(1.688rem, 1.603rem + 0.423vw, 1.772rem) !important;
	cursor: pointer;
}
.zf-login-box #wp-submit:hover { opacity: 0.9; }
.zf-login-register { text-align: center; margin: 16px 0 0 0; font-size: clamp(1.434rem, 1.35rem + 0.423vw, 1.603rem); }
.zf-login-register a { color: var(--zf-accent, #2271b1); }

.zf-form,
.zf-own-posts,
.zf-mode-tabs,
.zf-editing-notice,
.zf-notice {
	font-size: clamp(1.603rem, 1.451rem + 0.675vw, 1.772rem) !important;
	line-height: 1.5 !important;
}

.zf-form { max-width: 100%; margin-bottom: clamp(20px, 4vw, 32px); box-sizing: border-box; }
.zf-fields-grid { display: flex; flex-wrap: wrap; column-gap: 20px; }
.zf-field { margin-bottom: clamp(12px, 2.5vw, 18px); box-sizing: border-box; }
.zf-field.zf-width-full { width: 100%; }
.zf-field.zf-width-half { width: calc(50% - 10px); }
.zf-field.zf-width-third { width: calc(33.333% - 14px); }
.zf-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important;
}
.zf-field input[type="text"],
.zf-field input[type="email"],
.zf-field input[type="url"],
.zf-field input[type="number"],
.zf-field input[type="date"],
.zf-field input[type="file"],
.zf-field textarea,
.zf-field select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: clamp(13px, 2vw, 16px);
	/* min. 1rem (16px), så iOS Safari ikke zoomer ind ved fokus på feltet */
	font-size: clamp(1.688rem, 1.603rem + 0.423vw, 1.772rem) !important;
	line-height: 1.4 !important;
}
.zf-field textarea { min-height: 120px !important; resize: vertical; }
.zf-field-post_content textarea { min-height: clamp(160px, 30vw, 260px) !important; }
.zf-inline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 14px;
	font-weight: normal;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important;
}
.zf-required { color: #b32d2e; }
.zf-group-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important;
}
.zf-current-file { margin-bottom: 6px; }
.zf-current-file-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f6f7f7;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none !important;
	color: #333 !important;
	max-width: 100%;
	box-sizing: border-box;
}
.zf-current-file-link:hover { border-color: var(--zf-accent, #2271b1); background: #fff; }
.zf-current-file-icon { font-size: 1.2em; line-height: 1; }
.zf-current-file-name { font-weight: 600; overflow-wrap: anywhere; }
.zf-current-file-size { color: #787c82; font-size: 0.85em; white-space: nowrap; }
.zf-file-hint { font-size: 20px !important; color: #787c82; margin: 4px 0 0 0 !important; font-style: italic; }
.zf-taxonomy-mismatch { color: #b32d2e !important; font-weight: 600 !important; font-size: 18px !important; }

/* ---------- Fil-vælger (eksisterende uploads eller ny fil) ---------- */
.zf-file-picker-preview { margin-bottom: 8px; }
.zf-file-picker-preview img { max-width: 160px; height: auto; border-radius: 4px; display: block; }

/* ---------- WooCommerce-galleri (flere billeder) ---------- */
.zf-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}
.zf-gallery-item { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid #ddd; }
.zf-gallery-item img { display: block; width: 100%; height: 90px; object-fit: cover; }
.zf-gallery-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.zf-gallery-remove:hover { background: #b32d2e; }
.zf-gallery-add-btn {
	padding: 8px 16px !important;
	background: #fff !important;
	color: var(--zf-accent, #2271b1) !important;
	border: 1px solid var(--zf-accent, #2271b1) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}
.zf-gallery-add-btn:hover { background: #f0f6fc !important; }

/* Markering af valgte billeder ved multi-valg i vælgeren */
.zf-picker-cell.is-selected { outline: 3px solid var(--zf-accent, #2271b1); outline-offset: -3px; }
.zf-picker-confirm-multi {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 10px !important;
	background: var(--zf-accent, #2271b1) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-weight: 600 !important;
}
.zf-file-picker-filename { display: inline-block; padding: 6px 10px; background: #f0f0f0; border-radius: 4px; font-size: 21px !important; }
.zf-file-picker-btn {
	padding: 8px 16px !important;
	font-size: 22px !important;
	background: #fff !important;
	color: var(--zf-accent, #2271b1) !important;
	border: 1px solid var(--zf-accent, #2271b1) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}
.zf-file-picker-btn:hover { background: #f0f6fc !important; }

.zf-picker-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.zf-picker-modal {
	background: #fff;
	border-radius: 8px;
	width: 100%;
	max-width: 560px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 16px;
	position: relative;
}
.zf-picker-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.zf-picker-tab {
	padding: 8px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f6f6f6;
	cursor: pointer;
	font-size: 22px;
}
.zf-picker-tab.is-active { background: var(--zf-accent, #2271b1); border-color: var(--zf-accent, #2271b1); color: #fff; }
.zf-picker-body { min-height: 120px; }
.zf-picker-search {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	margin-bottom: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 26px; /* min. 1rem så iOS ikke zoomer ind ved fokus */
}
.zf-picker-results {
	min-height: 120px;
	max-height: 50vh;
	overflow-y: auto;
}
.zf-picker-loading, .zf-picker-empty, .zf-picker-loading-more { color: #888; text-align: center; padding: 20px 0; }
.zf-picker-loading-more { padding: 10px 0; font-size: 14px; }
.zf-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
}
.zf-picker-cell {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px;
	background: #fafafa;
	cursor: pointer;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.zf-picker-cell:hover { border-color: var(--zf-accent, #2271b1); }
.zf-picker-cell img { max-width: 100%; max-height: 100%; object-fit: cover; }
.zf-picker-cell-filename { font-size: 18px; text-align: center; word-break: break-word; }
.zf-picker-size-back { background: none; border: none; color: var(--zf-accent, #2271b1); cursor: pointer; font-size: 21px; margin-bottom: 10px; padding: 0; }
.zf-picker-size-step { text-align: center; }
.zf-picker-size-preview { max-width: 100%; max-height: 200px; border-radius: 4px; margin-bottom: 14px; }
.zf-picker-size-options { display: flex; flex-direction: column; gap: 8px; }
.zf-picker-size-btn {
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 22px;
	text-align: left;
}
.zf-picker-size-btn:hover { border-color: var(--zf-accent, #2271b1); background: #f0f6fc; }
.zf-picker-size-dims { color: #888; font-size: 20px; }
.zf-picker-upload-btn {
	margin-top: 10px;
	padding: 8px 16px;
	background: var(--zf-accent, #2271b1);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.zf-picker-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	font-size: 21px;
	text-decoration: underline;
}

.zf-submit {
	padding: clamp(14px, 2.2vw, 17px) clamp(22px, 5vw, 30px) !important;
	font-size: clamp(1.688rem, 1.603rem + 0.423vw, 1.772rem) !important;
	background: var(--zf-accent, #2271b1) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	width: auto;
}
.zf-submit:hover { background: var(--zf-accent-dark, #135e96); }
.zf-cancel { margin-left: 10px; font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important; }

/* ---------- Design-skabeloner ---------- */
/* Hver skabelon er bevidst meget forskellig fra de andre (kant-tykkelse, hjørner,
 * baggrund, skygge) OG bruger accentfarven kraftigt på selve felterne — ikke kun på
 * knapper/faner. Bruger rgba() med de separate RGB-komponent-variabler
 * (--zf-accent-r/-g/-b) til dæmpede baggrundstoner — langt mere pålideligt på tværs
 * af browsere end den nyere color-mix()-funktion. */

/* Minimal — tynd, men tydelig accentfarvet kant, skarpe hjørner, ren hvid baggrund. */
.zf-form.zf-theme-minimal .zf-field input[type="text"],
.zf-form.zf-theme-minimal .zf-field input[type="email"],
.zf-form.zf-theme-minimal .zf-field input[type="url"],
.zf-form.zf-theme-minimal .zf-field input[type="number"],
.zf-form.zf-theme-minimal .zf-field input[type="date"],
.zf-form.zf-theme-minimal .zf-field textarea,
.zf-form.zf-theme-minimal .zf-field select {
	border: 2px solid var(--zf-accent, #2271b1) !important;
	border-radius: 3px !important;
	background: rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.08) !important;
	box-shadow: none !important;
}
.zf-form.zf-theme-minimal .zf-field input:focus,
.zf-form.zf-theme-minimal .zf-field textarea:focus,
.zf-form.zf-theme-minimal .zf-field select:focus {
	border-color: var(--zf-accent-dark, #135e96) !important;
	box-shadow: 0 0 0 3px rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.25) !important;
	outline: none !important;
}
.zf-form.zf-theme-minimal .zf-submit { border-radius: 3px !important; }

/* Afrundet — meget runde hjørner, tydelig accent-tonet baggrund, blødt hele vejen. */
.zf-form.zf-theme-rounded .zf-field input[type="text"],
.zf-form.zf-theme-rounded .zf-field input[type="email"],
.zf-form.zf-theme-rounded .zf-field input[type="url"],
.zf-form.zf-theme-rounded .zf-field input[type="number"],
.zf-form.zf-theme-rounded .zf-field input[type="date"],
.zf-form.zf-theme-rounded .zf-field textarea,
.zf-form.zf-theme-rounded .zf-field select {
	border: 1px solid rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.5) !important;
	border-radius: 28px !important;
	padding: clamp(12px, 2.5vw, 18px) clamp(18px, 3.5vw, 24px) !important;
	background: rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.1) !important;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
}
.zf-form.zf-theme-rounded .zf-field input:focus,
.zf-form.zf-theme-rounded .zf-field textarea:focus,
.zf-form.zf-theme-rounded .zf-field select:focus {
	border-color: var(--zf-accent, #2271b1) !important;
	background: #fff !important;
	outline: none !important;
}
.zf-form.zf-theme-rounded .zf-submit { border-radius: 999px !important; padding: clamp(11px, 2vw, 13px) clamp(20px, 5vw, 28px) !important; }

/* Kort med skygge — hvert felt i et tydeligt, hævet kort med farvet stribe foroven. */
.zf-form.zf-theme-card .zf-field {
	background: rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.05) !important;
	border: 1px solid rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.25) !important;
	border-top: 5px solid var(--zf-accent, #2271b1) !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 20px rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.18) !important;
	padding: clamp(14px, 3vw, 20px) !important;
	box-sizing: border-box;
}
.zf-form.zf-theme-card .zf-field input[type="text"],
.zf-form.zf-theme-card .zf-field input[type="email"],
.zf-form.zf-theme-card .zf-field input[type="url"],
.zf-form.zf-theme-card .zf-field input[type="number"],
.zf-form.zf-theme-card .zf-field input[type="date"],
.zf-form.zf-theme-card .zf-field textarea,
.zf-form.zf-theme-card .zf-field select {
	border: none !important;
	border-bottom: 2px solid rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.4) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 8px 6px !important;
}
.zf-form.zf-theme-card .zf-field input:focus,
.zf-form.zf-theme-card .zf-field textarea:focus,
.zf-form.zf-theme-card .zf-field select:focus {
	border-bottom-color: var(--zf-accent, #2271b1) !important;
	outline: none !important;
}
.zf-form.zf-theme-card .zf-submit { border-radius: 8px !important; box-shadow: 0 6px 18px rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.45) !important; }

/* Kraftig kant — meget tykke, fuldt farvede kanter, skarpe hjørner, tydelig tonet baggrund. */
.zf-form.zf-theme-bold .zf-field input[type="text"],
.zf-form.zf-theme-bold .zf-field input[type="email"],
.zf-form.zf-theme-bold .zf-field input[type="url"],
.zf-form.zf-theme-bold .zf-field input[type="number"],
.zf-form.zf-theme-bold .zf-field input[type="date"],
.zf-form.zf-theme-bold .zf-field textarea,
.zf-form.zf-theme-bold .zf-field select {
	border: 4px solid var(--zf-accent, #2271b1) !important;
	border-radius: 0 !important;
	background: rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.12) !important;
	box-shadow: 4px 4px 0 var(--zf-accent-dark, #135e96) !important;
}
.zf-form.zf-theme-bold .zf-field label {
	text-transform: uppercase !important;
	font-size: clamp(1.266rem, 1.181rem + 0.423vw, 1.434rem) !important;
	letter-spacing: 0.03em !important;
	color: var(--zf-accent-dark, #135e96) !important;
	font-weight: 800 !important;
}
.zf-form.zf-theme-bold .zf-submit { border-radius: 0 !important; font-weight: 700 !important; letter-spacing: 0.02em !important; box-shadow: 4px 4px 0 var(--zf-accent-dark, #135e96) !important; }

/* Mørk — samme idé som lys/mørk-tilstand: mørk baggrund med lys tekst. Baggrund og
 * tekstfarve er faste (ikke afledt af accentfarven), så kontrasten altid er garanteret
 * god, uanset hvilket farveskema der er valgt — accentfarven bruges kun til kanter,
 * fokus-ring og knap. */
.zf-form.zf-theme-dark {
	background: #1b1b2b !important;
	padding: clamp(16px, 3vw, 26px) !important;
	border-radius: 10px !important;
}
.zf-form.zf-theme-dark .zf-field label,
.zf-form.zf-theme-dark .zf-group-label,
.zf-form.zf-theme-dark .zf-inline,
.zf-form.zf-theme-dark .zf-section-heading {
	color: #f2f2f6 !important;
}
.zf-form.zf-theme-dark .zf-field input[type="text"],
.zf-form.zf-theme-dark .zf-field input[type="email"],
.zf-form.zf-theme-dark .zf-field input[type="url"],
.zf-form.zf-theme-dark .zf-field input[type="number"],
.zf-form.zf-theme-dark .zf-field input[type="date"],
.zf-form.zf-theme-dark .zf-field textarea,
.zf-form.zf-theme-dark .zf-field select {
	background: #2a2a40 !important;
	color: #f2f2f6 !important;
	border: 1px solid var(--zf-accent, #2271b1) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color-scheme: dark; /* lader browserens egne widgets (fx dato-vælger) også blive mørke */
}
.zf-form.zf-theme-dark .zf-field input::placeholder,
.zf-form.zf-theme-dark .zf-field textarea::placeholder { color: #9a9ab2 !important; opacity: 1 !important; }
.zf-form.zf-theme-dark .zf-field input:focus,
.zf-form.zf-theme-dark .zf-field textarea:focus,
.zf-form.zf-theme-dark .zf-field select:focus {
	border-color: var(--zf-accent-dark, #135e96) !important;
	box-shadow: 0 0 0 3px rgba(var(--zf-accent-r, 34), var(--zf-accent-g, 113), var(--zf-accent-b, 177), 0.4) !important;
	outline: none !important;
}
.zf-form.zf-theme-dark .zf-divider { border-top-color: rgba(255,255,255,0.15) !important; }
.zf-form.zf-theme-dark .zf-section-heading { border-bottom-color: var(--zf-accent, #2271b1) !important; }
.zf-form.zf-theme-dark .zf-submit {
	background: var(--zf-accent, #2271b1) !important;
	color: #fff !important;
	border-radius: 6px !important;
}
.zf-form.zf-theme-dark .zf-submit:hover { background: var(--zf-accent-dark, #135e96) !important; }
.zf-form.zf-theme-dark .zf-file-picker-btn {
	background: #2a2a40 !important;
	color: #f2f2f6 !important;
	border-color: var(--zf-accent, #2271b1) !important;
}
.zf-form.zf-theme-dark .zf-file-hint { color: #b3b3c6 !important; }
.zf-form.zf-theme-dark .zf-required { color: #ff8a8a !important; }

/* Layout-elementer (Sektionsoverskrift, Skillelinje) skal ALDRIG få tema-styling som
 * kant/baggrund/skygge (fx fra "Kort med skygge") — de er rene strukturelle
 * hjælpeelementer og skal altid forblive ren afstand/tekst, uanset valgt tema. */
.zf-form.zf-theme-minimal .zf-field-divider,
.zf-form.zf-theme-minimal .zf-field-heading,
.zf-form.zf-theme-rounded .zf-field-divider,
.zf-form.zf-theme-rounded .zf-field-heading,
.zf-form.zf-theme-card .zf-field-divider,
.zf-form.zf-theme-card .zf-field-heading,
.zf-form.zf-theme-bold .zf-field-divider,
.zf-form.zf-theme-bold .zf-field-heading,
.zf-form.zf-theme-dark .zf-field-divider,
.zf-form.zf-theme-dark .zf-field-heading {
	background: none !important;
	border: none !important;
	border-top: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}


.zf-notice {
	padding: clamp(9px, 1.8vw, 11px) clamp(12px, 2.5vw, 15px) !important;
	margin-bottom: 16px;
	border-radius: 4px !important;
	font-size: clamp(1.519rem, 1.417rem + 0.506vw, 1.688rem) !important;
	transition: box-shadow .3s ease;
}
.zf-notice-success { background: #eafaea !important; border: 1px solid #8fd19e !important; }
.zf-notice-error { background: #fdeaea !important; border: 1px solid #e39a9a !important; }
/* Kort fremhævning når beskeden scrolles i syne efter en indsendelse, så øjet fanger den. */
.zf-notice-flash { box-shadow: 0 0 0 4px rgba(179,45,46,0.25); }
.zf-notice-success.zf-notice-flash { box-shadow: 0 0 0 4px rgba(64,145,80,0.25); }

.zf-mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.zf-mode-tab {
	display: inline-block;
	padding: clamp(11px, 2vw, 14px) clamp(16px, 3.5vw, 22px) !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	text-decoration: none;
	color: #333 !important;
	background: #f6f6f6 !important;
	font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important;
	flex: 1 1 auto;
	text-align: center;
	box-sizing: border-box;
}
.zf-mode-tab.is-active { background: var(--zf-accent, #2271b1) !important; border-color: var(--zf-accent, #2271b1) !important; color: #fff !important; }
.zf-editing-notice {
	background: #fff8e5 !important;
	border: 1px solid #e6d28a !important;
	padding: clamp(8px, 1.6vw, 10px) clamp(10px, 2.2vw, 13px) !important;
	margin-bottom: 14px;
	border-radius: 4px !important;
	font-size: clamp(1.519rem, 1.417rem + 0.506vw, 1.688rem) !important;
}
.zf-own-posts-empty {
	padding: clamp(14px, 3vw, 18px) !important;
	background: #f6f6f6 !important;
	border-radius: 4px !important;
	font-size: clamp(1.603rem, 1.451rem + 0.675vw, 1.772rem) !important;
	text-align: center;
}
.zf-own-posts-empty .zf-submit { display: inline-block; margin-top: 8px; text-decoration: none; }

.zf-post-picker { max-width: 100%; font-size: clamp(1.603rem, 1.451rem + 0.675vw, 1.772rem) !important; }
.zf-post-picker-search {
	width: 100%;
	box-sizing: border-box;
	padding: clamp(9px, 1.8vw, 11px) clamp(10px, 2.2vw, 13px) !important;
	border: 1px solid #ccc !important;
	border-bottom: none !important;
	border-radius: 4px 4px 0 0 !important;
	/* min. 1rem, så iOS Safari ikke zoomer ind ved fokus */
	font-size: clamp(1.688rem, 1.603rem + 0.423vw, 1.772rem) !important;
}
.zf-post-picker-list {
	height: min(320px, 60vh); /* fast højde, men aldrig mere end 60% af skærmhøjden på mobil */
	overflow-y: auto;
	border: 1px solid #ddd !important;
	border-radius: 0 0 4px 4px !important;
	background: #fff !important;
	font-size: clamp(1.603rem, 1.451rem + 0.675vw, 1.772rem) !important;
	-webkit-overflow-scrolling: touch;
}
.zf-post-row {
	padding: clamp(9px, 1.8vw, 11px) clamp(10px, 2.2vw, 13px) !important;
	border-bottom: 1px solid #eee !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: clamp(1.519rem, 1.401rem + 0.59vw, 1.688rem) !important;
}
.zf-post-row:last-child { border-bottom: none !important; }
.zf-post-row .zf-post-title { font-weight: 600 !important; margin-right: 4px; word-break: break-word; }
.zf-post-picker-empty {
	padding: 12px !important;
	color: #888 !important;
	margin: 0;
	font-size: clamp(1.434rem, 1.35rem + 0.423vw, 1.603rem) !important;
	text-align: center;
}
.zf-own-posts .zf-post-status { color: #888; font-size: clamp(1.266rem, 1.181rem + 0.423vw, 1.434rem) !important; margin: 0 8px; }
.zf-own-posts a { margin-right: 10px; font-size: clamp(1.434rem, 1.316rem + 0.59vw, 1.603rem) !important; }

/* ---------- Layout-elementer: sektionsoverskrift og skillelinje ---------- */
.zf-field-heading { margin-top: clamp(6px, 1.5vw, 14px); }
.zf-section-heading {
	font-size: clamp(1.856rem, 1.688rem + 0.844vw, 2.362rem) !important;
	font-weight: 700 !important;
	margin: 0 0 4px 0 !important;
	padding: 0 0 6px 0 !important;
	border-bottom: 2px solid var(--zf-accent, #2271b1);
	color: #222 !important;
}
/* Margin/afstand sættes nu som inline style direkte fra PHP'en (justerbar % pr. felt),
 * ikke en fast værdi her. */
.zf-divider { border: none; border-top: 1px solid #e0e0e0; margin: 0; }
.zf-divider.zf-divider-no-line { border-top-color: transparent; }

/* ---------- Skrifttype/-størrelse/-stil sættes nu som inline style direkte i PHP'en
 * (se Ziggo_Former_Fields::get_control_style()) i stedet for CSS-klasser her — det kan
 * ikke tabe til andre regler, uanset specificitet eller indlæsningsrækkefølge. ---------- */

/* ---------- Vandret/lodret layout for afkrydsningsfelter, radioknapper og kategori-lister ---------- */
.zf-options-horizontal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.zf-options-vertical { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Rig tekst-editor (WYSIWYG) på frontend ---------- */
.zf-field .wp-editor-wrap { max-width: 100%; }
.zf-field .wp-editor-container { border: 1px solid #ccc; border-radius: 4px; }
.zf-field .mce-tinymce { box-shadow: none !important; }
/* WordPress' egen "Tilføj medier"-knap (vises over selve editoren) */
.zf-field .wp-media-buttons .button {
	font-size: 16px !important;
	padding: 6px 12px !important;
	height: auto !important;
}

/* ---------- Per-felt udseende (kant, hjørner, skygge) — overstyrer design-skabelonen for enkelte felter ----------
   Dækker nu ikke kun almindelige tekstfelter, men også afkrydsningsfelter/radio-knapper (som
   "chips") og fil-vælgerens knap — før virkede disse indstillinger reelt kun på tekst-agtige
   felter, hvilket gjorde det til et gæt, om en indstilling virkede eller ej, alt efter felttype. */
.zf-wrap .zf-form .zf-field.zf-border-none input[type="text"],
.zf-wrap .zf-form .zf-field.zf-border-none input[type="email"],
.zf-wrap .zf-form .zf-field.zf-border-none input[type="url"],
.zf-wrap .zf-form .zf-field.zf-border-none input[type="number"],
.zf-wrap .zf-form .zf-field.zf-border-none input[type="date"],
.zf-wrap .zf-form .zf-field.zf-border-none textarea,
.zf-wrap .zf-form .zf-field.zf-border-none select,
.zf-wrap .zf-form .zf-field.zf-border-none .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-border-none .zf-options label.zf-inline { border-style: none !important; border-bottom: 1px solid #ccc !important; }

.zf-wrap .zf-form .zf-field.zf-border-dashed input[type="text"],
.zf-wrap .zf-form .zf-field.zf-border-dashed input[type="email"],
.zf-wrap .zf-form .zf-field.zf-border-dashed input[type="url"],
.zf-wrap .zf-form .zf-field.zf-border-dashed input[type="number"],
.zf-wrap .zf-form .zf-field.zf-border-dashed input[type="date"],
.zf-wrap .zf-form .zf-field.zf-border-dashed textarea,
.zf-wrap .zf-form .zf-field.zf-border-dashed select,
.zf-wrap .zf-form .zf-field.zf-border-dashed .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-border-dashed .zf-options label.zf-inline { border-style: dashed !important; }

.zf-wrap .zf-form .zf-field.zf-border-dotted input[type="text"],
.zf-wrap .zf-form .zf-field.zf-border-dotted input[type="email"],
.zf-wrap .zf-form .zf-field.zf-border-dotted input[type="url"],
.zf-wrap .zf-form .zf-field.zf-border-dotted input[type="number"],
.zf-wrap .zf-form .zf-field.zf-border-dotted input[type="date"],
.zf-wrap .zf-form .zf-field.zf-border-dotted textarea,
.zf-wrap .zf-form .zf-field.zf-border-dotted select,
.zf-wrap .zf-form .zf-field.zf-border-dotted .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-border-dotted .zf-options label.zf-inline { border-style: dotted !important; }

.zf-wrap .zf-form .zf-field.zf-radius-sharp input[type="text"],
.zf-wrap .zf-form .zf-field.zf-radius-sharp input[type="email"],
.zf-wrap .zf-form .zf-field.zf-radius-sharp input[type="url"],
.zf-wrap .zf-form .zf-field.zf-radius-sharp input[type="number"],
.zf-wrap .zf-form .zf-field.zf-radius-sharp input[type="date"],
.zf-wrap .zf-form .zf-field.zf-radius-sharp textarea,
.zf-wrap .zf-form .zf-field.zf-radius-sharp select,
.zf-wrap .zf-form .zf-field.zf-radius-sharp .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-radius-sharp .zf-options label.zf-inline { border-radius: 0 !important; }

.zf-wrap .zf-form .zf-field.zf-radius-rounded input[type="text"],
.zf-wrap .zf-form .zf-field.zf-radius-rounded input[type="email"],
.zf-wrap .zf-form .zf-field.zf-radius-rounded input[type="url"],
.zf-wrap .zf-form .zf-field.zf-radius-rounded input[type="number"],
.zf-wrap .zf-form .zf-field.zf-radius-rounded input[type="date"],
.zf-wrap .zf-form .zf-field.zf-radius-rounded textarea,
.zf-wrap .zf-form .zf-field.zf-radius-rounded select,
.zf-wrap .zf-form .zf-field.zf-radius-rounded .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-radius-rounded .zf-options label.zf-inline { border-radius: 12px !important; }

.zf-wrap .zf-form .zf-field.zf-radius-pill input[type="text"],
.zf-wrap .zf-form .zf-field.zf-radius-pill input[type="email"],
.zf-wrap .zf-form .zf-field.zf-radius-pill input[type="url"],
.zf-wrap .zf-form .zf-field.zf-radius-pill input[type="number"],
.zf-wrap .zf-form .zf-field.zf-radius-pill input[type="date"],
.zf-wrap .zf-form .zf-field.zf-radius-pill select,
.zf-wrap .zf-form .zf-field.zf-radius-pill .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-radius-pill .zf-options label.zf-inline {
	border-radius: 999px !important;
	/* En helt rund (pille-formet) kant kræver mere vandret margin end en almindelig kant —
	   ellers "spiser" selve krumningen ind i teksten ude i hjørnerne. */
	padding-left: clamp(30px, 5vw, 40px) !important;
	padding-right: clamp(30px, 5vw, 40px) !important;
}
.zf-wrap .zf-form .zf-field.zf-radius-pill textarea {
	/* Tekstområder holdes ude af den ekstra pille-margin — en fuldt rund kant på et
	   flerlinjet felt ville se mærkeligt ud og bruges typisk ikke i praksis. */
	border-radius: 24px !important;
}

.zf-wrap .zf-form .zf-field.zf-shadow-soft input[type="text"],
.zf-wrap .zf-form .zf-field.zf-shadow-soft input[type="email"],
.zf-wrap .zf-form .zf-field.zf-shadow-soft input[type="url"],
.zf-wrap .zf-form .zf-field.zf-shadow-soft input[type="number"],
.zf-wrap .zf-form .zf-field.zf-shadow-soft input[type="date"],
.zf-wrap .zf-form .zf-field.zf-shadow-soft textarea,
.zf-wrap .zf-form .zf-field.zf-shadow-soft select,
.zf-wrap .zf-form .zf-field.zf-shadow-soft .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-shadow-soft .zf-options label.zf-inline { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }

.zf-wrap .zf-form .zf-field.zf-shadow-strong input[type="text"],
.zf-wrap .zf-form .zf-field.zf-shadow-strong input[type="email"],
.zf-wrap .zf-form .zf-field.zf-shadow-strong input[type="url"],
.zf-wrap .zf-form .zf-field.zf-shadow-strong input[type="number"],
.zf-wrap .zf-form .zf-field.zf-shadow-strong input[type="date"],
.zf-wrap .zf-form .zf-field.zf-shadow-strong textarea,
.zf-wrap .zf-form .zf-field.zf-shadow-strong select,
.zf-wrap .zf-form .zf-field.zf-shadow-strong .zf-file-picker-btn,
.zf-wrap .zf-form .zf-field.zf-shadow-strong .zf-options label.zf-inline { box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important; }

/* Afkrydsningsfelter/radio-knapper har normalt ingen synlig kant/baggrund om selve label'en —
   uden lidt basis-styling ville "chip"-udseendet fra ovenstående (kant/hjørner/skygge) ikke
   have noget at vise sig på. Kun anvendt, når mindst én af de tre er valgt for feltet. */
.zf-wrap .zf-form .zf-field.zf-border-none .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-border-dashed .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-border-dotted .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-radius-sharp .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-radius-rounded .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-radius-pill .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-shadow-soft .zf-options label.zf-inline,
.zf-wrap .zf-form .zf-field.zf-shadow-strong .zf-options label.zf-inline {
	padding: 4px 10px !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #ccc !important;
}

/* ---------- Generelt side-layout: hold footeren nederst ---------- */
/* Divi placerer footeren direkte efter indholdet, så på korte sider (som en tom/kort
 * "Ret en tidligere post"-liste) "flyder" footeren op midt på skærmen i stedet for at
 * blive stående i bunden. Denne flexbox-løsning retter det generelt, ikke kun på
 * plugin-siderne, da stylesheetet nu indlæses på hele frontend.
 * Selectors matcher Divis standard-struktur (#page-container / #main-content / #main-footer);
 * hvis jeres tema bruger andre id'er/klasser her, skal disse justeres. */
html, body { height: 100%; }
#page-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#main-content {
	flex: 1 0 auto;
}
#main-footer,
.et-l--footer {
	flex-shrink: 0;
}

/* ---------- Mobil-tilpasninger ---------- */
/* ---------- Tablet-tilpasning (fx iPad i portræt, ~601–1024px) ---------- */
/* "Tredjedel" (3 pr. række) bliver for trangt på denne bredde, så det bliver til
 * halv bredde (2 pr. række) i stedet. "Halv bredde" beholdes som den er. */
@media (min-width: 601px) and (max-width: 1024px) {
	.zf-field.zf-width-third { width: calc(50% - 10px); }
}

@media (max-width: 600px) {
	.zf-wrap { width: 94% !important; }

	/* Spalter (halv/tredjedel-bredde) stables altid til fuld bredde på mobil */
	.zf-field.zf-width-half,
	.zf-field.zf-width-third { width: 100%; }

	.zf-mode-tabs { gap: 6px; }

	/* Send-knappen bliver fuld bredde, så den er nem at ramme med tommelfingeren */
	.zf-submit { width: 100%; text-align: center; }
	.zf-cancel { display: inline-block; margin: 8px 0 0 0; }

	/* Radio/checkbox-grupper (fx kategorier) stables i én kolonne i stedet for at flyde i flere spalter */
	.zf-inline { display: flex; margin-right: 0; }

	/* Hver post-række i "Ret en tidligere post" stables lodret, så handlinger ikke bliver klemt sammen */
	.zf-post-row { flex-direction: column; align-items: flex-start; gap: 4px; }
	.zf-post-row a { margin-right: 14px; }
}