{%- style -%}
  .hotspot-section {
    max-width: 800px; /* Reduced from 1200px */
    margin: 0 auto;
    padding: 30px 15px; /* Reduced padding */
  }

  .hotspot-image-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .hotspot-main-image {
    width: 100%;
    height: auto;
    max-height: 600px; /* Added max-height */
    object-fit: contain; /* Ensures proper image scaling */
    display: block;
    border-radius: 8px;
  }

  .hotspot-marker {
    position: absolute;
    width: 20px; /* Slightly smaller */
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #333;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 0.3s ease;
  }

  .hotspot-marker:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background-color: #ff0000;
  }

  .hotspot-marker::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 0, 0, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
  }

  @keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0; }
  }

  .hotspot-tooltip {
    position: absolute;
    background: white;
    color: #333;
    padding: 12px; /* Slightly reduced */
    border-radius: 8px;
    width: 180px; /* Slightly smaller */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 3;
    font-size: 14px; /* Added base font size */
  }

  .hotspot-marker:hover .hotspot-tooltip {
    opacity: 1;
    visibility: visible;
  }

  /* Tooltip position classes remain the same */
  .hotspot-tooltip.top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }

  .hotspot-tooltip.bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }

  .hotspot-tooltip.left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
  }

  .hotspot-tooltip.right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
  }

  .hotspot-tooltip-title {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 15px;
  }

  .hotspot-tooltip-price {
    color: #d32f2f;
    font-weight: bold;
    margin: 4px 0;
    font-size: 14px;
  }

  .hotspot-tooltip-link {
    display: inline-block;
    margin-top: 6px;
    color: #0066cc;
    text-decoration: underline;
    font-size: 13px;
  }

  @media (max-width: 768px) {
    .hotspot-section {
      max-width: 100%;
      padding: 20px 10px;
    }
    
    .hotspot-main-image {
      max-height: 400px; /* Smaller on mobile */
    }
    
    .hotspot-tooltip {
      display: none;
      width: 160px;
      padding: 10px;
    }
    
    .hotspot-marker.active .hotspot-tooltip {
      display: block;
      opacity: 1;
      visibility: visible;
    }
  }
{%- endstyle -%}

<div class="hotspot-section">
  <div class="hotspot-image-wrapper">
    {% if section.settings.image != blank %}
      {% assign image = section.settings.image %}
      <img class="hotspot-main-image" 
           src="{{ image | img_url: '800x' }}" 
           srcset="{{ image | img_url: '400x' }} 400w,
                   {{ image | img_url: '600x' }} 600w,
                   {{ image | img_url: '800x' }} 800w"
           sizes="(max-width: 600px) 100vw, 800px"
           alt="{{ image.alt | escape }}"
           loading="lazy"
           width="{{ image.width }}"
           height="{{ image.height }}">
    {% else %}
      <div class="placeholder-background" style="padding-top: 75%; background: #f5f5f5;">
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {% endif %}

    {% for block in section.blocks %}
      <div class="hotspot-marker" 
           style="left: {{ block.settings.horizontal_position }}%; 
                  top: {{ block.settings.vertical_position }}%;"
           onclick="toggleTooltip(this)">
        <div class="hotspot-tooltip {{ block.settings.tooltip_position }}">
          {% if block.settings.title != blank %}
            <div class="hotspot-tooltip-title">{{ block.settings.title }}</div>
          {% endif %}
          {% if block.settings.description != blank %}
            <div class="hotspot-tooltip-description">{{ block.settings.description }}</div>
          {% endif %}
          {% if block.settings.price != blank %}
            <div class="hotspot-tooltip-price">{{ block.settings.price }}</div>
          {% endif %}
          {% if block.settings.link_text != blank and block.settings.link_url != blank %}
            <a href="{{ block.settings.link_url }}" class="hotspot-tooltip-link">
              {{ block.settings.link_text }}
            </a>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<script>
  function toggleTooltip(marker) {
    if (window.innerWidth <= 768) {
      document.querySelectorAll('.hotspot-marker').forEach(m => {
        if (m !== marker) m.classList.remove('active');
      });
      marker.classList.toggle('active');
    }
  }
  
  document.addEventListener('click', function(e) {
    if (window.innerWidth <= 768 && !e.target.closest('.hotspot-marker')) {
      document.querySelectorAll('.hotspot-marker').forEach(marker => {
        marker.classList.remove('active');
      });
    }
  });
</script>

{% schema %}
{
  "name": "Image Hotspots",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Main Image",
      "info": "Recommended size: 800-1000px width"
    }
  ],
  "blocks": [
    {
      "type": "hotspot",
      "name": "Hotspot",
      "settings": [
        {
          "type": "range",
          "id": "horizontal_position",
          "label": "Horizontal Position",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50
        },
        {
          "type": "range",
          "id": "vertical_position",
          "label": "Vertical Position",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50
        },
        {
          "type": "select",
          "id": "tooltip_position",
          "label": "Tooltip Position",
          "options": [
            { "value": "top", "label": "Above marker" },
            { "value": "bottom", "label": "Below marker" },
            { "value": "left", "label": "Left of marker" },
            { "value": "right", "label": "Right of marker" }
          ],
          "default": "top"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Product Name"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>Product description</p>"
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price",
          "default": "$39.99"
        },
        {
          "type": "text",
          "id": "link_text",
          "label": "Link Text",
          "default": "View Product"
        },
        {
          "type": "url",
          "id": "link_url",
          "label": "Link URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Hotspots",
      "category": "Image",
      "blocks": [
        {
          "type": "hotspot",
          "settings": {
            "horizontal_position": 30,
            "vertical_position": 40,
            "title": "Summer T-Shirt",
            "description": "<p>100% cotton</p>",
            "price": "$29.99",
            "link_text": "Shop Now"
          }
        },
        {
          "type": "hotspot",
          "settings": {
            "horizontal_position": 70,
            "vertical_position": 60,
            "title": "Classic Jeans",
            "description": "<p>Premium denim</p>",
            "price": "$59.99",
            "link_text": "View Options"
          }
        }
      ]
    }
  ]
}
{% endschema %}