/* ===== Highlight Marker Block ===== */
.wp-block-awgt-highlight-marker {
	line-height: 1.5;
	margin: 0.5em 0;
}

.awgt-hm-highlight {
	position: relative;
	display: inline-block;
	z-index: 1;
}

.awgt-hm-text {
	position: relative;
	z-index: 2;
}

/* === Pen Style (highlight bar behind text) === */
.awgt-hm-style-pen .awgt-hm-highlight::before {
	content: '';
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 5%;
	height: var( --awgt-hm-thickness, 60% );
	background: var( --awgt-hm-color, #FFEB3B );
	z-index: 1;
	border-radius: 2px;
	transform: rotate( -1deg );
}

/* === Brush Style (rough edges via clip-path) === */
.awgt-hm-style-brush .awgt-hm-highlight::before {
	content: '';
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: 2%;
	height: var( --awgt-hm-thickness, 60% );
	background: var( --awgt-hm-color, #FFEB3B );
	z-index: 1;
	clip-path: polygon(
		2% 20%, 8% 0%, 18% 15%, 28% 5%, 38% 22%, 48% 8%, 58% 18%, 68% 6%, 78% 20%, 88% 10%, 98% 18%,
		95% 80%, 85% 95%, 75% 82%, 65% 92%, 55% 80%, 45% 95%, 35% 85%, 25% 92%, 15% 82%, 5% 90%
	);
	transform: rotate( -0.5deg );
}

/* === Underline Style === */
.awgt-hm-style-underline .awgt-hm-highlight::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 4px;
	background: var( --awgt-hm-color, #FFEB3B );
	z-index: 1;
	border-radius: 2px;
}

/* === Circle Style === */
.awgt-hm-style-circle .awgt-hm-highlight {
	padding: 0 8px;
}
.awgt-hm-style-circle .awgt-hm-highlight::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 0;
	right: 0;
	bottom: -3px;
	border: 3px solid var( --awgt-hm-color, #FFEB3B );
	border-radius: 50%;
	z-index: 1;
	transform: rotate( -2deg );
}

/* === Strikethrough Style === */
.awgt-hm-style-strike .awgt-hm-highlight::before {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: var( --awgt-hm-color, #FFEB3B );
	z-index: 1;
	transform: rotate( -1deg );
}

/* === Draw Animation (Frontend) === */
.awgt-hm-animated .awgt-hm-highlight::before {
	transform-origin: left center;
	animation: awgt-hm-draw 1s ease-out forwards;
	animation-delay: 0.3s;
	transform: rotate( -1deg ) scaleX( 0 );
}

.awgt-hm-style-circle.awgt-hm-animated .awgt-hm-highlight::before {
	transform-origin: center center;
	transform: rotate( -2deg ) scale( 0 );
	animation: awgt-hm-draw-circle 0.6s ease-out forwards;
	animation-delay: 0.3s;
}

@keyframes awgt-hm-draw {
	0% { transform: rotate( -1deg ) scaleX( 0 ); }
	100% { transform: rotate( -1deg ) scaleX( 1 ); }
}

@keyframes awgt-hm-draw-circle {
	0% { transform: rotate( -2deg ) scale( 0 ); opacity: 0; }
	100% { transform: rotate( -2deg ) scale( 1 ); opacity: 1; }
}

/* === Editor Preview Loop (so users see animation repeating) === */
.awgt-hm-editor-loop .awgt-hm-highlight::before {
	animation: awgt-hm-draw 1.5s ease-in-out infinite alternate !important;
}
.awgt-hm-style-circle.awgt-hm-editor-loop .awgt-hm-highlight::before {
	animation: awgt-hm-draw-circle 1.5s ease-in-out infinite alternate !important;
}