Tailwind CSS Subscription Plans Blocks

Subscription Plans

Subscription plan blocks for current plan status, seat usage, and upgrade flows in SaaS billing dashboards.

Current Plan Summary Card with Seat Usage and Actions Pro

Current plan summary card combines tier status, renewal timing, seat usage progress, and account actions in a compact billing panel.

Create a responsive UI block named "Current Plan Summary Card with Seat Usage and Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/billing-and-payments/subscription-plans/#current-plan-summary-card-with-seat-usage-and-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: billing-and-payments/subscription-plans
- Block ID: current-plan-summary-card-with-seat-usage-and-actions
- Source description: Current plan summary card combines tier status, renewal timing, seat usage progress, and account actions in a compact billing panel.
- Preview iframe: https://preline.co/blocks/billing-and-payments/subscription-plans/iframes/pro/current-plan-summary-card-with-seat-usage-and-actions.html (repo path: blocks/billing-and-payments/subscription-plans/iframes/pro/current-plan-summary-card-with-seat-usage-and-actions.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/plan-and-billing.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="flex flex-col bg-card border border-card-line rounded-xl">
  
  <div class="h-full p-4 md:p-6">
    <svg class="w-8.5 h-7.5 " width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/>
      <rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/>
      <rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/>
    </svg>

<div class="mt-3 grid grid-cols-2 gap-x-2">
      <div>
        <div class="flex items-center gap-x-2">
          <h2 class="text-xl font-semibold text-foreground">
            Startup
          </h2>
          <span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">
            <span class="size-1.5 inline-block bg-primary-800 rounded-full dark:bg-primary-500"></span>
            Active
          </span>
        </div>

<p class="mt-1.5 text-sm text-muted-foreground-1">
          Renews on March 25th, 2023
        </p>
      </div>

<p class="text-sm text-muted-foreground-1">
          monthly
        </p>
      </div>
      
    </div>

<div class="my-4">
      <div class="flex justify-between items-center gap-x-2 mb-1">
        <p class="font-medium text-foreground">
          Seats
        </p>
        <p class="text-sm text-muted-foreground-1">
          5 of 20 used
        </p>
      </div>
      <div class="flex w-full h-2.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 25%"></div>
      </div>
    </div>

<div class="flex justify-end items-center gap-x-2">
      <div class="hs-tooltip [--placement:auto] inline-block">
        <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/></svg>
        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 text-center py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
          Upgrade your plan to unlock the Manage Seats feature
        </span>
      </div>
      <button type="button" class="hs-tooltip-toggle py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
        Manage seats
      </button>
    </div>
  </div>

<div class="flex border-t border-card-footer divide-x divide-card-divider">
    <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-layer text-layer-foreground shadow-xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
      Cancel subscription
    </button>
    <a class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-layer text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/dashboards/admin-dashboard/plans.html">
      Upgrade plan
      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
    </a>
  </div>
  
</div>

Pricing plan grid combines a monthly or annual billing toggle, multi-tier pricing cards, and an upgrade modal flow.

Create a responsive UI block named "Pricing Plan Grid with Billing Toggle and Upgrade Modal" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/billing-and-payments/subscription-plans/#pricing-plan-grid-with-billing-toggle-and-upgrade-modal. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: billing-and-payments/subscription-plans
- Block ID: pricing-plan-grid-with-billing-toggle-and-upgrade-modal
- Source description: Pricing plan grid combines a monthly or annual billing toggle, multi-tier pricing cards, and an upgrade modal flow.
- Preview iframe: https://preline.co/blocks/billing-and-payments/subscription-plans/iframes/pro/pricing-plan-grid-with-billing-toggle-and-upgrade-modal.html (repo path: blocks/billing-and-payments/subscription-plans/iframes/pro/pricing-plan-grid-with-billing-toggle-and-upgrade-modal.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/pricing-card-grid-with-modal.html
  - partials/pro/admin-dashboard/modals/upgrade-form.html
  - partials/pro/admin-dashboard/sources/pricing-card.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/admin-dashboard/sources/upgrade-form.html

Block-specific fidelity rules:
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Layout order: centered heading `Preline Plans`, a pill-shaped radio billing toggle (`Monthly` checked on load, `Annual`), a 4-card grid (`grid sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6` in the demo), then a centered footer row `Need a custom plan?` with a bordered `Get in touch` link.
  - The `Annual` toggle label carries a decorative hand-drawn arrow SVG pointing to a `Save up to 10%` pill in `bg-primary text-primary-foreground`.
  - 4 plans in order with monthly prices: `Free` `$0`, `Startup` `$19` (the only card with a `Most popular` badge), `Pro` `$49`, `Enterprise` `$119`; every price sub-line reads `monthly, billed monthly` and each card header shows a primary-toned overlapping-circles logo SVG.
  - Prices animate with Preline's toggle-count plugin: each price element has `data-hs-toggle-count` targeting `#hs-pro-toggle-count` with min/max pairs 0/0, 19/29, 49/59, 119/129 (`text-3xl font-semibold tabular-nums`).
  - Card CTAs: disabled white buttons `Free trial` (Free) and `Current plan` (Startup); primary buttons `Upgrade to Pro` and `Upgrade to Enterprise` (Pro/Enterprise), both carrying `data-hs-overlay="#hs-pro-dutprom"`.
  - Feature lists with check icons: Free has 3 items (`5 seats`, `Plan features`, `Product support`); Startup has 4 (starts `20 seats`, adds `Email sharing`); Pro and Enterprise have 5 each (`50 seats` vs `Unlimited seats`, both ending `Activity reporting`).
  - Modal `#hs-pro-dutprom` ships with the block, hidden by default (HSOverlay, `sm:max-w-3xl`): its header pairs the circles logo with `Upgrade to PRO` plus a close button; the left form column has a payment-method toggle tab, `Billing information` inputs (placeholders `Billing email`, `Company name`, `City`, `State`, `ZIP code`, searchable country select) and `Payment information` (`Card number` with leading card icon, `Expiration`, `CVV`, note `This is a secure form`).
  - Modal right column sits on `bg-surface`: `Currency` select, `Billing period` select via `data-hs-select` (preselected `Pro (Monthly - $59 / user / month)`), summary rows `1 seat on Pro` `$59`, `Tax` `$0`, `Due today` `$59`, a primary `Pay and upgrade` button, and a cancellation/refund note; the demo loads floating-ui core+dom before the Preline script for select positioning.

<div>
                    
                    <div class="text-center mb-12">
                      <h1 class="text-2xl font-semibold text-foreground">
                        Preline Plans
                      </h1>
                    </div>

<div class="flex justify-center mb-6">
                      <div id="hs-pro-toggle-count" class="p-0.5 inline-block bg-surface rounded-full">
                        <label for="toggle-count-by-card" class="relative inline-block py-1.5 px-3.5">
                          <input id="toggle-count-by-card" name="hs-pro-toggle-count" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent" checked>
                          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default">
                            Monthly
                          </span>
                        </label>
                        <label for="toggle-count-with-paypal" class="relative inline-block py-1.5 px-3.5">
                          <input id="toggle-count-with-paypal" name="hs-pro-toggle-count" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent">
                          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default">
                            Annual
                          </span>
                          <span class="absolute -top-6 inset-s-10">
                            <span class="flex items-center -mt-5">
                              <svg class="shrink-0 -me-6 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
                                <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
                                <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
                              </svg>
                              <span class="block mt-3">
                                <span class="inline-flex items-center gap-1.5 py-1 px-2 whitespace-nowrap text-xs font-medium bg-primary text-primary-foreground rounded-full">
                                  Save up to 10%
                                </span>
                              </span>
                            </span>
                          </span>
                        </label>
                      </div>
                    </div>

<div class="grid sm:grid-cols-2  2xl:grid-cols-4 2xl:gap-6 gap-4">
                      
                      <div class="p-4 sm:p-6 bg-card border border-card-line rounded-xl">
                        <div class="flex justify-between items-center gap-x-2 mb-3">
                          <svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/></svg>
                        </div>
                        <p class="text-xl font-semibold text-foreground">
                          Free
                        </p>
                        <div class="mt-4 flex items-center gap-x-0.5">
                          <span class="text-xl font-normal text-foreground">$</span>
                          <p data-hs-toggle-count='{
                              "target": "#hs-pro-toggle-count",
                              "min": 0,
                              "max": 0
                            }' class="text-foreground font-semibold text-3xl tabular-nums">
                            0
                          </p>
                        </div>
                        <p class="mt-1 text-xs text-muted-foreground-1">
                          monthly, billed monthly
                        </p>

<div class="mt-5">
                          <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                            Free trial
                          </button>
                        </div>

<div class="p-4 sm:p-6 bg-card border border-card-line rounded-xl">
                        <div class="flex justify-between items-center gap-x-2 mb-3">
                          <svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/></svg>
                          <span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-primary-100 text-primary-800 rounded-md dark:bg-primary-500/10 dark:text-primary-500">
                            Most popular
                          </span>
                        </div>
                        <p class="text-xl font-semibold text-foreground">
                          Startup
                        </p>
                        <div class="mt-4 flex items-center gap-x-0.5">
                          <span class="text-xl font-normal text-foreground">$</span>
                          <p data-hs-toggle-count='{
                              "target": "#hs-pro-toggle-count",
                              "min": 19,
                              "max": 29
                            }' class="text-foreground font-semibold text-3xl tabular-nums">
                            19
                          </p>
                        </div>
                        <p class="mt-1 text-xs text-muted-foreground-1">
                          monthly, billed monthly
                        </p>

<div class="mt-5">
                          <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                            Current plan
                          </button>
                        </div>

<ul class="mt-5 space-y-1">
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              20 seats
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Plan features
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Product support
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Email sharing
                            </span>
                          </li>
                        </ul>
                      </div>

<div class="p-4 sm:p-6 bg-card border border-card-line rounded-xl">
                        <div class="flex justify-between items-center gap-x-2 mb-3">
                          <svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/></svg>
                        </div>
                        <p class="text-xl font-semibold text-foreground">
                          Pro
                        </p>
                        <div class="mt-4 flex items-center gap-x-0.5">
                          <span class="text-xl font-normal text-foreground">$</span>
                          <p data-hs-toggle-count='{
                              "target": "#hs-pro-toggle-count",
                              "min": 49,
                              "max": 59
                            }' class="text-foreground font-semibold text-3xl tabular-nums">
                            49
                          </p>
                        </div>
                        <p class="mt-1 text-xs text-muted-foreground-1">
                          monthly, billed monthly
                        </p>

<div class="mt-5">
                          
                          <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-dutprom" >
                            Upgrade to Pro
                          </button>
                        </div>

<ul class="mt-5 space-y-1">
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              50 seats
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Plan features
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Product support
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Email sharing
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Activity reporting
                            </span>
                          </li>
                        </ul>
                      </div>

<div class="p-4 sm:p-6 bg-card border border-card-line rounded-xl">
                        <div class="flex justify-between items-center gap-x-2 mb-3">
                          <svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-400 dark:fill-primary-700"/><rect x="14" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-600 dark:fill-primary-800"/></svg>
                        </div>
                        <p class="text-xl font-semibold text-foreground">
                          Enterprise
                        </p>
                        <div class="mt-4 flex items-center gap-x-0.5">
                          <span class="text-xl font-normal text-foreground">$</span>
                          <p data-hs-toggle-count='{
                              "target": "#hs-pro-toggle-count",
                              "min": 119,
                              "max": 129
                            }' class="text-foreground font-semibold text-3xl tabular-nums">
                            119
                          </p>
                        </div>
                        <p class="mt-1 text-xs text-muted-foreground-1">
                          monthly, billed monthly
                        </p>

<div class="mt-5">
                          
                          <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-dutprom" >
                            Upgrade to Enterprise
                          </button>
                        </div>

<ul class="mt-5 space-y-1">
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Unlimited seats
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Plan features
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Product support
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Email sharing
                            </span>
                          </li>
                          <li class="flex gap-x-2">
                            <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span class="text-sm text-foreground">
                              Activity reporting
                            </span>
                          </li>
                        </ul>
                      </div>
                      
                    </div>

<div class="mt-6 flex justify-center items-center gap-x-3">
                      <p class="text-sm text-muted-foreground-1">
                        Need a custom plan?
                      </p>
                      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                        Get in touch
                      </a>
                    </div>
                  </div>

<div id="hs-pro-dutprom" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dutprom-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                          <h2 id="hs-pro-dutprom-label" class="font-medium text-foreground">
                            <span class="inline-flex items-center gap-x-3"><svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/></svg>Upgrade to PRO</span>
                          </h2>
                          <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-dutprom">
                            <span class="sr-only">Close</span>
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                        </div>

<div id="hs-modal-upgrade-to-pro-body" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="grid grid-cols-1 sm:grid-cols-2 overflow-hidden rounded-es-xl sm:rounded-es-none rounded-ee-xl">
                            <div class="p-4 h-full">
                              <form>
                                <div class="space-y-5">
                                  
                                    <div id="payment-options" class="p-0.5 w-full inline-flex bg-surface rounded-lg">
                                      <label for="payment-options-by-card" class="relative w-full inline-flex justify-center py-2 px-4">
                                        <input id="payment-options-by-card" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" checked>
                                        <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default">
                                          Pay by Card
                                        </span>
                                      </label>
                                      <label for="payment-options-with-paypal" class="relative w-full inline-flex justify-center py-2 px-4">
                                        <input id="payment-options-with-paypal" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" disabled>
                                        <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                                          <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.6424 30.9152L11.197 27.3925L9.96162 27.3639H4.06256L8.16211 1.37005C8.17431 1.29063 8.21465 1.21823 8.27577 1.16607C8.33689 1.1139 8.41472 1.08543 8.49508 1.08586H18.4417C21.7438 1.08586 24.0227 1.773 25.2124 3.12927C25.7702 3.76551 26.1255 4.43039 26.2972 5.16208C26.4775 5.92981 26.4807 6.84707 26.3047 7.9658L26.2919 8.04745V8.76429L26.8497 9.08029C27.2755 9.29602 27.6583 9.58784 27.979 9.94134C28.4562 10.4853 28.7648 11.1767 28.8952 11.9964C29.0299 12.8394 28.9854 13.8426 28.7648 14.9783C28.5103 16.2847 28.0989 17.4225 27.5432 18.3536C27.053 19.1876 26.3938 19.91 25.608 20.4744C24.8699 20.9982 23.993 21.3959 23.0015 21.6504C22.0408 21.9007 20.9454 22.0268 19.7439 22.0268H18.9698C18.4163 22.0268 17.8786 22.2262 17.4566 22.5836C17.0352 22.9447 16.7556 23.4438 16.6677 23.9918L16.6093 24.3088L15.6295 30.5175L15.585 30.7455C15.5733 30.8176 15.5532 30.8537 15.5235 30.8781C15.4947 30.9016 15.4588 30.9147 15.4217 30.9152H10.6424Z" fill="#253B80"/>
                                            <path d="M27.3778 8.13017C27.3481 8.31998 27.3142 8.51403 27.276 8.71339C25.9643 15.4481 21.4766 17.7746 15.7451 17.7746H12.8268C12.1259 17.7746 11.5352 18.2836 11.426 18.975L9.93191 28.4508L9.5088 31.1368C9.49195 31.2434 9.49838 31.3523 9.52767 31.4561C9.55695 31.5599 9.60838 31.6562 9.67842 31.7382C9.74846 31.8202 9.83545 31.8861 9.9334 31.9313C10.0313 31.9765 10.1379 31.9999 10.2458 32H15.4217C16.0346 32 16.5552 31.5546 16.6517 30.9502L16.7026 30.6872L17.6771 24.5029L17.7397 24.1636C17.8351 23.557 18.3569 23.1116 18.9698 23.1116H19.7439C24.7586 23.1116 28.6842 21.0757 29.8316 15.184C30.3109 12.7228 30.0627 10.6677 28.7945 9.22239C28.3925 8.77528 27.9124 8.40516 27.3778 8.13017Z" fill="#179BD7"/>
                                            <path d="M26.0056 7.58299C25.5868 7.46183 25.1607 7.36727 24.7299 7.29986C23.8788 7.16905 23.0185 7.10629 22.1574 7.11217H14.3612C14.0645 7.11194 13.7776 7.21787 13.5521 7.41079C13.3267 7.60372 13.1778 7.87092 13.1322 8.1641L11.4737 18.6685L11.426 18.975C11.4777 18.6406 11.6473 18.3357 11.9043 18.1155C12.1612 17.8954 12.4885 17.7744 12.8268 17.7746H15.7451C21.4766 17.7746 25.9642 15.447 27.276 8.71339C27.3152 8.51403 27.3481 8.31998 27.3778 8.13017C27.0316 7.94865 26.6709 7.79648 26.2993 7.67525C26.2019 7.64293 26.104 7.61217 26.0056 7.58299Z" fill="#222D65"/>
                                            <path d="M13.1321 8.1641C13.1773 7.87084 13.3262 7.60351 13.5517 7.41068C13.7772 7.21785 14.0644 7.11231 14.3611 7.11323H22.1573C23.0809 7.11323 23.943 7.17368 24.7298 7.30092C25.2623 7.3846 25.7874 7.50976 26.3003 7.67525C26.6874 7.80356 27.0468 7.9552 27.3787 8.13017C27.769 5.64138 27.3756 3.94685 26.0299 2.41243C24.5464 0.7232 21.8688 0 18.4427 0H8.49601C7.79614 0 7.19913 0.508997 7.09097 1.20144L2.94795 27.4625C2.92865 27.5844 2.93599 27.7091 2.96947 27.8279C3.00294 27.9467 3.06176 28.0569 3.14187 28.1508C3.22198 28.2447 3.32149 28.3202 3.43354 28.3719C3.54559 28.4237 3.66753 28.4506 3.79097 28.4508H9.93181L11.4736 18.6685L13.1321 8.1641Z" fill="#253B80"/>
                                          </svg>
                                          Pay with PayPal
                                        </span>
                                      </label>
                                    </div>

<div class="space-y-2">
                                    <label for="hs-pro-dufbi" class="block mb-2 text-sm font-medium text-foreground">
                                      Billing information
                                    </label>

<div class="grid grid-cols-2 gap-x-2">
                                      <div>
                                        <label for="hs-pro-echddst" class="sr-only">
                                          State
                                        </label>

<div class="relative">
                                      <select  data-hs-select='{
                                          "placeholder": "Country",
                                          "hasSearch": true,
                                          "searchPlaceholder": "Country",
                                          "searchClasses": "block w-full sm:text-sm bg-transparent border-layer-line text-layer-foreground placeholder:text-muted-foreground-1 rounded-lg focus:border-primary-focus focus:ring-primary-focus py-1.5 sm:py-2 px-3",
                                          "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 sm:py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
                                          "dropdownClasses": "max-h-64 p-1 pt-0 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "dropdownPlacement": "top",
                                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2\" data-icon></div><span data-title></span><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "preventSearchFocus": false,
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                          "dropdownScope": "window",
                                          "viewport": "#hs-pro-upsc"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option value="AF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
                                          Afghanistan
                                        </option>
                                        <option value="AX" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
                                          Aland Islands
                                        </option>
                                        <option value="AL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
                                          Albania
                                        </option>
                                        <option value="DZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
                                          Algeria
                                        </option>
                                        <option value="AS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
                                          American Samoa
                                        </option>
                                        <option value="AD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
                                          Andorra
                                        </option>
                                        <option value="AO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
                                          Angola
                                        </option>
                                        <option value="AI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
                                          Anguilla
                                        </option>
                                        <option value="AG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
                                          Antigua and Barbuda
                                        </option>
                                        <option value="AR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
                                          Argentina
                                        </option>
                                        <option value="AM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
                                          Armenia
                                        </option>
                                        <option value="AW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
                                          Aruba
                                        </option>
                                        <option value="AU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
                                          Australia
                                        </option>
                                        <option value="AT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
                                          Austria
                                        </option>
                                        <option value="AZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
                                          Azerbaijan
                                        </option>
                                        <option value="BS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
                                          Bahamas
                                        </option>
                                        <option value="BH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
                                          Bahrain
                                        </option>
                                        <option value="BD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
                                          Bangladesh
                                        </option>
                                        <option value="BB" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
                                          Barbados
                                        </option>
                                        <option value="BY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
                                          Belarus
                                        </option>
                                        <option value="BE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
                                          Belgium
                                        </option>
                                        <option value="BZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
                                          Belize
                                        </option>
                                        <option value="BJ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
                                          Benin
                                        </option>
                                        <option value="BM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
                                          Bermuda
                                        </option>
                                        <option value="BT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
                                          Bhutan
                                        </option>
                                        <option value="BO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
                                          Bolivia (Plurinational State of)
                                        </option>
                                        <option value="BQ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
                                          Bonaire, Sint Eustatius and Saba
                                        </option>
                                        <option value="BA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
                                          Bosnia and Herzegovina
                                        </option>
                                        <option value="BW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
                                          Botswana
                                        </option>
                                        <option value="BR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
                                          Brazil
                                        </option>
                                        <option value="IO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
                                          British Indian Ocean Territory
                                        </option>
                                        <option value="BN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
                                          Brunei Darussalam
                                        </option>
                                        <option value="BG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
                                          Bulgaria
                                        </option>
                                        <option value="BF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
                                          Burkina Faso
                                        </option>
                                        <option value="BI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
                                          Burundi
                                        </option>
                                        <option value="CV" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
                                          Cabo Verde
                                        </option>
                                        <option value="KH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
                                          Cambodia
                                        </option>
                                        <option value="CM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
                                          Cameroon
                                        </option>
                                        <option value="CA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
                                          Canada
                                        </option>
                                        <option value="KY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
                                          Cayman Islands
                                        </option>
                                        <option value="CF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
                                          Central African Republic
                                        </option>
                                        <option value="TD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
                                          Chad
                                        </option>
                                        <option value="CL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
                                          Chile
                                        </option>
                                        <option value="CN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
                                          China
                                        </option>
                                        <option value="CX" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
                                          Christmas Island
                                        </option>
                                        <option value="CC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
                                          Cocos (Keeling) Islands
                                        </option>
                                        <option value="CO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
                                          Colombia
                                        </option>
                                        <option value="KM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
                                          Comoros
                                        </option>
                                        <option value="CK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
                                          Cook Islands
                                        </option>
                                        <option value="CR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
                                          Costa Rica
                                        </option>
                                        <option value="HR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
                                          Croatia
                                        </option>
                                        <option value="CU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
                                          Cuba
                                        </option>
                                        <option value="CW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
                                          Curaçao
                                        </option>
                                        <option value="CY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
                                          Cyprus
                                        </option>
                                        <option value="CZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
                                          Czech Republic
                                        </option>
                                        <option value="CI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
                                          Côte dIvoire
                                        </option>
                                        <option value="CD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
                                          Democratic Republic of the Congo
                                        </option>
                                        <option value="DK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
                                          Denmark
                                        </option>
                                        <option value="DJ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
                                          Djibouti
                                        </option>
                                        <option value="DM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
                                          Dominica
                                        </option>
                                        <option value="DO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
                                          Dominican Republic
                                        </option>
                                        <option value="EC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
                                          Ecuador
                                        </option>
                                        <option value="EG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
                                          Egypt
                                        </option>
                                        <option value="SV" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
                                          El Salvador
                                        </option>
                                        <option value="GB-ENG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
                                          England
                                        </option>
                                        <option value="GQ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
                                          Equatorial Guinea
                                        </option>
                                        <option value="ER" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
                                          Eritrea
                                        </option>
                                        <option value="EE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
                                          Estonia
                                        </option>
                                        <option value="ET" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
                                          Ethiopia
                                        </option>
                                        <option value="FK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
                                          Falkland Islands
                                        </option>
                                        <option value="FO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
                                          Faroe Islands
                                        </option>
                                        <option value="FM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
                                          Federated States of Micronesia
                                        </option>
                                        <option value="FJ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
                                          Fiji
                                        </option>
                                        <option value="FI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
                                          Finland
                                        </option>
                                        <option value="FR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
                                          France
                                        </option>
                                        <option value="GF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
                                          French Guiana
                                        </option>
                                        <option value="PF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
                                          French Polynesia
                                        </option>
                                        <option value="TF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
                                          French Southern Territories
                                        </option>
                                        <option value="GA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
                                          Gabon
                                        </option>
                                        <option value="GM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
                                          Gambia
                                        </option>
                                        <option value="GE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
                                          Georgia
                                        </option>
                                        <option value="DE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
                                          Germany
                                        </option>
                                        <option value="GH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
                                          Ghana
                                        </option>
                                        <option value="GI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
                                          Gibraltar
                                        </option>
                                        <option value="GR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
                                          Greece
                                        </option>
                                        <option value="GL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
                                          Greenland
                                        </option>
                                        <option value="GD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
                                          Grenada
                                        </option>
                                        <option value="GP" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
                                          Guadeloupe
                                        </option>
                                        <option value="GU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
                                          Guam
                                        </option>
                                        <option value="GT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
                                          Guatemala
                                        </option>
                                        <option value="GG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
                                          Guernsey
                                        </option>
                                        <option value="GN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
                                          Guinea
                                        </option>
                                        <option value="GW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
                                          Guinea-Bissau
                                        </option>
                                        <option value="GY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
                                          Guyana
                                        </option>
                                        <option value="HT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
                                          Haiti
                                        </option>
                                        <option value="VA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
                                          Holy See
                                        </option>
                                        <option value="HN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
                                          Honduras
                                        </option>
                                        <option value="HK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
                                          Hong Kong
                                        </option>
                                        <option value="HU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
                                          Hungary
                                        </option>
                                        <option value="IS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
                                          Iceland
                                        </option>
                                        <option value="IN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
                                          India
                                        </option>
                                        <option value="ID" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
                                          Indonesia
                                        </option>
                                        <option value="IR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
                                          Iran (Islamic Republic of)
                                        </option>
                                        <option value="IQ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
                                          Iraq
                                        </option>
                                        <option value="IE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
                                          Ireland
                                        </option>
                                        <option value="IM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
                                          Isle of Man
                                        </option>
                                        <option value="IL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
                                          Israel
                                        </option>
                                        <option value="IT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
                                          Italy
                                        </option>
                                        <option value="JM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
                                          Jamaica
                                        </option>
                                        <option value="JP" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
                                          Japan
                                        </option>
                                        <option value="JE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
                                          Jersey
                                        </option>
                                        <option value="JO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
                                          Jordan
                                        </option>
                                        <option value="KZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
                                          Kazakhstan
                                        </option>
                                        <option value="KE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
                                          Kenya
                                        </option>
                                        <option value="KI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
                                          Kiribati
                                        </option>
                                        <option value="KW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
                                          Kuwait
                                        </option>
                                        <option value="KG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
                                          Kyrgyzstan
                                        </option>
                                        <option value="LA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
                                          Laos
                                        </option>
                                        <option value="LV" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
                                          Latvia
                                        </option>
                                        <option value="LB" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
                                          Lebanon
                                        </option>
                                        <option value="LS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
                                          Lesotho
                                        </option>
                                        <option value="LR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
                                          Liberia
                                        </option>
                                        <option value="LY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
                                          Libya
                                        </option>
                                        <option value="LI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
                                          Liechtenstein
                                        </option>
                                        <option value="LT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
                                          Lithuania
                                        </option>
                                        <option value="LU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
                                          Luxembourg
                                        </option>
                                        <option value="MO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
                                          Macau
                                        </option>
                                        <option value="MG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
                                          Madagascar
                                        </option>
                                        <option value="MW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
                                          Malawi
                                        </option>
                                        <option value="MY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
                                          Malaysia
                                        </option>
                                        <option value="MV" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
                                          Maldives
                                        </option>
                                        <option value="ML" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
                                          Mali
                                        </option>
                                        <option value="MT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
                                          Malta
                                        </option>
                                        <option value="MH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
                                          Marshall Islands
                                        </option>
                                        <option value="MQ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
                                          Martinique
                                        </option>
                                        <option value="MR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
                                          Mauritania
                                        </option>
                                        <option value="MU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
                                          Mauritius
                                        </option>
                                        <option value="YT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
                                          Mayotte
                                        </option>
                                        <option value="MX" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
                                          Mexico
                                        </option>
                                        <option value="MD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
                                          Moldova
                                        </option>
                                        <option value="MC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
                                          Monaco
                                        </option>
                                        <option value="MN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
                                          Mongolia
                                        </option>
                                        <option value="ME" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
                                          Montenegro
                                        </option>
                                        <option value="MS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
                                          Montserrat
                                        </option>
                                        <option value="MA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
                                          Morocco
                                        </option>
                                        <option value="MZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
                                          Mozambique
                                        </option>
                                        <option value="MM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
                                          Myanmar
                                        </option>
                                        <option value="NA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
                                          Namibia
                                        </option>
                                        <option value="NR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
                                          Nauru
                                        </option>
                                        <option value="NP" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
                                          Nepal
                                        </option>
                                        <option value="NL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
                                          Netherlands
                                        </option>
                                        <option value="NC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
                                          New Caledonia
                                        </option>
                                        <option value="NZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
                                          New Zealand
                                        </option>
                                        <option value="NI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
                                          Nicaragua
                                        </option>
                                        <option value="NE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
                                          Niger
                                        </option>
                                        <option value="NG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
                                          Nigeria
                                        </option>
                                        <option value="NU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
                                          Niue
                                        </option>
                                        <option value="NF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
                                          Norfolk Island
                                        </option>
                                        <option value="KP" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
                                          North Korea
                                        </option>
                                        <option value="MK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
                                          North Macedonia
                                        </option>
                                        <option value="GB-NIR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
                                          Northern Ireland
                                        </option>
                                        <option value="MP" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
                                          Northern Mariana Islands
                                        </option>
                                        <option value="NO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
                                          Norway
                                        </option>
                                        <option value="OM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
                                          Oman
                                        </option>
                                        <option value="PK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
                                          Pakistan
                                        </option>
                                        <option value="PW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
                                          Palau
                                        </option>
                                        <option value="PA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
                                          Panama
                                        </option>
                                        <option value="PG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
                                          Papua New Guinea
                                        </option>
                                        <option value="PY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
                                          Paraguay
                                        </option>
                                        <option value="PE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
                                          Peru
                                        </option>
                                        <option value="PH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
                                          Philippines
                                        </option>
                                        <option value="PN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
                                          Pitcairn
                                        </option>
                                        <option value="PL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
                                          Poland
                                        </option>
                                        <option value="PT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
                                          Portugal
                                        </option>
                                        <option value="PR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
                                          Puerto Rico
                                        </option>
                                        <option value="QA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
                                          Qatar
                                        </option>
                                        <option value="CG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
                                          Republic of the Congo
                                        </option>
                                        <option value="RO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
                                          Romania
                                        </option>
                                        <option value="RU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
                                          Russia
                                        </option>
                                        <option value="RW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
                                          Rwanda
                                        </option>
                                        <option value="RE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
                                          Réunion
                                        </option>
                                        <option value="BL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
                                          Saint Barthélemy
                                        </option>
                                        <option value="SH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
                                          Saint Helena, Ascension and Tristan da Cunha
                                        </option>
                                        <option value="KN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
                                          Saint Kitts and Nevis
                                        </option>
                                        <option value="LC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
                                          Saint Lucia
                                        </option>
                                        <option value="MF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
                                          Saint Martin
                                        </option>
                                        <option value="PM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
                                          Saint Pierre and Miquelon
                                        </option>
                                        <option value="VC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
                                          Saint Vincent and the Grenadines
                                        </option>
                                        <option value="WS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
                                          Samoa
                                        </option>
                                        <option value="SM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
                                          San Marino
                                        </option>
                                        <option value="ST" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
                                          Sao Tome and Principe
                                        </option>
                                        <option value="SA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
                                          Saudi Arabia
                                        </option>
                                        <option value="GB-SCT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
                                          Scotland
                                        </option>
                                        <option value="SN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
                                          Senegal
                                        </option>
                                        <option value="RS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
                                          Serbia
                                        </option>
                                        <option value="SC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
                                          Seychelles
                                        </option>
                                        <option value="SL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
                                          Sierra Leone
                                        </option>
                                        <option value="SG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
                                          Singapore
                                        </option>
                                        <option value="SX" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
                                          Sint Maarten
                                        </option>
                                        <option value="SK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
                                          Slovakia
                                        </option>
                                        <option value="SI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
                                          Slovenia
                                        </option>
                                        <option value="SB" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
                                          Solomon Islands
                                        </option>
                                        <option value="SO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
                                          Somalia
                                        </option>
                                        <option value="ZA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
                                          South Africa
                                        </option>
                                        <option value="GS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
                                          South Georgia and the South Sandwich Islands
                                        </option>
                                        <option value="KR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
                                          South Korea
                                        </option>
                                        <option value="SS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
                                          South Sudan
                                        </option>
                                        <option value="ES" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
                                          Spain
                                        </option>
                                        <option value="LK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
                                          Sri Lanka
                                        </option>
                                        <option value="PS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
                                          State of Palestine
                                        </option>
                                        <option value="SD" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
                                          Sudan
                                        </option>
                                        <option value="SR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
                                          Suriname
                                        </option>
                                        <option value="SJ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
                                          Svalbard and Jan Mayen
                                        </option>
                                        <option value="SZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
                                          Swaziland
                                        </option>
                                        <option value="SE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
                                          Sweden
                                        </option>
                                        <option value="CH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
                                          Switzerland
                                        </option>
                                        <option value="SY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
                                          Syrian Arab Republic
                                        </option>
                                        <option value="TW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
                                          Taiwan
                                        </option>
                                        <option value="TJ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
                                          Tajikistan
                                        </option>
                                        <option value="TZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
                                          Tanzania
                                        </option>
                                        <option value="TH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
                                          Thailand
                                        </option>
                                        <option value="TL" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
                                          Timor-Leste
                                        </option>
                                        <option value="TG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
                                          Togo
                                        </option>
                                        <option value="TK" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
                                          Tokelau
                                        </option>
                                        <option value="TO" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
                                          Tonga
                                        </option>
                                        <option value="TT" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
                                          Trinidad and Tobago
                                        </option>
                                        <option value="TN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
                                          Tunisia
                                        </option>
                                        <option value="TR" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
                                          Turkey
                                        </option>
                                        <option value="TM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
                                          Turkmenistan
                                        </option>
                                        <option value="TC" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
                                          Turks and Caicos Islands
                                        </option>
                                        <option value="TV" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
                                          Tuvalu
                                        </option>
                                        <option value="UG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
                                          Uganda
                                        </option>
                                        <option value="UA" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
                                          Ukraine
                                        </option>
                                        <option value="AE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
                                          United Arab Emirates
                                        </option>
                                        <option value="GB"  data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
                                          United Kingdom
                                        </option>
                                        <option value="UM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
                                          United States Minor Outlying Islands
                                        </option>
                                        <option value="US"  data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
                                          United States of America
                                        </option>
                                        <option value="UY" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
                                          Uruguay
                                        </option>
                                        <option value="UZ" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
                                          Uzbekistan
                                        </option>
                                        <option value="VU" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
                                          Vanuatu
                                        </option>
                                        <option value="VE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
                                          Venezuela (Bolivarian Republic of)
                                        </option>
                                        <option value="VN" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
                                          Vietnam
                                        </option>
                                        <option value="VG" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
                                          Virgin Islands (British)
                                        </option>
                                        <option value="VI" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
                                          Virgin Islands (U.S.)
                                        </option>
                                        <option value="GB-WLS" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
                                          Wales
                                        </option>
                                        <option value="WF" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
                                          Wallis and Futuna
                                        </option>
                                        <option value="EH" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
                                          Western Sahara
                                        </option>
                                        <option value="YE" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
                                          Yemen
                                        </option>
                                        <option value="ZM" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
                                          Zambia
                                        </option>
                                        <option value="ZW" data-hs-select-option='{
                                          "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
                                          Zimbabwe
                                        </option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div class="space-y-2">
                                    <label for="hs-pro-dufpi" class="block mb-2 text-sm font-medium text-foreground">
                                      Payment information
                                    </label>

<div class="grid grid-cols-2 gap-x-2">
                                      <div>
                                        <label for="hs-pro-echddex" class="sr-only">
                                          Expiration
                                        </label>

<p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                      This is a secure form
                                    </p>
                                  </div>
                                </div>
                              </form>
                            </div>

<div class="p-4 h-full bg-surface space-y-4">
                              <div class="flex flex-wrap justify-between items-center gap-2">
                                <label class="block mb-2 text-sm font-medium text-foreground">
                                  Currency
                                </label>

<div class="relative inline-block">
                                  <select id="hs-pro-select-simple-style-currency" data-hs-select='{
                                      "placeholder": "Select currency",
                                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                                      
                                      "dropdownClasses": "inset-e-0 w-28 max-h-72 p-1 space-y-0.5 z-80 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                      "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                                      "dropdownScope": "window",
                                      "viewport": "#hs-modal-upgrade-to-pro-body"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option value="USD" selected>USD</option>
                                    <option value="AED">AED</option>
                                    <option value="AFN">AFN</option>
                                    <option value="ALL">ALL</option>
                                    <option value="AMD">AMD</option>
                                    <option value="ANG">ANG</option>
                                    <option value="AOA">AOA</option>
                                    <option value="ARS">ARS</option>
                                    <option value="AUD">AUD</option>
                                    <option value="AWG">AWG</option>
                                    <option value="AZN">AZN</option>
                                    <option value="BAM">BAM</option>
                                    <option value="BBD">BBD</option>
                                    <option value="BDT">BDT</option>
                                    <option value="BGN">BGN</option>
                                    <option value="BIF">BIF</option>
                                    <option value="BMD">BMD</option>
                                    <option value="BND">BND</option>
                                    <option value="BOB">BOB</option>
                                    <option value="BRL">BRL</option>
                                    <option value="BSD">BSD</option>
                                    <option value="BWP">BWP</option>
                                    <option value="BZD">BZD</option>
                                    <option value="CAD">CAD</option>
                                    <option value="CDF">CDF</option>
                                    <option value="CHF">CHF</option>
                                    <option value="CLP">CLP</option>
                                    <option value="CNY">CNY</option>
                                    <option value="COP">COP</option>
                                    <option value="CRC">CRC</option>
                                    <option value="CVE">CVE</option>
                                    <option value="CZK">CZK</option>
                                    <option value="DJF">DJF</option>
                                    <option value="DKK">DKK</option>
                                    <option value="DOP">DOP</option>
                                    <option value="DZD">DZD</option>
                                    <option value="EGP">EGP</option>
                                    <option value="ETB">ETB</option>
                                    <option value="EUR">EUR</option>
                                    <option value="FJD">FJD</option>
                                    <option value="FKP">FKP</option>
                                    <option value="GBP">GBP</option>
                                    <option value="GEL">GEL</option>
                                    <option value="GIP">GIP</option>
                                    <option value="GMD">GMD</option>
                                    <option value="GNF">GNF</option>
                                    <option value="GTQ">GTQ</option>
                                    <option value="GYD">GYD</option>
                                    <option value="HKD">HKD</option>
                                    <option value="HNL">HNL</option>
                                    <option value="HRK">HRK</option>
                                    <option value="HTG">HTG</option>
                                    <option value="HUF">HUF</option>
                                    <option value="IDR">IDR</option>
                                    <option value="ILS">ILS</option>
                                    <option value="INR">INR</option>
                                    <option value="ISK">ISK</option>
                                    <option value="JMD">JMD</option>
                                    <option value="JPY">JPY</option>
                                    <option value="KES">KES</option>
                                    <option value="KGS">KGS</option>
                                    <option value="KHR">KHR</option>
                                    <option value="KMF">KMF</option>
                                    <option value="KRW">KRW</option>
                                    <option value="KYD">KYD</option>
                                    <option value="KZT">KZT</option>
                                    <option value="LAK">LAK</option>
                                    <option value="LBP">LBP</option>
                                    <option value="LKR">LKR</option>
                                    <option value="LRD">LRD</option>
                                    <option value="LSL">LSL</option>
                                    <option value="MAD">MAD</option>
                                    <option value="MDL">MDL</option>
                                    <option value="MGA">MGA</option>
                                    <option value="MKD">MKD</option>
                                    <option value="MMK">MMK</option>
                                    <option value="MNT">MNT</option>
                                    <option value="MOP">MOP</option>
                                    <option value="MRO">MRO</option>
                                    <option value="MUR">MUR</option>
                                    <option value="MVR">MVR</option>
                                    <option value="MWK">MWK</option>
                                    <option value="MXN">MXN</option>
                                    <option value="MYR">MYR</option>
                                    <option value="MZN">MZN</option>
                                    <option value="NAD">NAD</option>
                                    <option value="NGN">NGN</option>
                                    <option value="NIO">NIO</option>
                                    <option value="NOK">NOK</option>
                                    <option value="NPR">NPR</option>
                                    <option value="NZD">NZD</option>
                                    <option value="PAB">PAB</option>
                                    <option value="PEN">PEN</option>
                                    <option value="PGK">PGK</option>
                                    <option value="PHP">PHP</option>
                                    <option value="PKR">PKR</option>
                                    <option value="PLN">PLN</option>
                                    <option value="PYG">PYG</option>
                                    <option value="QAR">QAR</option>
                                    <option value="RON">RON</option>
                                    <option value="RSD">RSD</option>
                                    <option value="RUB">RUB</option>
                                    <option value="RWF">RWF</option>
                                    <option value="SAR">SAR</option>
                                    <option value="SBD">SBD</option>
                                    <option value="SCR">SCR</option>
                                    <option value="SEK">SEK</option>
                                    <option value="SGD">SGD</option>
                                    <option value="SHP">SHP</option>
                                    <option value="SLL">SLL</option>
                                    <option value="SOS">SOS</option>
                                    <option value="SRD">SRD</option>
                                    <option value="STD">STD</option>
                                    <option value="SZL">SZL</option>
                                    <option value="THB">THB</option>
                                    <option value="TJS">TJS</option>
                                    <option value="TOP">TOP</option>
                                    <option value="TRY">TRY</option>
                                    <option value="TTD">TTD</option>
                                    <option value="TWD">TWD</option>
                                    <option value="TZS">TZS</option>
                                    <option value="UAH">UAH</option>
                                    <option value="UGX">UGX</option>
                                    <option value="UYU">UYU</option>
                                    <option value="UZS">UZS</option>
                                    <option value="VND">VND</option>
                                    <option value="VUV">VUV</option>
                                    <option value="WST">WST</option>
                                    <option value="XAF">XAF</option>
                                    <option value="XCD">XCD</option>
                                    <option value="XOF">XOF</option>
                                    <option value="XPF">XPF</option>
                                    <option value="YER">YER</option>
                                    <option value="ZAR">ZAR</option>
                                    <option value="ZMW">ZMW</option>
                                  </select>
                                </div>
                                
                              </div>

<div class="space-y-2">
                                <label class="block text-sm font-semibold text-foreground">
                                  Billing period
                                </label>

<div class="relative">
                                  <select data-hs-select='{
                                      "placeholder": "Select a plan",
                                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                                      "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 z-50 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                                      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                      "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option selected>Pro (Monthly - $59 / user / month)</option>
                                    <option>Free - (Free forever)</option>
                                  </select>
                                </div>
                                
                              </div>

<div class="p-3 bg-card shadow-xs rounded-lg">
                                <ul class="space-y-3 mb-3">
                                  <li class="flex justify-between items-center">
                                    <span class="text-sm text-foreground">
                                      1 seat on Pro
                                    </span>
                                    <span class="text-sm font-semibold text-foreground">
                                      $59
                                    </span>
                                  </li>
                                  <li class="flex justify-between items-center">
                                    <span class="text-sm text-foreground">
                                      Tax
                                    </span>
                                    <span class="text-sm font-semibold text-foreground">
                                      $0
                                    </span>
                                  </li>
                                  <li class="border-t border-t-card-divider"></li>
                                  <li class="flex justify-between items-center">
                                    <span class="text-sm text-foreground">
                                      Due today
                                    </span>
                                    <span class="text-sm font-semibold text-foreground">
                                      $59
                                    </span>
                                  </li>
                                </ul>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                                  Pay and upgrade
                                </button>
                              </div>

<p class="text-xs text-muted-foreground-1">
                                You can cancel your plan at any time. Purchases made by credit card can’t be refunded, although your credit can be transferred to another account.
                              </p>
                            </div>
                            
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

Open related admin plans page

Subscription Plans

Current Plan Summary Card with Seat Usage and Actions Pro

Pricing Plan Grid with Billing Toggle and Upgrade Modal Pro