/**
 * Image Hotspot Pro - Public Facing Styles
 * Author: WP Dev by Longnh
 */

/* -- Main Wrapper -- */
.ihp-public-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0; /* Ngăn không gian thừa bên dưới ảnh */
}

.ihp-public-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -- Hotspot Trigger -- */
.ihp-hotspot-trigger {
    position: absolute;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transform: translate(-50%, -50%); /* Căn giữa điểm hotspot chính xác */
    z-index: 10;
}

/* Điểm tròn xanh ở giữa */
.ihp-hotspot-trigger::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: #28a745; /* Màu xanh lá cây */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 12;
}

/* Vòng tròn lan tỏa (pulse) */
.ihp-hotspot-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background-color: rgba(40, 167, 69, 0.5); /* Màu xanh lá cây mờ */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
    z-index: 11;
}

/* -- Keyframe Animation cho hiệu ứng Pulse -- */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}


/* -- Tooltip Styling -- */
.ihp-tooltip {
    position: absolute;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 15px;
    min-width: 220px;
    line-height: 1.5;
    z-index: 99;
    /* Ẩn ban đầu, JS sẽ hiển thị và định vị */
    display: none; 
}

/* Mũi tên trỏ xuống của tooltip */
.ihp-tooltip::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Vị trí mũi tên */
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

.ihp-tooltip-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-right: 20px; /* Dành không gian cho nút close */
}

.ihp-tooltip-content {
    font-size: 14px;
    color: #555;
}

.ihp-tooltip-content a {
    color: #28a745;
    text-decoration: none;
    font-weight: bold;
}

.ihp-tooltip-content a:hover {
    text-decoration: underline;
}

/* Nút đóng "x" */
.ihp-tooltip-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.ihp-tooltip-close:hover {
    color: #333;
}