.elementor-9062 .elementor-element.elementor-element-7e08676e{--display:flex;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS */<!-- ============================================================
  Total Hair Restoration — Evaluation Form
  Self-contained multi-step form. Paste this whole block into an
  Elementor "HTML" widget (or any raw-HTML area) on any page.
  No plugin dependency. Submits directly to HubSpot's Forms API.
============================================================= -->

<style>
  #thr-form-wrap {
    --thr-blue: #2563eb;
    --thr-blue-light: #eff6ff;
    --thr-border: #e2e2e2;
    --thr-text: #1a1a1a;
    --thr-muted: #6b7280;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    box-sizing: border-box;
  }
  #thr-form-wrap * { box-sizing: border-box; }
  #thr-form-wrap h2 {
    font-size: 26px;
    margin: 0 0 8px;
    color: var(--thr-text);
  }
  #thr-form-wrap p.thr-sub {
    margin: 0 0 28px;
    color: var(--thr-muted);
    font-size: 15px;
  }
  .thr-step { display: none; }
  .thr-step.active { display: block; animation: thrFade .25s ease; }
  @keyframes thrFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  .thr-q-label {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
  }
  .thr-q-label .req { color: #ef4444; margin-left: 2px; }

  /* Card-style option grid (used for Gender + Baldness level) */
  .thr-options {
    display: grid;
    gap: 14px;
  }
  .thr-options.thr-cols-2 { grid-template-columns: 1fr 1fr; }
  .thr-options.thr-cols-4 { grid-template-columns: repeat(4, 1fr); }

  .thr-card {
    border: 2px solid var(--thr-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
  }
  .thr-card:hover { border-color: #b6c8f5; }
  .thr-card.selected { border-color: var(--thr-blue); background: var(--thr-blue-light); }
  .thr-card img { width: 100%; max-width: 90px; margin: 0 auto 10px; display: block; }
  .thr-card .thr-card-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
  }
  .thr-card.selected .thr-card-label-pill {
    background: var(--thr-blue);
    color: #fff;
    border-radius: 8px;
    padding: 8px 0;
    font-weight: 600;
  }

  /* Plain list-style options (used for text-only radio questions) */
  .thr-list { display: flex; flex-direction: column; gap: 10px; }
  .thr-list-item {
    border: 2px solid var(--thr-border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #374151;
    transition: border-color .15s, background .15s;
  }
  .thr-list-item:hover { border-color: #b6c8f5; }
  .thr-list-item.selected { border-color: var(--thr-blue); background: var(--thr-blue-light); font-weight: 600; color: var(--thr-blue); }

  .thr-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--thr-border);
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 14px;
  }
  .thr-input:focus { outline: none; border-color: var(--thr-blue); }
  .thr-input-label { font-size: 13px; color: var(--thr-muted); margin-bottom: 6px; display: block; }

  .thr-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
  }
  .thr-btn {
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
  }
  .thr-btn:disabled { opacity: .45; cursor: not-allowed; }
  .thr-btn-primary { background: #4b5563; color: #fff; }
  .thr-btn-primary:not(:disabled):hover { opacity: .9; }
  .thr-btn-text { background: none; color: var(--thr-muted); padding: 12px 6px; }

  .thr-progress { display: flex; gap: 6px; margin-bottom: 24px; }
  .thr-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--thr-border); }
  .thr-progress span.done { background: var(--thr-blue); }

  .thr-error { color: #ef4444; font-size: 13px; margin-top: -8px; margin-bottom: 14px; display: none; }
  .thr-success { text-align: center; padding: 30px 0; }
  .thr-success h3 { color: var(--thr-text); margin-bottom: 8px; }
  .thr-success p { color: var(--thr-muted); }

  @media (max-width: 480px) {
    #thr-form-wrap { padding: 24px 18px; }
    .thr-options.thr-cols-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .thr-card { padding: 8px 4px; }
    .thr-card img { max-width: 48px; }
    .thr-card .thr-card-label { font-size: 11px; }
  }
</style>

<div id="thr-form-wrap">
  <h2>Start Your Hair Restoration Journey</h2>
  <p class="thr-sub">Fill out our evaluation form and book a free consultation</p>

  <div class="thr-progress" id="thrProgress"></div>

  <form id="thrForm">

    <!-- Step 1: Gender -->
    <div class="thr-step active" data-step="0">
      <div class="thr-q-label">What is your Gender?<span class="req">*</span></div>
      <div class="thr-options thr-cols-2" data-field="gender">
        <div class="thr-card" data-value="Male">
          <img src="/wp-content/uploads/2026/06/Male.png" alt="Male">
          <div class="thr-card-label thr-card-label-pill">Male</div>
        </div>
        <div class="thr-card" data-value="Female">
          <img src="/wp-content/uploads/2026/06/Female.png" alt="Female">
          <div class="thr-card-label thr-card-label-pill">Female</div>
        </div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 2: Hair loss duration -->
    <div class="thr-step" data-step="1">
      <div class="thr-q-label">How long have you been experiencing hair loss?<span class="req">*</span></div>
      <div class="thr-list" data-field="hair_loss_duration">
        <div class="thr-list-item" data-value="Less than a year">Less than a year</div>
        <div class="thr-list-item" data-value="1-3 years">1-3 years</div>
        <div class="thr-list-item" data-value="More than 3 years">More than 3 years</div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 3: Baldness level -->
    <div class="thr-step" data-step="2">
      <div class="thr-q-label">What level of baldness are you experiencing?<span class="req">*</span></div>
      <div class="thr-options thr-cols-4" data-field="baldness_level">
        <div class="thr-card" data-value="1"><img src="/wp-content/uploads/2026/06/baldness-1.png" alt="Level 1"><div class="thr-card-label">1</div></div>
        <div class="thr-card" data-value="2"><img src="/wp-content/uploads/2026/06/baldness-2.png" alt="Level 2"><div class="thr-card-label">2</div></div>
        <div class="thr-card" data-value="3"><img src="/wp-content/uploads/2026/06/baldness-3.png" alt="Level 3"><div class="thr-card-label">3</div></div>
        <div class="thr-card" data-value="4"><img src="/wp-content/uploads/2026/06/baldness-4.png" alt="Level 4"><div class="thr-card-label">4</div></div>
        <div class="thr-card" data-value="5"><img src="/wp-content/uploads/2026/06/baldness-5.png" alt="Level 5"><div class="thr-card-label">5</div></div>
        <div class="thr-card" data-value="6"><img src="/wp-content/uploads/2026/06/baldness-6.png" alt="Level 6"><div class="thr-card-label">6</div></div>
        <div class="thr-card" data-value="7"><img src="/wp-content/uploads/2026/06/baldness-7.png" alt="Level 7"><div class="thr-card-label">7</div></div>
        <div class="thr-card" data-value="8"><img src="/wp-content/uploads/2026/06/baldness-8.png" alt="Level 8"><div class="thr-card-label">8</div></div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 4: Hair colour -->
    <div class="thr-step" data-step="3">
      <div class="thr-q-label">What colour is your hair?<span class="req">*</span></div>
      <div class="thr-list" data-field="hair_colour">
        <div class="thr-list-item" data-value="Black">Black</div>
        <div class="thr-list-item" data-value="Brown">Brown</div>
        <div class="thr-list-item" data-value="Blonde">Blonde</div>
        <div class="thr-list-item" data-value="Red">Red</div>
        <div class="thr-list-item" data-value="Grey">Grey</div>
        <div class="thr-list-item" data-value="Other">Other</div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 5: Hair transplant before -->
    <div class="thr-step" data-step="4">
      <div class="thr-q-label">Have you had a hair transplant before?<span class="req">*</span></div>
      <div class="thr-list" data-field="transplant_before">
        <div class="thr-list-item" data-value="Yes">Yes</div>
        <div class="thr-list-item" data-value="No">No</div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 6: Timing -->
    <div class="thr-step" data-step="5">
      <div class="thr-q-label">When would you like to come see us?<span class="req">*</span></div>
      <div class="thr-list" data-field="availability">
        <div class="thr-list-item" data-value="In the next week">In the next week</div>
        <div class="thr-list-item" data-value="In the next month">In the next month</div>
        <div class="thr-list-item" data-value="Just researching for now">Just researching for now</div>
      </div>
      <div class="thr-error">Please select an option to continue.</div>
    </div>

    <!-- Step 7: Contact details -->
    <div class="thr-step" data-step="6">
      <div class="thr-q-label">Almost done — where should we send your consultation details?</div>
      <label class="thr-input-label">First Name<span class="req">*</span></label>
      <input class="thr-input" type="text" id="thrFirstName" required>
      <label class="thr-input-label">Last Name<span class="req">*</span></label>
      <input class="thr-input" type="text" id="thrLastName" required>
      <label class="thr-input-label">Email<span class="req">*</span></label>
      <input class="thr-input" type="email" id="thrEmail" required>
      <label class="thr-input-label">Phone</label>
      <input class="thr-input" type="tel" id="thrPhone">
      <div class="thr-error">Please fill in your name and a valid email.</div>
    </div>

    <!-- Success state -->
    <div class="thr-step" data-step="7">
      <div class="thr-success">
        <h3>Thanks, you're all set.</h3>
        <p>A member of our team will be in touch shortly to confirm your free consultation.</p>
      </div>
    </div>

    <div class="thr-nav" id="thrNav">
      <button type="button" class="thr-btn thr-btn-text" id="thrBack">Back</button>
      <button type="button" class="thr-btn thr-btn-primary" id="thrNext">Next</button>
    </div>
  </form>
</div>

<script>
(function () {
  // ---- CONFIG: set these two values from your HubSpot form ----
  var HUBSPOT_PORTAL_ID = '47830976"';
  var HUBSPOT_FORM_GUID = '12054379-dea2-4651-849f-6c03598a6cff';
  // ----------------------------------------------------------------

  var wrap = document.getElementById('thr-form-wrap');
  var steps = wrap.querySelectorAll('.thr-step');
  var totalSteps = steps.length - 1; // last "step" is the success screen
  var current = 0;
  var answers = {};

  var progressEl = document.getElementById('thrProgress');
  for (var i = 0; i < totalSteps; i++) {
    var bar = document.createElement('span');
    progressEl.appendChild(bar);
  }

  function updateProgress() {
    var bars = progressEl.querySelectorAll('span');
    bars.forEach(function (b, idx) {
      b.classList.toggle('done', idx <= current);
    });
  }

  function showStep(idx) {
    steps.forEach(function (s) {
      s.classList.toggle('active', parseInt(s.dataset.step, 10) === idx);
    });
    var nav = document.getElementById('thrNav');
    var backBtn = document.getElementById('thrBack');
    var nextBtn = document.getElementById('thrNext');
    backBtn.style.visibility = idx === 0 ? 'hidden' : 'visible';
    if (idx === totalSteps) {
      nav.style.display = 'none';
    } else {
      nav.style.display = 'flex';
      nextBtn.textContent = idx === totalSteps - 1 ? 'Submit' : 'Next';
    }
    updateProgress();
  }

  // Click handling for card / list options
  wrap.addEventListener('click', function (e) {
    var card = e.target.closest('.thr-card, .thr-list-item');
    if (!card) return;
    var group = card.parentElement;
    group.querySelectorAll('.thr-card, .thr-list-item').forEach(function (c) {
      c.classList.remove('selected');
    });
    card.classList.add('selected');
    var field = group.dataset.field;
    answers[field] = card.dataset.value;
    hideError(card.closest('.thr-step'));
  });

  function hideError(stepEl) {
    var err = stepEl.querySelector('.thr-error');
    if (err) err.style.display = 'none';
  }
  function showError(stepEl) {
    var err = stepEl.querySelector('.thr-error');
    if (err) err.style.display = 'block';
  }

  function validateStep(idx) {
    var stepEl = wrap.querySelector('.thr-step[data-step="' + idx + '"]');
    var group = stepEl.querySelector('[data-field]');
    if (group) {
      var field = group.dataset.field;
      if (!answers[field]) { showError(stepEl); return false; }
      return true;
    }
    // contact details step
    if (idx === totalSteps - 1) {
      var fn = document.getElementById('thrFirstName').value.trim();
      var ln = document.getElementById('thrLastName').value.trim();
      var em = document.getElementById('thrEmail').value.trim();
      var validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em);
      if (!fn || !ln || !validEmail) { showError(stepEl); return false; }
      answers.first_name = fn;
      answers.last_name = ln;
      answers.email = em;
      answers.phone = document.getElementById('thrPhone').value.trim();
      return true;
    }
    return true;
  }

  document.getElementById('thrNext').addEventListener('click', function () {
    if (!validateStep(current)) return;

    if (current === totalSteps - 1) {
      submitToHubSpot();
      return;
    }
    current++;
    showStep(current);
  });

  document.getElementById('thrBack').addEventListener('click', function () {
    if (current === 0) return;
    current--;
    showStep(current);
  });

  function submitToHubSpot() {
    var nextBtn = document.getElementById('thrNext');
    nextBtn.disabled = true;
    nextBtn.textContent = 'Sending…';

    var payload = {
      fields: [
        { name: 'firstname', value: answers.first_name },
        { name: 'lastname', value: answers.last_name },
        { name: 'email', value: answers.email },
        { name: 'phone', value: answers.phone || '' },
        { name: 'what_is_your_gender', value: answers.gender || '' },
        { name: 'how_long_have_you_been_experiencing_hair_loss', value: answers.hair_loss_duration || '' },
        { name: 'what_level_of_baldness_are_you_experiencing', value: answers.baldness_level || '' },
        { name: 'what_colour_is_your_hair', value: answers.hair_colour || '' },
        { name: 'have_you_had_a_hair_transplant_before', value: answers.transplant_before || '' },
        { name: 'when_would_you_like_to_come_see_us', value: answers.availability || '' }
      ],
      context: {
        pageUri: window.location.href,
        pageName: document.title
      }
    };

    fetch('https://api.hsforms.com/submissions/v3/integration/submit/' + HUBSPOT_PORTAL_ID + '/' + HUBSPOT_FORM_GUID, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    })
      .then(function (res) { return res.json(); })
      .then(function () {
        current = totalSteps;
        showStep(current);
      })
      .catch(function (err) {
        console.error('HubSpot submission failed', err);
        nextBtn.disabled = false;
        nextBtn.textContent = 'Submit';
        alert('Something went wrong sending your details. Please try again.');
      });
  }

  showStep(0);
})();
</script>/* End custom CSS */