Size Guide Modal

{% comment %} Size Guide Modal - snippets/size-guide-modal.liquid {% endcomment %}
<div class="size-guide-modal" id="sizeGuideModal">
  <div class="size-guide-modal__overlay" data-close-modal></div>
  <div class="size-guide-modal__content">
    <button class="size-guide-modal__close" data-close-modal>
      <svg width="20" height="20" viewBox="0 0 20 20">
        <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2"/>
      </svg>
    </button>
    
    <h2>Size Guide</h2>
    
    <div class="size-guide-tabs">
      <button class="tab-btn active" data-tab="inches">Inches</button>
      <button class="tab-btn" data-tab="cm">Centimeters</button>
    </div>

    <div class="tab-content active" data-content="inches">
      <table class="size-table">
        <thead>
          <tr>
            <th>Size</th>
            <th>Chest</th>
            <th>Waist</th>
            <th>Hips</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>XS</td><td>32-34</td><td>24-26</td><td>34-36</td></tr>
          <tr><td>S</td><td>34-36</td><td>26-28</td><td>36-38</td></tr>
          <tr><td>M</td><td>36-38</td><td>28-30</td><td>38-40</td></tr>
          <tr><td>L</td><td>38-40</td><td>30-32</td><td>40-42</td></tr>
          <tr><td>XL</td><td>40-42</td><td>32-34</td><td>42-44</td></tr>
        </tbody>
      </table>
    </div>

    <div class="tab-content" data-content="cm">
      <table class="size-table">
        <thead>
          <tr>
            <th>Size</th>
            <th>Chest</th>
            <th>Waist</th>
            <th>Hips</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>XS</td><td>81-86</td><td>61-66</td><td>86-91</td></tr>
          <tr><td>S</td><td>86-91</td><td>66-71</td><td>91-97</td></tr>
          <tr><td>M</td><td>91-97</td><td>71-76</td><td>97-102</td></tr>
          <tr><td>L</td><td>97-102</td><td>76-81</td><td>102-107</td></tr>
          <tr><td>XL</td><td>102-107</td><td>81-86</td><td>107-112</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
.size-guide-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.size-guide-modal.active {
  display: block;
}

.size-guide-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.size-guide-modal__content {
  position: relative;
  max-width: 600px;
  margin: 50px auto;
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-height: 80vh;
  overflow-y: auto;
}

.size-guide-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.size-guide-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0;
  border-bottom: 2px solid #e5e5e5;
}

.tab-btn {
  padding: 12px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s;
}

.tab-btn.active {
  color: #000;
  border-bottom-color: #000;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.size-table th,
.size-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
}

.size-table th {
  font-weight: 600;
  background: #f9f9f9;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('sizeGuideModal');
  const openBtns = document.querySelectorAll('[data-open-size-guide]');
  const closeBtns = document.querySelectorAll('[data-close-modal]');
  const tabBtns = document.querySelectorAll('.tab-btn');

  openBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      modal.classList.add('active');
      document.body.style.overflow = 'hidden';
    });
  });

  closeBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      modal.classList.remove('active');
      document.body.style.overflow = '';
    });
  });

  tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const tabName = btn.dataset.tab;
      
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
      
      btn.classList.add('active');
      document.querySelector(`[data-content="${tabName}"]`).classList.add('active');
    });
  });
});
</script>