<!-- ===== Pawmatix Size Guide (Modal) ===== -->
<style>
  :root{
    --pmx: #7265E3; --ink:#0b0b0c; --muted:#7b7b86; --bg:#0f0f12; --card:#15151a; --chip:#1e1e25; --white:#fff;
  }
  .pmx-sg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:9999}
  .pmx-sg{position:fixed;inset:0;display:none;place-items:center;z-index:10000}
  .pmx-sg.open,.pmx-sg-backdrop.open{display:grid}
  .pmx-card{width:min(960px,96vw);max-height:92vh;overflow:auto;background:var(--card);color:var(--white);
    border:1px solid #262633;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:24px}
  .pmx-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
  .pmx-title{font:600 22px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif}
  .pmx-close{all:unset;cursor:pointer;border-radius:10px;padding:8px;background:var(--chip)}
  .pmx-sub{color:var(--muted);margin:4px 0 14px}

  .pmx-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
  @media (max-width:860px){.pmx-grid{grid-template-columns:1fr}}
  .pmx-section{background:var(--bg);border:1px solid #242433;border-radius:14px;padding:16px}
  .pmx-label{font-weight:600;margin-bottom:8px}
  .pmx-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

  .pmx-input, .pmx-select{width:100%;background:#11111a;color:var(--white);border:1px solid #2a2a3a;
    border-radius:12px;padding:12px 14px;font:500 14px/1.2 Inter, system-ui}
  .pmx-chip{background:var(--chip);border:1px solid #303046;color:var(--white);padding:10px 14px;border-radius:12px}

  .pmx-counter{display:flex;align-items:center;gap:8px}
  .pmx-counter button{all:unset;background:var(--chip);border:1px solid #303046;color:#fff;width:36px;height:36px;
    display:grid;place-items:center;border-radius:10px;cursor:pointer;font-weight:700}
  .pmx-cta{background:var(--pmx);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}

  .pmx-results h3{margin:0 0 8px}
  .pmx-size-pill{display:inline-flex;align-items:center;gap:8px;background:#19192a;border:1px solid #2b2b3d;
    color:#fff;padding:10px 14px;border-radius:999px;margin:6px 6px 0 0}
  .pmx-list{margin-top:10px;color:#cfcfe6;font-size:14px}
  .pmx-help{margin-top:14px;font-size:12px;color:#9a9ab3}
  .pmx-col{display:grid;gap:12px}
</style>

<!-- Trigger -->
<button class="pmx-cta" id="openSizing">Намери своя размер</button>

<!-- Backdrop + Modal -->
<div class="pmx-sg-backdrop" id="sgBg"></div>
<div class="pmx-sg" id="sg">
  <div class="pmx-card" role="dialog" aria-modal="true" aria-label="Избор на размер на нашийник">
    <div class="pmx-head">
      <div>
        <div class="pmx-title">Избор на размер на нашийник</div>
        <div class="pmx-sub">Не си сигурен? Разкажи ни за кучето си и ще препоръчаме размер.</div>
      </div>
      <button class="pmx-close" id="closeSizing" aria-label="Затвори">✕</button>
    </div>

    <div class="pmx-grid">
      <!-- Left: Inputs -->
      <div class="pmx-col">
        <div class="pmx-section">
          <div class="pmx-label">Порода (незадължително)</div>
          <select class="pmx-select" id="breed">
            <option value="">Избери порода</option>
            <option value="xsmall">Малтийска болонка</option>
            <option value="xsmall">Йоркшир териер</option>
            <option value="small">Френски булдог</option>
            <option value="small">Кавалер Кинг Чарлз шпаньол</option>
            <option value="medium">Бигъл</option>
            <option value="medium">Бордър коли</option>
            <option value="large">Голдън ретривър</option>
            <option value="large">Немска овчарка</option>
            <option value="xlarge">Немски дог</option>
            <option value="xlarge">Мастиф</option>
            <option value="other">Друга / смесена порода</option>
          </select>
        </div>

        <div class="pmx-section">
          <div class="pmx-label">Размер на врата (препоръчително) или тегло</div>
          <div class="pmx-row">
            <input class="pmx-input" id="neck" type="number" min="15" max="85" step="1" placeholder="Обиколка на врата (см)">
            <span class="pmx-chip">или</span>
            <div class="pmx-counter">
              <button id="minus">−</button>
              <input class="pmx-input" id="weight" type="number" min="2" max="90" step="1" value="10" style="width:110px">
              <span class="pmx-chip">кг</span>
              <button id="plus">+</button>
            </div>
            <button class="pmx-cta" id="calc">Препоръчай размер</button>
          </div>
          <div class="pmx-help">Съвет: измерването на <strong>врата в сантиметри</strong> дава най-точния резултат. Теглото е ориентировъчно.</div>
        </div>
      </div>

      <!-- Right: Results -->
      <div class="pmx-section pmx-results">
        <h3>Препоръчан размер</h3>
        <div id="pill"></div>
        <div class="pmx-list" id="range"></div>
        <div class="pmx-list" id="breedHint"></div>
        <div class="pmx-help">
          *Препоръките са на база средни стойности според порода и тегло. За най-добро напасване измери текущия нашийник или врата на кучето.
        </div>

        <div class="pmx-section" style="margin-top:14px">
          <div class="pmx-label">Общи насоки за размери</div>
          <div class="pmx-list">
            <div class="pmx-size-pill"><strong>XS</strong> • 24–28 см • 1.9 см ширина</div>
            <div class="pmx-size-pill"><strong>S</strong> • 27–33 см • 1.9 см ширина</div>
            <div class="pmx-size-pill"><strong>M</strong> • 32–42 см • 2.5 см ширина</div>
            <div class="pmx-size-pill"><strong>L</strong> • 39–56 см • 2.5 см ширина</div>
            <div class="pmx-size-pill"><strong>XL</strong> • 51–79 см • 2.5 см ширина</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
(function(){
  const open = document.getElementById('openSizing');
  const closeBtn = document.getElementById('closeSizing');
  const modal = document.getElementById('sg');
  const bg = document.getElementById('sgBg');
  const calc = document.getElementById('calc');
  const breed = document.getElementById('breed');
  const neck = document.getElementById('neck');
  const weight = document.getElementById('weight');
  const plus = document.getElementById('plus');
  const minus = document.getElementById('minus');
  const pill = document.getElementById('pill');
  const range = document.getElementById('range');
  const hint = document.getElementById('breedHint');

  const SIZES = [
    {id:'xsmall', label:'XS', min:24, max:28, width:'1.9 см'},
    {id:'small',  label:'S',  min:27, max:33, width:'1.9 см'},
    {id:'medium', label:'M',  min:32, max:42, width:'2.5 см'},
    {id:'large',  label:'L',  min:39, max:56, width:'2.5 см'},
    {id:'xlarge', label:'XL', min:51, max:79, width:'2.5 см'},
  ];

  // loose weight -> size heuristic (fallback only)
  function sizeByWeight(kg){
    if(kg <= 6) return 'xsmall';
    if(kg <= 11) return 'small';
    if(kg <= 25) return 'medium';
    if(kg <= 40) return 'large';
    return 'xlarge';
  }

  function sizeByNeck(cm){
    return SIZES.find(s => cm >= s.min && cm <= s.max)?.id || (cm < 24 ? 'xsmall' : 'xlarge');
  }

  function render(id){
    const s = SIZES.find(x=>x.id===id);
    if(!s){
      pill.innerHTML='';
      range.textContent='';
      return;
    }
    pill.innerHTML = `<div class="pmx-size-pill"><strong>${s.label}</strong> • ${s.min}–${s.max} см • ${s.width} ширина</div>`;
    range.textContent = `Подходящ за обиколка на врата ${s.min}–${s.max} см. Ширина на нашийника: ${s.width}.`;
  }

  function recommend(){
    let id;
    const neckVal = parseFloat(neck.value);
    if(!isNaN(neckVal)) {
      id = sizeByNeck(neckVal);
    } else {
      const kg = parseFloat(weight.value)||10;
      const breedPref = breed.value && breed.value!=='other' ? breed.value : null;
      id = breedPref || sizeByWeight(kg);
    }
    render(id);
    // breed hint
    const btxt = breed.options[breed.selectedIndex]?.text || '';
    hint.textContent = btxt && breed.value!=='other' ? `Според порода: ${btxt}` : '';
  }

  open.addEventListener('click', ()=>{ modal.classList.add('open'); bg.classList.add('open'); });
  closeBtn.addEventListener('click', ()=>{ modal.classList.remove('open'); bg.classList.remove('open'); });
  bg.addEventListener('click', ()=>{ modal.classList.remove('open'); bg.classList.remove('open'); });

  plus.addEventListener('click', ()=>{ weight.value = Math.min(90, (parseInt(weight.value)||10)+1); });
  minus.addEventListener('click', ()=>{ weight.value = Math.max(2,  (parseInt(weight.value)||10)-1); });
  calc.addEventListener('click', recommend);
})();
</script>