{%- comment -%}
  ============================================================================
  Hero ID — Verification Widget (manual embed for vintage / OS 1.0 themes)
  ============================================================================
  Use this ONLY when the theme's product page is a Liquid template
  (product.liquid) and cannot accept the "Hero ID Discount" app block through
  the theme editor ("Liquid templates don't support sections and blocks").

  HOW TO INSTALL
    1. Online Store > Themes > ... > Edit code
    2. Open the product template that renders the PDP (e.g.
       sections/product-template.liquid or templates/product.liquid)
    3. Paste this whole snippet where you want the widget to appear
       (commonly just below the Add to Cart button)
    4. Save. The widget hydrates itself on page load.

  Edit the values in the "Appearance" block to match the store's brand.
  These mirror the app block's schema defaults.
{%- endcomment -%}

{%- comment -%} ── Appearance (edit to taste) ── {%- endcomment -%}
{%- assign hero_content              = 'Active Military and Veterans qualify for discounts' -%}
{%- assign hero_button_text          = 'Get Discount' -%}
{%- assign hero_background_color     = '#ffffff' -%}
{%- assign hero_text_color           = '#000000' -%}
{%- assign hero_text_size            = 16 -%}
{%- assign hero_border_radius        = 8 -%}
{%- assign hero_button_color         = '#108043' -%}
{%- assign hero_button_text_color    = '#ffffff' -%}
{%- assign hero_button_hover_color   = '#0d6b35' -%}
{%- assign hero_button_text_size     = 16 -%}
{%- assign hero_button_padding       = 12 -%}
{%- assign hero_button_border_radius = 4 -%}

{% style %}
  /* ── Base ── */
  .hero-id-root {
    padding: 0;
    background-color: {{ hero_background_color }};
    border-radius: {{ hero_border_radius }}px;
    text-align: center;
    /* Inherit the theme's font so the widget matches the store. */
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

  .hero-id-root *,
  .hero-id-root *::before,
  .hero-id-root *::after {
    box-sizing: border-box;
  }

  /* ── Typography ── */
  .hero-id-root__content {
    color: {{ hero_text_color }};
    font-size: {{ hero_text_size }}px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .hero-id-root__heading {
    color: {{ hero_text_color }};
    font-size: {{ hero_text_size | plus: 6 }}px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 8px;
  }

  .hero-id-root__subheading {
    color: {{ hero_text_color }};
    font-size: {{ hero_text_size | plus: 2 }}px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 6px;
  }

  .hero-id-root__text {
    color: {{ hero_text_color }}cc;
    font-size: {{ hero_text_size | minus: 1 }}px;
    line-height: 1.55;
    margin: 0 0 16px;
  }

  .hero-id-root__small-text {
    color: {{ hero_text_color }}99;
    font-size: {{ hero_text_size | minus: 3 }}px;
    line-height: 1.5;
    margin: 0 0 8px;
  }

  /* ── Buttons ── */
  .hero-id-root__button {
    background-color: {{ hero_button_color }};
    color: {{ hero_button_text_color }};
    border: none;
    border-radius: {{ hero_button_border_radius | plus: 4 }}px;
    padding: {{ hero_button_padding | plus: 2 }}px {{ hero_button_padding | times: 2 }}px;
    font-size: {{ hero_button_text_size }}px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    margin-bottom: 8px;
    position: relative;
  }

  .hero-id-root__button:hover:not(:disabled) {
    background-color: {{ hero_button_hover_color }};
    box-shadow: 0 4px 14px {{ hero_button_color }}33;
    transform: translateY(-1px);
  }

  .hero-id-root__button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
  }

  .hero-id-root__button--disabled,
  .hero-id-root__button:disabled {
    background-color: #e8e8e8;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .hero-id-root__button-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: {{ hero_button_text_color }};
    border-radius: 50%;
    animation: hero-id-spinner 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }

  @keyframes hero-id-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .hero-id-root__button--secondary {
    background-color: transparent;
    color: {{ hero_button_color }};
    border: 1.5px solid {{ hero_button_color }}44;
  }

  .hero-id-root__button--secondary:hover {
    background-color: {{ hero_button_color }}08;
    border-color: {{ hero_button_color }}88;
  }

  /* ── Inputs ── */
  .hero-id-root__input {
    width: 100%;
    padding: {{ hero_button_padding }}px;
    border: 1.5px solid #d1d5db;
    border-radius: {{ hero_button_border_radius | plus: 4 }}px;
    font-size: {{ hero_text_size }}px;
    font-family: inherit;
    margin-bottom: 16px;
    transition: border-color 0.15s ease;
    color: {{ hero_text_color }};
    background: {{ hero_background_color }};
  }

  .hero-id-root__input:focus {
    outline: none;
    border-color: {{ hero_button_color }};
    box-shadow: 0 0 0 3px {{ hero_button_color }}18;
  }

  .hero-id-root__error {
    color: #dc2626;
    font-size: {{ hero_text_size | minus: 3 }}px;
    margin-top: 8px;
    line-height: 1.4;
    background: #fef2f2;
    border-radius: 6px;
    padding: 10px 14px;
    text-align: left;
  }

  /* ── Links ── */
  .hero-id-root__link {
    color: {{ hero_button_color }};
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s ease;
  }

  .hero-id-root__link:hover {
    text-decoration: underline;
    opacity: 0.85;
  }

  /* ── Options layout ── */
  .hero-id-root__options {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hero-id-root__option {
    border: 1.5px solid {{ hero_button_color }}22;
    border-radius: {{ hero_border_radius | plus: 4 }}px;
    padding: 24px;
  }

  /* ── Form ── */
  .hero-id-root__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hero-id-root__input-group {
    display: flex;
    border: 1.5px solid #d1d5db;
    border-radius: {{ hero_button_border_radius | plus: 4 }}px;
    overflow: hidden;
    transition: border-color 0.15s ease;
  }

  .hero-id-root__input-group:focus-within {
    border-color: {{ hero_button_color }};
    box-shadow: 0 0 0 3px {{ hero_button_color }}18;
  }

  .hero-id-root__input--grouped {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    flex: 1;
  }

  .hero-id-root__input--grouped:focus {
    box-shadow: none;
  }

  .hero-id-root__button--attached {
    border-radius: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    width: auto;
  }

  .hero-id-root__verified {
    border: 1.5px solid {{ hero_button_color }}22;
    border-radius: {{ hero_border_radius | plus: 4 }}px;
    padding: 24px;
    margin-bottom: 16px;
  }

  /* ── Icons ── */
  .hero-id-root__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .hero-id-root__icon--error {
    color: #dc2626;
  }

  .hero-id-root__icon--success {
    color: {{ hero_button_color }};
  }

  .hero-id-root__icon-svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
  }

  /* ── Lists ── */
  .hero-id-root__list {
    text-align: left;
    margin: 12px 0 20px;
    padding: 0;
    list-style: none;
  }

  .hero-id-root__list li {
    color: {{ hero_text_color }}cc;
    font-size: {{ hero_text_size | minus: 2 }}px;
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 22px;
    position: relative;
  }

  .hero-id-root__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: {{ hero_button_color }}66;
  }

  /* ── Actions ── */
  .hero-id-root__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
  }

  /* ── Camera / Photo ── */
  .hero-id-root__camera-container {
    margin: 16px 0;
    border-radius: {{ hero_border_radius | plus: 4 }}px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-id-root__camera-video,
  .hero-id-root__camera-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-id-root__camera-canvas {
    display: none;
  }

  /* ── Back button ── */
  .hero-id-root__back-button {
    position: absolute;
    top: 14px;
    left: 14px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: {{ hero_text_color }};
    width: auto;
    margin: 0;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }

  .hero-id-root__back-button:hover {
    background-color: {{ hero_text_color }}0a;
  }

  .hero-id-root__back-icon {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* ── Test mode ── */
  .hero-id-root__test-mode {
    border-top: 1px solid {{ hero_text_color }}12;
    padding-top: 12px;
    margin-top: 4px;
  }

  /* ── Modal ── */
  .hero-id-root__modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: hero-id-overlay-in 0.2s ease-out;
  }

  @keyframes hero-id-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hero-id-root__modal {
    background-color: {{ hero_background_color }};
    border-radius: {{ hero_border_radius | plus: 8 }}px;
    padding: 32px 28px;
    max-width: 440px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
      0 24px 48px -12px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    animation: hero-id-modal-in 0.25s ease-out;
  }

  @keyframes hero-id-modal-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .hero-id-root__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
    color: {{ hero_text_color }}88;
    width: auto;
    margin: 0;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-id-root__modal-close:hover {
    color: {{ hero_text_color }};
    background-color: {{ hero_text_color }}0a;
  }

  /* ── Scrollbar ── */
  .hero-id-root__modal::-webkit-scrollbar {
    width: 6px;
  }

  .hero-id-root__modal::-webkit-scrollbar-track {
    background: transparent;
  }

  .hero-id-root__modal::-webkit-scrollbar-thumb {
    background: {{ hero_text_color }}22;
    border-radius: 3px;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 480px) {
    .hero-id-root {
      padding: 0;
    }

    .hero-id-root__content,
    .hero-id-root__text {
      font-size: {{ hero_text_size | minus: 2 }}px;
    }

    .hero-id-root__small-text {
      font-size: {{ hero_text_size | minus: 4 }}px;
    }

    .hero-id-root__heading {
      font-size: {{ hero_text_size | plus: 4 }}px;
    }

    .hero-id-root__subheading {
      font-size: {{ hero_text_size }}px;
    }

    .hero-id-root__modal {
      width: 95%;
      padding: 24px 20px;
      border-radius: {{ hero_border_radius | plus: 4 }}px;
    }
  }
{% endstyle %}

{%- comment -%} ── Settings the widget JS reads (#hero-id-settings) ── {%- endcomment -%}
<script type="application/json" id="hero-id-settings">
  {
    "content": {{ hero_content | json }},
    "button_text": {{ hero_button_text | json }}
  }
</script>

{%- comment -%} ── Shop domain for API calls (#hero-id-shop) ── {%- endcomment -%}
<script type="application/json" id="hero-id-shop">
  { "shopDomain": {{ shop.permanent_domain | json }} }
</script>

{%- comment -%} ── Mount point (React hydrates .hero-id-root) ── {%- endcomment -%}
<div class="hero-id-root">
  <div class="hero-id-root__content">{{ hero_content }}</div>
  <button class="hero-id-root__button">{{ hero_button_text }}</button>
</div>

{%- comment -%}
  ── Widget script ──
  Hosted production bundle. Do NOT swap this for the dev bundle
  (dev-flow.hero-id.com/bundle.js) — it mocks Shopify globals and breaks the storefront.
{%- endcomment -%}
<script src="https://flow.hero-id.com/main.js" defer></script>