/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'syndicate-access.css'"
Line 18:0 Unexpected "<"
Line 39:7 Expected identifier but found "%"
Line 40:8 Unexpected "{"
Line 40:9 Unexpected "{"
Line 40:15 Expected ":"
Line 42:8 Unexpected "<"
Line 78:7 Expected identifier but found "%"
... and 7 more hidden warnings

**/
{{ 'syndicate-access.css' | asset_url | stylesheet_tag }}

<div class="syndicate-access">
  <div class="syndicate-access__container">
    <div class="syndicate-access__card" id="syndicate-card">

      <header class="syndicate-access__header">
        <h1>Request Syndicate Access</h1>
        <p>The Syndicate store is available to approved operators, integrators, and partners. Complete the form below and we will review your request within 24 hours (Mon through Fri).</p>
      </header>

      <!-- Success State (hidden until JS reveals) -->
      <div id="syndicate-success" hidden class="syndicate-success" role="status" aria-live="polite">
        <h2>Request Received</h2>
        <p>We will review your access request and follow up once your eligibility is confirmed.</p>
        <div class="syndicate-success__actions">
          <a class="syndicate-btn syndicate-btn--ghost" href="{{ shop.url }}">Home</a>
          <a class="syndicate-btn syndicate-btn--ghost" href="/pages/about">About</a>
          <a class="syndicate-btn syndicate-btn--ghost" href="/pages/services">Services</a>
        </div>
      </div>

      <!-- Form for Syndicate Access -->
      {% form 'contact', id: 'syndicate-request-form', redirect: 'https://syndicate.uasnexus.com/pages/request-received' %}
        {{ form.errors | default_errors }}

        <div class="syndicate-grid">
          <div class="syndicate-field">
            <label for="contact_first_name">First Name</label>
            <input id="contact_first_name" type="text" name="contact[first_name]" required autocomplete="given-name">
          </div>

          <div class="syndicate-field">
            <label for="contact_last_name">Last Name</label>
            <input id="contact_last_name" type="text" name="contact[last_name]" required autocomplete="family-name">
          </div>

          <div class="syndicate-field syndicate-field--full">
            <label for="contact_email">Email</label>
            <input id="contact_email" type="email" name="contact[email]" required autocomplete="email" inputmode="email">
          </div>

          <div class="syndicate-field syndicate-field--full">
            <label for="contact_org">Organization / Project</label>
            <input id="contact_org" type="text" name="contact[organization]" required>
          </div>

          <div class="syndicate-field syndicate-field--full">
            <label for="contact_purpose">Use Case (what will you build or operate?)</label>
            <textarea id="contact_purpose" name="contact[purpose]" rows="5" required></textarea>
          </div>
        </div>

        <input type="hidden" name="contact[tags]" value="Syndicate Access Request, Website Form">
        <input type="hidden" name="form_name" value="syndicate-access">

        <div class="syndicate-actions">
          <button type="submit" class="syndicate-btn" id="syndicate-submit">
            <span class="syndicate-btn__label">Submit Request</span>
            <span class="syndicate-btn__spinner" aria-hidden="true"></span>
          </button>
        </div>
      {% endform %}

    </div>
  </div>
</div>

<!-- Success State Styling -->
<style>
  :root {
    --syndicate-accent: #2b78f5;
    --syndicate-accent-contrast: #ffffff;
    --syndicate-card-bg: #ffffff;
    --syndicate-page-bg: #f6f8fb;
    --syndicate-radius: 16px;
  }
  .syndicate-access { min-height: 80vh; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: var(--syndicate-page-bg); }
  .syndicate-access__container { max-width: 920px; width: 100%; }
  .syndicate-access__card { background: var(--syndicate-card-bg); border-radius: var(--syndicate-radius); box-shadow: 0 10px 30px rgba(0,0,0,.10); padding: clamp(20px, 4vw, 40px); }
  .syndicate-access__header { text-align: center; margin-bottom: 20px; }

  .syndicate-grid { margin-top: 20px; display: grid; gap: 14px; grid-template-columns: 1fr; }
  @media (min-width:720px) { .syndicate-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
  .field label { display:block; font-weight:600; margin-bottom:6px; }
  .field input, .field textarea { width:100%; border:1px solid #ddd; border-radius:10px; padding:12px 14px; font-size:16px; background:#fff; }
  .field textarea { resize: vertical; }

  .syndicate-access__actions { margin-top: 18px; display: flex; justify-content: center; }
  .syndicate-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; border:1px solid var(--syndicate-accent); background:var(--syndicate-accent); color:var(--syndicate-accent-contrast); font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,.12); }
  .syndicate-btn__spinner { display:none; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; width:16px; height:16px; animation:spin .8s linear infinite; }
  .syndicate-btn.is-loading .syndicate-btn__spinner { display:inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Minimal success state */
  .syndicate-success { text-align:center; padding: 8px 0 4px; }
  .syndicate-success h2 { margin: 0 0 10px; font-size: 1.6rem; }
  .syndicate-success p { margin: 0 0 16px; color: #333; }
  .syndicate-success__actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .syndicate-btn--ghost { background:#fff; color: var(--syndicate-accent); border-color: var(--syndicate-accent); }
</style>

{% schema %}
{
  "name": "Syndicate Access Form",
  "settings": [],
  "presets": [{ "name": "Syndicate Access Form" }]
}
{% endschema %}