/**
 * Form fields — .bm-field-label, .bm-field-input.
 * Edit this file only to change field branding.
 */

.joc-blockora-morph-app .bm-field-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bm-color-on-surface-variant);
}

.joc-blockora-morph-app .bm-field-input {
	width: 100%;
	border-radius: var(--bm-radius) !important;
	border: 1px solid var(--bm-color-outline-variant) !important;
	background: var(--bm-color-surface-lowest) !important;
	padding: 0.65rem 1rem !important;
	font-family: var(--bm-font-sans) !important;
	font-size: 13px !important;
	color: var(--bm-color-on-surface) !important;
	transition: all var(--bm-duration) ease;
}

.joc-blockora-morph-app .bm-field-input:focus {
	outline: none !important;
	border-color: var(--bm-color-primary) !important;
	box-shadow: 0 0 0 1px var(--bm-color-primary) !important;
}

.joc-blockora-morph-app .bm-field-input.is-invalid {
	border-color: var(--bm-color-danger) !important;
	box-shadow: 0 0 0 1px var(--bm-color-danger) !important;
}

.joc-blockora-morph-app .bm-field-input.is-invalid:focus {
	border-color: var(--bm-color-danger) !important;
	box-shadow: 0 0 0 1px var(--bm-color-danger) !important;
}

.joc-blockora-morph-app .bm-wysiwyg-field {
	display: block;
	width: 100%;
}

.joc-blockora-morph-app .bm-wysiwyg-field .wp-editor-wrap {
	border: 1px solid var(--bm-color-outline-variant);
	border-radius: var(--bm-radius);
	overflow: visible;
	background: var(--bm-color-surface-lowest);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.joc-blockora-morph-app .bm-wysiwyg-field .wp-editor-tools {
	padding: 0.35rem 0.5rem 0;
}

.joc-blockora-morph-app .bm-wysiwyg-field .wp-editor-container {
	border: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.joc-blockora-morph-app .bm-wysiwyg-field .mce-tinymce,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-toolbar-grp,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-statusbar,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-edit-area,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-edit-area iframe {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.joc-blockora-morph-app .bm-wysiwyg-field .mce-tinymce,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-toolbar-grp,
.joc-blockora-morph-app .bm-wysiwyg-field .mce-statusbar {
	border-color: color-mix(in srgb, var(--bm-color-outline-variant) 70%, transparent) !important;
	box-shadow: none !important;
}

.joc-blockora-morph-app .bm-wysiwyg-field iframe {
	min-height: 160px !important;
}

.joc-blockora-morph-app .bm-wysiwyg-field textarea.wp-editor-area,
.joc-blockora-morph-app .bm-wysiwyg-field .bm-wysiwyg-field__textarea {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	min-height: 160px;
}

/*
 * BaseControl help under the label (above the control).
 * Toggle/checkbox keep default help placement.
 */
.joc-blockora-morph-app .components-base-control:not(.components-toggle-control):not(.components-checkbox-control) {
	display: flex;
	flex-direction: column;
}

.joc-blockora-morph-app .components-base-control:not(.components-toggle-control):not(.components-checkbox-control) > .components-base-control__field {
	display: contents;
}

.joc-blockora-morph-app .components-base-control:not(.components-toggle-control):not(.components-checkbox-control) .components-base-control__label,
.joc-blockora-morph-app .components-input-control__label {
	order: 0;
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--bm-color-on-surface-variant, #464555);
}

.joc-blockora-morph-app .components-base-control:not(.components-toggle-control):not(.components-checkbox-control) > .components-base-control__help {
	order: 1;
	margin-top: 4px;
	margin-bottom: 8px;
}

.joc-blockora-morph-app .components-base-control:not(.components-toggle-control):not(.components-checkbox-control) > .components-base-control__field > *:not(.components-base-control__label):not(label) {
	order: 2;
}
