/* 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);
}

/* ---- Image controls: top-right vertical stack ----------------------------
   Mirrors the data-viz canvas buttons (.kf-viz-expand et al.): a column of
   white pills in the top-right corner — maximize on top, then next / prev
   chevrons (gallery only). Same chrome as .kf-viz-expand / .krskrt-mm-nav:
   white pill, teal hover, hidden by default and faded in on figure
   hover/focus so they don't compete with the image. */
.krskrt-image-field__nav {
	position:        absolute;
	top:             8px;
	right:           8px;
	display:         flex;
	flex-direction:  column;
	gap:             8px;
	z-index:         2;
	line-height:     0;
	opacity:         0;
	transition:      opacity 0.15s ease;
}
.krskrt-image-field:hover .krskrt-image-field__nav,
.krskrt-image-field:focus-within .krskrt-image-field__nav {
	opacity: 1;
}
.krskrt-image-field__nav-btn {
	width:           44px;
	height:          44px;
	padding:         0;
	border:          1px solid #dedede;
	border-radius:   10px;
	background:      #fff;
	color:           #00374a;
	box-shadow:      0 1px 4px rgba(0, 0, 0, 0.08);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       22px;
	line-height:     1;
	cursor:          pointer;
	transition:      background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.krskrt-image-field__nav-btn:hover:not(:disabled) {
	background:   #00a9bb;
	color:        #00374a;
	border-color: #00a9bb;
}
.krskrt-image-field__nav-btn:active:not(:disabled) {
	background:   #00262d;
	color:        #fff;
	border-color: #00262d;
}
.krskrt-image-field__nav-btn:disabled {
	opacity: 0.35;
	cursor:  default;
}
.krskrt-image-field__nav-btn .ph { pointer-events: none; }

/* Editor-only multi-image count badge (top-left of the preview figure) */
.krskrt-image-field__count {
	position:      absolute;
	top:           8px;
	left:          8px;
	background:    rgba(0, 0, 0, 0.65);
	color:         #fff;
	font-size:     12px;
	line-height:   1;
	padding:       5px 8px;
	border-radius: 4px;
	z-index:       2;
}