/* Codehive Image Overlays & Effects — editor + frontend */

.cioe-embed-wrap {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.cioe-root {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	box-sizing: border-box;
}

/* Shrink-wrap the image so floats / text-wrap still work — WP handles display size */
.cioe-root--image {
	width: fit-content;
	max-width: 100%;
	line-height: 0;
}

.cioe-root--image.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.cioe-root--image.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

.cioe-root--image.aligncenter {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.cioe-root--image.alignwide,
.cioe-root--image.alignfull {
	display: block;
	width: 100%;
	max-width: 100%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

/* Move float to wrapper — prevent inner figure from fighting layout */
.cioe-root--image.alignleft .wp-block-image,
.cioe-root--image.alignleft figure,
.cioe-root--image.alignright .wp-block-image,
.cioe-root--image.alignright figure,
.cioe-root--image.aligncenter .wp-block-image,
.cioe-root--image.aligncenter figure {
	float: none !important;
	margin: 0 !important;
	max-width: 100%;
}

.cioe-root--image .cioe-media {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}

.cioe-root--image .cioe-media > .wp-block-image,
.cioe-root--image .cioe-media > figure {
	margin: 0;
	display: block;
}

.cioe-root--image img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto;
	transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.cioe-zone {
	position: absolute;
	z-index: 3;
	display: block;
	box-sizing: border-box;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	overflow: visible;
	/* Parent .cioe-media uses line-height:0 — zone content must not inherit that. */
	line-height: normal;
}

.cioe-sound-enable,
.cioe-link-enable {
	position: absolute;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	z-index: 30;
	display: block;
	width: 70%;
	height: auto;
	max-width: none;
	max-height: none;
	box-sizing: border-box;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	box-shadow: none;
	border-radius: 0;
	transform: translate(-50%, -50%);
	float: none;
	letter-spacing: normal;
	text-indent: 0;
	text-align: center;
	pointer-events: auto;
}

.cioe-sound-enable img,
.cioe-link-enable img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	border-radius: 999px;
	object-fit: contain;
	transform: none;
}

.cioe-zone-preview__enable-icon {
	pointer-events: none;
}

.cioe-core-fx-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.cioe-core-fx-wrap.is-fx-enabled {
	overflow: visible;
	isolation: isolate;
	z-index: 1;
}

.cioe-core-fx-wrap.is-fx-enabled figure {
	position: relative;
	overflow: visible;
}

.cioe-core-fx-wrap.is-fx-enabled figure img {
	position: relative;
}

.cioe-core-fx-wrap.cioe-pack-preview-active {
	isolation: isolate;
}

.cioe-core-fx-wrap.is-fx-enabled .cioe-pack-layer,
.cioe-zone-pack-fx-host .cioe-pack-layer {
	z-index: 20;
}

.cioe-core-fx-wrap .cioe-core-fx__enable-icon {
	pointer-events: none;
	z-index: 25;
}

.cioe-lightbox-root {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cioe-lightbox-root.is-open {
	opacity: 1;
}

.cioe-lightbox {
	position: relative;
	max-width: min(960px, 100%);
	max-height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	background: #111;
}

.cioe-lightbox__media {
	display: block;
	max-width: min(960px, 92vw);
	max-height: calc(100vh - 3rem);
	width: auto;
	height: auto;
	border-radius: 8px;
}

.cioe-lightbox__frame {
	display: block;
	width: min(960px, 92vw);
	height: min(80vh, 720px);
	border: 0;
	border-radius: 8px;
	background: #fff;
}

.cioe-lightbox__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 2;
}

.cioe-zone--whole {
	inset: 0;
	width: 100%;
	height: 100%;
}

.cioe-zone--rect,
.cioe-zone--circle {
	box-sizing: border-box;
}

/* Defocus: blur base image; sharp clone clipped to the active zone */
.cioe-defocus-active .cioe-media > .wp-block-image img,
.cioe-defocus-active .cioe-media > figure img,
.cioe-defocus-active .cioe-media > img {
	filter: blur(6px) brightness(0.85);
}

.cioe-defocus-sharp {
	position: absolute;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.cioe-defocus-sharp--circle {
	border-radius: 50%;
}

.cioe-defocus-active .cioe-zone--focused {
	z-index: 5;
	background: transparent;
}

.cioe-caption-slot {
	display: none;
	width: 100%;
	padding: 0.6rem 0.85rem;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 0.95rem;
	line-height: 1.4;
	box-sizing: border-box;
}

.cioe-caption-slot.is-visible {
	display: block;
}

.cioe-caption-slot[hidden] {
	display: none !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	min-height: 0 !important;
}

.cioe-caption-slot--over {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}

.cioe-caption-slot--under {
	position: relative;
}

.cioe-overlay-text {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	font-size: 0.95rem;
	box-sizing: border-box;
	line-height: 1.35;
	white-space: pre-wrap;
	overflow: hidden;
}

.cioe-overlay-text--anchored {
	right: auto;
	bottom: auto;
	z-index: 25;
	border-radius: 6px;
}

.cioe-overlay-text.is-visible {
	opacity: 1;
}

.cioe-calendar {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	box-sizing: border-box;
	border-radius: inherit;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.cioe-calendar.is-visible {
	opacity: 1;
}

.cioe-calendar--preview {
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	opacity: 1;
	z-index: 35;
}

.cioe-calendar--picker {
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.35rem;
	padding: 0.5rem;
	pointer-events: auto;
	overflow: auto;
	font-size: 12px;
	opacity: 1;
	z-index: 100050;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.cioe-calendar--anchored {
	position: fixed;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	max-width: none;
	max-height: none;
}

.cioe-calendar--picker.cioe-calendar--preview {
	position: absolute;
	z-index: 36;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.cioe-cal-head {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-weight: 600;
	line-height: 1.2;
}

.cioe-cal-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
}

.cioe-cal-nav {
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: inherit;
	width: 1.6em;
	height: 1.6em;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	pointer-events: auto;
}

.cioe-cal-title {
	flex: 1 1 auto;
	text-align: center;
}

.cioe-cal-year {
	font-variant-numeric: tabular-nums;
}

.cioe-cal-weekdays,
.cioe-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.cioe-cal-weekdays span {
	opacity: 0.75;
	font-size: 0.85em;
}

.cioe-cal-day {
	border: 0;
	background: transparent;
	color: inherit;
	min-height: 1.5em;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
	font: inherit;
	pointer-events: auto;
}

.cioe-cal-day.is-empty {
	pointer-events: none;
	visibility: hidden;
}

.cioe-cal-day.is-today {
	outline: 1px solid rgba(255, 255, 255, 0.55);
}

.cioe-cal-day.is-selected,
button.cioe-cal-day.is-selected {
	background: rgba(255, 255, 255, 0.28);
	font-weight: 700;
}

.cioe-cal-selected {
	margin-top: 0.15rem;
	text-align: center;
	font-weight: 600;
	min-height: 1.2em;
}

.cioe-caption {
	position: absolute;
	z-index: 6;
	box-sizing: border-box;
	padding: 0.45rem 0.65rem;
	line-height: 1.35;
	pointer-events: none;
	text-align: center;
}

.cioe-caption--over_zone {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cioe-caption--under_zone {
	transform: translateY(0);
}

.cioe-caption--preview {
	z-index: 37;
}

.cioe-zone--highlight {
	/* Fill/outline set inline; keep transparent default paint. */
}

.cioe-zone--highlight.cioe-zone--rect {
	border-radius: 8px;
}

.cioe-soft-defocus-active .cioe-media > .wp-block-image img,
.cioe-soft-defocus-active .cioe-media > figure img,
.cioe-soft-defocus-active .cioe-media > img {
	filter: blur(3px) brightness(0.92);
	transition: filter 0.25s ease;
}

.cioe-media.cioe-media--reveal {
	overflow: visible !important;
}

.cioe-zone-window {
	position: absolute;
	z-index: 15;
	overflow: hidden;
	pointer-events: none;
	box-sizing: border-box;
	transform-origin: center center;
	transition: transform 0.2s ease;
}

.cioe-zone-window--circle {
	border-radius: 50%;
}

.cioe-zone-window__img {
	position: absolute;
	max-width: none;
	object-fit: fill;
	pointer-events: none;
	display: block;
}

.cioe-zone-window--zoom {
	will-change: transform;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	/* Scale pops the loupe outside the zone; keep shape clip, allow overflow of the scaled box. */
	overflow: hidden;
	z-index: 40;
}

.cioe-root--overlay .cioe-media.cioe-media--reveal,
.cioe-overlay-block .cioe-media.cioe-media--reveal,
.cioe-media.cioe-media--reveal {
	overflow: visible !important;
}

.cioe-media.cioe-media--reveal .cioe-figure,
.cioe-root--overlay.cioe-media--reveal,
.cioe-root--overlay:has(.cioe-media--reveal) {
	overflow: visible;
}

.cioe-zone-window--pulse {
	animation: cioe-pulse-window var(--cioe-pulse-speed, 1.2s) ease-in-out infinite;
	will-change: transform;
}

@keyframes cioe-pulse-window {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(var(--cioe-pulse-scale, 1.08)); }
}

@media (prefers-reduced-motion: reduce) {
	.cioe-zone-window--pulse {
		animation: none;
		transform: scale(var(--cioe-pulse-scale, 1.08));
	}
}

.cioe-show-hide-image {
	position: absolute;
	z-index: 24;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	overflow: hidden;
	box-sizing: border-box;
}

.cioe-show-hide-image.is-visible {
	opacity: 1;
}

.cioe-show-hide-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.cioe-force-hide {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.cioe-force-show {
	visibility: visible !important;
	opacity: 1 !important;
}

.cioe-zone--zoom {
	transition: transform 0.2s ease;
	overflow: visible;
	will-change: transform;
}

.cioe-zone--swap {
	overflow: hidden;
}

.cioe-swap-zone-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	border-radius: inherit;
	z-index: 2;
}

/* Full-image regional swap: alternate image aligned to the base media, clipped by the zone. */
.cioe-swap-zone-img--aligned {
	object-fit: fill;
	border-radius: 0;
}

.cioe-zone--pulse {
	animation: cioe-pulse var(--cioe-pulse-speed, 1.2s) ease-in-out infinite;
	will-change: transform;
}

@keyframes cioe-pulse {
	0%, 100% { transform: var(--cioe-zone-tf, none) scale(1); }
	50% { transform: var(--cioe-zone-tf, none) scale(var(--cioe-pulse-scale, 1.08)); }
}

@media (prefers-reduced-motion: reduce) {
	.cioe-zone--pulse {
		animation: none;
		transform: var(--cioe-zone-tf, none) scale(var(--cioe-pulse-scale, 1.08));
	}
}

.cioe-zone--video {
	overflow: hidden;
}

.cioe-zone-video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	border-radius: inherit;
	z-index: 2;
	background: #000;
}

.cioe-overlay-text--preview {
	/* Editor preview sets left/top/width/height — must not keep edge pinning. */
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	opacity: 1;
	z-index: 34;
	line-height: 1.35;
	white-space: pre-wrap;
}

.cioe-root > script.cioe-config {
	display: none !important;
}

.cioe-popup-dim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.cioe-popup {
	position: relative;
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	color: #1e1e1e;
	border-radius: 8px;
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Page-level placement — % of viewport, or Absolute (image-anchored) via JS */
.cioe-popup--hover,
.cioe-popup--anchored {
	position: fixed;
	z-index: 100001;
	max-width: none;
	max-height: none;
	overflow: auto;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.cioe-popup--sticky.cioe-popup--anchored {
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.cioe-popup__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	padding: 2.35rem 1rem 1rem;
	width: 100%;
}

.cioe-popup--hover {
	pointer-events: none;
}

.cioe-popup-preview {
	position: fixed;
	z-index: 100010;
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: none;
}

.cioe-popup--editor-preview {
	z-index: 100010 !important;
	pointer-events: none !important;
}

.cioe-popup--preview-inner {
	min-height: 100%;
	overflow: visible;
	box-shadow: none !important;
	max-width: none;
	max-height: none;
	padding: 0.6rem 0.75rem;
}

.cioe-popup__heading {
	font-weight: 600;
	line-height: 1.25;
}

.cioe-popup__text-stack {
	min-width: 0;
	flex: 1 1 auto;
}

.cioe-popup__image--fill {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.cioe-popup__image-wrap--fill {
	width: 100%;
	line-height: 0;
}

.cioe-popup__image-link {
	display: block;
}

.cioe-popup__layout--row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.cioe-popup__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
	box-sizing: border-box;
	width: 100%;
}

.cioe-popup__buttons--left { justify-content: flex-start; }
.cioe-popup__buttons--center { justify-content: center; }
.cioe-popup__buttons--right { justify-content: flex-end; }

.cioe-popup__btn {
	display: inline-block;
	text-decoration: none;
	border: none;
	line-height: 1.2;
	color: #fff !important;
}

.cioe-popup__btn--square { border-radius: 0 !important; }
.cioe-popup__btn--rounded { border-radius: 4px !important; }
.cioe-popup__btn--pill { border-radius: 999px !important; }

.cioe-popup--anim-fade {
	opacity: 0;
	transition: opacity 0.22s ease;
}
.cioe-popup--anim-fade.is-open {
	opacity: 1;
}

.cioe-popup--anim-pop {
	opacity: 0;
	transform: scale(0.86);
	transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.cioe-popup--anim-pop.is-open {
	opacity: 1;
	transform: scale(1);
}

.cioe-popup__title {
	margin: 0 1.5rem 0.75rem 0;
	font-size: 1.25rem;
}

.cioe-popup__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 0.75rem;
	border-radius: 4px;
}

.cioe-popup__content {
	margin: 0 0 0.75rem;
	line-height: 1.5;
}

.cioe-popup__content:last-child {
	margin-bottom: 0;
}

.cioe-popup__content--html {
	white-space: normal;
}

.cioe-popup__content--html h1,
.cioe-popup__content--html h2,
.cioe-popup__content--html h3 {
	margin: 0 0 0.5em;
	line-height: 1.25;
}

.cioe-popup__content--html p {
	margin: 0 0 0.75em;
}

.cioe-popup__content--html p:last-child {
	margin-bottom: 0;
}

.cioe-popup__text-stack {
	flex: 1 1 auto;
	min-width: 0;
}

.cioe-popup__text-stack .cioe-popup__content {
	margin-bottom: 0.75rem;
}

.cioe-popup__text-stack .cioe-popup__content:last-child {
	margin-bottom: 0;
}

.cioe-popup__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 6;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	color: #1e1e1e;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cioe-tooltip {
	position: fixed;
	z-index: 100001;
	max-width: 240px;
	padding: 0.4rem 0.65rem;
	background: #1e1e1e;
	color: #fff;
	font-size: 0.85rem;
	border-radius: 4px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	line-height: 1.35;
	white-space: pre-wrap;
}

.cioe-tooltip--preview {
	position: absolute;
	z-index: 45;
}

/* Effects */
.cioe-root.cioe-fx-may-overflow,
.cioe-root.cioe-fx-glow,
.cioe-root.cioe-fx-border,
.cioe-root.cioe-fx-enlarge,
.cioe-root.cioe-fx-tilt {
	overflow: visible !important;
	position: relative;
	z-index: 2;
}

/*
 * Lift & wiggle: layout box never moves (no padding/margin).
 * On hover, img transforms only; overflow chain opens so lift is not cropped.
 */
.cioe-root.cioe-fx-lift,
.cioe-root.cioe-fx-wiggle,
.cioe-root.cioe-fx-escape {
	overflow: visible !important;
	position: relative;
	z-index: 20;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.cioe-root.cioe-fx-lift .cioe-media,
.cioe-root.cioe-fx-wiggle .cioe-media,
.cioe-root.cioe-fx-escape .cioe-media,
.cioe-root.cioe-fx-lift .cioe-media > figure,
.cioe-root.cioe-fx-lift .cioe-media > .wp-block-image,
.cioe-root.cioe-fx-wiggle .cioe-media > figure,
.cioe-root.cioe-fx-wiggle .cioe-media > .wp-block-image,
.cioe-root.cioe-fx-escape .cioe-media > figure,
.cioe-root.cioe-fx-escape .cioe-media > .wp-block-image {
	overflow: visible !important;
	transform: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.cioe-root.cioe-fx-may-overflow .cioe-media,
.cioe-root.cioe-fx-glow .cioe-media,
.cioe-root.cioe-fx-border .cioe-media,
.cioe-root.cioe-fx-enlarge .cioe-media,
.cioe-root.cioe-fx-may-overflow .wp-block-image,
.cioe-root.cioe-fx-may-overflow figure,
.cioe-root.cioe-fx-enlarge .wp-block-image,
.cioe-root.cioe-fx-enlarge figure {
	overflow: visible !important;
}

/* Lift: move the image only — frame stays put */
.cioe-root.cioe-fx-lift .cioe-media img,
.cioe-root.cioe-fx-lift img,
.cioe-root.cioe-fx-lift .wp-block-button__link {
	transform: translateY(calc(var(--cioe-lift, 12px) * -1));
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	position: relative;
	z-index: 2;
}

/* Wiggle: image only, origin dead-centre, no idle offset */
.cioe-fx-wiggle .cioe-media img,
.cioe-root.cioe-fx-wiggle img,
.cioe-fx-wiggle .wp-block-button__link {
	animation: cioe-wiggle var(--cioe-wiggle-duration, 0.45s) ease-in-out infinite;
	transform-origin: 50% 50%;
	transform-box: fill-box;
	will-change: transform;
}

@keyframes cioe-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(calc(var(--cioe-wiggle, 1) * -2.5deg)); }
	75% { transform: rotate(calc(var(--cioe-wiggle, 1) * 2.5deg)); }
}

.cioe-root--button {
	position: relative;
	display: inline-block;
	vertical-align: top;
	line-height: normal;
}

.cioe-has-click-effect {
	cursor: pointer;
}

/* Zoom in: scale inside the original frame (clipped). Must beat may-overflow. */
.cioe-root.cioe-fx-zoom .cioe-media,
.cioe-root.cioe-fx-zoom .wp-block-image,
.cioe-root.cioe-fx-zoom figure,
.cioe-root.cioe-fx-zoom.cioe-fx-may-overflow .cioe-media,
.cioe-root.cioe-fx-zoom.cioe-fx-may-overflow .wp-block-image,
.cioe-root.cioe-fx-zoom.cioe-fx-may-overflow figure {
	overflow: hidden !important;
}
.cioe-fx-zoom .cioe-media img,
.cioe-fx-zoom .wp-block-button__link {
	transform: scale(var(--cioe-zoom, 1.5));
	transform-origin: center center;
	transition: transform 0.3s ease;
}

/* Enlarge: grow outside the original frame. */
.cioe-fx-enlarge .cioe-media {
	overflow: visible !important;
}
.cioe-fx-enlarge .cioe-media img,
.cioe-fx-enlarge .wp-block-button__link {
	transform: scale(var(--cioe-zoom, 1.5));
	transform-origin: center center;
	transition: transform 0.3s ease;
}

.cioe-fx-glow .cioe-media,
.cioe-fx-glow .wp-block-button__link {
	animation: cioe-glow var(--cioe-glow-speed, 1.2s) ease-in-out infinite;
}

@keyframes cioe-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 var(--cioe-glow-color, #2271b1);
		filter: drop-shadow(0 0 0 transparent);
		opacity: 1;
	}
	50% {
		box-shadow:
			0 0 calc(12px + (var(--cioe-glow-intensity, 0.55) * 24px))
			calc(2px + (var(--cioe-glow-intensity, 0.55) * 10px))
			var(--cioe-glow-color, #2271b1);
		filter: drop-shadow(0 0 calc(4px + (var(--cioe-glow-intensity, 0.55) * 14px)) var(--cioe-glow-color, #2271b1));
	}
}

.cioe-fx-brighten .cioe-media img,
.cioe-fx-brighten .wp-block-button__link {
	filter: brightness(var(--cioe-bright, 1.3));
}

.cioe-fx-darken .cioe-media img,
.cioe-fx-darken .wp-block-button__link {
	filter: brightness(var(--cioe-dark, 0.65));
}

.cioe-fx-fade .cioe-media,
.cioe-fx-fade .wp-block-button__link {
	opacity: var(--cioe-fade, 0.6);
	transition: opacity 0.25s ease;
}

.cioe-fx-grayscale-to-color img { filter: none !important; }
.cioe-root.cioe-has-grayscale-idle img {
	filter: grayscale(1);
}
.cioe-root.cioe-has-grayscale-idle.cioe-fx-grayscale-to-color img {
	filter: grayscale(0);
}
.cioe-fx-grayscale-reverse img,
.cioe-fx-grayscale-reverse .wp-block-button__link {
	filter: grayscale(1);
}

/* Border outline on the original frame (.cioe-media), never the transformed/clipped img */
.cioe-root.cioe-fx-border .cioe-media {
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	outline: var(--cioe-border-width, 3px) var(--cioe-border-style, solid) var(--cioe-border-color, #2271b1);
	outline-offset: 0;
	border-radius: var(--cioe-border-radius, 0px);
	transition: outline-color 0.2s ease, outline-width 0.2s ease, border-radius 0.2s ease;
}
.cioe-root.cioe-fx-border .cioe-media img {
	outline: none !important;
}
.cioe-root.cioe-fx-border .wp-block-button__link,
.cioe-fx-border.wp-block-button__link {
	outline: var(--cioe-border-width, 3px) var(--cioe-border-style, solid) var(--cioe-border-color, #2271b1);
	outline-offset: 0;
	border-radius: var(--cioe-border-radius, 0px);
	transition: outline-color 0.2s ease, outline-width 0.2s ease, border-radius 0.2s ease;
}

/* Zoom mask + border: keep zoom clipped inside the frame; outline stays on the frame */
.cioe-root.cioe-fx-zoom-mask.cioe-fx-border {
	overflow: visible !important;
}
.cioe-root.cioe-fx-zoom-mask.cioe-fx-border .cioe-media {
	overflow: hidden !important;
	outline: var(--cioe-border-width, 3px) var(--cioe-border-style, solid) var(--cioe-border-color, #2271b1);
	outline-offset: 0;
}

.cioe-fx-tilt .cioe-media,
.cioe-fx-tilt {
	transform: perspective(600px) rotateX(var(--cioe-tilt-x, 0deg)) rotateY(var(--cioe-tilt-y, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.12s ease-out;
}

.cioe-fx-ken-burns .cioe-media {
	overflow: hidden;
}
.cioe-fx-ken-burns .cioe-media img {
	animation-duration: var(--cioe-kb-speed, 6s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	transition: none !important;
	will-change: transform;
	transform-origin: center center;
}
.cioe-fx-ken-burns-in .cioe-media img {
	animation-name: cioe-kenburns-in;
}
.cioe-fx-ken-burns-out .cioe-media img {
	animation-name: cioe-kenburns-out;
}
.cioe-fx-ken-burns-pan-left .cioe-media img {
	animation-name: cioe-kenburns-pan-left;
}
.cioe-fx-ken-burns-pan-right .cioe-media img {
	animation-name: cioe-kenburns-pan-right;
}

@keyframes cioe-kenburns-in {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(var(--cioe-kb-amount, 1.2)) translate(-2%, -1%); }
}
@keyframes cioe-kenburns-out {
	from { transform: scale(var(--cioe-kb-amount, 1.2)) translate(-2%, -1%); }
	to { transform: scale(1) translate(0, 0); }
}
@keyframes cioe-kenburns-pan-left {
	from { transform: scale(var(--cioe-kb-amount, 1.2)) translate(3%, 0); }
	to { transform: scale(var(--cioe-kb-amount, 1.2)) translate(-3%, 0); }
}
@keyframes cioe-kenburns-pan-right {
	from { transform: scale(var(--cioe-kb-amount, 1.2)) translate(-3%, 0); }
	to { transform: scale(var(--cioe-kb-amount, 1.2)) translate(3%, 0); }
}

/* Zoom mask: scale inside the original frame (clipped) + expanding shape. Must beat may-overflow. */
.cioe-root.cioe-fx-zoom-mask .cioe-media,
.cioe-root.cioe-fx-zoom-mask .wp-block-image,
.cioe-root.cioe-fx-zoom-mask figure,
.cioe-root.cioe-fx-zoom-mask.cioe-fx-may-overflow .cioe-media,
.cioe-root.cioe-fx-zoom-mask.cioe-fx-may-overflow .wp-block-image,
.cioe-root.cioe-fx-zoom-mask.cioe-fx-may-overflow figure {
	overflow: hidden !important;
}
.cioe-fx-zoom-mask .cioe-media img,
.cioe-fx-zoom-mask img,
.cioe-fx-zoom-mask .wp-block-button__link {
	transform: scale(var(--cioe-zoom-mask, 1.5));
	transform-origin: center center;
	transition:
		transform var(--cioe-zoom-mask-speed, 0.7s) ease,
		clip-path var(--cioe-zoom-mask-speed, 0.7s) ease;
	will-change: transform, clip-path;
}
.cioe-fx-zoom-mask-circle .cioe-media img,
.cioe-fx-zoom-mask-circle img,
.cioe-fx-zoom-mask-circle .wp-block-button__link {
	clip-path: circle(var(--cioe-mask-size, 18%) at 50% 50%);
}
.cioe-fx-zoom-mask-square .cioe-media img,
.cioe-fx-zoom-mask-square img,
.cioe-fx-zoom-mask-square .wp-block-button__link {
	clip-path: inset(calc((100% - var(--cioe-mask-size, 18%)) / 2));
}
.cioe-fx-zoom-mask-rounded .cioe-media img,
.cioe-fx-zoom-mask-rounded img,
.cioe-fx-zoom-mask-rounded .wp-block-button__link {
	clip-path: inset(
		calc((100% - var(--cioe-mask-size, 18%)) / 2)
		round 18%
	);
}

.cioe-fx-alt-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.cioe-fx-slide-reveal .cioe-media {
	overflow: hidden;
}

.cioe-fx-slide-reveal .cioe-fx-alt-layer {
	opacity: 1;
	transform: translateX(-100%);
}
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="left"] { transform: translateX(-100%); }
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="right"] { transform: translateX(100%); }
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="up"] { transform: translateY(-100%); }
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="down"] { transform: translateY(100%); }
.cioe-fx-slide-reveal .cioe-fx-alt-layer.is-active,
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="left"].is-active,
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="right"].is-active,
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="up"].is-active,
.cioe-fx-slide-reveal .cioe-fx-alt-layer[data-direction="down"].is-active {
	transform: translate(0, 0);
	opacity: 1;
}

.cioe-fx-flip .cioe-media {
	transition: transform var(--cioe-flip-speed, 0.45s) ease;
	transform-style: preserve-3d;
	perspective: 800px;
}
.cioe-fx-flip-active.cioe-fx-flip-y .cioe-media {
	transform: rotateY(180deg);
}
.cioe-fx-flip-active.cioe-fx-flip-x .cioe-media {
	transform: rotateX(180deg);
}

.cioe-root.cioe-fx-tint .cioe-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--cioe-tint, #2271b1);
	opacity: var(--cioe-tint-opacity, 0.35);
}

/* Show-image overlay layer (separate from effect marker class) */
.cioe-fx-show-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	z-index: 6;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	overflow: visible;
}
.cioe-fx-show-layer.is-visible {
	opacity: 1;
}
.cioe-fx-show-layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	pointer-events: none;
}

/* Slide reveal: new image under original */
.cioe-fx-under-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cioe-slide-speed, 0.4s) ease;
}
.cioe-fx-under-image.is-visible {
	opacity: 1;
}

/* Slide reveal: original media children slide away */
.cioe-fx-slide-away {
	position: relative;
	z-index: 2;
	transition: transform var(--cioe-slide-speed, 0.4s) ease;
	will-change: transform;
}
.cioe-fx-slide-away-left {
	transform: translateX(-110%);
}
.cioe-fx-slide-away-right {
	transform: translateX(110%);
}
.cioe-fx-slide-away-up {
	transform: translateY(-110%);
}
.cioe-fx-slide-away-down {
	transform: translateY(110%);
}

/* Full 360° flip spin (once), then settle */
.cioe-fx-flip-full.cioe-fx-flip-spinning.cioe-fx-flip-y .cioe-media {
	animation: cioe-flip-spin-y var(--cioe-flip-speed, 0.45s) ease forwards;
}
.cioe-fx-flip-full.cioe-fx-flip-spinning.cioe-fx-flip-x .cioe-media {
	animation: cioe-flip-spin-x var(--cioe-flip-speed, 0.45s) ease forwards;
}
@keyframes cioe-flip-spin-y {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(360deg); }
}
@keyframes cioe-flip-spin-x {
	from { transform: rotateX(0deg); }
	to { transform: rotateX(360deg); }
}

/* Label badge — scoped to media only (not the effect root class) */
.cioe-fx-label-badge {
	position: absolute;
	left: 50%;
	z-index: 6;
	max-width: calc(100% - 24px);
	box-sizing: border-box;
	padding: 0.35rem 0.7rem;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	border-radius: 4px;
	font-size: 0.85rem;
	line-height: 1.3;
	opacity: 0;
	transform: translateX(-50%) translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cioe-fx-label-badge--bottom {
	bottom: 10px;
	top: auto;
}
.cioe-fx-label-badge--top {
	top: 10px;
	bottom: auto;
	transform: translateX(-50%) translateY(-6px);
}
.cioe-fx-label-badge--center {
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%) translateY(6px);
}
.cioe-fx-label-badge.is-visible {
	opacity: 1;
}
.cioe-fx-label-badge--bottom.is-visible {
	transform: translateX(-50%) translateY(0);
}
.cioe-fx-label-badge--top.is-visible {
	transform: translateX(-50%) translateY(0);
}
.cioe-fx-label-badge--center.is-visible {
	transform: translate(-50%, -50%);
}

/* Full-image ripple */
.cioe-ripple {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120%;
	height: 120%;
	margin: 0;
	transform: translate(-50%, -50%) scale(0.15);
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
	background: radial-gradient(
		circle,
		var(--cioe-ripple-color, #ffffff) 0%,
		transparent 70%
	);
	animation: cioe-ripple-full var(--cioe-ripple-speed, 0.85s) ease-out forwards;
	opacity: calc(0.35 + (var(--cioe-ripple-amount, 1) * 0.25));
}

@keyframes cioe-ripple-full {
	to {
		transform: translate(-50%, -50%) scale(calc(1.05 * var(--cioe-ripple-amount, 1)));
		opacity: 0;
	}
}

.cioe-effect-image-preview {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 8px;
	border-radius: 4px;
	border: 1px solid #c3c4c7;
}
.cioe-effect-image-preview-empty {
	margin: 0 0 8px;
	padding: 10px;
	background: #f0f0f1;
	border-radius: 4px;
	color: #646970;
	font-size: 12px;
}
.cioe-effect-label-preview {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
	max-width: 100%;
	line-height: 1.3;
}

/* Dedicated overlays block */
.cioe-overlay-block {
	line-height: 0;
}

/* Suppress outer blue frame around the whole block / resizable box (zones have their own borders). */
.cioe-overlay-block.block-editor-block-list__block::after,
.cioe-overlay-block.is-selected::after,
.cioe-overlay-block.is-highlighted::after,
.editor-styles-wrapper .cioe-overlay-block.is-selected::after,
.editor-styles-wrapper .cioe-overlay-block.is-highlighted::after,
.block-editor-block-list__block.cioe-overlay-block:focus:after,
.block-editor-block-list__block.cioe-overlay-block.is-selected:after {
	outline: none !important;
	box-shadow: none !important;
	display: none !important;
	content: none !important;
	border: none !important;
}

.cioe-overlay-block .components-resizable-box__container,
.cioe-overlay-block.is-selected .components-resizable-box__container,
.cioe-overlay-block .components-resizable-box__container.is-selected {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.cioe-zone-canvas--owned {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.cioe-color-field {
	margin-bottom: 10px;
}

.cioe-color-field__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cioe-color-field__swatch {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #1e1e1e;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	position: relative;
	overflow: hidden;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #c3c4c7 25%, transparent 25%),
		linear-gradient(-45deg, #c3c4c7 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #c3c4c7 75%),
		linear-gradient(-45deg, transparent 75%, #c3c4c7 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.cioe-color-field__swatch-fill {
	display: block;
	position: absolute;
	inset: 0;
}

.cioe-color-field__hex {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 9em;
	margin: 0 !important;
	height: 28px;
	padding: 0 8px !important;
}

.cioe-color-field__pipette {
	flex: 0 0 28px;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1e1e1e;
	cursor: pointer;
}

.cioe-color-field__pipette:hover {
	border-color: #1e1e1e;
	background: #f6f7f7;
}

.cioe-color-field__eyedropper {
	display: block;
	margin-top: 8px;
	width: 100%;
	justify-content: center;
}

.cioe-color-field__popover {
	padding: 8px;
}

.cioe-color-field__popover .components-color-picker {
	width: 220px;
}

.cioe-color-field__popover .components-input-control__label,
.cioe-color-field__popover .components-base-control__label {
	margin-bottom: 2px;
}

.cioe-color-field__popover .components-input-control__container {
	margin-top: 0;
}

/* Tighten ColorPicker hex row spacing inside popovers */
.cioe-color-field__popover .react-colorful + * ,
.cioe-color-field__popover .components-color-picker__inputs-wrapper {
	margin-top: 8px;
}

.cioe-color-field__popover .components-color-picker__inputs-field {
	gap: 4px;
}

.cioe-color-field__popover .components-input-control {
	margin-bottom: 0;
}

.cioe-overlay-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 24px;
	background: #f0f0f1;
	border: 1px dashed #c3c4c7;
	line-height: 1.4;
}

.cioe-figure {
	position: relative;
	margin: 0;
	display: block;
	max-width: 100%;
	line-height: 0;
	background: transparent;
	overflow: hidden;
}

.cioe-root--overlay.cioe-zoom-open,
.cioe-root--overlay.cioe-zoom-open .cioe-media,
.cioe-root--overlay.cioe-zoom-open .cioe-figure {
	overflow: visible !important;
}

.cioe-figure img,
.cioe-image-overlays {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	vertical-align: top;
	border: 0;
	outline: 0;
	background: transparent;
}

.cioe-root--overlay .cioe-media,
.cioe-overlay-block .cioe-media {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	background: transparent;
}

.cioe-root--overlay {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	line-height: 0;
	background: transparent;
}

.cioe-root--overlay.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.cioe-root--overlay.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

.cioe-root--overlay.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.cioe-root--overlay.alignwide,
.cioe-root--overlay.alignfull {
	display: block;
	width: 100%;
}

.cioe-zone-canvas--owned {
	position: absolute !important;
	inset: 0;
	z-index: 5;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: crosshair;
}

.cioe-zone-canvas__hit {
	position: absolute;
	inset: 0;
}

.cioe-zone-handle {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fff;
	border: 2px solid #2271b1;
	border-radius: 2px;
	box-sizing: border-box;
	z-index: 3;
}

.cioe-zone-preview--circle .cioe-zone-handle--e {
	top: 50%;
	right: -5px;
	transform: translateY(-50%);
	cursor: ew-resize;
	border-radius: 50%;
}

.cioe-zone-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.cioe-zone-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.cioe-zone-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.cioe-zone-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }

.cioe-zone-canvas {
	position: relative;
	margin: 0.75rem 0;
	border: 1px solid #c3c4c7;
	background: #f0f0f1;
	user-select: none;
	touch-action: none;
	cursor: crosshair;
}

.cioe-zone-canvas--overlay img {
	display: none;
}

.cioe-zone-canvas img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.cioe-zone-preview {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid #2271b1;
	background: rgba(34, 113, 177, 0.25);
	cursor: move;
}

.cioe-zone-preview.is-selected {
	border-color: #d63638;
	background: rgba(214, 54, 56, 0.28);
}

.cioe-zone-preview.is-highlight-preview {
	background: transparent;
}

.cioe-zone-preview__fx {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	border-radius: inherit;
	z-index: 0;
}

.cioe-zone-preview__fx--video {
	background: #000;
}

.cioe-zone-preview__label {
	position: absolute;
	left: 2px;
	top: 2px;
	padding: 1px 4px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 10px;
	line-height: 1.2;
	pointer-events: none;
	z-index: 3;
}

.cioe-zone-preview__delete {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: #d63638;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.cioe-zone-preview__delete:hover {
	background: #b32d2e;
}

.cioe-editor-zone-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 10px;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.cioe-editor-card {
	margin: 0 0 12px;
	padding: 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.cioe-editor-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.cioe-editor-add-row {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.cioe-editor-lead {
	margin: 0 0 12px;
	color: #1e1e1e;
	font-size: 13px;
	line-height: 1.45;
}

.cioe-editor-help {
	margin: 0 0 10px;
	font-size: 12px;
	color: #646970;
}

.cioe-add-additional-effect,
.cioe-add-additional-action {
	margin-top: 12px;
	width: 100%;
	justify-content: center;
}

.cioe-effect-addon-sep {
	margin: 16px 0 12px;
	border: 0;
	border-top: 1px solid #dcdcde;
}

.cioe-add-zone-btn {
	width: 100%;
	justify-content: center;
	margin: 12px 0 0 !important;
}

.cioe-zone-panels-wrap {
	padding-bottom: 28px;
	margin-bottom: 8px;
}

.cioe-zone-panel__divider {
	margin: 14px 0;
	border: 0;
	border-top: 1px solid #dcdcde;
}

.cioe-zone-panel__section--basics {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.cioe-zone-panel__section--action {
	border-bottom: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 14px;
	padding-bottom: 0;
	border-top: 1px solid #dcdcde;
}

.cioe-zone-panel__remove {
	width: 100%;
	justify-content: center;
	margin-top: 16px !important;
}

.cioe-zone-panel {
	margin: 0 0 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.cioe-zone-panel__head {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	background: #f0f0f1;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.cioe-zone-panel.is-open .cioe-zone-panel__head {
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	box-shadow: inset 0 3px 0 #2271b1;
}

.cioe-zone-panel__body {
	padding: 12px;
	background: #fff;
}

.cioe-zone-accordion {
	display: none;
}

.cioe-editor-subtitle {
	margin: 12px 0 8px;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.cioe-fx-wiggle img,
	.cioe-fx-wiggle .cioe-media,
	.cioe-fx-wiggle .wp-block-button__link,
	.cioe-fx-glow .cioe-media,
	.cioe-fx-glow .wp-block-button__link,
	.cioe-fx-ken-burns .cioe-media img,
	.cioe-ripple {
		animation: none !important;
	}
}

/* ---------- Image Overlays (content layers) ---------- */
.cioe-content-overlays {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	box-sizing: border-box;
}

.cioe-content-overlays.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.cioe-content-overlays.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

.cioe-content-overlays.aligncenter {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.cioe-content-overlays.alignwide,
.cioe-content-overlays.alignfull {
	display: block;
	width: 100%;
	max-width: 100%;
}

.cioe-content-overlays__stage {
	position: relative;
	display: block;
	line-height: 0;
	overflow: hidden;
}

.cioe-content-overlays__figure {
	margin: 0;
	display: block;
}

.cioe-content-overlays__image,
.cioe-content-overlays__figure img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto;
}

.cioe-content-overlays__areas {
	position: absolute !important;
	inset: 0 !important;
	z-index: 4;
	pointer-events: none;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
}

.cioe-content-overlays__areas > .wp-block,
.cioe-content-overlays__areas > .block-editor-block-list__block {
	margin: 0 !important;
	max-width: none !important;
	/* Do not set width — inline left/top/width/height % on .cioe-overlay-area must win */
}

.cioe-overlay-area {
	position: absolute !important;
	box-sizing: border-box;
	pointer-events: auto;
	overflow: hidden;
	line-height: normal;
	margin: 0 !important;
	max-width: none !important;
	border: none;
	outline: none !important;
	background-clip: padding-box;
}

/* Editor-only Active Overlay frame (not on the published page) */
.editor-styles-wrapper .cioe-overlay-area,
.block-editor-block-list__block.cioe-overlay-area {
	border: 2px solid #2271b1 !important;
}

.editor-styles-wrapper .cioe-overlay-area.is-selected,
.block-editor-block-list__block.cioe-overlay-area.is-selected {
	border-color: #d63638 !important;
	z-index: 6;
}

.cioe-overlay-area__scroll {
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 0;
}

/*
 * Lift theme content-size caps inside Active Overlay Areas.
 * Do NOT force width:100% on nested blocks — that breaks core/image resize handles.
 */
.cioe-overlay-area .cioe-overlay-area__scroll,
.cioe-overlay-area .cioe-overlay-area__scroll > .block-editor-block-list__layout,
.cioe-overlay-area .cioe-overlay-area__scroll > .block-editor-inner-blocks,
.cioe-overlay-area .cioe-overlay-area__scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.cioe-overlay-area .cioe-overlay-area__scroll .wp-block,
.cioe-overlay-area .cioe-overlay-area__scroll .block-editor-block-list__block {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Columns row fills the area; column children keep flex share */
.cioe-overlay-area .wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap;
	width: 100% !important;
	max-width: none !important;
}

.cioe-overlay-area .wp-block-columns > .wp-block-column,
.cioe-overlay-area .wp-block-columns > .block-editor-block-list__block {
	max-width: none !important;
	width: auto !important;
	flex-basis: 0;
	flex-grow: 1;
	min-width: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* core/image (and other resizable blocks): normal WP sizing, capped to area */
.cioe-overlay-area .wp-block-image,
.cioe-overlay-area .wp-block-image .components-resizable-box__container {
	max-width: 100% !important;
}

.cioe-overlay-area .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* Nested Image Zones & Overlays only — keep that block full-width in the area */
.cioe-overlay-area .cioe-overlay-block,
.cioe-overlay-area .cioe-overlay-block .cioe-nested-base,
.cioe-overlay-area .cioe-overlay-block .cioe-figure,
.cioe-overlay-area .cioe-overlay-block .cioe-figure img,
.cioe-overlay-area .cioe-overlay-block > .components-resizable-box__container {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box;
}

.cioe-nested-base {
	max-width: 100%;
	width: 100%;
	line-height: 0;
}

.cioe-has-click-effect {
	cursor: pointer;
}

.cioe-overlay-area--reveal-hover .cioe-overlay-area__scroll {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cioe-overlay-area--reveal-hover:hover .cioe-overlay-area__scroll,
.cioe-overlay-area--reveal-hover:focus-within .cioe-overlay-area__scroll {
	opacity: 1;
	visibility: visible;
}

@media (hover: none), (pointer: coarse) {
	.cioe-overlay-area--reveal-hover .cioe-overlay-area__scroll {
		opacity: 1;
		visibility: visible;
	}
}

.cioe-overlay-area__move {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 6;
	max-width: calc(100% - 8px);
	padding: 2px 8px;
	border: 0;
	border-radius: 2px;
	background: #2271b1;
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	cursor: move;
	pointer-events: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cioe-overlay-area__handle {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fff;
	border: 2px solid #2271b1;
	border-radius: 1px;
	z-index: 7;
	box-sizing: border-box;
	pointer-events: auto;
}

.cioe-overlay-area__handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.cioe-overlay-area__handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.cioe-overlay-area__handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.cioe-overlay-area__handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }

.cioe-zone-preview--overlay {
	border: 2px solid #2271b1;
	background: rgba(34, 113, 177, 0.12);
	box-shadow: none;
}

.cioe-figure .cioe-content-overlays__areas {
	z-index: 4;
}

.cioe-zone-canvas--owned {
	z-index: 3;
}


.editor-styles-wrapper .cioe-content-overlays__areas .block-list-appender,
.cioe-overlay-area__scroll .block-list-appender {
	margin: 0;
}


.cioe-zone-panel__section {
	margin: 0 0 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid #dcdcde;
}
.cioe-zone-panel__section:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
.cioe-zone-panel__section-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1e1e1e;
}
.cioe-zone-canvas--readonly .cioe-zone-preview {
	cursor: pointer;
}
.cioe-zone-canvas--readonly .cioe-zone-handle {
	display: none !important;
}

.cioe-azb-open-wrap--left {
	text-align: left;
}

.cioe-azb-open-wrap--center {
	text-align: center;
}

.cioe-azb-open-wrap--right {
	text-align: right;
}

.cioe-azb-open--button {
	appearance: none;
	border: 1px solid #2271b1;
	background: #2271b1;
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
	display: inline-block;
}

.cioe-azb-open--button:hover,
.cioe-azb-open--button:focus {
	filter: brightness( 0.92 );
}

.cioe-azb-open--link {
	cursor: pointer;
	text-decoration: underline;
	display: inline-block;
}

.cioe-azb-dim {
	z-index: 100000;
}

.cioe-azb-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	z-index: 100001;
	box-sizing: border-box;
	width: min( 960px, 94vw );
	max-width: min( 960px, 94vw );
	max-height: 90vh;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cioe-azb-modal.is-open {
	opacity: 1;
}

.cioe-azb-modal__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 2;
	border: 0;
	background: transparent;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: #1e1e1e;
	padding: 0.25rem 0.5rem;
}

.cioe-azb-modal__body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 2.5rem 1rem 1rem;
	min-height: 240px;
	-webkit-overflow-scrolling: touch;
}

.cioe-azb-modal__body .cioe-root--overlay {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto;
}

.cioe-azb-modal__body .cioe-media {
	position: relative;
	width: 100%;
}

.cioe-azb-modal__body .cioe-zone {
	pointer-events: auto;
}

.cioe-azb-modal__loading,
.cioe-azb-modal__error {
	padding: 1.5rem;
	text-align: center;
	margin: 0;
}

.cioe-azb-shortcode {
	display: block;
	word-break: break-all;
	padding: 6px 8px;
	background: #f6f7f7;
	border-radius: 3px;
}