{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

{%- liquid
  assign show_full_width_header = false
  if section.settings.desktop_image != blank and section.settings.header_full_width
    assign show_full_width_header = true
  endif
  assign show_full_width_button = false
  if section.settings.show_button and section.settings.button_full_width
    assign show_full_width_button = true
  endif
%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    --color-foreground: {{ section.settings.custom_colors_text }};
    --accent-color: {{ section.settings.custom_colors_accent }};
    --color-button: {{ section.settings.custom_colors_solid_button_background }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text }};
  }

  #TimelineResultsV3-{{ section.id }} {
    position: relative;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 100%;
    position: relative;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: 40px;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header .heading {
    letter-spacing: var(--letter-spacing-heading);
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header .heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header .subheading {
    margin-top: 15px;
    opacity: 0.8;
    letter-spacing: var(--letter-spacing-body);
  }

  {% if section.settings.enable_gradient %}
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header .heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  @media screen and (max-width: 749px) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header {
      text-align: {{ section.settings.heading_alignment_mobile }};
      margin-bottom: 30px;
    }
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__header--full-width {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-mobile-above {
    width: 100%;
    margin-bottom: 30px;
    display: none;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-mobile-above img {
    width: 100%;
    height: auto;
    border-radius: {{ section.settings.image_border_radius }}px;
  }

  @media screen and (max-width: 749px) {
    {% if section.settings.mobile_image_above_timeline %}
      #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-mobile-above {
        display: block !important;
      }

      #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-column {
        display: none !important;
      }
    {% endif %}
  }

  @media screen and (min-width: 750px) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__container {
      flex-direction: {% if section.settings.image_position == 'left' %}row-reverse{% else %}row{% endif %};
      align-items: center;
      gap: 60px;
      {% if section.settings.desktop_image != blank %}
        max-width: 100%;
      {% else %}
        max-width: {{ section.settings.max_container_width }}px;
        margin: 0 auto;
      {% endif %}
    }

    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-mobile-above {
      display: none !important;
    }

    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__content {
      {% if section.settings.desktop_image != blank %}
        flex: 0 0 {{ section.settings.text_column_width }}%;
        max-width: {{ section.settings.text_column_width }}%;
      {% else %}
        flex: 1;
      {% endif %}
      min-width: 0;
    }

    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image-column {
      flex: 0 0 {{ section.settings.image_column_width }}%;
      max-width: {{ section.settings.image_column_width }}%;
    }
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__image {
    width: 100%;
    height: auto;
    border-radius: {{ section.settings.image_border_radius }}px;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__timeline {
    position: relative;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: {{ section.settings.timeline_width }}px;
    background: {{ section.settings.timeline_color }};
    border-radius: {{ section.settings.timeline_border_radius }}px;
  }

  @media screen and (min-width: 750px) {
    {% if section.settings.show_button and show_full_width_button == false %}
      #TimelineResultsV3-{{ section.id }} .timeline-results-v3__timeline::before {
        bottom: 100px;
      }
    {% endif %}
  }

  #TimelineResultsV3-{{ section.id }} .timeline-fill {
    position: absolute;
    left: 15px;
    top: 30px;
    width: {{ section.settings.timeline_width }}px;
    background: {{ section.settings.active_timeline_color }};
    border-radius: {{ section.settings.timeline_border_radius }}px;
    height: 0%;
    transition: height 0.3s ease-out;
    z-index: 2;
    transform-origin: top;
    pointer-events: none;
    overflow: hidden;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item {
    position: relative;
    margin-bottom: {{ section.settings.item_spacing_desktop }}px;
    padding-left: 50px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item.fade-out {
    opacity: 0;
    transform: translateY(30px);
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item:last-child {
    margin-bottom: 0;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: {{ section.settings.circle_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__circle .material-symbols-outlined {
    font-size: 16px;
    color: {{ section.settings.circle_icon_color }} !important;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__circle img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__circle svg {
    width: 16px;
    height: 16px;
    fill: {{ section.settings.circle_icon_color }} !important;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__badge {
    display: inline-block;
    background: {{ section.settings.badge_background }};
    color: {{ section.settings.badge_text_color }};
    padding: 4px 12px;
    border-radius: {{ section.settings.badge_border_radius }}px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: var(--letter-spacing-body);
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__title {
    font-weight: var(--font-weight-bold);
    margin: 0 0 8px;
    letter-spacing: var(--letter-spacing-heading);
    line-height: 1.3;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__description {
    line-height: 1.6;
    opacity: 0.9;
    letter-spacing: var(--letter-spacing-body);
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__bullets li {
    position: relative;
    padding-left: {{ section.settings.bullet_icon_size | plus: 8 }}px;
    font-size: {{ section.settings.bullet_font_size }}px;
    line-height: 1.4;
    margin-bottom: {{ section.settings.bullet_spacing }}px;
    letter-spacing: var(--letter-spacing-body);
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__bullets li:last-child {
    margin-bottom: 0;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: {{ section.settings.bullet_icon_size }}px;
    height: {{ section.settings.bullet_icon_size }}px;
    {% if section.settings.bullet_icon != blank %}
      background-image: url('{{ section.settings.bullet_icon | image_url: width: 60 }}');
    {% endif %}
    background-size: contain;
    background-repeat: no-repeat;
    {% if section.settings.bullet_icon == blank %}
      background-image: none;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: {{ section.settings.circle_color }};
      top: 7px;
    {% endif %}
  }

  @media screen and (max-width: 749px) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__timeline::before {
      left: 15px;
      top: 25px;
    }

    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__item {
      margin-bottom: {{ section.settings.item_spacing_mobile }}px;
    }
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-container {
    text-align: center;
    margin-top: 20px;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__cta-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;

    {% if section.settings.use_global_button_style %}
      padding: var(--global-button-padding-y, 12px) 24px;
      font-size: var(--global-button-font-size, 16px);
      font-weight: var(--global-button-font-weight, 600);
      font-family: var(--global-button-font-family, var(--font-body-family, sans-serif));
      text-transform: var(--global-button-text-transform, uppercase);
      letter-spacing: var(--global-button-letter-spacing, 1px);
      border-radius: var(--global-button-radius, 8px);
      background-color: var(--global-button-bg-color, rgb(var(--color-button)));
      color: var(--global-button-text-color, rgb(var(--color-button-text)));
    {% else %}
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-radius: {{ section.settings.button_border_radius }}px;
      background-color: {{ section.settings.button_background_color }};
      color: {{ section.settings.button_text_color }};
    {% endif %}
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    {% unless section.settings.use_global_button_style %}
      background-color: {{ section.settings.button_hover_background_color }};
      color: {{ section.settings.button_hover_text_color }};
    {% endunless %}
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-mobile {
    display: none;
  }

  #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-desktop-full {
    display: none;
  }

  @media screen and (max-width: 749px) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-desktop {
      display: none;
    }

    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-mobile {
      display: block;
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 750px) {
    #TimelineResultsV3-{{ section.id }} .timeline-results-v3__button-desktop-full {
      display: block;
      margin-top: 40px;
    }
  }
{%- endstyle -%}

<div
  id="TimelineResultsV3-{{ section.id }}"
  class="timeline-results-v3 content-for-grouping animate-section{% unless request.design_mode %} animate--hidden{% endunless %} color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient {{ section.settings.visibility }} section-{{ section.id }}-margin"
  data-section-id="{{ section.id }}"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding">
    {% if show_full_width_header and section.settings.heading != blank or show_full_width_header and section.settings.subheading != blank %}
      <div class="timeline-results-v3__header timeline-results-v3__header--full-width animate-item{% unless request.design_mode %} animate-item--child{% endunless %} index-0">
        {% if section.settings.heading != blank %}
          <h2
            class="{{ section.settings.heading_size }} title-with-highlight heading"
            style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text:{{ section.settings.title_gradient_background }};"
          >
            {{ section.settings.heading }}
          </h2>
        {% endif %}
        {% if section.settings.subheading != blank %}
          <div class="subheading rte">{{ section.settings.subheading }}</div>
        {% endif %}
      </div>
    {% endif %}
    <div class="timeline-results-v3__container">
      <div class="timeline-results-v3__content animate-item{% unless request.design_mode %} animate-item--child{% endunless %} index-0">
        {% unless show_full_width_header %}
          {% if section.settings.heading != blank or section.settings.subheading != blank %}
            <div class="timeline-results-v3__header">
              {% if section.settings.heading != blank %}
                <h2
                  class="{{ section.settings.heading_size }} title-with-highlight heading"
                  style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text:{{ section.settings.title_gradient_background }};"
                >
                  {{ section.settings.heading }}
                </h2>
              {% endif %}
              {% if section.settings.subheading != blank %}
                <div class="subheading rte">{{ section.settings.subheading }}</div>
              {% endif %}
            </div>
          {% endif %}
        {% endunless %}

        {% if section.settings.mobile_image_above_timeline and section.settings.desktop_image != blank %}
          <div class="timeline-results-v3__image-mobile-above">
            <img
              src="{{ section.settings.desktop_image | image_url: width: 600 }}"
              alt="{{ section.settings.desktop_image.alt | escape }}"
              class="timeline-results-v3__image"
              loading="lazy"
              width="{{ section.settings.desktop_image.width }}"
              height="{{ section.settings.desktop_image.height }}"
            >
          </div>
        {% endif %}

        <div class="timeline-results-v3__timeline">
          <div class="timeline-fill"></div>
          {%- for block in section.blocks -%}
            <div
              class="timeline-results-v3__item animate-item{% unless request.design_mode %} animate-item--child{% endunless %} index-{{ forloop.index }}"
              {{ block.shopify_attributes }}
            >
              <div class="timeline-results-v3__circle">
                {%- if section.settings.show_step_icons -%}
                  {%- if block.settings.custom_icon_image != blank -%}
                    <img
                      src="{{ block.settings.custom_icon_image | image_url: width: 60 }}"
                      {% if block.settings.custom_icon_image.alt != blank %}
                        alt="{{ block.settings.custom_icon_image.alt | escape }}"
                      {% else %}
                        role="presentation"
                      {% endif %}
                      height="16"
                      width="16"
                      loading="lazy"
                    >
                  {%- else -%}
                    {% render 'material-icon', icon: block.settings.icon, filled: block.settings.filled_icon %}
                  {%- endif -%}
                {%- else -%}
                  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"/>
                  </svg>
                {%- endif -%}
              </div>

              {% if block.settings.badge_text != blank and section.settings.show_badges %}
                <div class="timeline-results-v3__badge">{{ block.settings.badge_text }}</div>
              {% endif %}

              {% if block.settings.title != blank %}
                <h3 class="timeline-results-v3__title">{{ block.settings.title }}</h3>
              {% endif %}

              {% if block.settings.description_position == 'above' and block.settings.description != blank %}
                <div
                  class="timeline-results-v3__description rte"
                  style="margin-bottom: {{ block.settings.description_margin }}px;"
                >
                  {{ block.settings.description }}
                </div>
              {% endif %}

              {% unless block.settings.bullets == blank %}
                <ul class="timeline-results-v3__bullets">
                  {%- assign bullet_lines = block.settings.bullets | newline_to_br | split: '<br />' -%}
                  {%- for line in bullet_lines -%}
                    {%- assign trimmed_line = line | strip -%}
                    {%- unless trimmed_line == blank -%}
                      <li>{{ trimmed_line }}</li>
                    {%- endunless -%}
                  {%- endfor -%}
                </ul>
              {% endunless %}

              {% if block.settings.description_position == 'below' and block.settings.description != blank %}
                <div
                  class="timeline-results-v3__description rte"
                  style="margin-top: {{ block.settings.description_margin }}px;"
                >
                  {{ block.settings.description }}
                </div>
              {% endif %}
            </div>
          {%- endfor -%}

          {% if section.settings.show_button and show_full_width_button == false %}
            <div class="timeline-results-v3__button-container timeline-results-v3__button-desktop">
              {%- liquid
                assign button_href = '#'
                assign button_data_attrs = ''
                case section.settings.button_action_type
                  when 'product'
                    if section.settings.redirect_product != blank
                      assign button_href = section.settings.redirect_product.url
                    endif
                  when 'scroll_top'
                    assign button_data_attrs = 'data-scroll-to-top="true"'
                  when 'url'
                    if section.settings.custom_url != blank
                      assign button_href = section.settings.custom_url
                    endif
                endcase
              -%}
              <a href="{{ button_href }}" class="timeline-results-v3__cta-button" {{ button_data_attrs }}>
                {{ section.settings.button_text }}
              </a>
            </div>
          {% endif %}
        </div>
      </div>

      {% if section.settings.desktop_image != blank %}
        <div class="timeline-results-v3__image-column animate-item{% unless request.design_mode %} animate-item--child{% endunless %} index-1">
          <img
            src="{{ section.settings.desktop_image | image_url: width: 600 }}"
            alt="{{ section.settings.desktop_image.alt | escape }}"
            class="timeline-results-v3__image"
            loading="lazy"
            width="{{ section.settings.desktop_image.width }}"
            height="{{ section.settings.desktop_image.height }}"
          >
        </div>
      {% endif %}
    </div>

    {% if section.settings.show_button and show_full_width_button %}
      <div class="timeline-results-v3__button-container timeline-results-v3__button-desktop-full">
        {%- liquid
          assign button_href = '#'
          assign button_data_attrs = ''
          case section.settings.button_action_type
            when 'product'
              if section.settings.redirect_product != blank
                assign button_href = section.settings.redirect_product.url
              endif
            when 'scroll_top'
              assign button_data_attrs = 'data-scroll-to-top="true"'
            when 'url'
              if section.settings.custom_url != blank
                assign button_href = section.settings.custom_url
              endif
          endcase
        -%}
        <a href="{{ button_href }}" class="timeline-results-v3__cta-button" {{ button_data_attrs }}>
          {{ section.settings.button_text }}
        </a>
      </div>
    {% endif %}

    {% if section.settings.show_button %}
      <div class="timeline-results-v3__button-container timeline-results-v3__button-mobile">
        {%- liquid
          assign button_href = '#'
          assign button_data_attrs = ''
          case section.settings.button_action_type
            when 'product'
              if section.settings.redirect_product != blank
                assign button_href = section.settings.redirect_product.url
              endif
            when 'scroll_top'
              assign button_data_attrs = 'data-scroll-to-top="true"'
            when 'url'
              if section.settings.custom_url != blank
                assign button_href = section.settings.custom_url
              endif
          endcase
        -%}
        <a href="{{ button_href }}" class="timeline-results-v3__cta-button" {{ button_data_attrs }}>
          {{ section.settings.button_text }}
        </a>
      </div>
    {% endif %}
  </div>
</div>

<script>
  (function () {
    var sectionId = '{{ section.id }}';

    function init(root) {
      var section = root.querySelector('#TimelineResultsV3-' + sectionId);
      if (!section) return;

      section.querySelectorAll('.timeline-results-v3__cta-button').forEach(function (button) {
        if (button.getAttribute('href') === '#' && !button.hasAttribute('data-scroll-to-top')) {
          button.addEventListener('click', function (e) {
            e.preventDefault();
          });
        }
        if (button.hasAttribute('data-scroll-to-top')) {
          button.addEventListener('click', function (e) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
          });
        }
      });

      var timelineFill = section.querySelector('.timeline-fill');
      var items = section.querySelectorAll('.timeline-results-v3__item');
      if (!timelineFill || items.length === 0) return;

      function updateFill() {
        var rect = section.getBoundingClientRect();
        var viewportHeight = window.innerHeight;

        if (rect.bottom < 0 || rect.top > viewportHeight) {
          timelineFill.style.height = '0%';
          return;
        }

        var lastItem = items[items.length - 1];
        var lastItemBottom = lastItem.getBoundingClientRect().bottom;
        var visibleTop = Math.max(0, -rect.top);
        var itemsHeight = lastItemBottom - rect.top;
        var progress = itemsHeight > 0 ? Math.min(1, visibleTop / (itemsHeight * 0.8)) : 0;
        progress = Math.max(0, Math.min(1, progress));

        timelineFill.style.height = (progress * 100) + '%';
      }

      var ticking = false;
      function onScroll() {
        if (!ticking) {
          requestAnimationFrame(function () {
            updateFill();
            ticking = false;
          });
          ticking = true;
        }
      }

      updateFill();
      window.addEventListener('scroll', onScroll);
      window.addEventListener('resize', updateFill);

      if ('IntersectionObserver' in window) {
        var observer = new IntersectionObserver(
          function (entries) {
            entries.forEach(function (entry) {
              if (entry.isIntersecting) {
                entry.target.classList.remove('fade-out');
                entry.target.classList.add('animate-in');
              } else {
                entry.target.classList.remove('animate-in');
                entry.target.classList.add('fade-out');
              }
            });
          },
          { threshold: 0.2, rootMargin: '0px 0px -100px 0px' }
        );

        items.forEach(function (item, index) {
          item.classList.add('fade-out');
          item.style.transitionDelay = (index * 0.1) + 's';
          observer.observe(item);
        });
      }
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function () { init(document); });
    } else {
      init(document);
    }

    document.addEventListener('shopify:section:load', function (event) {
      if (event.target.id === 'shopify-section-' + sectionId) {
        init(event.target);
      }
    });
  })();
</script>

{% schema %}
{
  "name": "Timeline results V3",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "Your Results <strong>Timeline</strong>",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color. Italicize words to apply the italic styling below."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Desktop heading alignment"
    },
    {
      "type": "select",
      "id": "heading_alignment_mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Mobile heading alignment"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#4CAF50"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid highlight color with a gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #4CAF50 0%, #8BC34A 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Controls how italic text (*text*) is displayed in the heading"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic text style",
      "options": [
        { "value": "italic", "label": "Normal italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom font family" }
      ],
      "default": "italic"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#4CAF50",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 2,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic text font family",
      "options": [
        { "value": "inherit", "label": "Default (inherit)" },
        { "value": "serif", "label": "Serif" },
        { "value": "instrument-serif", "label": "Instrument Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "serif",
      "info": "Used when 'Custom font family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "Enter the exact Google Font family name (e.g. 'Playfair Display'). Browse fonts at fonts.google.com"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic text font weight",
      "options": [
        { "value": "inherit", "label": "Default (inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit"
    },
    {
      "type": "richtext",
      "id": "subheading",
      "default": "<p>Follow your progress and see what's ahead on your path to success</p>",
      "label": "Subheading"
    },
    {
      "type": "header",
      "content": "Side Image"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop image"
    },
    {
      "type": "checkbox",
      "id": "header_full_width",
      "label": "Center heading & subheading above both columns",
      "default": true,
      "info": "When off, the heading and subheading sit above the timeline steps only (left column). When on, they span the full section width, centered above the timeline and image. Only applies when a desktop image is added.",
      "visible_if": "{{ section.settings.desktop_image != blank }}"
    },
    {
      "type": "select",
      "id": "image_position",
      "options": [
        { "value": "left", "label": "Left (Image left, Text right)" },
        { "value": "right", "label": "Right (Image right, Text left)" }
      ],
      "default": "right",
      "label": "Layout position"
    },
    {
      "type": "range",
      "id": "image_column_width",
      "min": 25,
      "max": 50,
      "step": 5,
      "default": 40,
      "label": "Image column width (%)",
      "visible_if": "{{ section.settings.desktop_image != blank }}"
    },
    {
      "type": "range",
      "id": "text_column_width",
      "min": 30,
      "max": 50,
      "step": 5,
      "default": 50,
      "label": "Text column width (%)",
      "visible_if": "{{ section.settings.desktop_image != blank }}"
    },
    {
      "type": "checkbox",
      "id": "mobile_image_above_timeline",
      "default": false,
      "label": "Show image above timeline on mobile",
      "visible_if": "{{ section.settings.desktop_image != blank }}"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "default": 8,
      "label": "Image border radius"
    },
    {
      "type": "header",
      "content": "Timeline Design"
    },
    {
      "type": "range",
      "id": "timeline_width",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 2,
      "label": "Timeline width (px)"
    },
    {
      "type": "range",
      "id": "timeline_border_radius",
      "min": 0,
      "max": 10,
      "step": 1,
      "default": 2,
      "label": "Timeline border radius"
    },
    {
      "type": "color",
      "id": "timeline_color",
      "default": "#E0E0E0",
      "label": "Timeline line color"
    },
    {
      "type": "color",
      "id": "active_timeline_color",
      "default": "#4CAF50",
      "label": "Active timeline fill color",
      "info": "Color of the line that fills as you scroll down"
    },
    {
      "type": "color",
      "id": "circle_color",
      "default": "#4CAF50",
      "label": "Circle background color"
    },
    {
      "type": "checkbox",
      "id": "show_step_icons",
      "default": false,
      "label": "Show step icons",
      "info": "When disabled, circles display as a plain ring instead of an icon. Icons are customized individually in each Timeline Step block."
    },
    {
      "type": "color",
      "id": "circle_icon_color",
      "default": "#FFFFFF",
      "label": "Circle icon color",
      "info": "Also controls the ring color when step icons are disabled."
    },
    {
      "type": "range",
      "id": "item_spacing_desktop",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 40,
      "label": "Desktop item spacing (px)"
    },
    {
      "type": "range",
      "id": "item_spacing_mobile",
      "min": 0,
      "max": 50,
      "step": 5,
      "default": 30,
      "label": "Mobile item spacing (px)"
    },
    {
      "type": "header",
      "content": "Bullet List Style"
    },
    {
      "type": "image_picker",
      "id": "bullet_icon",
      "label": "Bullet icon",
      "info": "If empty, a colored dot is used."
    },
    {
      "type": "range",
      "id": "bullet_icon_size",
      "min": 10,
      "max": 28,
      "step": 2,
      "unit": "px",
      "default": 18,
      "label": "Bullet icon size"
    },
    {
      "type": "range",
      "id": "bullet_font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14,
      "label": "Bullet font size"
    },
    {
      "type": "range",
      "id": "bullet_spacing",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "default": 10,
      "label": "Spacing between bullets"
    },
    {
      "type": "header",
      "content": "Badges"
    },
    {
      "type": "checkbox",
      "id": "show_badges",
      "default": true,
      "label": "Show badges"
    },
    {
      "type": "color",
      "id": "badge_background",
      "default": "#4CAF50",
      "label": "Badge background color",
      "visible_if": "{{ section.settings.show_badges }}"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "default": "#FFFFFF",
      "label": "Badge text color",
      "visible_if": "{{ section.settings.show_badges }}"
    },
    {
      "type": "range",
      "id": "badge_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 50,
      "label": "Badge border radius (px)",
      "visible_if": "{{ section.settings.show_badges }}"
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "checkbox",
      "id": "show_button",
      "label": "Show button",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "button_full_width",
      "label": "Center button below both columns",
      "default": true,
      "info": "When on, the button spans the full section width below the timeline and image, centered like the heading. When off, it sits inline below the timeline steps only.",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "GET STARTED",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "select",
      "id": "button_action_type",
      "label": "Button action",
      "options": [
        { "value": "product", "label": "Redirect to product page" },
        { "value": "scroll_top", "label": "Scroll to top of page" },
        { "value": "url", "label": "Custom URL" }
      ],
      "default": "scroll_top",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "product",
      "id": "redirect_product",
      "label": "Product to redirect to",
      "info": "Only used when Button action is set to \"Redirect to product page\". Requires Show button to be enabled."
    },
    {
      "type": "url",
      "id": "custom_url",
      "label": "Custom URL",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "checkbox",
      "id": "use_global_button_style",
      "label": "Use global button styling",
      "default": true,
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Button border radius",
      "default": 8,
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "color",
      "id": "button_background_color",
      "label": "Button background color",
      "default": "#000000",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#FFFFFF",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "color",
      "id": "button_hover_background_color",
      "label": "Button hover background color",
      "default": "#FFFFFF",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "color",
      "id": "button_hover_text_color",
      "label": "Button hover text color",
      "default": "#000000",
      "visible_if": "{{ section.settings.show_button }}"
    },
    {
      "type": "header",
      "content": "Color Scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "max_container_width",
      "min": 200,
      "max": 1400,
      "step": 100,
      "default": 1200,
      "label": "Max container width (px)",
      "info": "Only applies to desktop when no side image is set"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 72
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 72
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#121212",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_accent",
      "default": "#4CAF50",
      "label": "Accent"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#000000",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#FFFFFF",
      "label": "Solid button label"
    }
  ],
  "blocks": [
    {
      "type": "timeline_step",
      "name": "Timeline Step",
      "settings": [
        {
          "type": "text",
          "id": "badge_text",
          "default": "Phase 1",
          "label": "Badge text"
        },
        {
          "type": "text",
          "id": "title",
          "default": "GETTING STARTED",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "description",
          "default": "<p>Begin your journey with our comprehensive onboarding process. Set up your account, explore key features, and get familiar with the platform.</p>",
          "label": "Description"
        },
        {
          "type": "select",
          "id": "description_position",
          "label": "Description position",
          "options": [
            { "value": "above", "label": "Above bullet points" },
            { "value": "below", "label": "Below bullet points" }
          ],
          "default": "above"
        },
        {
          "type": "range",
          "id": "description_margin",
          "label": "Description spacing",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "default": 12,
          "info": "Space between the description and bullet points."
        },
        {
          "type": "textarea",
          "id": "bullets",
          "label": "Bullet points",
          "info": "One bullet per line. Leave blank to hide."
        },
        {
          "type": "text",
          "id": "icon",
          "default": "check_circle",
          "label": "Icon",
          "info": "[View all available icons](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon",
          "default": true,
          "label": "Filled icon"
        },
        {
          "type": "image_picker",
          "id": "custom_icon_image",
          "label": "Custom icon image",
          "info": "Overrides the icon above when set."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Timeline results V3",
      "category": "Stats / Results",
      "settings": {
        "heading": "Your Results <strong>Timeline</strong>",
        "subheading": "<p>Follow your progress and see what's ahead on your path to success</p>"
      },
      "blocks": [
        {
          "type": "timeline_step",
          "settings": {
            "badge_text": "Phase 1",
            "title": "GETTING STARTED",
            "description": "<p>Begin your journey with our comprehensive onboarding process. Set up your account, explore key features, and get familiar with the platform.</p>"
          }
        },
        {
          "type": "timeline_step",
          "settings": {
            "badge_text": "Phase 2",
            "title": "BUILDING MOMENTUM",
            "description": "<p>Start implementing what you've learned. Access advanced features, customize your experience, and begin seeing initial results.</p>"
          }
        },
        {
          "type": "timeline_step",
          "settings": {
            "badge_text": "Phase 3",
            "title": "REACHING MILESTONES",
            "description": "<p>Achieve significant progress markers. Unlock premium features, optimize your workflow, and experience measurable improvements.</p>"
          }
        },
        {
          "type": "timeline_step",
          "settings": {
            "badge_text": "Phase 4",
            "title": "MASTERING SUCCESS",
            "description": "<p>Reach your full potential with expert-level capabilities. Enjoy all benefits, share your achievements, and inspire others on their journey.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}