:root{
  --bg:#f7f7f9;
  --card:#ffffff;
  --text:#1d1d1f;
  --muted:#6b7280;
  --danger:#e11d2e; /* red submit */
  --ring:#e5e7eb;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(225,29,46,.06), transparent 60%),
    radial-gradient(800px 400px at 120% 10%, rgba(0,0,0,.05), transparent 60%),
    var(--bg);
}

.wrap{
  max-width: 960px;
  margin: clamp(16px,5vw,48px) auto;
  padding: 0 16px;
}

.title{
  text-align:center;
  margin-bottom: 18px;
}
.title h1{
  margin:0 0 8px 0;
  font-size: clamp(22px, 3.2vw, 32px);
  letter-spacing:.2px;
}
.title p{
  margin:0;
  color:var(--muted);
  font-size: 14px;
}

.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: clamp(16px,3.5vw,28px);
}

form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.full{ grid-column: 1 / -1; }

label{
  display:block;
  font-weight:600;
  font-size: 14px;
  margin: 6px 0 8px;
}

.hint{
  font-weight:500;
  color:var(--muted);
  font-size:12px;
  margin-left: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  width:100%;
  border:1px solid var(--ring);
  border-radius:10px;
  padding:12px 12px;
  font-size:15px;
  background:#fff;
  outline:none;
  transition: box-shadow .2s, border-color .2s, background .2s;
}

textarea{ min-height: 120px; resize:vertical; }
select[multiple]{ min-height: 120px; overflow:auto; }

.row{ display:flex; flex-direction:column; }

.error{
  color:#b91c1c;
  font-size:12px;
  margin-top:6px;
  display:none;
}

.row.invalid input,
.row.invalid select,
.row.invalid textarea{
  border-color:#fecaca;
  background:#fff1f2;
}
.row.invalid .error{ display:block; }

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  background:var(--danger);
  color:#fff;
  font-weight:700;
  padding: 12px 18px;
  border-radius: 10px;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(225,29,46,.25);
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.7; cursor:not-allowed; box-shadow:none; }

.note{ font-size:13px; color:var(--muted); }

.status{
  margin-top: 8px;
  padding:12px 14px;
  border-radius:10px;
  display:none;
  font-size:14px;
}
.status.ok{
  display:block; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
}
.status.fail{
  display:block; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa;
}

.g-cap{ transform-origin:left top; }

@media (max-width: 820px){
  form{ grid-template-columns: 1fr; }
}


script.js
(function(){
  "use strict";

  // If you later move the handler elsewhere (e.g., WordPress uploads), change this:
  const HANDLER_URL = "send_mail.php";

  const form      = document.getElementById('supplierForm');
  const statusBox = document.getElementById('formStatus');
  const submitBtn = document.getElementById('submitBtn');

  const setInvalid = (el, msg) => {
    const row = el.closest('.row');
    if (!row) return;
    row.classList.add('invalid');
    const err = row.querySelector('.error');
    if (err && msg) err.textContent = msg;
  };
  const clearInvalid = (el) => {
    const row = el.closest('.row');
    if (!row) return;
    row.classList.remove('invalid');
  };

  const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
  const phoneOk = (v) => /^\+?[0-9\s\-\(\)]{7,20}$/.test(v);

  // Clear errors on input/change
  form.querySelectorAll('input, select, textarea').forEach(el => {
    el.addEventListener('input', ()=> clearInvalid(el));
    el.addEventListener('change', ()=> clearInvalid(el));
  });

  const showStatus = (ok, msg) => {
    statusBox.className = 'status ' + (ok ? 'ok' : 'fail');
    statusBox.textContent = msg;
    statusBox.style.display = 'block';
  };

  form.addEventListener('submit', async function(e){
    e.preventDefault();
    statusBox.className = 'status';
    statusBox.style.display = 'none';
    statusBox.textContent = '';

    // Fields
    const company  = form.company;
    const industry = form.querySelector('#industry');
    const country  = form.country;
    const state    = form.state;
    const contact  = form.contact;
    const email    = form.email;
    const mobile   = form.mobile;

    // Client validation
    let ok = true;
    if (!company.value.trim()) { setInvalid(company); ok = false; }
    if ([...industry.options].filter(o=>o.selected).length === 0) { setInvalid(industry); ok = false; }
    if (!country.value.trim()) { setInvalid(country); ok = false; }
    if (!state.value.trim())   { setInvalid(state); ok = false; }
    if (!contact.value.trim()) { setInvalid(contact); ok = false; }
    if (!emailOk(email.value.trim())) { setInvalid(email, 'Enter a valid email.'); ok = false; }
    if (!phoneOk(mobile.value.trim())){ setInvalid(mobile, 'Enter a valid phone number.'); ok = false; }

    // reCAPTCHA present?
    const tokenFieldName = 'g-recaptcha-response';
    const captchaToken = (document.querySelector('[name="'+tokenFieldName+'"]') || {}).value || '';
    const captchaErrorEl = document.getElementById('recaptchaError');
    if (!captchaToken) { captchaErrorEl.style.display = 'block'; ok = false; }
    else { captchaErrorEl.style.display = 'none'; }

    if (!ok) return;

    // Submit via AJAX
    submitBtn.disabled = true;

    try {
      const formData = new FormData(form);
      const res = await fetch(HANDLER_URL, {
        method: 'POST',
        body: formData,
        headers: { 'X-Requested-With': 'fetch' }
      });
      const json = await res.json();

      if (json.ok) {
        showStatus(true, json.message || 'Thank you! Your query has been sent successfully.');
        form.reset();
        if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
      } else {
        showStatus(false, json.message || 'Submission failed. Please check your inputs.');
        if (json.errors) {
          Object.entries(json.errors).forEach(([key, msg]) => {
            if (key === 'recaptcha') {
              captchaErrorEl.textContent = msg;
              captchaErrorEl.style.display = 'block';
            } else {
              const el = form.querySelector(`[name="${key}"]`);
              if (el) setInvalid(el, msg);
            }
          });
        }
        if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
      }
    } catch (err) {
      showStatus(false, 'Network error. Please try again.');
    } finally {
      submitBtn.disabled = false;
    }
  });
})();