/* KrsKrt Image Field — shared frontend + editor styles. */

/* ---- Figure wrapper on the form page ------------------------------------- */
.krskrt-image-field {
	position:      relative;
	display:       block;
	margin:        0;
	border:        1px solid #dedede;
	border-radius: 5px;
	overflow:      hidden;
	cursor:        zoom-in;
	line-height:   0;
	user-select:   none;
	background:    #fff;
}
.krskrt-image-field:focus-visible {
	outline:        2px solid #2271b1;
	outline-offset: 2px;
}
.krskrt-image-field__img {
	display:    block;
	width:      100%;
	height:     auto;
	transition: filter 0.15s;
}
.krskrt-image-field:hover .krskrt-image-field__img {
	filter: brightness(0.88);
}

/* Magnify hint (centered circle — same look as krskrt-video-field play-icon) */
.krskrt-image-field__hint {
	position:        absolute;
	top:             50%;
	left:            50%;
	transform:       translate(-50%, -50%);
	width:           64px;
	height:          64px;
	border-radius:   50%;
	background:      rgba(0, 0, 0, 0.55);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       28px;
	line-height:     1;
	pointer-events:  none;
	opacity:         0;
	transition:      opacity 0.15s, background-color 0.15s ease-in-out;
}
.krskrt-image-field:hover .krskrt-image-field__hint,
.krskrt-image-field:focus-visible .krskrt-image-field__hint {
	opacity:    1;
	background: rgba(0, 0, 0, 0.75);
}