:root {
    --kh-primary: #3b82f6;
    --kh-marker-size: 28px;
    --kh-card-bg: #ffffff;
    --kh-text-color: #1f2937;
    --kh-radius: 10px;
    --kh-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    --kh-duration: 0.25s;
    --kh-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container & Wrapper */
.kh-hotspot-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.kh-hotspot-container {
    position: relative;
    width: 100%;
    line-height: 0;
}

.kh-hotspot-container img {
    width: 100%;
    height: auto;
    display: block;
}

.kh-main-image {
    width: 100%;
    height: auto;
}

.kh-main-image-tablet,
.kh-main-image-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .kh-main-image-desktop {
        display: none;
    }
    .kh-main-image-tablet {
        display: block;
    }
    /* If tablet image is missing, show desktop */
    .kh-hotspot-container:not(:has(.kh-main-image-tablet)) .kh-main-image-desktop {
        display: block;
    }
}

@media (max-width: 767px) {
    .kh-main-image-desktop,
    .kh-main-image-tablet {
        display: none;
    }
    .kh-main-image-mobile {
        display: block;
    }
    /* Fallback logic */
    .kh-hotspot-container:not(:has(.kh-main-image-mobile)) .kh-main-image-tablet {
        display: block;
    }
    .kh-hotspot-container:not(:has(.kh-main-image-mobile)):not(:has(.kh-main-image-tablet)) .kh-main-image-desktop {
        display: block;
    }
}

/* Hotspot Point Base */
.kh-hotspot-point {
    position: absolute;
    width: var(--kh-marker-size);
    height: var(--kh-marker-size);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    outline: none;
}

.kh-hotspot-point.is-active {
    z-index: 999; /* Ensure active hotspot is above everything else */
}

/* Marker Icon Flex Alignment */
.kh-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--kh-primary);
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform var(--kh-duration) var(--kh-easing), background-color var(--kh-duration) var(--kh-easing);
    color: #ffffff;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 1; /* Lower than the card */
}

/* Marker Types Adjustments */
.kh-marker-type-lottie .kh-marker-icon,
.kh-marker-type-image .kh-marker-icon {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.kh-marker-type-lottie lottie-player {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.kh-custom-marker-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.kh-marker-text {
    font-size: calc(var(--kh-marker-size) * 0.45);
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

/* Pulse Effect */
.kh-has-pulse .kh-hotspot-point:not(.kh-marker-type-lottie):not(.kh-marker-type-image) .kh-marker-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background-color: var(--kh-primary);
    opacity: 0.6;
    z-index: -1;
    animation: kh-pulse 2s infinite var(--kh-easing);
}

@keyframes kh-pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    70% { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(0.95); opacity: 0; }
}

/* Card Tooltip Base Styling */
.kh-card {
    position: absolute;
    width: max-content;
    max-width: 280px;
    min-width: 180px;
    background: var(--kh-card-bg);
    color: var(--kh-text-color);
    border-radius: var(--kh-radius);
    box-shadow: var(--kh-shadow);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--kh-duration) var(--kh-easing), transform var(--kh-duration) var(--kh-easing), visibility var(--kh-duration);
    z-index: 20;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Card Inner Content */
.kh-card-media img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--kh-radius) - 2px);
    margin-bottom: 10px;
    display: block;
}

.kh-card-title {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--kh-text-color);
}

.kh-card-desc {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.kh-card-btn {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--kh-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: opacity var(--kh-duration) ease;
}

.kh-card-btn:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* Default Tooltip Directions */
.kh-card,
.kh-card[data-direction="bottom"],
.kh-card[data-position="bottom"] {
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
}

.kh-card[data-direction="top"],
.kh-card[data-position="top"] {
    top: auto;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
}

.kh-card[data-direction="left"],
.kh-card[data-position="left"] {
    top: 50%;
    right: calc(100% + 12px);
    left: auto;
    transform: translateY(-50%) translateX(6px);
}

.kh-card[data-direction="right"],
.kh-card[data-position="right"] {
    top: 50%;
    left: calc(100% + 12px);
    right: auto;
    transform: translateY(-50%) translateX(-6px);
}

/* Active State */
.kh-hotspot-point.is-active .kh-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kh-hotspot-point.is-active .kh-card[data-direction="bottom"],
.kh-hotspot-point.is-active .kh-card[data-position="bottom"],
.kh-hotspot-point.is-active .kh-card[data-direction="top"],
.kh-hotspot-point.is-active .kh-card[data-position="top"] {
    transform: translateX(-50%) translateY(0);
}

.kh-hotspot-point.is-active .kh-card[data-direction="left"],
.kh-hotspot-point.is-active .kh-card[data-position="left"],
.kh-hotspot-point.is-active .kh-card[data-direction="right"],
.kh-hotspot-point.is-active .kh-card[data-position="right"] {
    transform: translateY(-50%) translateX(0);
}

/* Smart Auto-Flip Rules (Engine Dynamic Overrides) */
.kh-hotspot-point.is-flipped-top .kh-card {
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(6px);
}
.kh-hotspot-point.is-active.is-flipped-top .kh-card {
    transform: translateX(-50%) translateY(0);
}

.kh-hotspot-point.is-flipped-bottom .kh-card {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-6px);
}
.kh-hotspot-point.is-active.is-flipped-bottom .kh-card {
    transform: translateX(-50%) translateY(0);
}

.kh-hotspot-point.is-flipped-left .kh-card {
    top: 50% !important;
    bottom: auto !important;
    right: calc(100% + 12px) !important;
    left: auto !important;
    transform: translateY(-50%) translateX(6px);
}
.kh-hotspot-point.is-active.is-flipped-left .kh-card {
    transform: translateY(-50%) translateX(0);
}

.kh-hotspot-point.is-flipped-right .kh-card {
    top: 50% !important;
    bottom: auto !important;
    left: calc(100% + 12px) !important;
    right: auto !important;
    transform: translateY(-50%) translateX(-6px);
}
.kh-hotspot-point.is-active.is-flipped-right .kh-card {
    transform: translateY(-50%) translateX(0);
}