.elementor-49513 .elementor-element.elementor-element-98e33a2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-49513 .elementor-element.elementor-element-4e90752 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0em 0em 0em 0em;}.elementor-49513 .elementor-element.elementor-element-4e90752.elementor-element{--align-self:center;}/* Start custom CSS */<!--
  ============================================================
  SACS PRE-AUCTION BID FORM  —  WordPress / Elementor embed
  ============================================================

  HOW TO USE
  1. Upload the 6 images to WP Media Library (Media > Add New) and copy each URL.
  2. Paste those URLs into the CONFIG block at the top of the <script> below.
  3. In Elementor: add an "HTML" widget to your page.
  4. Paste this ENTIRE snippet into that HTML widget. Save.

  NOTES
  - All styles are namespaced under #sacs-prebid so they will NOT
    clash with the Galetti theme or other Elementor widgets.
  - The form currently shows a success screen on submit. To actually
    CAPTURE submissions, set SUBMIT_ENDPOINT in the CONFIG block to a
    URL that accepts a POST (e.g. a Google Apps Script web app, a
    WP REST route, Formspree, etc). If left blank it just shows the
    confirmation without sending anywhere.
  ============================================================
-->

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

<div id="sacs-prebid">
  <div class="sp-prog-bar"><div class="sp-prog-fill" id="sp-prog"></div></div>

  <div class="sp-header">
    <img id="sp-logo-sacs-h" class="sp-logo-sacs" alt="SACS Rugby">
    <div class="sp-header-center">
      <div class="sp-header-eyebrow">Fundraiser Auction</div>
      <div class="sp-header-divider"></div>
      <div class="sp-header-event">25 June 2026 &bull; South African College High School, Newlands</div>
    </div>
    <img id="sp-logo-galetti-h" class="sp-logo-galetti" alt="Galetti Corporate Real Estate">
  </div>

  <div class="sp-hero">
    <div class="sp-hero-kicker">
      <div class="sp-hero-kicker-line"></div>
      <div class="sp-hero-kicker-text">UK Rugby Tour 2026</div>
      <div class="sp-hero-kicker-line"></div>
    </div>
    <h1 class="sp-h1"><strong>Pre-Auction</strong><br>Bid Registration</h1>
    <p class="sp-hero-sub">Register your interest in one or more auction items before the evening begins. A Galetti representative will reach out on the night to confirm your bid.</p>
  </div>

  <div class="sp-strip">
    <div class="sp-strip-num">1</div><div class="sp-strip-text">Select the item(s) you wish to bid on</div>
    <div class="sp-strip-sep"></div>
    <div class="sp-strip-num">2</div><div class="sp-strip-text">Enter your highest offer</div>
    <div class="sp-strip-sep"></div>
    <div class="sp-strip-num">3</div><div class="sp-strip-text">Submit your details and acknowledgement</div>
  </div>

  <div class="sp-page" id="sp-formPage">

    <div class="sp-sec-head">
      <div class="sp-sec-label">Step 01</div>
      <div class="sp-sec-title"><strong>Exclusive</strong> Auction Items</div>
      <p class="sp-sec-desc">Select one or more items. A minimum bid applies where indicated.</p>
    </div>

    <div class="sp-lots-grid">
      <div class="sp-lot-card" data-lot="1">
        <img class="sp-lot-img" id="sp-img-1" alt="Chaz Williams artwork">
        <div class="sp-lot-sel-bar"></div>
        <div class="sp-lot-body">
          <div class="sp-lot-top"><div class="sp-lot-num">Item 01</div><div class="sp-lot-tick"><svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3L3.5 5.5L8 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
          <div class="sp-lot-name">Chaz Williams Original - Siya Kolisi</div>
          <div class="sp-lot-desc">Original signed artwork by Chaz Williams, featuring Springbok captain Siya Kolisi lifting the Webb Ellis Cup.</div>
          <div class="sp-lot-foot"><div class="sp-lot-hint">Select</div></div>
        </div>
      </div>

      <div class="sp-lot-card" data-lot="2">
        <img class="sp-lot-img-logo" id="sp-img-2" alt="NB Projects">
        <div class="sp-lot-sel-bar"></div>
        <div class="sp-lot-body">
          <div class="sp-lot-top"><div class="sp-lot-num">Item 02</div><div class="sp-lot-tick"><svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3L3.5 5.5L8 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
          <div class="sp-lot-name">NB Projects - Full Bathroom Renovation</div>
          <div class="sp-lot-desc">A complete bathroom renovation package including premium products and full labour from a collaboration of leading suppliers.</div>
          <div class="sp-lot-foot"><div class="sp-lot-hint">Select</div></div>
        </div>
      </div>

      <div class="sp-lot-card" data-lot="3">
        <img class="sp-lot-img" id="sp-img-3" alt="Madikwe Game Reserve">
        <div class="sp-lot-sel-bar"></div>
        <div class="sp-lot-body">
          <div class="sp-lot-top"><div class="sp-lot-num">Item 03</div><div class="sp-lot-tick"><svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3L3.5 5.5L8 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
          <div class="sp-lot-name">Madikwe - The Last Word Bush Getaway</div>
          <div class="sp-lot-desc">An exclusive 2-person retreat at The Last Word Madikwe, including return flights and private transfers into the reserve.</div>
          <div class="sp-lot-foot"><div class="sp-lot-hint">Select</div><div class="sp-lot-min">Min R45 000</div></div>
        </div>
      </div>

      <div class="sp-lot-card" data-lot="4">
        <img class="sp-lot-img" id="sp-img-4" alt="The Nook Hermanus">
        <div class="sp-lot-sel-bar"></div>
        <div class="sp-lot-body">
          <div class="sp-lot-top"><div class="sp-lot-num">Item 04</div><div class="sp-lot-tick"><svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3L3.5 5.5L8 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
          <div class="sp-lot-name">The Nook - Hermanus Coastal Retreat</div>
          <div class="sp-lot-desc">Three nights at The Nook in Hermanus for up to 10 guests. A private Whale Coast escape for a group or family celebration.</div>
          <div class="sp-lot-foot"><div class="sp-lot-hint">Select</div></div>
        </div>
      </div>
    </div>

    <div class="sp-bid-sec" id="sp-bidSec">
      <div class="sp-sec-head">
        <div class="sp-sec-label">Step 02</div>
        <div class="sp-sec-title"><strong>Your</strong> Highest Offer</div>
        <p class="sp-sec-desc">Enter the maximum you are prepared to offer for each item. This is your intent, not binding until the item is awarded on the evening.</p>
      </div>
      <div id="sp-bidInputs"></div>
    </div>

    <hr class="sp-divider">

    <div class="sp-sec-head">
      <div class="sp-sec-label" id="sp-stepLabel3">Step 02</div>
      <div class="sp-sec-title"><strong>Your</strong> Details</div>
    </div>
    <div class="sp-form-block">
      <div class="sp-form-block-sub">A Galetti representative will contact you on the evening to confirm and activate your bid.</div>
      <div class="sp-field-row">
        <div class="sp-field"><label class="sp-fl" for="sp-fName">First Name <span class="sp-req">*</span></label><input type="text" id="sp-fName" placeholder="First name" autocomplete="given-name"><div class="sp-f-err" id="sp-fNameErr">Please enter your first name</div></div>
        <div class="sp-field"><label class="sp-fl" for="sp-lName">Last Name <span class="sp-req">*</span></label><input type="text" id="sp-lName" placeholder="Last name" autocomplete="family-name"><div class="sp-f-err" id="sp-lNameErr">Please enter your last name</div></div>
      </div>
      <div class="sp-field-row">
        <div class="sp-field"><label class="sp-fl" for="sp-email">Email <span class="sp-req">*</span></label><input type="email" id="sp-email" placeholder="your@email.com" autocomplete="email"><div class="sp-f-err" id="sp-emailErr">Please enter a valid email</div></div>
        <div class="sp-field"><label class="sp-fl" for="sp-phone">Mobile <span class="sp-req">*</span></label><input type="tel" id="sp-phone" placeholder="082 000 0000" autocomplete="tel"><div class="sp-f-err" id="sp-phoneErr">Please enter your mobile number</div></div>
      </div>
      <div class="sp-field-row">
        <div class="sp-field"><label class="sp-fl" for="sp-idNum">ID Number <span class="sp-req">*</span></label><input type="text" id="sp-idNum" placeholder="South African ID number" maxlength="13"><div class="sp-f-err" id="sp-idNumErr">Please enter your ID number</div><div class="sp-f-hint">Required for registration. Kept strictly confidential.</div></div>
        <div class="sp-field"><label class="sp-fl" for="sp-tNum">Table Number <span class="sp-fl-opt">(if known)</span></label><input type="text" id="sp-tNum" placeholder="Optional"></div>
      </div>
    </div>

    <div class="sp-sec-head">
      <div class="sp-sec-label" id="sp-stepLabel4">Step 03</div>
      <div class="sp-sec-title"><strong>Letter</strong> of Intent</div>
    </div>
    <div class="sp-ack-box">
      <div class="sp-ack-title">Acknowledgement</div>
      <p class="sp-ack-text">This pre-auction registration constitutes a letter of intent. By submitting, you indicate your interest in bidding on the selected item(s) at the SACS UK Rugby Tour Fundraiser Auction on 25 June 2026. A Galetti representative will contact you on the evening to confirm and activate your bid. Should you hold the highest offer, you commit to honouring your bid on the night.</p>
      <div class="sp-ack-row" id="sp-ackRow">
        <div class="sp-ack-chk" id="sp-ackChk"><svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3L3.5 5.5L8 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="sp-ack-lbl">I acknowledge that this submission is a letter of intent. Should I hold the highest offer on the evening, I commit to honouring my bid and completing payment as directed by the auction team.</div>
      </div>
      <div class="sp-ack-err" id="sp-ackErr">Please confirm your acknowledgement to proceed</div>
    </div>

    <div class="sp-submit-wrap">
      <button class="sp-btn-sub" id="sp-submitBtn" type="button">Submit Bid</button>
      <p class="sp-submit-note">Your information is handled confidentially by Galetti Corporate Real Estate.<br>A confirmation will be sent to the email address provided.</p>
    </div>
  </div>

  <div class="sp-success" id="sp-successScreen">
    <div class="sp-success-check"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#F05325" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
    <h2 class="sp-success-title"><strong>Bid</strong> Received</h2>
    <div class="sp-success-line"></div>
    <p class="sp-success-text" id="sp-successMsg">Thank you. A Galetti representative will be in touch on the evening of <strong>25 June 2026</strong> to confirm your bid.</p>
    <p class="sp-success-foot">We look forward to seeing you at SACS on the evening.</p>
  </div>

  <div class="sp-footer">
    <div class="sp-footer-logos">
      <img id="sp-logo-sacs-f" class="sp-f-sacs" alt="SACS Rugby">
      <div class="sp-f-div"></div>
      <img id="sp-logo-galetti-f" class="sp-f-galetti" alt="Galetti">
    </div>
    <div class="sp-footer-text">Auction presented by Galetti Corporate Real Estate &bull; galetti.co.za<br>25 June 2026 &bull; South African College High School, Newlands</div>
  </div>
</div>

<style>
#sacs-prebid *,#sacs-prebid *::before,#sacs-prebid *::after{box-sizing:border-box;margin:0;padding:0}
#sacs-prebid{
  --sp-navy:#2D393B;--sp-orange:#F05325;--sp-orange-pale:#FEF3EF;--sp-white:#FFFFFF;
  --sp-off-white:#FAFAF8;--sp-light:#F4F4F2;--sp-text:#1C2426;--sp-text-mid:#4A5568;
  --sp-text-light:#9CA3AF;--sp-border:#E8E8E4;--sp-error:#DC2626;
  font-family:'Lato',sans-serif;background:var(--sp-white);color:var(--sp-text);
  position:relative;line-height:1.5;
}
#sacs-prebid h1,#sacs-prebid h2,#sacs-prebid p,#sacs-prebid div{font-family:'Lato',sans-serif}
#sacs-prebid .sp-prog-bar{background:var(--sp-border);height:2px;position:sticky;top:0;left:0;right:0;z-index:50}
#sacs-prebid .sp-prog-fill{height:100%;background:var(--sp-orange);transition:width .5s ease;width:0%}

#sacs-prebid .sp-header{background:var(--sp-navy);padding:28px 56px;display:flex;align-items:center;justify-content:space-between}
#sacs-prebid .sp-logo-sacs{height:88px;width:auto;display:block}
#sacs-prebid .sp-logo-galetti{height:88px;width:auto;display:block}
#sacs-prebid .sp-header-center{text-align:center;flex:1;padding:0 32px}
#sacs-prebid .sp-header-eyebrow{font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:6px}
#sacs-prebid .sp-header-divider{width:24px;height:1px;background:var(--sp-orange);margin:8px auto}
#sacs-prebid .sp-header-event{font-size:11px;font-weight:300;color:rgba(255,255,255,0.7);letter-spacing:1px}

#sacs-prebid .sp-hero{padding:80px 56px 72px;text-align:center;background:var(--sp-white);position:relative}
#sacs-prebid .sp-hero::after{content:'';position:absolute;bottom:0;left:56px;right:56px;height:1px;background:var(--sp-border)}
#sacs-prebid .sp-hero-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
#sacs-prebid .sp-hero-kicker-line{width:20px;height:1px;background:var(--sp-orange)}
#sacs-prebid .sp-hero-kicker-text{font-size:10px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--sp-orange)}
#sacs-prebid .sp-h1{font-size:clamp(36px,5vw,60px);font-weight:300;color:var(--sp-navy);line-height:1.1;letter-spacing:-1px;margin-bottom:16px}
#sacs-prebid .sp-h1 strong{font-weight:900}
#sacs-prebid .sp-hero-sub{font-size:15px;font-weight:300;color:var(--sp-text-mid);line-height:1.7;max-width:480px;margin:0 auto}

#sacs-prebid .sp-strip{background:var(--sp-off-white);border-bottom:1px solid var(--sp-border);padding:16px 56px;display:flex;align-items:center;justify-content:center;gap:12px}
#sacs-prebid .sp-strip-num{width:24px;height:24px;border:1px solid var(--sp-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--sp-orange);flex-shrink:0}
#sacs-prebid .sp-strip-text{font-size:12px;color:var(--sp-text-mid);line-height:1.5}
#sacs-prebid .sp-strip-sep{width:1px;height:20px;background:var(--sp-border);flex-shrink:0}

#sacs-prebid .sp-page{max-width:900px;margin:0 auto;padding:64px 40px 100px}
#sacs-prebid .sp-sec-head{margin-bottom:32px}
#sacs-prebid .sp-sec-label{font-size:9px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--sp-orange);margin-bottom:10px;display:flex;align-items:center;gap:10px}
#sacs-prebid .sp-sec-label::after{content:'';flex:1;height:1px;background:var(--sp-border)}
#sacs-prebid .sp-sec-title{font-size:clamp(22px,3vw,30px);font-weight:300;color:var(--sp-navy);letter-spacing:-0.3px}
#sacs-prebid .sp-sec-title strong{font-weight:900}
#sacs-prebid .sp-sec-desc{font-size:13.5px;color:var(--sp-text-mid);line-height:1.75;margin-top:6px;max-width:540px}

#sacs-prebid .sp-lots-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sp-border);border:1px solid var(--sp-border);margin-bottom:64px}
#sacs-prebid .sp-lot-card{background:var(--sp-white);cursor:pointer;transition:background .2s ease;position:relative;display:block;user-select:none}
#sacs-prebid .sp-lot-card:hover{background:var(--sp-off-white)}
#sacs-prebid .sp-lot-img{width:100%;height:200px;object-fit:cover;object-position:center;display:block;filter:grayscale(20%);transition:filter .3s;pointer-events:none}
#sacs-prebid .sp-lot-img-logo{width:100%;height:200px;object-fit:contain;padding:32px;background:var(--sp-light);display:block;pointer-events:none}
#sacs-prebid .sp-lot-card:hover .sp-lot-img,#sacs-prebid .sp-lot-card.sp-selected .sp-lot-img{filter:grayscale(0%)}
#sacs-prebid .sp-lot-sel-bar{height:2px;background:transparent;transition:background .2s}
#sacs-prebid .sp-lot-card.sp-selected .sp-lot-sel-bar{background:var(--sp-orange)}
#sacs-prebid .sp-lot-body{padding:20px 22px 18px}
#sacs-prebid .sp-lot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
#sacs-prebid .sp-lot-num{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--sp-text-light)}
#sacs-prebid .sp-lot-tick{width:18px;height:18px;border:1px solid var(--sp-border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-top:1px}
#sacs-prebid .sp-lot-card.sp-selected .sp-lot-tick{background:var(--sp-orange);border-color:var(--sp-orange)}
#sacs-prebid .sp-lot-tick svg{opacity:0;transition:opacity .2s}
#sacs-prebid .sp-lot-card.sp-selected .sp-lot-tick svg{opacity:1}
#sacs-prebid .sp-lot-name{font-size:15px;font-weight:700;color:var(--sp-navy);line-height:1.3;margin-bottom:6px}
#sacs-prebid .sp-lot-desc{font-size:12px;color:var(--sp-text-mid);line-height:1.7;margin-bottom:14px}
#sacs-prebid .sp-lot-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--sp-border)}
#sacs-prebid .sp-lot-hint{font-size:10px;color:var(--sp-text-light);letter-spacing:0.5px}
#sacs-prebid .sp-lot-card.sp-selected .sp-lot-hint{color:var(--sp-orange);font-weight:700}
#sacs-prebid .sp-lot-min{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sp-orange);background:var(--sp-orange-pale);padding:3px 8px;border-radius:2px}

#sacs-prebid .sp-bid-sec{display:none;margin-bottom:56px}
#sacs-prebid .sp-bid-sec.sp-on{display:block;animation:sp-fadeUp .3s ease}
@keyframes sp-fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#sacs-prebid .sp-bid-item{border:1px solid var(--sp-border);padding:24px 28px;margin-bottom:10px;background:var(--sp-off-white)}
#sacs-prebid .sp-bid-lot-num{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--sp-text-light);margin-bottom:4px}
#sacs-prebid .sp-bid-lot-name{font-size:16px;font-weight:700;color:var(--sp-navy);margin-bottom:18px}

#sacs-prebid .sp-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
#sacs-prebid .sp-field{display:flex;flex-direction:column;gap:6px}
#sacs-prebid .sp-fl{font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-text-mid)}
#sacs-prebid .sp-req{color:var(--sp-orange)}
#sacs-prebid .sp-fl-opt{font-weight:300;color:var(--sp-text-light);letter-spacing:0;text-transform:none}
#sacs-prebid #sacs-prebid input,
#sacs-prebid input[type=text],#sacs-prebid input[type=email],#sacs-prebid input[type=tel],#sacs-prebid input[type=number]{font-family:'Lato',sans-serif;font-size:14px;color:var(--sp-text);background:var(--sp-white);border:1px solid var(--sp-border);border-radius:0;padding:12px 14px;width:100%;transition:border-color .2s;outline:none;-webkit-appearance:none;appearance:none;box-shadow:none}
#sacs-prebid input:focus{border-color:var(--sp-navy);box-shadow:none}
#sacs-prebid input.sp-err{border-color:var(--sp-error)}
#sacs-prebid .sp-f-hint{font-size:11px;color:var(--sp-text-light);line-height:1.5}
#sacs-prebid .sp-f-err{font-size:11px;color:var(--sp-error);display:none}
#sacs-prebid .sp-f-err.sp-on{display:block}
#sacs-prebid .sp-cur{position:relative}
#sacs-prebid .sp-cur::before{content:'R';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--sp-text-light);pointer-events:none}
#sacs-prebid .sp-cur input{padding-left:26px}
#sacs-prebid .sp-form-block{margin-bottom:48px}
#sacs-prebid .sp-form-block-sub{font-size:13px;color:var(--sp-text-mid);margin-bottom:22px;line-height:1.65}

#sacs-prebid .sp-ack-box{background:var(--sp-navy);padding:32px 28px;margin-bottom:32px;position:relative}
#sacs-prebid .sp-ack-title{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sp-orange);margin-bottom:14px}
#sacs-prebid .sp-ack-text{font-size:12.5px;color:rgba(255,255,255,0.55);line-height:1.9;margin-bottom:22px}
#sacs-prebid .sp-ack-row{display:flex;align-items:flex-start;gap:14px;cursor:pointer;user-select:none}
#sacs-prebid .sp-ack-chk{width:18px;height:18px;min-width:18px;border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all .18s;background:transparent}
#sacs-prebid .sp-ack-chk.sp-on{background:var(--sp-orange);border-color:var(--sp-orange)}
#sacs-prebid .sp-ack-chk svg{opacity:0;transition:opacity .18s}
#sacs-prebid .sp-ack-chk.sp-on svg{opacity:1}
#sacs-prebid .sp-ack-lbl{font-size:13px;color:rgba(255,255,255,0.75);line-height:1.8;font-weight:300}
#sacs-prebid .sp-ack-err{font-size:11px;color:#FCA5A5;margin-top:12px;display:none}
#sacs-prebid .sp-ack-err.sp-on{display:block}
#sacs-prebid .sp-divider{border:none;border-top:1px solid var(--sp-border);margin:48px 0}

#sacs-prebid .sp-submit-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#sacs-prebid .sp-btn-sub{font-family:'Lato',sans-serif;font-size:10px;font-weight:900;letter-spacing:4px;text-transform:uppercase;color:var(--sp-white);background:var(--sp-orange);border:none;padding:18px 52px;cursor:pointer;transition:background .2s ease;border-radius:0}
#sacs-prebid .sp-btn-sub:hover{background:#d4481f}
#sacs-prebid .sp-submit-note{font-size:11.5px;color:var(--sp-text-light);line-height:1.7}

#sacs-prebid .sp-success{display:none;text-align:center;padding:100px 40px}
#sacs-prebid .sp-success.sp-on{display:block;animation:sp-fadeUp .5s ease}
#sacs-prebid .sp-success-check{width:56px;height:56px;border:2px solid var(--sp-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px}
#sacs-prebid .sp-success-title{font-size:32px;font-weight:300;color:var(--sp-navy);margin-bottom:6px;letter-spacing:-0.5px}
#sacs-prebid .sp-success-title strong{font-weight:900}
#sacs-prebid .sp-success-line{width:32px;height:2px;background:var(--sp-orange);margin:16px auto 20px}
#sacs-prebid .sp-success-text{font-size:14px;color:var(--sp-text-mid);line-height:1.85;max-width:420px;margin:0 auto 8px}
#sacs-prebid .sp-success-foot{font-size:12.5px;color:var(--sp-text-light);margin-top:10px}

#sacs-prebid .sp-footer{background:var(--sp-navy);padding:32px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
#sacs-prebid .sp-footer-logos{display:flex;align-items:center;gap:16px}
#sacs-prebid .sp-f-sacs{height:56px;width:auto;display:block}
#sacs-prebid .sp-f-galetti{height:56px;width:auto;display:block}
#sacs-prebid .sp-f-div{width:1px;height:30px;background:rgba(255,255,255,0.12)}
#sacs-prebid .sp-footer-text{font-size:11px;color:rgba(255,255,255,0.5);line-height:1.8;text-align:right}

@media(max-width:580px){
  #sacs-prebid .sp-field-row{grid-template-columns:1fr}
  #sacs-prebid .sp-lots-grid{grid-template-columns:1fr}
  #sacs-prebid .sp-header{padding:24px;flex-direction:column;gap:20px}
  #sacs-prebid .sp-hero{padding:48px 24px}
  #sacs-prebid .sp-hero::after{left:24px;right:24px}
  #sacs-prebid .sp-strip{padding:16px 24px;flex-wrap:wrap}
  #sacs-prebid .sp-page{padding:48px 24px 80px}
  #sacs-prebid .sp-footer{padding:28px 24px;flex-direction:column;text-align:center}
  #sacs-prebid .sp-footer-text{text-align:center}
}
</style>

<script>
(function(){
  /* ============================================================
     CONFIG  —  EDIT THESE
     ============================================================ */
  var CONFIG = {
    // Paste your WP Media Library URLs here
    img_sacs:    "REPLACE_WITH_SACS_LOGO_URL.png",
    img_galetti: "REPLACE_WITH_GALETTI_LOGO_URL.png",
    img_item1:   "REPLACE_WITH_CHAZ_IMAGE_URL.jpg",
    img_item2:   "REPLACE_WITH_NB_LOGO_URL.jpg",
    img_item3:   "REPLACE_WITH_MADIKWE_IMAGE_URL.jpg",
    img_item4:   "REPLACE_WITH_NOOK_IMAGE_URL.jpg",
    // Leave blank to just show the confirmation screen.
    // Or set a POST endpoint (Google Apps Script web app, WP REST, Formspree, etc).
    SUBMIT_ENDPOINT: ""
  };

  var root = document.getElementById('sacs-prebid');
  if(!root) return;

  // Inject image URLs
  function setImg(id, url){ var el = root.querySelector('#'+id); if(el) el.src = url; }
  setImg('sp-logo-sacs-h', CONFIG.img_sacs);
  setImg('sp-logo-galetti-h', CONFIG.img_galetti);
  setImg('sp-logo-sacs-f', CONFIG.img_sacs);
  setImg('sp-logo-galetti-f', CONFIG.img_galetti);
  setImg('sp-img-1', CONFIG.img_item1);
  setImg('sp-img-2', CONFIG.img_item2);
  setImg('sp-img-3', CONFIG.img_item3);
  setImg('sp-img-4', CONFIG.img_item4);

  var lots = {
    1:{name:"Chaz Williams Original - Siya Kolisi",min:null},
    2:{name:"NB Projects - Full Bathroom Renovation",min:null},
    3:{name:"Madikwe - The Last Word Bush Getaway",min:45000},
    4:{name:"The Nook - Hermanus Coastal Retreat",min:null}
  };
  var sel = {}, ackOn = false;

  function $(s){ return root.querySelector(s); }
  function $all(s){ return root.querySelectorAll(s); }

  // Card selection
  $all('.sp-lot-card').forEach(function(card){
    card.addEventListener('click', function(){
      var id = card.getAttribute('data-lot');
      var hint = card.querySelector('.sp-lot-hint');
      if(sel[id]){ delete sel[id]; card.classList.remove('sp-selected'); hint.textContent='Select'; }
      else { sel[id]=true; card.classList.add('sp-selected'); hint.textContent='Selected'; }
      renderBids(); updateProg();
    });
  });

  function selectedIds(){ return Object.keys(sel).map(Number).sort(function(a,b){return a-b;}); }

  function renderBids(){
    var s = $('#sp-bidSec'), ct = $('#sp-bidInputs'), s3 = $('#sp-stepLabel3'), s4 = $('#sp-stepLabel4');
    var ids = selectedIds();
    if(ids.length===0){ s.classList.remove('sp-on'); s3.textContent='Step 02'; s4.textContent='Step 03'; ct.innerHTML=''; return; }
    s.classList.add('sp-on'); s3.textContent='Step 03'; s4.textContent='Step 04';
    var existing = {};
    ids.forEach(function(id){ var e = root.querySelector('#sp-bid-'+id); if(e) existing[id]=e.value; });
    ct.innerHTML='';
    ids.forEach(function(id){
      var lot = lots[id];
      var minNote = lot.min ? '<span style="color:var(--sp-orange);font-weight:700"> Minimum bid R'+lot.min.toLocaleString()+'</span>' : '';
      var val = existing[id] || '';
      var d = document.createElement('div');
      d.className='sp-bid-item';
      d.innerHTML='<div class="sp-bid-lot-num">Item 0'+id+'</div><div class="sp-bid-lot-name">'+lot.name+'</div>'+
        '<div class="sp-field-row"><div class="sp-field"><label class="sp-fl">Your highest offer <span class="sp-req">*</span></label>'+
        '<div class="sp-cur"><input type="number" id="sp-bid-'+id+'" value="'+val+'" placeholder="0" min="'+(lot.min||1)+'" step="500"></div>'+
        '<div class="sp-f-hint">Enter in Rands.'+minNote+'</div>'+
        '<div class="sp-f-err" id="sp-bidErr-'+id+'">Please enter a valid bid'+(lot.min?' of at least R'+lot.min.toLocaleString():'')+'</div></div></div>';
      ct.appendChild(d);
    });
    ids.forEach(function(id){
      var inp = root.querySelector('#sp-bid-'+id);
      inp.addEventListener('input', function(){ chkBid(id); });
    });
  }

  function chkBid(id){
    var lot = lots[id], inp = root.querySelector('#sp-bid-'+id), err = root.querySelector('#sp-bidErr-'+id);
    var val = parseFloat(inp.value), bad = !val || val<=0 || (lot.min && val<lot.min);
    inp.classList.toggle('sp-err', bad); err.classList.toggle('sp-on', bad); updateProg();
  }

  $('#sp-ackRow').addEventListener('click', function(){
    ackOn = !ackOn;
    $('#sp-ackChk').classList.toggle('sp-on', ackOn);
    $('#sp-ackErr').classList.remove('sp-on');
    updateProg();
  });

  function bidsOk(){
    var ids = selectedIds();
    for(var i=0;i<ids.length;i++){
      var inp = root.querySelector('#sp-bid-'+ids[i]); if(!inp) return false;
      var v = parseFloat(inp.value);
      if(!v || v<=0 || (lots[ids[i]].min && v<lots[ids[i]].min)) return false;
    }
    return true;
  }
  function personalOk(){
    return $('#sp-fName').value.trim() && $('#sp-lName').value.trim() &&
      /\S+@\S+\.\S+/.test($('#sp-email').value) &&
      $('#sp-phone').value.trim().length>6 && $('#sp-idNum').value.trim().length>=6;
  }
  function updateProg(){
    var steps = [selectedIds().length>0, selectedIds().length>0 && bidsOk(), personalOk(), ackOn];
    var done = steps.filter(Boolean).length;
    $('#sp-prog').style.width = (done/steps.length*100)+'%';
  }
  ['sp-fName','sp-lName','sp-email','sp-phone','sp-idNum'].forEach(function(id){
    $('#'+id).addEventListener('input', updateProg);
  });

  $('#sp-submitBtn').addEventListener('click', function(){
    var ok = true;
    var ids = selectedIds();
    if(ids.length===0){ root.scrollIntoView({behavior:'smooth'}); return; }
    ids.forEach(function(id){
      var lot = lots[id], inp = root.querySelector('#sp-bid-'+id), err = root.querySelector('#sp-bidErr-'+id);
      var val = parseFloat(inp.value);
      if(!val || val<=0 || (lot.min && val<lot.min)){ inp.classList.add('sp-err'); err.classList.add('sp-on'); ok=false; }
    });
    var checks = [
      {id:'sp-fName',e:'sp-fNameErr',fn:function(v){return v.trim().length>0;}},
      {id:'sp-lName',e:'sp-lNameErr',fn:function(v){return v.trim().length>0;}},
      {id:'sp-email',e:'sp-emailErr',fn:function(v){return /\S+@\S+\.\S+/.test(v);}},
      {id:'sp-phone',e:'sp-phoneErr',fn:function(v){return v.trim().length>6;}},
      {id:'sp-idNum',e:'sp-idNumErr',fn:function(v){return v.trim().length>=6;}}
    ];
    checks.forEach(function(c){
      var el = $('#'+c.id), err = $('#'+c.e), bad = !c.fn(el.value);
      el.classList.toggle('sp-err', bad); err.classList.toggle('sp-on', bad); if(bad) ok=false;
    });
    if(!ackOn){ $('#sp-ackErr').classList.add('sp-on'); ok=false; }
    if(!ok) return;

    // Build submission payload
    var payload = {
      firstName: $('#sp-fName').value.trim(),
      lastName: $('#sp-lName').value.trim(),
      email: $('#sp-email').value.trim(),
      mobile: $('#sp-phone').value.trim(),
      idNumber: $('#sp-idNum').value.trim(),
      table: $('#sp-tNum').value.trim(),
      bids: ids.map(function(id){ return { item: 'Item 0'+id, name: lots[id].name, offer: root.querySelector('#sp-bid-'+id).value }; }),
      acknowledged: true,
      submittedAt: new Date().toISOString()
    };

    function showSuccess(){
      var lotList = ids.map(function(id){ return 'Item 0'+id; }).join(', ');
      $('#sp-successMsg').innerHTML = 'Thank you, <strong>'+payload.firstName+'</strong>. Your pre-auction bid for <strong>'+lotList+'</strong> has been received. A Galetti representative will contact you on the evening of <strong>25 June 2026</strong> to confirm your participation.';
      $('#sp-formPage').style.display='none';
      $('#sp-successScreen').classList.add('sp-on');
      $('#sp-prog').style.width='100%';
      root.scrollIntoView({behavior:'smooth'});
    }

    if(CONFIG.SUBMIT_ENDPOINT){
      fetch(CONFIG.SUBMIT_ENDPOINT, {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(payload)
      }).then(function(){ showSuccess(); }).catch(function(){ showSuccess(); });
    } else {
      showSuccess();
    }
  });
})();
</script>/* End custom CSS */