/* .mw_cb_content is the read-view wrapper; .mw_cb_modal_overlay is the modal (appended to
   body, outside .mw_cb) — both need the component vars too */
.mw_cb,
.mw_cb_content,
.mw_cb_modal_overlay {
	--cb-border: #e2e6e2;
	--cb-accent: #219ED1;
	--cb-gap: 1.5em;
}

.mw_cb {
	position: relative;
}

/* field head: the editor's own heading with the AI button on the right, separated
   from the blocks by a line (styled like a settings-box head) */
.mw_cb_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bgl-border-color, #edf2f7);
}

.mw_cb_head_title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bgl-title-color, #4b535e);
}

/* in the admin settings box the head replaces the box's own title bar: negative
   margins cancel the box-content padding so the separator spans the full box width */
.mw_admin_setting_container .mw_cb_head {
	margin: -30px -30px 30px;
	padding: 14px 30px;
}

/* Spacing between blocks. In the read view it's a sibling margin. In the editor the
   insert zones (.mw_cb_insert) sit between the blocks and carry the gap themselves —
   so no flex gap here, otherwise the space would stack (gap + insert + gap). */
.mw_cb_blocks {
	display: flex;
	flex-direction: column;
}

.mw_cb_content > * + * {
	margin-top: var(--cb-gap);
}

/* one block — no frame at rest; a light outline and the tools appear on hover */
.mw_cb_block {
	position: relative;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 3px;
}

.mw_cb_block:hover {
	border-color: var(--cb-border);
}

.mw_cb_block.is-editing {
	border-color: var(--cb-accent);
}

.mw_cb_body > * {
	margin: 0;
}

/* hover tools — flush with the block's top-right border corner */
.mw_cb_tools {
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 5;
	display: none;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--cb-border);
	border-radius: 7px;
	padding: 2px;
}

.mw_cb_block:hover .mw_cb_tools {
	display: flex;
}

.mw_cb_tools span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	cursor: pointer;
	color: #566;
}

.mw_cb_tools span:hover {
	background: #e9f4fb;
	color: var(--cb-accent);
}

.mw_cb_delete:hover {
	color: #c0392b !important;
}

/* the drag span carries the theme's .ve_sortable_handler margin-right, which would
   make the toolbar's right gap bigger than the left — reset it for even spacing.
   The .mw_cb wrapper raises specificity above .mw_admin_setting_container's rule. */
.mw_cb .mw_cb_tools .mw_cb_drag {
	cursor: grab;
	margin-right: 0;
}

.mw_cb_tools svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* insert zone between/around blocks: a hover line with a round "+" in the middle.
   It carries the inter-block gap; minus 8px compensating the blocks' invisible frame
   (2 × 3px padding + 1px border), so the visual gap equals the read view's margin. */
.mw_cb_insert {
	position: relative;
	z-index: 6; /* above the neighbouring blocks, so the overflowing + button is never covered */
	height: calc(var(--cb-gap) - 8px);
	cursor: pointer;
}

.mw_cb_insert_line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 0;
	border-top: 2px dashed #cbd1d6;
	transform: translateY(-50%) scaleX(0);
	transition: transform .12s ease;
}

.mw_cb_insert_btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cb-accent);
	color: #fff;
	opacity: 0;
	transition: transform .12s ease, opacity .12s ease;
}

.mw_cb_insert_btn svg {
	width: 24px;
	height: 24px;
	fill: #fff;
}

.mw_cb_insert:hover .mw_cb_insert_line {
	transform: translateY(-50%) scaleX(1);
}

.mw_cb_insert:hover .mw_cb_insert_btn {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* empty-state add button: a full-width dashed block with the + and label centered; a plain
   grey hover (no blue), same on the front and in admin */
.mw_cb_add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 82px;
	padding: 16px;
	border: 1px dashed #cbd1d6;
	border-radius: 10px;
	background: #fff;
	color: #667085;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.mw_cb_add:hover {
	background: #f2f4f6;
	border-color: #9aa5ae;
	color: #4a5560;
}

.mw_cb_add svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* drop indicator: a small box marking where the dragged element will land */
.mw_cb_placeholder {
	border: 2px dashed var(--cb-accent);
	border-radius: 8px;
	background: #eef4f9;
	height: 40px;
	margin: 4px 0;
}

/* the thing that follows the cursor while dragging: a small chip with the type icon */
.mw_cb_drag_helper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--cb-accent);
	border-radius: 8px;
	box-shadow: 0 10px 24px -10px rgba(20, 40, 60, .45);
	color: var(--cb-accent);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 100000;
}

.mw_cb_drag_helper svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ---------- modal (self-contained, styled here so it works on the front too) ---------- */
.mw_cb_modal_overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 30, 24, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}

.mw_cb_modal {
	position: relative;
	background: #fff;
	border-radius: 12px;
	width: 520px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 60px);
	overflow: auto;
	box-shadow: 0 30px 60px -20px rgba(20, 40, 30, .5);
	/* fixed base font-size / line-height / colour so the modal's text isn't affected by the
	   front page's own (variable) font-size where the editor runs in place */
	font-size: 14px;
	line-height: 1.5;
	color: #33404a;
}

.mw_cb_modal_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 0;
}

/* a titled modal (settings) gets a separator line under the header + roomy paddings; the
   picker has an empty header (just the ×) so it keeps no border and its own tighter body */
.mw_cb_modal_titled .mw_cb_modal_head {
	padding: 18px;
	border-bottom: 1px solid var(--cb-border);
}

.mw_cb_modal_titled .mw_cb_modal_body {
	padding: 40px 40px 30px;
}

.mw_cb_modal_head h3 {
	margin: 0;
	font-size: 16px;
}

.mw_cb_modal_close {
	cursor: pointer;
	color: #889;
	font-size: 24px;
	line-height: 1;
}

.mw_cb_modal_body {
	padding: 0 40px 40px;
}

.mw_cb_modal_foot {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 10px 44px 28px;
}

/* Own button classes on purpose: the modal also runs on the front, where admin.css
   (.mw_button) is not loaded — and own names can't collide with the admin styles.
   The look mirrors .mw_button / .mw_button_style_secondary_gray from admin.css. */
.mw_cb_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 2.9em;
	padding: 0 1.5em;
	border: 1px solid #bac5d0;
	border-radius: 999px;
	background: transparent;
	color: #848f99;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: all .2s;
}

.mw_cb_btn:hover {
	background: #bac5d0;
	color: #fff;
}

.mw_cb_btn_primary {
	border-color: #27a8d7;
	background: #27a8d7;
	color: #fff;
}

.mw_cb_btn_primary:hover {
	background: #1294c4;
	border-color: #1294c4;
	color: #fff;
}

/* element picker */
.mw_cb_picker_title {
	margin: 0 0 26px;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
	color: #223;
}

.mw_cb_types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.mw_cb_type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 10px 12px;
	border: 1px solid var(--cb-border);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 400;
	color: #445;
}

.mw_cb_type:hover {
	border-color: var(--cb-accent);
	color: var(--cb-accent);
	background: #e9f4fb;
}

.mw_cb_type svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* rich text inside the content builder editor: base formatting lives in rich-text.css;
   these overrides beat the admin form's element resets (p margins, .set_form_row h4 size) */
.mw_cb .mw_richtext_edit > *:first-child {
	margin-top: 0;
}

.mw_cb .mw_richtext_edit > *:last-child {
	margin-bottom: 0;
}

.mw_cb .mw_richtext_edit p {
	margin: 0 0 1.2em;
}

.mw_cb .mw_richtext_edit h2 {
	margin: 2em 0 1em;
}

.mw_cb .mw_richtext_edit h3 {
	margin: 1.7em 0 .7em;
}

.mw_cb .mw_richtext_edit h4 {
	margin: 1.4em 0 .55em;
}

.mw_cb .mw_richtext_edit h2,
.mw_cb .mw_richtext_edit h3,
.mw_cb .mw_richtext_edit h4 {
	color: #1e2933;
}

.mw_cb .mw_cb_body .mw_richtext_edit h2 {
	font-size: 2em;
}

.mw_cb .mw_cb_body .mw_richtext_edit h3 {
	font-size: 1.5em;
}

.mw_cb .mw_cb_body .mw_richtext_edit h4 {
	font-size: 1.25em;
}

/* the indent comes from the custom list markers (see the list-markers section) */
.mw_cb .mw_richtext_edit ul,
.mw_cb .mw_richtext_edit ol {
	margin: 0 0 1.2em;
}

.mw_cb .mw_richtext_edit li {
	margin: .45em 0;
}

.mw_cb .mw_richtext_edit blockquote {
	margin: 0 0 1.2em;
}


/* ---------- media block previews (in the editor) ---------- */
.mw_cb_media {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #556;
}

.mw_cb_media svg {
	width: 22px;
	height: 22px;
	fill: var(--cb-accent);
	flex: 0 0 auto;
}

.mw_cb_media_label {
	font-weight: 600;
}

.mw_cb_media_detail {
	color: #8a938d;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Image spans the full content width, both in the editor and on the front. The UA
   <figure> margin is reset per side — a `margin: 0` shorthand would also win the
   margin-top cascade over the inter-block gap (.mw_cb_content > * + *, same
   specificity, earlier in the file) and glue the image to the block above it. */
.mw_cb_image {
	/* auto sides centre a resized (max-width) image; a full-width one is unaffected */
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.mw_cb_image:first-child {
	margin-top: 0;
}

.mw_cb_image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* editor-only resize handle: a blue bar on the image's right edge (mirrors the classic
   page editor's .mw_resize_element_handle); drag changes the figure's max-width */
.mw_cb_image {
	position: relative;
}

.mw_cb_image_handle {
	position: absolute;
	right: -9px;
	top: 50%;
	margin-top: -20px;
	width: 6px;
	height: 30px;
	padding: 5px;
	z-index: 8;
	display: none;
	cursor: ew-resize;
}

.mw_cb_image_handle span {
	display: block;
	width: 6px;
	height: 30px;
	border-radius: 6px;
	background: var(--cb-accent);
}

.mw_cb_block:hover .mw_cb_image_handle {
	display: block;
}

/* floating px readout following the cursor while resizing */
.mw_cb_resize_value {
	position: absolute;
	padding: 3px 8px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 100001;
}

/* ---------- infobox block (tinted box: icon + title + rich text) ----------
   The two backgrounds come from --cb-box-light / --cb-box-dark so a consumer
   (e.g. the course template) can map them to its own appearance colours;
   the fallbacks keep the block usable anywhere else (admin editor, generic pages). */
.mw_cb_infobox {
	padding: 24px 28px;
	border-radius: 8px;
}

.mw_cb_infobox_light {
	background: var(--cb-box-light, #f5f6f7);
}

.mw_cb_infobox_dark {
	background: var(--cb-box-dark, #23282b);
	color: #fff;
}

/* the title/head selectors carry extra specificity on purpose: the admin settings
   form styles headings inside rows (.mw_admin_setting_container .set_form_row h4 —
   40px margins, own size/colour) and would break the block in the admin editor */
.mw_cb_infobox .mw_cb_infobox_head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.mw_cb_infobox .mw_cb_infobox_head svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
	flex: 0 0 auto;
}

.mw_cb_infobox .mw_cb_infobox_head .mw_cb_infobox_title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 22px; /* matches the icon height so both sit on one axis */
	color: inherit;
}

/* editor-only wrapper of the text region; anchors the floating toolbar (data-rt-host)
   so it opens right above the text instead of the whole box */
.mw_cb_infobox_text {
	position: relative;
}

/* the body text is slightly translucent, so it contrasts less than the title */
.mw_cb_infobox .mw_richtext {
	opacity: .75;
}

/* the box padding owns the outer spacing; links stay readable on the dark variant */
.mw_cb_infobox .mw_richtext > :first-child {
	margin-top: 0;
}

.mw_cb_infobox .mw_richtext > :last-child {
	margin-bottom: 0;
}

.mw_cb_infobox_dark .mw_richtext a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- rich-text list markers (identical in the view and the editor) ----------
   Bullets are small rounded squares; numbered items get a rounded box with the number.
   An item holding a heading gets a marker scaled to that heading — the box height
   matches the heading's first-line height, so top: 0 keeps them on one axis.
   Colours come from --cb-list-marker / --cb-list-marker-bg with neutral fallbacks,
   so a consumer (e.g. the course template) can map them to its appearance colours. */
.mw_cb_content .mw_richtext ul,
.mw_cb_content .mw_richtext ol,
.mw_cb .mw_richtext_edit ul,
.mw_cb .mw_richtext_edit ol {
	list-style: none;
	padding-left: 0;
}

.mw_cb_content .mw_richtext li,
.mw_cb .mw_richtext_edit li {
	position: relative;
}

.mw_cb_content .mw_richtext ul > li,
.mw_cb .mw_richtext_edit ul > li {
	padding-left: 22px;
}

.mw_cb_content .mw_richtext ul > li::before,
.mw_cb .mw_richtext_edit ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(.8em - 5px); /* centred on the first line (line-height 1.6) */
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--cb-list-marker, #55606a);
}

.mw_cb_content .mw_richtext ol,
.mw_cb .mw_richtext_edit ol {
	counter-reset: mw-cb-li;
}

.mw_cb_content .mw_richtext ol > li,
.mw_cb .mw_richtext_edit ol > li {
	counter-increment: mw-cb-li;
	padding-left: 32px;
}

.mw_cb_content .mw_richtext ol > li::before,
.mw_cb .mw_richtext_edit ol > li::before {
	content: counter(mw-cb-li);
	position: absolute;
	left: 0;
	top: calc(.8em - 11px); /* centred on the first line (line-height 1.6) */
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--cb-list-marker-bg, #eef1f3);
	color: var(--cb-list-marker, #55606a);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.mw_cb_content .mw_richtext ol > li:has(> h2),
.mw_cb .mw_richtext_edit ol > li:has(> h2) {
	padding-left: 48px;
}

.mw_cb_content .mw_richtext ol > li:has(> h2)::before,
.mw_cb .mw_richtext_edit ol > li:has(> h2)::before {
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 36px;
}

.mw_cb_content .mw_richtext ol > li:has(> h3),
.mw_cb .mw_richtext_edit ol > li:has(> h3) {
	padding-left: 42px;
}

.mw_cb_content .mw_richtext ol > li:has(> h3)::before,
.mw_cb .mw_richtext_edit ol > li:has(> h3)::before {
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 30px;
}

.mw_cb_content .mw_richtext ol > li:has(> h4),
.mw_cb .mw_richtext_edit ol > li:has(> h4) {
	padding-left: 36px;
}

.mw_cb_content .mw_richtext ol > li:has(> h4)::before,
.mw_cb .mw_richtext_edit ol > li:has(> h4)::before {
	top: 0;
	width: 26px;
	height: 26px;
	font-size: 13px;
	line-height: 26px;
}

.mw_cb_content .mw_richtext ul > li:has(> h2)::before,
.mw_cb .mw_richtext_edit ul > li:has(> h2)::before {
	top: 11px;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

.mw_cb_content .mw_richtext ul > li:has(> h3)::before,
.mw_cb .mw_richtext_edit ul > li:has(> h3)::before {
	top: 8px;
	width: 12px;
	height: 12px;
}

.mw_cb_content .mw_richtext ul > li:has(> h4)::before,
.mw_cb .mw_richtext_edit ul > li:has(> h4)::before {
	top: 7px;
	width: 11px;
	height: 11px;
}

/* Video is rendered by the shared MioWeb player (Video::getCode → .mw_video_container).
   Its responsive frame lives in the front stylesheet (style.css), which the admin
   settings editor does not load — so replicate the essentials there, scoped to the admin
   (.mw_setting_body) only. The front (read view + in-place editor) keeps style.css as-is. */
.mw_setting_body .mw_cb .mw_video_container {
	max-width: 100%;
}

.mw_setting_body .mw_cb .mw_video_frame {
	position: relative;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	overflow: hidden;
	max-width: 100%;
}

.mw_setting_body .mw_cb .mw_video_frame .mejs-container:not(.mejs-container-fullscreen) {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.mw_setting_body .mw_cb .mw_video_frame iframe,
.mw_setting_body .mw_cb .mw_video_frame video,
.mw_setting_body .mw_cb .mw_video_frame .mw_video_poster {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}

.mw_cb_audio {
	display: block;
	width: 100%;
}

/* ---------- modal forms (video / audio / image / html) ---------- */
.mw_cb_form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mw_cb_form_label {
	font-weight: 600;
	font-size: 13px;
	color: #445;
}

/* fields match the MioWeb admin input look (admin.css --bgw-input-* values,
   hardcoded here because the modal must also work on the front) */
.mw_cb_form .mw_cb_form_input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 13px;
	border: 1px solid #e6ebf0;
	border-radius: 8px;
	font-size: 14px;
	background: #f7fbff;
}

.mw_cb_form input.mw_cb_form_input,
.mw_cb_form select.mw_cb_form_input {
	height: 42px;
	padding-top: 0;
	padding-bottom: 0;
}

.mw_cb_form .mw_cb_form_input:focus {
	outline: none;
	border-color: var(--cb-accent);
}

.mw_cb_form_code {
	font-family: monospace;
	line-height: 1.5;
	resize: vertical;
}

/* icon picker: rendered sprite-icon tiles (a hidden input carries the value) */
.mw_cb_form_icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mw_cb_form_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #e6ebf0;
	border-radius: 8px;
	color: #445;
	background: #f7fbff;
	cursor: pointer;
}

.mw_cb_form_icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.mw_cb_form_icon:hover {
	border-color: var(--cb-accent);
}

.mw_cb_form_icon.is-selected {
	border-color: var(--cb-accent);
	color: var(--cb-accent);
	background: #f2f9fc;
}

/* rich-text field in the modal: a bordered editable box; it hosts the shared
   floating toolbar (MwRichText), hence position: relative */
.mw_cb_form_richtext {
	position: relative;
}

.mw_cb_form_richtext .mw_richtext_edit {
	box-sizing: border-box;
	min-height: 120px;
	padding: 10px 13px;
	border: 1px solid #e6ebf0;
	border-radius: 8px;
	font-size: 14px;
	background: #f7fbff;
}

.mw_cb_form_richtext .mw_richtext_edit:focus {
	outline: none;
	border-color: var(--cb-accent);
}

/* image field uploader: reuses the MioWeb field_type_image markup, wired with our own
   wp.media (see content-builder.js). These core rules mirror library/admin/css/admin.css
   (not loaded on the front); admin CSS vars are substituted. Scoped so they don't leak. */
.mw_cb_form .mw_image_uploader_container {
	position: relative;
	background: #fff;
	border: 1px solid var(--cb-border);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
}

.mw_cb_form .mw_image_uploader_image_container {
	position: relative;
	min-height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mw_cb_form .mw_image_uploader_image_container img {
	display: block;
	max-width: 100%;
	max-height: 260px;
	margin: 0 auto;
}

.mw_cb_form .mw_image_uploader_empty .mw_image_uploader_image_container img {
	display: none;
}

.mw_cb_form .mw_image_uploader_empty .mw_image_uploader_image_container {
	min-height: 130px;
	color: #888;
}

.mw_cb_form .mw_image_uploader_overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mw_cb_form .mw_image_uploader_control {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	opacity: 0;
	transition: opacity .3s;
}

.mw_cb_form .mw_image_uploader_upload:hover .mw_image_uploader_control {
	opacity: 1;
}

.mw_cb_form .mw_image_uploader_control .mw_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: 2px;
	border-radius: 5px;
	color: #fff;
	background: #3a4652;
}

.mw_cb_form .mw_image_uploader_control a.mw_image_uploader_clear:hover {
	background: #e04b4b;
}

.mw_cb_form .mw_image_uploader_empty .mw_image_uploader_control {
	display: none;
}

.mw_cb_form .mw_image_uploader_info {
	display: none;
	color: #556;
}

.mw_cb_form .mw_image_uploader_empty .mw_image_uploader_info {
	display: inline-block;
}

.mw_cb_form .mw_image_uploader_info span {
	display: inline-block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: var(--cb-accent);
	border-radius: 50%;
}

/* Loading spinner shown while a media block's server render arrives (instead of the labelled placeholder) */
.mw_cb_loading {
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mw_cb_loading::after {
	content: '';
	width: 22px;
	height: 22px;
	border: 2px solid #cdd6df;
	border-top-color: #27a8d7;
	border-radius: 50%;
	animation: mw_cb_spin .7s linear infinite;
}
@keyframes mw_cb_spin { to { transform: rotate(360deg); } }

/* ---------- optional AI generation (renderField's `ai` option) ---------- */
.mw_cb_ai {
	margin-bottom: 8px;
}

.mw_cb_ai_modal_body .mw_cb_ai_label {
	margin: 16px 0 6px;
	font-weight: 600;
}

.mw_cb_ai_modal_body .mw_cb_ai_label:first-child {
	margin-top: 0;
}

/* fields match the MioWeb admin input look (same values as the block-settings form) */
.mw_cb_ai_modal_body textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 13px;
	border: 1px solid #e6ebf0;
	border-radius: 8px;
	background: #f7fbff;
	font: inherit;
	font-size: 14px;
	resize: vertical;
}

.mw_cb_ai_modal_body textarea:focus {
	outline: none;
	border-color: var(--cb-accent);
}

.mw_cb_ai_check {
	display: block;
	margin-top: 14px;
}

/* credit widget row at the top of the AI modal (shared AiCredit::infoWidget) */
.mw_cb_ai_credit {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

/* shown in place of the AI button when the module/credit is unavailable */
.mw_cb_ai_unavailable {
	font-size: 13px;
	color: #72797d;
}

.mw_cb_ai_unavailable a {
	color: #27a8d7;
}

.mw_cb_ai_actions {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	position: relative;
}