div.cmbsqf-wrap {
max-width: 500px;
margin: 30px auto;
padding: 32px;
background: #e9ecef;
border: 1px solid #ced4da;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cmbsqf-wrap h2.cmbsqf-title {
margin-bottom: 8px;
color: #1f2937;
font-weight: 600;
}
.cmbsqf-wrap div.cmbsqf-header {
color: #6b7280;
margin-bottom: 24px;
line-height: 1.5;
} .cmbsqf-wrap .cmbsqf-header * {
margin: 0;
padding: 0;
color: inherit;
line-height: inherit;
}
.cmbsqf-wrap .cmbsqf-header h2 {
font-size: 20px;
font-weight: 600;
}
.cmbsqf-wrap form.cmbsqf-form {
display: grid;
gap: 18px;
}
.cmbsqf-wrap .cmbsqf-label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #374151;
font-size: 14px;
}
.cmbsqf-wrap .cmbsqf-required {
color: #dc2626;
}
.cmbsqf-wrap .cmbsqf-input,
.cmbsqf-wrap .cmbsqf-textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid #adb5bd;
border-radius: 6px;
font-size: 15px;
font-family: inherit;
box-sizing: border-box;
background: #ffffff;
color: #111827;
transition: all 0.2s ease;
}
.cmbsqf-wrap .cmbsqf-input:focus,
.cmbsqf-wrap .cmbsqf-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cmbsqf-wrap .cmbsqf-textarea {
resize: vertical;
min-height: 100px;
}
.cmbsqf-wrap button.cmbsqf-button {
background: #3b82f6;
color: #ffffff;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: background 0.2s ease;
}
.cmbsqf-wrap button.cmbsqf-button:hover {
background: #2563eb;
}
.cmbsqf-wrap div.cmbsqf-message {
padding: 12px 14px;
border-radius: 6px;
font-size: 14px;
}
.cmbsqf-wrap .cmbsqf-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #10b981;
}
.cmbsqf-wrap .cmbsqf-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #ef4444;
} .cmbsqf-wrap .cmbsqf-field--privacy {
margin-top: 5px;
}
.cmbsqf-wrap .cmbsqf-privacy-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 14px;
}
.cmbsqf-wrap .cmbsqf-privacy-checkbox {
margin-top: 2px;
flex-shrink: 0;
cursor: pointer;
}
.cmbsqf-wrap .cmbsqf-privacy-text {
color: inherit;
}
.cmbsqf-wrap .cmbsqf-privacy-text a {
color: #3b82f6;
text-decoration: underline;
}