Tailwind CSS Payment Method Modals Blocks

Payment Method Modals

Payment method modals for adding cards, managing saved cards, and editing checkout payment details across storefront and dashboard flows.

Payment method modal combines a payment-type selector grid, inline card inputs, default-method checkbox, and stacked confirm or cancel actions.

<div id="hs-pro-shcpm" 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-shcpm-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-md 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 relative overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
          
          <div class="py-4 px-6 md:px-8 flex justify-between items-center border-b border-overlay-divider">
            <h2 id="hs-pro-shcpm-label" class="font-medium text-foreground">
              Add a payment method
            </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-shcpm">
              <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-pro-shcpm-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="p-6 md:p-8">
              
              <div class="mb-6 grid grid-cols-3 gap-2">
                
                <label for="hs-pro-shcpmgpr1" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
                  <input type="radio" id="hs-pro-shcpmgpr1" class="hidden" value="Card" name="hs-pro-shcpmgpr" checked >
                  <span class="block text-foreground">
                    <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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                  </span>
                  <span class="block font-medium text-xs sm:text-sm text-foreground">
                    Card
                  </span>
                </label>

<label for="hs-pro-shcpmgpr2" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
                  <input type="radio" id="hs-pro-shcpmgpr2" class="hidden" value="PayPal" name="hs-pro-shcpmgpr"  >
                  <span class="block text-foreground">
                    <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><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><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><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"></path></svg>
                  </span>
                  <span class="block font-medium text-xs sm:text-sm text-foreground">
                    PayPal
                  </span>
                </label>

<label for="hs-pro-shcpmgpr3" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
                  <input type="radio" id="hs-pro-shcpmgpr3" class="hidden" value="Klarna" name="hs-pro-shcpmgpr"  disabled>
                  <span class="block text-foreground">
                    <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" fill="currentColor"/></svg>
                  </span>
                  <span class="block font-medium text-xs sm:text-sm text-foreground">
                    Klarna
                  </span>
                  <span class="absolute -top-2 -inset-e-2 pointer-events-none">
                    <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full border border-primary-200 bg-primary-100 text-primary-800 dark:border-primary-500/20 dark:bg-primary-900 dark:text-primary-200">Soon</span>
                  </span>
                </label>
                
              </div>

<div class="space-y-4 overflow-hidden">
                
                <div class="relative">
                  <label for="hs-pro-shcpmcn" class="sr-only">
                    Card number
                  </label>

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

<div>
                    <label for="hs-pro-shcpmcvc" class="sr-only">
                      CVC
                    </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
                        <span class="hs-tooltip inline-block">
                          <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                            <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                            <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                            <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                            <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
                          </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 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Your security code is the last three digits on the back of your card.
                          </span>
                        </span>
                      </div>
                    </div>
                  </div>
                  
                </div>

<div>
                  <label for="hs-pro-shcpmnoc" class="sr-only">
                    Name on card
                  </label>

<input id="hs-pro-shcpmnoc" type="text" class="py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Name on card" >
                </div>
                
              </div>
          
              
              <div class="mt-4 flex items-center gap-x-2">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shcpmmdach" >
                <label for="hs-pro-shcpmmdach" class="text-sm text-muted-foreground-1">
                  Set as default payment method
                </label>
              </div>
              
            </div>
          </div>

<div class="p-6 pt-2 md:p-8 md:pt-2 flex flex-col gap-2">
            <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:bg-primary-focus" data-hs-overlay="#hs-pro-shcpm">
              Add card
            </button>

<div class="text-center">
              <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shcpm">
                Cancel
              </button>
            </div>
          </div>
          
        </div>
      </div>
    </div>

Open related storefront payment page

Saved card management modal presents a stacked list of saved payment options with per-row switches inside a centered settings dialog.

<div id="hs-pro-dmcm" 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-dmcm-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-lg 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 overflow-hidden 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-dmcm-label" class="font-medium text-foreground">
              Manage cards
            </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-dmcm">
              <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>

<form>
            
            <div 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">
              
              <ul class="flex flex-col">
                
                <li class="p-4 border-t border-line-2 first:border-t-0">
                  
                  <div class="flex gap-x-3">
                    
                    <div>
                      <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                        <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asdafg" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="5" width="35" height="12"><path d="M34.5 5.4751H0.5V16.5081H34.5V5.4751Z" fill="white"/></mask><g mask="url(#asdafg)"><path d="M15.239 16.3211H12.468L14.202 5.6621H16.973L15.239 16.3211ZM10.139 5.6621L7.487 12.9891L7.181 11.4081L6.246 6.6311C6.246 6.6311 6.127 5.6791 4.937 5.6791H0.551L0.5 5.8491C0.5 5.8491 1.843 6.1211 3.407 7.0731L5.821 16.3381H8.711L13.131 5.6791L10.139 5.6621ZM31.95 16.3211H34.5L32.273 5.6621H30.046C29.009 5.6621 28.771 6.4611 28.771 6.4611L24.64 16.3211H27.53L28.108 14.7401H31.627L31.95 16.3211ZM28.907 12.5471L30.369 8.5521L31.185 12.5471H28.907ZM24.844 8.2291L25.235 5.9341C25.235 5.9341 24.011 5.4751 22.736 5.4751C21.359 5.4751 18.095 6.0701 18.095 9.0111C18.095 11.7651 21.937 11.7991 21.937 13.2441C21.937 14.6891 18.503 14.4341 17.364 13.5161L16.956 15.9131C16.956 15.9131 18.197 16.5081 20.084 16.5081C21.971 16.5081 24.827 15.5221 24.827 12.8531C24.827 10.0821 20.951 9.8271 20.951 8.6201C20.951 7.4131 23.654 7.5661 24.844 8.2291Z" fill="#2566AF"/><path d="M7.181 11.4252L6.246 6.6312C6.246 6.6312 6.127 5.6792 4.937 5.6792H0.551L0.5 5.8492C0.5 5.8492 2.608 6.2912 4.614 7.9232C6.552 9.4702 7.181 11.4252 7.181 11.4252Z" fill="#E6A540"/></g></svg>
                      </div>
                    </div>
                    
    
                    
                    <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                      <div>
                        <p class="text-sm font-medium text-foreground">
                          Visa •••• 9016
                        </p>
                        <p class="text-xs text-muted-foreground-1">
                          Debit Expires  12/25
                        </p>
                      </div>

<div class="flex gap-x-2">
                        <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs 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>
                            Default
                          </button>
                        </div>
        
                          <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                            Edit
                          </button>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>
                  
                </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
                  
                  <div class="flex gap-x-3">
                    
                    <div>
                      <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                        <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_666_271011af12112c3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"/></mask><g mask="url(#mask0_666_271011af12112c3)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"/><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"/><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"/></g></svg>
                      </div>
                    </div>
                    
    
                    
                    <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                      <div>
                        <p class="text-sm font-medium text-foreground">
                          MasterCard •••• 4242
                        </p>
                        <p class="text-xs text-muted-foreground-1">
                          Debit Expires  04/24
                        </p>
                      </div>

<div class="flex gap-x-2">
                        <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs 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" >
                            Set as default
                          </button>
                        </div>
        
                          <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                            Edit
                          </button>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>
                  
                </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
                  
                  <div class="flex gap-x-3">
                    
                    <div>
                      <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                        <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_666_271011" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"/></mask><g mask="url(#mask0_666_271011)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"/><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"/><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"/></g></svg>
                      </div>
                    </div>
                    
    
                    
                    <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                      <div>
                        <p class="text-sm font-medium text-foreground">
                          MasterCard •••• 0232
                        </p>
                        <p class="text-xs text-muted-foreground-1">
                          Debit  <span class="text-red-500">Expired</span> 01/20
                        </p>
                      </div>

<div class="flex gap-x-2">
                        <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs 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>
                            Set as default
                          </button>
                        </div>
        
                          <div>
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                            Edit
                          </button>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>
                  
                </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
                  
                  <div class="flex gap-x-3">
                    
                    <div>
                      <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                        <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_666_270977sfa1112" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="5" width="35" height="12"><path d="M34.5 5.4751H0.5V16.5081H34.5V5.4751Z" fill="white"/></mask><g mask="url(#mask0_666_270977sfa1112)"><path d="M15.239 16.3211H12.468L14.202 5.6621H16.973L15.239 16.3211ZM10.139 5.6621L7.487 12.9891L7.181 11.4081L6.246 6.6311C6.246 6.6311 6.127 5.6791 4.937 5.6791H0.551L0.5 5.8491C0.5 5.8491 1.843 6.1211 3.407 7.0731L5.821 16.3381H8.711L13.131 5.6791L10.139 5.6621ZM31.95 16.3211H34.5L32.273 5.6621H30.046C29.009 5.6621 28.771 6.4611 28.771 6.4611L24.64 16.3211H27.53L28.108 14.7401H31.627L31.95 16.3211ZM28.907 12.5471L30.369 8.5521L31.185 12.5471H28.907ZM24.844 8.2291L25.235 5.9341C25.235 5.9341 24.011 5.4751 22.736 5.4751C21.359 5.4751 18.095 6.0701 18.095 9.0111C18.095 11.7651 21.937 11.7991 21.937 13.2441C21.937 14.6891 18.503 14.4341 17.364 13.5161L16.956 15.9131C16.956 15.9131 18.197 16.5081 20.084 16.5081C21.971 16.5081 24.827 15.5221 24.827 12.8531C24.827 10.0821 20.951 9.8271 20.951 8.6201C20.951 7.4131 23.654 7.5661 24.844 8.2291Z" fill="#2566AF"/><path d="M7.181 11.4252L6.246 6.6312C6.246 6.6312 6.127 5.6792 4.937 5.6792H0.551L0.5 5.8492C0.5 5.8492 2.608 6.2912 4.614 7.9232C6.552 9.4702 7.181 11.4252 7.181 11.4252Z" fill="#E6A540"/></g></svg>
                      </div>
                    </div>
                    
    
                    
                    <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                      <div>
                        <p class="text-sm font-medium text-foreground">
                          Visa •••• 9016
                        </p>
                        <p class="text-xs text-muted-foreground-1">
                          Debit  <span class="text-red-500">Expired</span> 06/20
                        </p>
                      </div>

Add card details modal pairs supported card-brand hints with card-number, expiry, CVC, billing address, country, and default-card fields.

<div id="hs-pro-dmacm" 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-dmacm-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-lg 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 overflow-hidden 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-dmacm-label" class="font-medium text-foreground">
              Add card details
            </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-dmacm">
              <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 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="p-4 space-y-5">
              <div class="space-y-2">
                <div class="flex flex-wrap justify-between items-center gap-2">
                  <label class="block text-sm font-medium text-foreground">
                    Card details
                  </label>

<div class="flex gap-x-2">
                    <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
                      <path d="M34.482 9a8.17 8.17 0 0 1 3.052.577l-.463 2.926-.308-.143a5.638 5.638 0 0 0-2.534-.52c-1.343 0-1.946.591-1.96 1.168 0 .635.73 1.053 1.92 1.673 1.96.966 2.868 2.148 2.855 3.69C37.016 21.184 34.692 23 31.122 23c-1.526-.015-2.996-.347-3.794-.721l.476-3.043.448.217c1.106.505 1.834.72 3.192.72.98 0 2.03-.418 2.043-1.325 0-.592-.447-1.024-1.763-1.688-1.288-.649-3.01-1.73-2.982-3.676.014-2.639 2.38-4.484 5.74-4.484ZM21.798 22.798H25.2l2.128-13.552h-3.402l-2.128 13.552Z" fill="#00579F" />
                      <path clip-rule="evenodd" d="M46.255 9.246h-2.631c-.812 0-1.428.245-1.779 1.124l-5.053 12.428h3.57l.714-2.033h4.368c.098.476.406 2.033.406 2.033H49L46.255 9.246Zm-4.2 8.75 1.36-3.79c-.007.01.038-.116.104-.305.098-.28.243-.693.343-.993l.237 1.167s.645 3.244.785 3.922h-2.828Z" fill="#00579F" fill-rule="evenodd" />
                      <path d="m15.624 18.487 3.332-9.241h3.598l-5.348 13.538h-3.598l-3.052-11.852c2.156 1.168 4.088 3.518 4.704 5.68l.364 1.875Z" fill="#00579F" />
                      <path d="M12.53 9.246H7.056L7 9.519c4.27 1.125 7.098 3.836 8.26 7.094l-1.19-6.228c-.196-.866-.798-1.11-1.54-1.14Z" fill="#FAA61A" />
                      <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
                    </svg>
                    <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
                      <path d="M28.017 22.85A9.137 9.137 0 0 1 22.108 25C17.078 25 13 20.97 13 16s4.078-9 9.108-9c2.255 0 4.318.81 5.909 2.15A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#ED0006" />
                      <path d="M28.017 22.85a8.937 8.937 0 0 0 3.2-6.85c0-2.743-1.242-5.2-3.2-6.85A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#F9A000" />
                      <path d="M28.017 22.85c1.958-1.65 3.2-4.107 3.2-6.85 0-2.743-1.242-5.2-3.2-6.85a8.937 8.937 0 0 0-3.2 6.85c0 2.743 1.241 5.2 3.2 6.85Z" fill="#FF5E00" />
                      <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
                    </svg>
                    <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
                      <path d="M17.69 5.001h8.528c1.19 0 1.93 1 1.652 2.228L23.9 24.775C23.62 26.001 22.43 27 21.239 27H12.71c-1.188 0-1.93-1-1.653-2.225L15.03 7.23c.278-1.229 1.469-2.228 2.66-2.228Z" fill="#E21836" />
                      <path d="M25.507 5h9.806c1.19 0 .654.999.374 2.228l-3.97 17.546C31.44 26 31.526 27 30.333 27h-9.806c-1.192 0-1.93-1-1.65-2.225l3.969-17.546C23.128 5.998 24.316 5 25.507 5Z" fill="#00447C" />
                      <path d="M34.925 5h8.527c1.192 0 1.932.999 1.652 2.228l-3.969 17.546C40.855 26 39.662 27 38.47 27h-8.523c-1.192 0-1.932-1-1.653-2.225l3.97-17.546C32.542 5.998 33.732 5 34.924 5Z" fill="#007B84" />
                      <path d="M19.917 10.623c-.877.01-1.136 0-1.219-.02-.032.155-.623 2.965-.625 2.967-.127.569-.22.974-.535 1.236a.937.937 0 0 1-.63.225c-.388 0-.615-.198-.653-.575l-.007-.13.119-.766s.62-2.56.732-2.899a.246.246 0 0 0 .009-.038c-1.21.01-1.423 0-1.438-.02-.008.027-.038.186-.038.186l-.634 2.886-.055.245-.105.8c0 .238.045.432.135.596.29.52 1.113.597 1.58.597.6 0 1.164-.131 1.544-.37.661-.403.834-1.031.988-1.59l.072-.286s.64-2.66.748-3.006c.005-.019.006-.029.012-.038Zm2.177 2.145a1.65 1.65 0 0 0-.69.166c-.091.05-.178.105-.27.161l.083-.307-.046-.052c-.537.112-.657.127-1.152.198l-.042.029c-.058.492-.109.861-.322 1.827-.082.356-.166.715-.25 1.07l.022.046c.509-.028.663-.028 1.104-.02l.036-.04c.056-.296.064-.366.188-.965.058-.284.18-.908.24-1.13.11-.053.22-.105.323-.105.248 0 .218.222.208.31-.01.15-.1.635-.193 1.052l-.062.27c-.043.198-.09.391-.133.588l.019.04c.5-.028.653-.028 1.081-.02l.05-.04c.078-.463.1-.586.238-1.26l.069-.308c.134-.605.2-.912.1-1.162-.108-.28-.365-.348-.601-.348Zm2.431.634c-.266.052-.436.088-.605.11-.167.028-.33.053-.588.09l-.02.019-.018.015c-.027.197-.046.368-.082.568-.03.207-.076.443-.151.781-.059.26-.09.35-.122.441-.033.091-.069.18-.134.435l.015.023.013.022c.24-.012.398-.02.56-.022.161-.006.328 0 .587.002l.023-.02.024-.02c.038-.23.043-.292.066-.404.023-.12.062-.287.158-.731.045-.21.096-.417.143-.63.048-.213.1-.422.148-.63l-.007-.026-.01-.023Zm.006-.854c-.242-.147-.667-.1-.953.102-.284.2-.317.482-.076.63.238.144.664.101.948-.104.284-.203.32-.483.08-.628Zm1.463 3.404c.49 0 .991-.14 1.369-.551.29-.334.424-.832.47-1.036.15-.679.033-.996-.114-1.189-.223-.294-.618-.388-1.027-.388-.246 0-.832.025-1.29.46-.329.313-.48.738-.572 1.146-.093.415-.2 1.163.469 1.442.206.09.503.116.695.116Zm-.038-1.527c.113-.514.246-.946.586-.946.266 0 .286.322.167.837-.021.115-.118.54-.25.721-.092.134-.2.215-.32.215-.036 0-.249 0-.252-.325a2.27 2.27 0 0 1 .069-.502Zm3.1 1.46.038-.04c.055-.295.064-.365.184-.964.06-.284.184-.908.243-1.13.11-.053.217-.105.324-.105.246 0 .216.222.207.31-.01.15-.1.635-.194 1.052l-.058.27c-.045.198-.093.391-.136.588l.018.04c.503-.028.65-.028 1.08-.02l.052-.04c.075-.463.096-.586.237-1.259l.067-.31c.135-.604.203-.911.104-1.161-.11-.28-.37-.348-.603-.348-.154 0-.438.039-.69.167-.09.048-.18.104-.268.16l.077-.307-.041-.052c-.537.112-.66.127-1.155.199l-.038.028c-.06.492-.109.86-.322 1.827-.081.356-.166.716-.25 1.07l.023.046c.509-.028.66-.028 1.101-.02Zm3.693.02.22-1.099s.16-.69.17-.715c0 0 .05-.072.1-.1h.075c.698 0 1.486 0 2.104-.469.42-.32.708-.795.836-1.37.034-.142.058-.31.058-.478 0-.22-.043-.438-.167-.609-.315-.454-.943-.462-1.667-.466l-.357.004c-.927.012-1.3.008-1.452-.011l-.037.193-.332 1.587-.832 3.528c.81-.01 1.141-.01 1.28.006Zm.615-2.814.352-1.575.011-.082.005-.061.141.015.745.066c.288.114.406.41.324.794-.076.352-.298.648-.583.791-.234.121-.522.131-.818.131h-.191l.014-.08Zm2.199 1.363c-.094.41-.2 1.158.464 1.424.212.093.402.12.595.11.204-.01.393-.116.568-.268l-.047.188.03.04c.478-.021.626-.021 1.144-.017l.047-.037c.076-.458.147-.902.344-1.778.096-.42.191-.835.29-1.253l-.016-.046c-.535.102-.678.124-1.192.199l-.04.032-.015.125a.741.741 0 0 0-.375-.318c-.229-.093-.766.027-1.228.46-.325.31-.48.733-.57 1.14Zm1.123.025c.115-.505.246-.932.587-.932.216 0 .33.205.306.554l-.061.283c-.034.15-.071.299-.107.447-.037.102-.08.198-.126.262-.088.128-.297.208-.417.208-.034 0-.244 0-.252-.32-.001-.159.03-.322.07-.502Zm5.868-1.666-.042-.049c-.529.11-.625.128-1.111.196l-.036.036-.006.024-.001-.008c-.362.86-.352.674-.646 1.35l-.004-.082-.073-1.467-.047-.049c-.554.11-.567.128-1.08.196l-.04.036c-.005.018-.005.037-.008.058l.003.008c.064.336.049.261.113.793.03.26.07.523.1.78.05.432.078.644.14 1.302-.346.587-.428.81-.76 1.325l.002.005-.235.382c-.027.04-.05.068-.085.08a.344.344 0 0 1-.154.022h-.13l-.193.661.663.012c.389-.002.633-.189.765-.44l.416-.735H40.1l.043-.052c.28-.621 2.412-4.384 2.412-4.384Zm-6.991 8.682h-.281l1.04-3.54h.345l.11-.366.01.406c-.013.25.179.473.682.436h.582l.2-.681h-.218c-.127 0-.185-.033-.178-.103l-.01-.413h-1.078v.002c-.349.008-1.39.034-1.6.092-.256.068-.524.267-.524.267l.105-.365H33.74l-.21.724-1.054 3.595h-.205l-.2.678h2.008l-.067.225h.99l.065-.226h.278l.218-.73Zm-.824-2.821c-.162.046-.462.185-.462.185l.267-.905h.801l-.193.66s-.248.015-.413.06Zm.015 1.293s-.252.032-.417.07c-.164.052-.47.212-.47.212l.277-.942h.805l-.195.66Zm-.449 1.537h-.804l.233-.795h.801l-.23.795Zm1.936-2.197h1.158l-.166.555h-1.174l-.176.607h1.027l-.778 1.127a.322.322 0 0 1-.158.136.45.45 0 0 1-.208.062h-.285l-.196.664h.745c.388 0 .617-.181.785-.42l.534-.75.114.762a.357.357 0 0 0 .192.26c.075.038.152.104.26.114.117.005.202.009.258.009h.366l.22-.744h-.145c-.082 0-.225-.014-.25-.04-.024-.033-.024-.083-.037-.16l-.116-.764h-.476l.209-.256h1.171l.18-.607h-1.084l.169-.555h1.081l.2-.684h-3.223l-.197.684Zm-9.785 2.351.27-.926h1.111l.204-.688h-1.113l.17-.57h1.087l.201-.667h-2.72l-.197.667h.618l-.165.57h-.62l-.204.7h.617l-.36 1.225c-.049.162.023.224.068.3a.299.299 0 0 0 .199.149c.109.025.183.04.285.04h1.253l.223-.763-.555.079c-.108 0-.405-.014-.372-.116Zm.127-4.433-.281.524a.606.606 0 0 1-.164.219c-.043.027-.128.039-.251.039h-.147l-.197.67h.488c.235 0 .415-.088.501-.133.093-.05.117-.022.188-.093l.165-.147h1.524l.202-.697h-1.115l.195-.382h-1.108Zm2.25 4.447c-.026-.039-.007-.107.032-.248l.417-1.419h1.482c.216-.003.372-.006.473-.013a.95.95 0 0 0 .356-.124.675.675 0 0 0 .26-.246c.063-.09.167-.29.255-.596l.524-1.796-1.538.009s-.473.072-.682.151c-.21.089-.51.336-.51.336l.138-.492h-.95l-1.33 4.54a2.886 2.886 0 0 0-.086.38c-.002.083.102.165.17.227.079.062.197.052.31.062.118.01.287.015.52.015h.73l.224-.779-.654.064a.17.17 0 0 1-.141-.071Zm.718-2.625h1.556l-.099.319c-.014.007-.047-.016-.206.003h-1.347l.096-.322Zm.311-1.071h1.57l-.113.384s-.74-.007-.858.015c-.521.093-.826.38-.826.38l.227-.78Zm1.18 2.459a.172.172 0 0 1-.06.098c-.032.021-.084.029-.16.029H30.6l.013-.389h-.922l-.037 1.9c-.002.138.011.217.109.28.097.08.397.09.802.09h.578l.208-.711-.503.028-.167.01c-.023-.01-.045-.019-.07-.044-.02-.022-.056-.008-.05-.146l.004-.487.527-.022c.285 0 .407-.096.511-.187.1-.087.132-.187.169-.322l.088-.431h-.725l-.092.304Z" fill="#FEFEFE" />
                      <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
                    </svg>
                    <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
                      <path d="M19.648 15.984c0 2.074 1.629 3.683 3.725 3.683.592 0 1.1-.117 1.726-.411v-1.62c-.55.55-1.038.772-1.662.772-1.386 0-2.37-1.005-2.37-2.434 0-1.355 1.015-2.424 2.306-2.424.656 0 1.153.235 1.726.794v-1.62c-.604-.306-1.101-.433-1.694-.433-2.085 0-3.757 1.642-3.757 3.693ZM16.116 14.27c0 .382.242.584 1.068.89 1.566.572 2.03 1.08 2.03 2.2 0 1.366-1.003 2.317-2.434 2.317-1.047 0-1.809-.412-2.443-1.343l.89-.856c.316.612.845.94 1.501.94.614 0 1.069-.423 1.069-.995 0-.296-.138-.55-.413-.73-.138-.085-.412-.212-.951-.402-1.293-.465-1.736-.962-1.736-1.935 0-1.155.952-2.022 2.2-2.022.774 0 1.482.265 2.074.783l-.72.943c-.359-.402-.698-.572-1.11-.572-.593 0-1.025.338-1.025.783Z" fill="#231F20" />
                      <path clip-rule="evenodd" d="M8.02 12.451H6v7.057h2.01c1.068 0 1.84-.252 2.518-.815a3.54 3.54 0 0 0 1.28-2.709c0-2.082-1.555-3.533-3.788-3.533Zm1.608 5.301c-.432.39-.994.561-1.883.561h-.37v-4.666h.37c.89 0 1.429.159 1.883.57.476.424.763 1.081.763 1.757 0 .677-.287 1.354-.763 1.778Z" fill="#231F20" fill-rule="evenodd" />
                      <path d="M13.819 12.451h-1.377v7.057h1.377V12.45ZM34.13 12.451l1.882 4.74 1.906-4.74h1.492l-3.048 7.238h-.74l-2.995-7.238h1.503ZM40.033 19.508h3.903v-1.195h-2.528v-1.905h2.435v-1.195h-2.435v-1.566h2.528V12.45h-3.903v7.057Z" fill="#231F20" />
                      <path clip-rule="evenodd" d="M46.889 12.451c1.587 0 2.497.762 2.497 2.083 0 1.08-.57 1.79-1.607 2L50 19.509h-1.693l-1.905-2.835h-.18v2.835h-1.374V12.45h2.04Zm-.666 3.249h.402c.879 0 1.345-.382 1.345-1.091 0-.687-.466-1.046-1.323-1.046h-.424V15.7Z" fill="#231F20" fill-rule="evenodd" />
                      <path d="M29.302 19.758a3.754 3.754 0 1 0 0-7.508 3.754 3.754 0 0 0 0 7.508Z" fill="#F48120" />
                      <path d="M56 20c-1.492 1.035-12.661 8.428-32 12h28.85c1.74 0 3.15-1.39 3.15-3.104V20Z" fill="#F47216" />
                      <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
                    </svg>
                  </div>
                </div>
                <div class="relative">
                  <div class="absolute inset-y-0 inset-s-0 flex items-center z-20 ps-3 cursor-pointer">
                    <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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                  </div>
                  <label for="hs-pro-dacfcnl" class="hidden mb-2 text-sm font-medium text-foreground">
                    Card number
                  </label>
                  <input id="hs-pro-dacfcnl" type="text" class="py-1.5 sm:py-2 pe-3 ps-9 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Card number" value="">
                </div>

<div class="grid grid-cols-2 gap-x-2">
                  <div>
                    <label for="hs-pro-dacfexl" class="hidden mb-2 text-sm font-medium text-foreground">
                      Expiration
                    </label>
                    <input id="hs-pro-dacfexl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Expiration" value="">
                  </div>
                  <div>
                    <label for="hs-pro-dacfcvl" class="hidden mb-2 text-sm font-medium text-foreground">
                      CVV
                    </label>
                    <input id="hs-pro-dacfcvl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="CVV" value="">
                  </div>
                </div>

<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 class="space-y-2">
                <label class="block mb-2 text-sm font-medium text-foreground">
                  Billing address
                </label>

<div>
                  <label for="hs-pro-dacfad1l" class="hidden mb-2 text-sm font-medium text-foreground">
                    Address
                  </label>
                  <input id="hs-pro-dacfad1l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Street address" value="">
                </div>
                <div>
                  <label for="hs-pro-dacfad2l" class="hidden mb-2 text-sm font-medium text-foreground">
                    Address 2
                  </label>
                  <input id="hs-pro-dacfad2l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Apt or suite number" value="">
                </div>
                <div>
                  <label for="hs-pro-dacfctl" class="hidden mb-2 text-sm font-medium text-foreground">
                    City
                  </label>
                  <input id="hs-pro-dacfctl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="City" value="">
                </div>
                <div class="grid grid-cols-2 gap-x-2">
                  <div>
                    <label for="hs-pro-dacfstl" class="hidden mb-2 text-sm font-medium text-foreground">
                      State
                    </label>
                    <input id="hs-pro-dacfstl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="State" value="">
                  </div>
                  <div>
                    <label for="hs-pro-dacfzpl" class="hidden mb-2 text-sm font-medium text-foreground">
                      Zip
                    </label>
                    <input id="hs-pro-dacfzpl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="ZIP code" value="">
                  </div>
                </div>

<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-foreground\" 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>",
                      "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-modal-upgrade-to-pro-body"
                    }' 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="flex items-center">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dacfsadch" checked>
                <label for="hs-pro-dacfsadch" class="ms-2 text-sm text-foreground">
                  Set as default payment method
                </label>
              </div>
            </div>
          </div>

<div class="p-4 flex justify-between gap-x-2">
            <div class="w-full hidden">
              <button type="button" 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-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-dlcam">
                Delete card
              </button>
            </div>

<div class="flex-1 flex justify-end items-center gap-2">
              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-dmacm">
                Cancel
              </button>

Payment Method Modals

Payment Method Modal with Card Type Selector and Default Toggle Pro

Saved Card Management Modal with Payment Option Toggles Pro

Add Card Details Modal with Billing Address Form Pro