@extends('web.layout.app')
@section('css')
@endsection
@section('title','Donate')
@section('content')

    <!-- <div class="page-title about-page-title">
        <h1>Donate</h1>
    </div> -->
    <div class="section about-section !hidden lg:!block !h-[90px]">
        <div class="container">
            
        </div>
    </div>

    <div class="section history-section !bg-[var(--bg-light-blue)] !bg-[url()] pt-10 sm:pt-14 md:pt-[100px] pb-[100px]">
  <div class="container">
    <section>
      <form id="wf-form-Donation-Form" class="donation-form !flex !flex-col md:!flex-row !gap-4 md:!gap-[48px] !max-w-[940px] !mx-auto !relative" name="wf-form-Donation-Form" method="post" data-wf-page-id="68106b8a96004c5fca1fd311" data-wf-element-id="7e94311d-cbae-3019-bdc4-98923bca6261" aria-label="Donation Form" action="https://taharav2-steph-ks-projects.vercel.app/v1/donations">
        <div class="md:w-[55%]">
        <div style="box-shadow: var(--shadow-sm);" id="paymentwrapper" class="payment-main-box !bg-[var(--bg-white)] !rounded-[var(--radius-xl)] !p-5 sm:!p-[32px]"></div>
        <input type="hidden" name="selectedamt">
        <input type="hidden" name="selectedduration">
        <input type="hidden" name="selectedcurrency">

        <div class="form-outer-main">
          <div class="form-inner">
            <div style="box-shadow: var(--shadow-sm);" class="!bg-[var(--bg-white)] !rounded-[var(--radius-xl)] !p-5 sm:!p-[32px] !shadow-[var(--shadow-sm)] !mt-5">
            <h2 class="form-title Bethany !text-[var(--text-dark)] !font-normal !p-0 !bg-[url()] !leading-[150%] !m-0 !mb-5" style="font-size: var(--font-lg)">Enter your information</h2>
            <div class="form-fields">
              <div class="name-field !pb-4">
                <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Name</label>
                <div class="name-inputs !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px]">
                  <input class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" placeholder="First name" autofocus="true" maxlength="256" name="firstname" type="text" id="name" />
                  <input class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" placeholder="Last name" autofocus="true" maxlength="256" name="lastname" type="text" id="lastname" />
                </div>
              </div>

              <div class="email-field !pb-4">
                <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Email</label>
                <div class="email-input !relative">
                <svg class="absolute top-1/2 left-4 -translate-y-1/2" width="20" height="16"
                                        viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M1.66669 3.74487L8.47079 8.50774C9.02176 8.89343 9.29725 9.08627 9.59691 9.16096C9.8616 9.22694 10.1384 9.22694 10.4031 9.16096C10.7028 9.08627 10.9783 8.89343 11.5293 8.50774L18.3334 3.74487M5.66669 14.5782H14.3334C15.7335 14.5782 16.4336 14.5782 16.9683 14.3057C17.4387 14.066 17.8212 13.6836 18.0609 13.2132C18.3334 12.6784 18.3334 11.9783 18.3334 10.5782V5.24487C18.3334 3.84474 18.3334 3.14468 18.0609 2.6099C17.8212 2.13949 17.4387 1.75704 16.9683 1.51736C16.4336 1.24487 15.7335 1.24487 14.3334 1.24487H5.66669C4.26656 1.24487 3.56649 1.24487 3.03171 1.51736C2.56131 1.75704 2.17885 2.13949 1.93917 2.6099C1.66669 3.14468 1.66669 3.84474 1.66669 5.24487V10.5782C1.66669 11.9783 1.66669 12.6784 1.93917 13.2132C2.17885 13.6836 2.56131 14.066 3.03171 14.3057C3.56649 14.5782 4.26656 14.5782 5.66669 14.5782Z"
                                            stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                  <input class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !pl-[45px] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" type="email" placeholder="example@gmail.com" autofocus="true" maxlength="256" name="email" id="email" />
                </div>
              </div>

              <div class="phone-field !pb-4">
                <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Phone (optional)</label>
                <input class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" placeholder="Phone Number" autofocus="true" maxlength="256" name="phone" type="tel" id="Phone" />
              </div>
            </div>

            <div class="kvital-section">
              <div class="kvital-checkbox flex flex-col items-start">
              <label class="flex items-center cursor-pointer group">
  <!-- Hidden checkbox using peer -->
  <input 
    type="checkbox" 
    id="kvital-checkbox" 
    name="is_kvital" 
    data-target="kvital-container"
    class="peer hidden"
  >

  <!-- Custom checkbox using ::before and Tailwind -->
  <span class="relative w-[18px] h-[18px] border border-[var(--border-checkbox)] group-hover:border-[var(--border-yellow)] transition-all rounded-[var(--radius-sm)] before:content-[''] before:absolute before:inset-0 before:bg-no-repeat before:bg-center before:bg-[length:14px_14px] peer-checked:before:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22%23222%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M5%2013l4%204L19%207%22%20/%3E%3C/svg%3E')]">
  </span>

  <!-- Label text -->
  <span class="text-[var(--text-gray)] font-normal pl-[6px]" style="font-size: var(--font-md)">Kvitel</span>
</label>

                <div id="kvital-container" class="kvital-form w-full">
                  <div class="kvital-name-fields !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px] !pb-4">
                    <input type="text" placeholder="Your name" name="kvital_name" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)"/>
                    <input type="text" placeholder="Email" name="kvital_email" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)"/>
                  </div>
                  <div class="kvital-mother-field !pb-4">
                    <input type="text" placeholder="Mother's name" name="kvital_mothername" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                  </div>
                  <div class="kvital-message !pb-4">
                  <textarea
  placeholder="Kvitel"
  name="kvital_message"
  class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize"
  style="font-size: var(--font-sm); font-weight: 400; --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray);"
></textarea>
                  </div>
                </div>
              </div>

              <div class="dedication-checkbox flex flex-col items-start">
              <label class="flex items-center cursor-pointer group">
  <!-- Hidden checkbox -->
  <input 
    type="checkbox" 
    id="dedicate-checkbox" 
    name="is_dedicated" 
    data-target="dedication-container"
    class="peer hidden"
  >

  <!-- Custom checkbox box -->
  <span class="relative w-[18px] h-[18px] border border-[var(--border-checkbox)] group-hover:border-[var(--border-yellow)] transition-all rounded-[var(--radius-sm)] before:content-[''] before:absolute before:inset-0 before:bg-no-repeat before:bg-center before:bg-[length:14px_14px] peer-checked:before:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22%23222%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M5%2013l4%204L19%207%22%20/%3E%3C/svg%3E')]">
  </span>

  <!-- Checkbox label text -->
  <span class="text-[var(--text-gray)] font-normal pl-[6px]" style="font-size: var(--font-md)">In honor/memory</span>
</label>

                <div id="dedication-container" class="dedication-field w-full">
                  <!-- <input type="text" placeholder="Honoree name" name="dedication" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)"/> -->
                  <select class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-gray)] !capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)">
  <option value="In Memory of" class="!text-[var(--text-gray)]" style="font-size: var(--font-sm);">In Memory of...</option>
  <option value="In Honor of" class="!text-[var(--text-gray)]" style="font-size: var(--font-sm);">In Honor of...</option>
</select>
                </div>
              </div>
            </div>
            </div>
            <div style="box-shadow: var(--shadow-sm);" class="payment-section !bg-[var(--bg-white)] !rounded-[var(--radius-xl)] !p-5 sm:!p-[32px] !shadow-[var(--shadow-sm)] !mt-5">
              <h2 class="payment-title Bethany !text-[var(--text-dark)] !font-normal !p-0 !bg-[url()] !leading-[150%] !m-0 !mb-5" style="font-size: var(--font-lg)">Payment info</h2>
              <input type="hidden" name="payment_type" class="selected_payment_type" value=""/>
              <div id="payment-section" class="gateway-tabs">
                <div id="payment-tabs" class="payment-tabs !bg-[var(--bg-gray)] !rounded-[var(--radius-lg)] !items-center !gap-[8px] !p-[8px] !flex !flex-wrap !mb-4">
                  <button type="button" data-method="cc" class="tab-button transition-all hover:bg-[var(--hover-bg-grey)] !w-[calc(50%-4px)] sm:!w-[calc(25%-6px)] rounded-[var(--radius-md)] p-[5px]">Card</button>
                  <button type="button" data-method="donors" class="tab-button transition-all hover:bg-[var(--hover-bg-grey)] !w-[calc(50%-4px)] sm:!w-[calc(25%-6px)] rounded-[var(--radius-md)] p-[5px]">Donors Fund</button>
                  <button type="button" data-method="ojc" class="tab-button transition-all hover:bg-[var(--hover-bg-grey)] !w-[calc(50%-4px)] sm:!w-[calc(25%-6px)] rounded-[var(--radius-md)] p-[5px]">OJC</button>
                  <button type="button" data-method="pledger" class="tab-button transition-all hover:bg-[var(--hover-bg-grey)] !w-[calc(50%-4px)] sm:!w-[calc(25%-6px)] rounded-[var(--radius-md)] p-[5px]">Pledger</button>
                </div>

                <div id="tab-content-cc" class="tab-content">
                  <div class="card-info">
                    <div class="card-number !pb-4">
                      <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Card number</label>
                      <div class="card-number-input !relative">
                        <svg class="card-icon !absolute !top-[50%] !left-[18px] !-translate-y-1/2" width="34" height="25" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z" fill="var(--bg-white)"></path>
                          <path d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z" stroke="var(--border-light-gray)"></path>
                          <path d="M21.5771 5.94141C25.322 5.94141 28.3584 8.94129 28.3584 12.6416C28.3583 16.3418 25.322 19.3418 21.5771 19.3418C19.8982 19.3418 18.3629 18.737 17.1787 17.7383C15.9945 18.7369 14.4591 19.3418 12.7803 19.3418C9.03566 19.3416 6.00011 16.3417 6 12.6416C6 8.94143 9.03559 5.94163 12.7803 5.94141C14.459 5.94141 15.9945 6.54548 17.1787 7.54395C18.3629 6.54535 19.8983 5.94143 21.5771 5.94141Z" fill="#ED0006"></path>
                          <path d="M21.5774 5.94141C25.3222 5.94149 28.3577 8.94134 28.3577 12.6416C28.3576 16.3418 25.3221 19.3417 21.5774 19.3418C19.8985 19.3418 18.3632 18.737 17.179 17.7383C18.6361 16.5094 19.5617 14.6829 19.5618 12.6416C19.5618 10.6001 18.6363 8.77284 17.179 7.54395C18.3631 6.54541 19.8986 5.94141 21.5774 5.94141Z" fill="#F9A000"></path>
                          <path d="M17.1785 7.54395C18.636 8.77284 19.5613 10.6 19.5613 12.6416C19.5612 14.683 18.6358 16.5094 17.1785 17.7383C15.7215 16.5094 14.7967 14.6827 14.7966 12.6416C14.7966 10.6003 15.7213 8.77284 17.1785 7.54395Z" fill="#FF5E00"></path>
                        </svg>
                        <input type="text" name="cc_card_number" placeholder="Card number" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !pl-[60px] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      </div>
                    </div>

                    <div class="card-details !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px] !pb-4">
                      <div class="expiry-field !w-full sm:!w-[50%]">
                        <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Expiration</label>
                        <input type="text" name="cc_expiry" placeholder="00/00" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      </div>
                      <div class="cvv-field !w-full sm:!w-[50%]">
                        <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">CSV</label>
                        <input name="cc_cvv" type="text" placeholder="000" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      </div>
                    </div>
                  </div>
                </div>

                <div id="tab-content-donors" class="tab-content hidden">
                  <div class="donors-info !pb-4">
                    <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Donors info</label>
                    <div class="donors-inputs !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px]">
                      <input type="text" name="donors_card_number" placeholder="Card number or username" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      <input type="text" name="donors_cvv" placeholder="CVC" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                    </div>
                  </div>
                </div>

                <div id="tab-content-ojc" class="tab-content hidden">
                  <div class="ojc-info !pb-4">
                    <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">OJC info</label>
                    <div class="ojc-inputs !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px]">
                      <input type="text" name="ojc_card_number" placeholder="OJC Card number" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      <input type="text" name="ojc_expiry" placeholder="Expiration" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                    </div>
                  </div>
                </div>

                <div id="tab-content-pledger" class="tab-content hidden">
                  <div class="pledger-info !pb-4">
                    <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Card info</label>
                    <div class="pledger-inputs">
                      <div class="pledger-card-number !relative !mb-4">
                        <svg class="card-icon !absolute !top-[50%] !left-[18px] !-translate-y-1/2" width="34" height="25" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z" fill="var(--bg-white)" />
                          <path d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z" stroke="var(--border-light-gray)" />
                          <path d="M21.5771 5.94141C25.322 5.94141 28.3584 8.94129 28.3584 12.6416C28.3583 16.3418 25.322 19.3418 21.5771 19.3418C19.8982 19.3418 18.3629 18.737 17.1787 17.7383C15.9945 18.7369 14.4591 19.3418 12.7803 19.3418C9.03566 19.3416 6.00011 16.3417 6 12.6416C6 8.94143 9.03559 5.94163 12.7803 5.94141C14.459 5.94141 15.9945 6.54548 17.1787 7.54395C18.3629 6.54535 19.8983 5.94143 21.5771 5.94141Z" fill="#ED0006" />
                          <path d="M21.5774 5.94141C25.3222 5.94149 28.3577 8.94134 28.3577 12.6416C28.3576 16.3418 25.3221 19.3417 21.5774 19.3418C19.8985 19.3418 18.3632 18.737 17.179 17.7383C18.6361 16.5094 19.5617 14.6829 19.5618 12.6416C19.5618 10.6001 18.6363 8.77284 17.179 7.54395C18.3631 6.54541 19.8986 5.94141 21.5774 5.94141Z" fill="#F9A000" />
                          <path d="M17.1785 7.54395C18.636 8.77284 19.5613 10.6 19.5613 12.6416C19.5612 14.683 18.6358 16.5094 17.1785 17.7383C15.7215 16.5094 14.7967 14.6827 14.7966 12.6416C14.7966 10.6003 15.7213 8.77284 17.1785 7.54395Z" fill="#FF5E00" />
                        </svg>
                        <input type="text" name="pledger_card_number" placeholder="Card number" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !pl-[60px] !rounded-[var(--radius-lg)] w-full transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      </div>
                      <div class="pledger-details !flex !flex-col sm:!flex-row !gap-[16px] md:!gap-[25px]">
                        <input type="text" name="pledger_expiry" placeholder="Expiry" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                        <input type="text" name="pledger_cvv" placeholder="CVV" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-full sm:w-[50%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="billing-address">
                <label class="!text-[var(--text-gray)] !font-normal" style="font-size: var(--font-md)">Billing address</label>
                <div class="address-fields">
                  <input name="address" type="text" placeholder="Your address" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] w-[100%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize !mb-4" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                  <div class="address-details !flex !flex-col sm:!flex-row !gap-[16px]">
                    <input name="city" type="text" placeholder="City" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] !w-full sm:w-[33%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                    <input name="state" type="text" placeholder="State" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] !w-full sm:w-[33%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                    <input name="zip" type="text" placeholder="Zip" class="border !border-[var(--border-gray)] !bg-[var(--bg-white)] !rounded-[var(--radius-lg)] !w-full sm:w-[33%] transition-all focus:!border-transparent !py-[14px] !px-[17px] !text-[var(--text-dark-gray)] placeholder:!capitalize" style="font-size: var(--font-sm); --tw-placeholder-opacity: 1; --tw-placeholder-color: var(--text-gray)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="sticky top-[20px] h-full amount-main-div md:w-[45%]">
        <div style="box-shadow: var(--shadow-sm);" class="donation-amount !bg-[var(--bg-white)] !rounded-[var(--radius-xl)] !p-[20px] !shadow-[var(--shadow-sm)] flex items-center justify-between !mb-5">
        <label class="!text-[var(--text-gray)] !font-bold m-0 w-[20%]" style="font-size: var(--font-lg)">Total</label>
        <div class="!flex !items-center !justify-end w-[80%]">
                <p class="amount Bethany !text-[var(--text-dark-gray)] !font-bold" style="font-size: var(--font-md)">$7,200</p>
                <p id="monthly-description" class="amount-description !text-[var(--text-gray)] !font-bold" style="font-size: var(--font-md); display: none;">/mo for 12 months</p>
                </div>
              </div>

              <div data-sitekey="SITE_KEY" data-callback="cfCallback" class="cf-turnstile"></div>
              <button type="submit" class="border !border-[var(--border-yellow)] !text-[var(--text-black)] !rounded-[var(--radius-lg)] !w-full !mb-4 py-[16px] px-[32px] !bg-[var(--bg-yellow)] !flex !justify-center !items-center !gap-[10px] hover:!bg-[var(--bg-white)] hover:!border-[var(--border-dark)] transition-all group !cursor-pointer">
                <svg class="!stroke-[var(--text-black)] transition-all" width="19" height="21" fill="none" viewBox="0 0 19 21" class="submit-icon" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.1333 8.41162V6.41162C14.1333 3.6502 11.8947 1.41162 9.1333 1.41162C6.37188 1.41162 4.1333 3.6502 4.1333 6.41162V8.41162M9.1333 12.9116V14.9116M5.9333 19.4116H12.3333C14.0135 19.4116 14.8535 19.4116 15.4953 19.0846C16.0598 18.797 16.5187 18.3381 16.8063 17.7736C17.1333 17.1319 17.1333 16.2918 17.1333 14.6116V13.2116C17.1333 11.5315 17.1333 10.6914 16.8063 10.0496C16.5187 9.48516 16.0598 9.02622 15.4953 8.7386C14.8535 8.41162 14.0135 8.41162 12.3333 8.41162H5.9333C4.25314 8.41162 3.41306 8.41162 2.77133 8.7386C2.20684 9.02622 1.7479 9.48516 1.46028 10.0496C1.1333 10.6914 1.1333 11.5315 1.1333 13.2116V14.6116C1.1333 16.2918 1.1333 17.1319 1.46028 17.7736C1.7479 18.3381 2.20684 18.797 2.77133 19.0846C3.41306 19.4116 4.25314 19.4116 5.9333 19.4116Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>Process donation</span>
              </button>

              <p class="footer-text !text-[var(--text-gray)] !font-normal !text-center" style="font-size: var(--font-md)">
                All donations are processed securely.<br />
                You can cancel your recurring donation at any time.
              </p>
              <div class="msg-container"></div>
        </div>
      </form>
    </section>
  </div>
</div>

@endsection
@section('scripts')
@endsection