/* Rich-text editor styles (zt-rte-*). Ported from Zeal.Maui.App.Ui zt-ui.css. */
/* THE EDITOR IS ALWAYS FULL-WIDTH.  THE LEGACY FIELD CHROME IS A 350px-CAPPED CONTAINER WHOSE FIELD
   ROW IS A FLEX BOX — SO WE OVERRIDE THE CAP *AND* FORCE THE WHOLE CHAIN (INCLUDING THE FLEX CONTROL
   SLOT) TO STRETCH, OR THE EDITOR SHRINKS TO THE TOOLBAR'S NATURAL WIDTH. */
/* PAGE SECTIONS CAP THEIR CONTENT AT .zt-page-content { width: 60% }.  ANY CONTENT AREA THAT HOLDS
   THE EDITOR RUNS ALL THE WAY ACROSS INSTEAD (scoped via :has, so other sections are untouched). */
.zt-page-content:has(.zt-rte-root) { width: 100% !important; max-width: 100% !important; }

.zt-rte-root { display: block; width: 100%; position: relative; }
.zt-rte-root .zt-input-container,
.zt-rte-root .zt-input,
.zt-rte-root .zt-input-header,
.zt-rte-root .zt-input-field,
.zt-rte-root .zt-rte { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.zt-rte-root .zt-input-field-control { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; }
/* the big left field-icon doesn't suit a full-width editor — hide it like we do for textareas */
.zt-rte-root .zt-input-field-icon { display: none; }
.zt-rte { display: flex; flex-direction: column; border: 1px solid var(--zeal-silver, #c8ccce); border-radius: 6px; background: #fff; }
.zt-rte-surface, .zt-rte-code { border-radius: 0 0 6px 6px; }

/* ---- COMMAND BAR — a distinct toolbar with real-looking button tiles ---- */
.zt-rte-bar {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 6px 7px;
	background: linear-gradient(#fbfcfc, #eef1f3);
	border-bottom: 1px solid var(--zeal-silver, #c8ccce);
	border-radius: 6px 6px 0 0;
}
.zt-rte-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.zt-rte-bar-row2 { padding-top: 5px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.zt-rte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 29px;
	border: 1px solid #cdd3d6;
	border-radius: 5px;
	background: #fff;
	color: #3a4145;
	font-size: 0.88rem;
	cursor: pointer;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	transition: background .1s, border-color .1s, color .1s, box-shadow .1s;
}
.zt-rte-btn:hover { background: #eafaf9; border-color: var(--zeal-tiffany, #08bab5); color: var(--zeal-tiffany, #08bab5); }
.zt-rte-btn:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); background: #def5f4; }
.zt-rte-btn.active { background: var(--zeal-tiffany, #08bab5); border-color: var(--zeal-tiffany, #08bab5); color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }
.zt-rte-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: #cdd3d6; }

/* ---- FONT / SIZE DROPDOWNS — obvious button + caret + menu ---- */
.zt-rte-dd { position: relative; }
.zt-rte-dd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 29px;
	padding: 0 7px;
	border: 1px solid #cdd3d6;
	border-radius: 5px;
	background: #fff;
	color: #3a4145;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	font-family: var(--zt-font, system-ui, sans-serif);
}
.zt-rte-dd-btn:hover { background: #eafaf9; border-color: var(--zeal-tiffany, #08bab5); color: var(--zeal-tiffany, #08bab5); }
.zt-rte-dd-label { text-align: left; }
.zt-rte-dd-caret { font-size: 0.7rem; opacity: 0.7; transition: transform .12s; }
.zt-rte-dd.open .zt-rte-dd-caret { transform: rotate(180deg); }
.zt-rte-dd.open .zt-rte-dd-btn { border-color: var(--zeal-tiffany, #08bab5); color: var(--zeal-tiffany, #08bab5); }
.zt-rte-dd-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 60;
	min-width: 150px;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #cdd3d6;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	padding: 4px;
}
.zt-rte-dd-menu-sm { min-width: 84px; }
.zt-rte-dd-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 10px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: #333;
	font-size: 0.85rem;
	cursor: pointer;
	white-space: nowrap;
}
.zt-rte-dd-item:hover { background: #eafaf9; color: var(--zeal-tiffany, #08bab5); }
.zt-rte-dd-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.zt-rte-dd-font .zt-rte-dd-label { min-width: 92px; }
.zt-rte-dd-iconbtn { padding: 0 6px; gap: 3px; }
.zt-rte-dd-iconbtn .zt-fa { font-size: 0.9rem; }
/* split list button — main applies the default list, caret opens the style menu */
.zt-rte-split { position: relative; display: inline-flex; }
.zt-rte-split .zt-rte-split-main { border-radius: 5px 0 0 5px; border-right-width: 0; }
.zt-rte-split .zt-rte-split-caret { width: 18px; min-width: 18px; padding: 0; border-radius: 0 5px 5px 0; }
.zt-rte-split .zt-rte-split-caret .zt-rte-dd-caret { font-size: 0.62rem; opacity: 0.7; transition: transform .12s; }
.zt-rte-split.open .zt-rte-split-caret { background: var(--zeal-tiffany, #08bab5); border-color: var(--zeal-tiffany, #08bab5); color: #fff; }
.zt-rte-split.open .zt-rte-split-main { border-color: var(--zeal-tiffany, #08bab5); }
.zt-rte-split.open .zt-rte-dd-caret { transform: rotate(180deg); opacity: 1; }
/* bullet library — a Word-style grid of bullet glyphs */
.zt-rte-bullets { display: grid; grid-template-columns: repeat(5, 34px); gap: 4px; }
.zt-rte-bullet { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e3e6e7; border-radius: 5px; background: #fff; cursor: pointer; }
.zt-rte-bullet:hover { border-color: var(--zeal-tiffany, #08bab5); background: #eafaf9; }
.zt-rte-bullet-mark { font-size: 1rem; line-height: 1; color: #333; }
/* ordered-list "Numbering Library" — built-ins + @counter-style paren/bracket variants */
@counter-style zt-decimal-paren { system: extends decimal; suffix: ") "; }
@counter-style zt-decimal-bracket { system: extends decimal; prefix: "("; suffix: ") "; }
@counter-style zt-lower-alpha-paren { system: extends lower-alpha; suffix: ") "; }
@counter-style zt-upper-alpha-paren { system: extends upper-alpha; suffix: ") "; }
.zt-rte-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; min-width: 240px; }
.zt-rte-number { display: flex; align-items: center; justify-content: center; height: 34px; border: 1px solid #e3e6e7; border-radius: 5px; background: #fff; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #444; padding: 0 4px; }
.zt-rte-number:hover { border-color: var(--zeal-tiffany, #08bab5); background: #eafaf9; color: var(--zeal-tiffany, #08bab5); }
/* font-colour + highlight pickers — icon + current-colour swatch + caret */
.zt-rte-colorbtn { padding: 0 6px; gap: 3px; }
.zt-rte-colorbtn .zt-fa { font-size: 0.85rem; }
.zt-rte-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid #b9c0c3; border-radius: 3px; background: #444; flex: 0 0 auto; }
.zt-rte-colormenu { display: grid; grid-template-columns: repeat(6, 26px); gap: 4px; }
.zt-rte-color { width: 26px; height: 26px; border: 1px solid #d4d9db; border-radius: 4px; cursor: pointer; padding: 0; }
.zt-rte-color:hover { outline: 2px solid var(--zeal-tiffany, #08bab5); outline-offset: 1px; }
.zt-rte-color-none { background: #fff !important; position: relative; overflow: hidden; }
.zt-rte-color-none::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 54%, transparent 54%); }
/* link modal — left-aligned footer buttons */
.zt-rte-modal .zt-modal-footer { justify-content: flex-start; }
/* file picker — a clean Zeal button instead of the native Win3.1 control */
.zt-rte-filepicker { display: inline-flex; cursor: pointer; position: relative; }
/* MATCH THE GREEN ZtButton ("Choose picture") SO UPLOAD + CHOOSE READ AS ONE CONTROL SET. */
.zt-rte-filepicker-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 9px 16px; border-radius: 6px;
	background: #2d602d; color: #fff; font-weight: 600; font-size: 0.9rem;
	border: 1px solid #2d602d;
}
.zt-rte-filepicker:hover .zt-rte-filepicker-btn { filter: brightness(1.12); }
/* display:none (not opacity) so the native "No file chosen" control + its hover tooltip never show — the
   wrapping <label> still opens the file dialog on click. */
.zt-rte-fileinput { display: none; }

/* BASE / NEUTRAL SURFACE — GENERAL-PURPOSE EDITOR LOOK.  THIS IS WHAT EDITORS GET WHEN THEY DON'T
   DECLARE A CONTEXT (emails, welcome letters, SMS, signatures) — IT MUST NOT IMPOSE ANY ONE
   TARGET'S STYLE.  A CONSUMER OPTS INTO A SPECIFIC TARGET VIA SurfaceClass (SEE .zt-rte-site BELOW). */
.zt-rte-surface {
	padding: 16px 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #222;
	background: #fff;
	outline: none;
	overflow-y: auto;
	max-height: 60vh;
}
.zt-rte-surface:focus { box-shadow: inset 0 0 0 2px rgba(8, 186, 181, 0.25); }
.zt-rte-surface:empty::before { content: attr(data-placeholder); color: #9aa0a3; }
.zt-rte-surface img, .zt-rte-surface video { max-width: 100%; height: auto; border-radius: 4px; }
.zt-rte-surface a { color: var(--zeal-tiffany, #08bab5); text-decoration: underline; }
.zt-rte-surface ul { list-style: disc; margin: 0.5em 0; padding: 0 0 0 1.7em; text-align: inherit; }
.zt-rte-surface ol { list-style: decimal; margin: 0.5em 0; padding: 0 0 0 1.7em; text-align: inherit; }
.zt-rte-surface li { position: static; font-size: inherit; line-height: 1.5; margin: 0.2em 0; padding-left: 0.2em; }
.zt-rte-surface li::marker { color: #555; font-size: inherit; }
.zt-rte-surface li::before, .zt-rte-surface li::after { content: none !important; }
.zt-rte-surface p { margin: 0 0 0.6em; }

/* =========================================================================================
   CONTEXT: CONNECTED SITE  (SurfaceClass="zt-rte-site")
   Mirror connected-site-default.css .layout-container EXACTLY so the connected-site section
   editor is true WYSIWYG: a 640px centered content column, ZERO paragraph margins (the live
   site sets p margin:0 — that is why generic editor spacing looked too airy), and images
   block-centered at 640px with the site's 15px radius.  Applied ONLY on EditConnectedSection.
   ========================================================================================= */
.zt-rte-surface.zt-rte-site {
	font-family: "Gotham Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	color: #444;
}
.zt-rte-surface.zt-rte-site p {
	max-width: 640px;
	margin: 0 auto;			/* SITE: p HAS NO VERTICAL MARGIN — BLANK LINE = ONE LINE, NOT A 1rem GAP */
	padding: 0;
}
.zt-rte-surface.zt-rte-site h1,
.zt-rte-surface.zt-rte-site h2,
.zt-rte-surface.zt-rte-site h3,
.zt-rte-surface.zt-rte-site h4,
.zt-rte-surface.zt-rte-site h5,
.zt-rte-surface.zt-rte-site h6 {
	max-width: 640px;
	margin: 0 auto 0.5rem;
}
.zt-rte-surface.zt-rte-site ul,
.zt-rte-surface.zt-rte-site ol {
	max-width: 640px;
	margin: 0 auto;
}
.zt-rte-surface.zt-rte-site img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	object-fit: contain;
	border-radius: 15px;
	margin: 5px auto;
}

/* =========================================================================================
   CONTEXT: EMAIL  (SurfaceClass="zt-rte-email")
   Mirror the ACTUAL email render EXACTLY.  Every branded email — welcome/trial letters via
   ConnectedAccountHeader, comms via BulkLayout — wraps the body in:
       <style>p { line-height: 1.2; margin-top: 0; margin-bottom: 0; }</style>
       <body style="font-family: sans-serif; color: #333333;">
   So the paragraph reset (NO vertical margin, 1.2 line-height) is what makes the sent email
   tight.  Reproduce it here so the editor is WYSIWYG for the email.  Applied on the welcome
   letter, trial-class letter, and comms editors.
   ========================================================================================= */
.zt-rte-surface.zt-rte-email {
	font-family: sans-serif;
	color: #333333;
	line-height: 1.2;
}
.zt-rte-surface.zt-rte-email p {
	line-height: 1.2;
	margin: 0;			/* EMAIL RESET: p HAS NO VERTICAL MARGIN — MATCHES ConnectedAccountHeader/BulkLayout */
}
.zt-rte-collapsed { display: none; }
.zt-rte-code {
	width: 100%;
	min-height: 220px;
	max-height: 60vh;
	border: none;
	outline: none;
	resize: vertical;
	padding: 12px 14px;
	font-family: "Courier New", monospace;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #2b3a42;
	background: #fbfcfc;
}

/* full-screen edit mode — NATIVE Fullscreen API.  ONLY THE EDITOR (toolbar + surface) FILLS THE
   SCREEN EDGE-TO-EDGE — THE FIELD CHROME (label header, field padding, dark frame) IS HIDDEN. */
.zt-rte-root:fullscreen,
.zt-rte-root:-webkit-full-screen { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #fff; padding: 0; margin: 0; overflow: hidden; box-sizing: border-box; }
/* HIDE THE "EDIT SECTION" LABEL HEADER IN FULL SCREEN — WE WANT ONLY THE EDITOR. */
.zt-rte-root:fullscreen .zt-input-header,
.zt-rte-root:-webkit-full-screen .zt-input-header { display: none !important; }
/* COLLAPSE THE ENTIRE FIELD CHAIN TO A FULL-HEIGHT FLEX COLUMN SO THE SURFACE FILLS ALL REMAINING SPACE. */
.zt-rte-root:fullscreen .zt-input-container,
.zt-rte-root:-webkit-full-screen .zt-input-container,
.zt-rte-root:fullscreen .zt-input,
.zt-rte-root:-webkit-full-screen .zt-input,
.zt-rte-root:fullscreen .zt-input-field,
.zt-rte-root:-webkit-full-screen .zt-input-field,
.zt-rte-root:fullscreen .zt-input-field-control,
.zt-rte-root:-webkit-full-screen .zt-input-field-control,
.zt-rte-root:fullscreen .zt-rte,
.zt-rte-root:-webkit-full-screen .zt-rte {
	flex: 1 1 auto; display: flex; flex-direction: column; width: 100% !important; max-width: 100% !important;
	height: auto; min-height: 0; margin: 0 !important; padding: 0 !important; border-radius: 0; box-shadow: none;
}
.zt-rte-root:fullscreen .zt-rte,
.zt-rte-root:-webkit-full-screen .zt-rte { border: none; }
/* THE SURFACE / CODE VIEW EXPANDS TO FILL EVERYTHING BELOW THE TOOLBAR.  !important BEATS THE INLINE
   min-height / max-height (from MinHeightPx / EditorMaxHeight) THE CONSUMER SETS ON THE SURFACE. */
.zt-rte-root:fullscreen .zt-rte-surface,
.zt-rte-root:-webkit-full-screen .zt-rte-surface,
.zt-rte-root:fullscreen .zt-rte-code,
.zt-rte-root:-webkit-full-screen .zt-rte-code { flex: 1 1 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; }

/* modal forms (link / media / icon) */
.zt-rte-form { display: flex; flex-direction: column; gap: 8px; }
.zt-rte-form > label { font-size: 0.8rem; font-weight: 600; color: #555; margin-top: 4px; }
.zt-rte-field {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d4d9db;
	border-radius: 5px;
	font-size: 0.9rem;
	font-family: var(--zt-font, system-ui, sans-serif);
}
.zt-rte-check { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 500; color: #444; margin-top: 2px; }
.zt-rte-check input { width: auto; }
.zt-rte-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.zt-rte-tab { flex: 1; padding: 7px; border: 1px solid #d4d9db; border-radius: 5px; background: #f4f6f7; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #555; }
.zt-rte-tab.active { background: #2d602d; border-color: #2d602d; color: #fff; }
.zt-rte-note { font-size: 0.8rem; color: #777; margin: 4px 0 0; }
.zt-rte-error { font-size: 0.82rem; color: var(--zeal-red, #c0392b); margin: 4px 0 0; }
.zt-rte-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; height: 294px; overflow-y: auto; margin-top: 4px; }
.zt-rte-iconcell {
	display: flex; align-items: center; justify-content: center;
	height: 44px; border: 1px solid #eee; border-radius: 6px; background: #fff; cursor: pointer; font-size: 1.1rem; color: #444;
}
.zt-rte-iconcell:hover { background: #f0f7f7; border-color: var(--zeal-tiffany, #08bab5); color: var(--zeal-tiffany, #08bab5); }

/* Blazor-port additions: inline modal action row + link "new tab" checkbox row. */
.zt-rte-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.zt-rte-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 6px 0; }

/* ===== MEDIA MODAL: dual Upload/Choose actions + video transcode state ===== */
.zt-rte-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.zt-rte-media-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; margin-top: 14px; }
.zt-rte-filepicker.disabled { opacity: 0.5; pointer-events: none; }
.zt-rte-video-status { margin-top: 10px; }
.zt-rte-progress { height: 8px; background: #e6eaec; border-radius: 5px; overflow: hidden; margin-top: 6px; }
.zt-rte-progress-bar { height: 100%; background: #2d602d; border-radius: 5px; transition: width 0.3s ease; }

/* ===== MEDIA LIBRARY PICKER — full-screen overlay (ported from ConnectedMedia .cm-grid) ===== */
.zt-rte-picker {
	position: fixed; inset: 0; z-index: 1060;
	display: flex; flex-direction: column;
	background: #fff;
}
.zt-rte-root:fullscreen .zt-rte-picker, .zt-rte-root:-webkit-full-screen .zt-rte-picker { position: absolute; }
.zt-rte-picker-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; background: #2d602d; color: #fff; flex: 0 0 auto;
}
.zt-rte-picker-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; }
.zt-rte-picker-close { background: transparent; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.zt-rte-picker-close:hover { opacity: 0.85; }
.zt-rte-picker-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.zt-rte-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.zt-rte-picker-tile {
	display: flex; flex-direction: column; padding: 0; border: 1px solid #e2e6e8; border-radius: 8px;
	background: #fff; cursor: pointer; overflow: hidden; text-align: left;
}
.zt-rte-picker-tile:hover { border-color: #2d602d; box-shadow: 0 2px 8px rgba(45, 96, 45, 0.25); }
.zt-rte-picker-thumb { position: relative; aspect-ratio: 1 / 1; background: #f2f4f5; display: block; }
.zt-rte-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zt-rte-picker-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1.8rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.18);
}
.zt-rte-picker-cap { padding: 6px 8px; font-size: 0.78rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* BUSY STATE — CENTERED SPINNER WHILE THE LIBRARY LOADS (can be slow for large accounts). */
.zt-rte-picker-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 20px; color: #2d602d; font-size: 1rem; font-weight: 600; }
.zt-rte-picker-loading i { font-size: 2.2rem; }

/* ===== INSERTED VIDEO PLACEHOLDER (.zt-video) — size it like an image, not full-bleed =====
   Target the <video> ELEMENT directly (not just the .zt-video wrapper): a <video> is display:inline by
   default, so a bare/unwrapped one lets text flow beside it.  display:block + margin:auto centers it and
   forces the text below — matching the live site — whether or not the wrapper div survived insert/sanitize. */
.zt-rte-surface .zt-video { display: block; max-width: 100%; margin: 10px auto; float: none; clear: both; }
.zt-rte-surface video { display: block; float: none; clear: both; width: 100%; max-width: 100%; height: auto; margin: 10px auto; border-radius: 4px; background: #000; }
.zt-rte-surface .zt-video video { width: 100%; margin: 0; }
/* CONNECTED-SITE CONTEXT: match the 640px content column + rounded corners images use */
.zt-rte-surface.zt-rte-site .zt-video { max-width: 640px; }
.zt-rte-surface.zt-rte-site video { max-width: 640px; border-radius: 15px; }

/* ===== CLICK-TO-DELETE affordance for a selected image / video inside the surface ===== */
.zt-rte-surface img.zt-rte-selected, .zt-rte-surface .zt-video.zt-rte-selected {
	outline: 3px solid var(--zeal-tiffany, #08bab5); outline-offset: 2px;
}
.zt-rte-media-del {
	position: absolute; z-index: 5; display: none; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
	background: var(--zeal-red, #c0392b); color: #fff; cursor: pointer; font-size: 0.9rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.zt-rte-media-del:hover { filter: brightness(1.1); }