{% if page.banner.i_bg_image %}
{% assign main_hero_bg = '' %}
  {% capture card_bg %}{% picture open_graph_2000 pages/{{ page.banner.i_bg_image}} %}{% endcapture %}
{% endif %}

<div class="appointment_wrapper_main" style="background-image: url('{{ site.baseurl }}{{ card_bg }}')">
  <div class="custom_container_fluid">
  <div id="appointment-wizard" class="appointment-wizard">
    <!-- Recording indicator -->
    <!-- <div id="recording-indicator" class="d-none position-absolute alert alert-success p-2 small"
      style="top: 1rem; left: 1rem; z-index: 1050;">
      <i class="fas fa-circle text-danger blink"></i> Recording... (<span id="recording-count">0</span> events)
    </div> -->

    <!-- Error message -->
    <div id="error-message" class="error-message d-none position-absolute">
      <span id="error-text" style="flex: 1 1 0%;"></span>
      <button id="error-btn" type="button" class="btn btn-link" onclick="hideError()" aria-label="Close"
        style="padding: .25rem; color: inherit; ">
        <svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none"
          stroke-linecap="round" stroke-linejoin="round" class="feather">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>

    <!-- Loading overlay -->
    <div id="loading-overlay" class="loading-overlay d-none">
      <div class="spiner_wrapper">
      <span class="sr-only">Loading...</span>
      <div class="spinner-border text-light" role="status">
      </div>
      </div>
    </div>

    <!-- Step content -->
    <div id="step-content" class="card-body p-0">
      <div id="step-1" class="appointment-step">
        {% include sections/appointment/personal-info-step.html %}
      </div>
      <div id="step-2" class="appointment-step d-none">
        {% include sections/appointment/contact-title-step.html %}
      </div>
      <div id="step-3" class="appointment-step d-none">
        {% include sections/appointment/datetime-selection-step.html %}
      </div>
      <div id="step-4" class="appointment-step d-none">
        {% include sections/appointment/confirmation-step.html %}
      </div>
    </div>
  </div>
  </div>
</div>