.reflexology-container {
    position: relative;
    display: inline-block;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    background: #fff;
}

.reflex-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  /* INITIAL STATE: Bold, solid green center */
  background-color: #308D25; 
  border: 2px solid #fff; /* White border for high contrast */
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  /* Smooth transition when changing to blue on hover */
  transition: background-color 0.3s ease, transform 0.2s ease; 
  z-index: 5;
}

/* 1. The effect circle - Runs immediately, bold, and green initially */
.hotspot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* INITIAL EFFECT: Bold green pulse using RGBA equivalent of #308D25 */
  background-color: rgba(48, 141, 37, 0.7); 
  pointer-events: none;
  
  /* Fast, visible animation from the start (1.5 seconds) */
  animation: mapPulseBold 1.5s infinite linear; 
  /* Smooth transition for the effect color change */
  transition: background-color 0.3s ease; 
}

/* =========================================
   HOVER STATES - Switching to Blue
   ========================================= */

/* 2. Hotspot center on hover becomes solid blue */
.hotspot:hover {
  /* Vivid blue color on hover */
  background-color: rgb(0, 210, 211); 
  transform: translate(-50%, -50%) scale(1.1); /* Slight scale up */
}

/* 3. Effect circle on hover becomes intense blue */
.hotspot:hover::after {
  /* Vivid blue effect color on hover, maintaining intensity */
  background-color: rgba(0, 210, 211, 0.7); 
  /* Becomes faster and wider when blue */
  animation: mapPulseHoverBlue 0.8s infinite ease-out; 
}

/* --- ANIMATIONS --- */

/* Bold GREEN animation running BEFORE hover */
@keyframes mapPulseBold {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; /* Starts fully visible */
  }
  100% {
    transform: translate(-50%, -50%) scale(3); /* Bold expansion */
    opacity: 0;
  }
}

/* Intense BLUE animation running DURING hover */
@keyframes mapPulseHoverBlue {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4); /* Ultra wide expansion */
    opacity: 0;
  }
}
/* tooltip style */
.custom-tooltip {
    position: absolute;
    background: rgba(33, 37, 41, 0.95);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    z-index: 1000;
    width: 220px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border-left: 4px solid #00d2d3;
}


.custom-tooltip strong {
    color: #00d2d3;
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}