.glass-form-card {
max-width: 400px;
margin: 50px auto;
background: #0044ff; /* رنگ آبی پایه */
background: linear-gradient(135deg, #0052cc 0%, #002266 100%);
border-radius: 30px;
padding: 5px;
box-shadow: 0 25px 50px -12px rgba(0, 82, 204, 0.5);
direction: rtl;
font-family: 'Segoe UI', Tahoma, sans-serif;
overflow: hidden;
}
.form-inner {
background: rgba(255, 255, 255, 0.95);
border-radius: 26px;
padding: 40px 30px;
}
.top-visual {
text-align: center;
margin-bottom: 35px;
}
.pulse-icon {
width: 70px;
height: 70px;
background: #0052cc;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 10px 20px rgba(0, 82, 204, 0.3);
animation: pulse-blue 2s infinite;
}
@keyframes pulse-blue {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 82, 204, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 82, 204, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 82, 204, 0); }
}
.top-visual h2 {
color: #1a1a1a;
font-size: 24px;
margin: 0 0 10px 0;
font-weight: 800;
}
.top-visual p {
color: #666;
font-size: 14px;
margin: 0;
}
.floating-group {
position: relative;
margin-bottom: 25px;
}
.floating-group input {
width: 100%;
padding: 15px 5px;
border: none;
border-bottom: 2px solid #e0e0e0;
background: transparent;
font-size: 16px;
transition: 0.3s;
box-sizing: border-box;
outline: none;
color: #333;
}
.floating-group .bar {
position: absolute;
bottom: 0;
right: 0;
height: 2px;
width: 0;
background: #0052cc;
transition: 0.4s ease all;
}
.floating-group input:focus ~ .bar {
width: 100%;
}
#submitBtn {
width: 100%;
height: 55px;
background: #0052cc;
color: white;
border: none;
border-radius: 15px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.3s;
margin-top: 10px;
box-shadow: 0 8px 16px rgba(0, 82, 204, 0.2);
}
#submitBtn:hover {
background: #0041a3;
transform: translateY(-2px);
}
.btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.5s;
}
#submitBtn:hover .btn-shine {
left: 100%;
}
.form-status {
margin-top: 20px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
.status-success { color: #00c853; }
.status-error { color: #ff3d00; }
/* ریسپانسیو */
@media (max-width: 480px) {
.glass-form-card { margin: 20px; }
.form-inner { padding: 30px 20px; }
}
document.getElementById('kavenegarSmsForm').addEventListener('submit', function(e) {
e.preventDefault();
const btn = document.getElementById('submitBtn');
const status = document.getElementById('formStatus');
btn.disabled = true;
btn.innerHTML = 'در حال ارسال...';
const fd = new URLSearchParams();
fd.append('first_name', document.getElementById('cust_name').value);
fd.append('last_name', document.getElementById('cust_family').value);
fd.append('phone', document.getElementById('cust_phone').value);
fetch('/send.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: fd
})
.then(r => r.json())
.then(data => {
btn.disabled = false;
btn.innerHTML = 'ارسال درخواست تماس';
if (data.status === 'success') {
status.className = 'form-status status-success';
status.innerHTML = '✅ ' + data.message;
document.getElementById('kavenegarSmsForm').reset();
} else {
status.className = 'form-status status-error';
status.innerHTML = '❌ ' + data.message;
}
})
.catch(err => {
btn.disabled = false;
btn.innerHTML = 'ارسال درخواست تماس';
status.className = 'form-status status-error';
status.innerHTML = 'خطای ارتباط با سرور!';
});
});
