.kural-tooltip {
	--kural-bg-start: #2f79b4;
	--kural-bg-end: #255a92;
	--kural-border: #6ea6d0;
	--kural-shadow: 0 14px 28px rgba(4, 19, 38, 0.32);
	--kural-radius: 10px;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	line-height: 0;
	isolation: isolate;
}

.kural-main-image {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: var(--kural-radius);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: var(--kural-shadow);
	background: linear-gradient(160deg, var(--kural-bg-start), var(--kural-bg-end));
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.kural-tooltip-popup {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	display: block;
	width: min(92vw, 360px);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	z-index: 9999;
}

.kural-tooltip-popup::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 26px;
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	background: linear-gradient(165deg, var(--kural-bg-start), var(--kural-bg-end));
	border-left: 1px solid var(--kural-border);
	border-top: 1px solid var(--kural-border);
}

.kural-popup-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: var(--kural-radius);
	border: 1px solid var(--kural-border);
	background: linear-gradient(165deg, var(--kural-bg-start), var(--kural-bg-end));
	box-shadow: 0 14px 30px rgba(4, 19, 38, 0.34);
}

.kural-tooltip:hover .kural-main-image,
.kural-tooltip:focus .kural-main-image,
.kural-tooltip:focus-within .kural-main-image {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px rgba(4, 19, 38, 0.36);
	border-color: rgba(255, 255, 255, 0.45);
}

.kural-tooltip:hover .kural-tooltip-popup,
.kural-tooltip:focus .kural-tooltip-popup,
.kural-tooltip:focus-within .kural-tooltip-popup {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767px) {
	.kural-tooltip-popup {
		width: min(94vw, 320px);
	}
}

@media (hover: none) {
	.kural-tooltip-popup {
		position: relative;
		top: 10px;
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}