@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

.cjs-inline-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0,0,0,0.02);
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 500px;
    margin: 0 auto;
}
.cjs-header { margin-bottom: 24px; }
.cjs-header h2 {
    margin: 0 0 6px 0; font-size: 22px; font-weight: 700; color: #0f172a; letter-spacing: -0.02em;
}
.cjs-header p {
    margin: 0; font-size: 14px; color: #64748b; line-height: 1.5;
}
.cjs-form-group { margin-bottom: 16px; position: relative; }
.cjs-form-group label {
    display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155;
}
.cjs-form-group .req { color: #ef4444; }

.cjs-form-input {
    width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 12px; font-family: inherit; font-size: 14px; color: #0f172a;
    transition: all 0.3s ease; box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
select.cjs-form-input {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right .7em top 50%; background-size: .65em auto;
}
.cjs-form-input:hover { border-color: #cbd5e1; background: #fff; }
.cjs-form-input:focus { outline: none; border-color: #8b5cf6; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1); }
.cjs-form-input::placeholder { color: #94a3b8; }
textarea.cjs-form-input { resize: none; min-height: 80px; }
.cjs-row-compact { display: flex; gap: 12px; }
.cjs-row-compact .cjs-form-group { flex: 1; }

#cjs-submit-btn {
    width: 100%; padding: 14px; margin-top: 8px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 15px; font-weight: 600;
    font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px 0 rgba(168, 85, 247, 0.39); transition: all 0.3s ease;
}
#cjs-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5); }
#cjs-submit-btn:active { transform: translateY(0); }
#cjs-submit-btn:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; transform: none; }

#cjs-form-message {
    padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 500; display: none; animation: cjs-fade-in 0.3s ease;
}
.cjs-msg-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; display: block !important; }
.cjs-msg-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: block !important; }
@keyframes cjs-fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
    .cjs-inline-container { padding: 24px 20px; border-radius: 16px; }
    .cjs-row-compact { flex-direction: column; gap: 0; }
}