/* Request type card active state */
.sc-req-active {
border-color: #2b4b8f !important;
background: #edf1fa !important;
}
/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
/* Main grid: stack to 1 column */
.sc-contact-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* Left card: reduce padding on mobile */
.sc-contact-info-card {
padding: 28px 20px !important;
}
/* Right card: reduce padding on mobile */
.sc-form-card {
padding: 28px 20px !important;
}
/* Request type cards: 1 column on mobile */
.sc-request-types {
grid-template-columns: 1fr !important;
}
/* Form inputs: 16px to prevent iOS zoom */
.sc-contact-grid input,
.sc-contact-grid textarea {
font-size: 16px !important;
}
/* Section heading smaller on mobile */
.sc-contact-info-card h2 {
font-size: 22px !important;
}
}
(function() {
/* —- Request type card selection —- */
var cards = document.querySelectorAll(‘.sc-req-card’);
var hiddenInput = document.getElementById(‘sc-request-type’);
cards.forEach(function(card) {
card.addEventListener(‘click’, function() {
cards.forEach(function(c) { c.classList.remove(‘sc-req-active’); });
card.classList.add(‘sc-req-active’);
var radio = card.querySelector(‘input[type=”radio”]’);
radio.checked = true;
if (hiddenInput) hiddenInput.value = radio.value;
/* Update button label based on selection */
var btn = document.querySelector(‘#sc-contact-form button[type=”submit”]’);
if (btn) {
if (radio.value === ‘Free Sample’) btn.textContent = ‘Send My Sample Request’;
else if (radio.value === ‘Free Catalogue’) btn.textContent = ‘Send My Catalogue Request’;
else if (radio.value === ‘Wholesale In-Stock’) btn.textContent = ‘Send My Wholesale Request’;
}
});
});
/* —- Form submission —- */
var form = document.getElementById(‘sc-contact-form’);
if (!form) return;
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
/* Ensure request_type is set even if user didn’t click a card */
if (!hiddenInput.value) {
var checkedRadio = form.querySelector(‘input[name=”sc_request_type”]:checked’);
if (!checkedRadio) {
alert(‘Please select one option above: Free Sample, Free Catalogue, or Wholesale In-Stock.’);
return;
}
hiddenInput.value = checkedRadio.value;
}
var button = form.querySelector(‘button[type=”submit”]’);
var btnOriginal = button.textContent;
button.textContent = ‘Sending…’;
button.disabled = true;
button.style.opacity = ‘0.7’;
button.style.cursor = ‘not-allowed’;
fetch(‘https://api.web3forms.com/submit’, {
method: ‘POST’,
body: new FormData(form)
})
.then(function(response) { return response.json(); })
.then(function(data) {
if (data.success) {
var fields = form.querySelectorAll(‘div:not(#sc-form-success), button, .sc-request-types’);
fields.forEach(function(el) { el.style.display = ‘none’; });
document.querySelector(‘.sc-request-types’).style.display = ‘none’;
document.querySelector(‘.sc-form-card > p’).style.display = ‘none’;
document.querySelector(‘.sc-form-card > h3’).style.display = ‘none’;
/* Custom success message per type */
var successMsg = document.getElementById(‘sc-success-msg’);
var rtype = hiddenInput.value;
if (rtype === ‘Free Sample’) {
successMsg.textContent = “We’ve received your sample request. Our team will follow up within 24 hours with product options and shipping details.”;
} else if (rtype === ‘Free Catalogue’) {
successMsg.textContent = “We’ve received your catalogue request. You’ll receive our latest product catalogue with pricing within 24 hours.”;
} else if (rtype === ‘Wholesale In-Stock’) {
successMsg.textContent = “We’ve received your wholesale inquiry. Our team will share current stock availability and bulk pricing within 24 hours.”;
}
document.getElementById(‘sc-form-success’).style.display = ‘block’;
} else {
alert(‘Something went wrong. Please try again or email us directly at info@shinecloudsco.com.’);
button.textContent = btnOriginal;
button.disabled = false;
button.style.opacity = ‘1’;
button.style.cursor = ‘pointer’;
}
})
.catch(function() {
alert(‘Network error. Please try again or email us directly at info@shinecloudsco.com.’);
button.textContent = btnOriginal;
button.disabled = false;
button.style.opacity = ‘1’;
button.style.cursor = ‘pointer’;
});
});
})();
