.cf-form-wrapper {
max-width: 720px;
margin: 0 auto;
}
.cf-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
} .cf-field {
width: 100%;
box-sizing: border-box;
}
.cf-field--full {
width: 100%;
}
.cf-field--half {
width: calc(50% - 8px);
} .cf-field__label {
display: block;
margin-bottom: 6px;
font-weight: 600;
}
.cf-field__required {
color: #e74c3c;
margin-left: 2px;
} .cf-field__input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
line-height: 1.5;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
background-color: #fff;
}
.cf-field__input:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}
.cf-field__input::placeholder {
color: #999;
opacity: 1;
} .cf-field--textarea .cf-field__input {
min-height: 120px;
resize: vertical;
} .cf-field--select .cf-field__input {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
} .cf-field__radio-group,
.cf-field__checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.cf-field__radio-label,
.cf-field__checkbox-label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-weight: normal;
}
.cf-field__radio-input,
.cf-field__checkbox-input {
margin: 3px 0 0 0;
cursor: pointer;
flex-shrink: 0;
}
.cf-field__radio-text,
.cf-field__checkbox-text {
line-height: 1.5;
} .cf-field--checkbox .cf-field__checkbox-label {
font-weight: normal;
} .cf-field__checkbox-text a {
color: #0073aa;
text-decoration: underline;
}
.cf-field__checkbox-text a:hover {
color: #005a87;
} .cf-field--divider {
padding: 8px 0;
}
.cf-field__divider {
border: none;
border-top: 1px solid #ddd;
margin: 0;
} .cf-field--html {
padding: 8px 0;
}
.cf-field__html {
line-height: 1.6;
}
.cf-field__html h1,
.cf-field__html h2,
.cf-field__html h3,
.cf-field__html h4,
.cf-field__html h5,
.cf-field__html h6 {
margin-top: 0;
margin-bottom: 0.5em;
line-height: 1.3;
}
.cf-field__html p {
margin-top: 0;
margin-bottom: 0.8em;
}
.cf-field__html p:last-child {
margin-bottom: 0;
}
.cf-field__html ul,
.cf-field__html ol {
margin: 0 0 0.8em 1.5em;
padding: 0;
}
.cf-field__html a {
color: #0073aa;
text-decoration: underline;
}
.cf-field__html a:hover {
color: #005a87;
}  .cf-field-break {
flex-basis: 100%;
width: 100%;
height: 0;
margin: 0;
padding: 0;
border: 0;
} .cf-field--has-error .cf-field__input {
border-color: #e74c3c;
}
.cf-field--has-error .cf-field__input:focus {
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}
.cf-field__error {
display: none;
color: #e74c3c;
font-size: 13px;
margin-top: 6px;
line-height: 1.4;
}
.cf-field--has-error .cf-field__error {
display: block;
} .cf-captcha {
width: 100%;
box-sizing: border-box;
}
.cf-captcha__label {
display: block;
margin-bottom: 6px;
font-weight: 600;
}
.cf-captcha__question {
margin-right: 4px;
}
.cf-captcha__input {
width: 120px;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cf-captcha__input:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}
.cf-captcha--has-error .cf-captcha__input {
border-color: #e74c3c;
}
.cf-captcha__error {
display: none;
color: #e74c3c;
font-size: 13px;
margin-top: 6px;
line-height: 1.4;
}
.cf-captcha--has-error .cf-captcha__error {
display: block;
} .cf-honeypot {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
} .cf-submit {
width: 100%;
margin-top: 8px;
}
.cf-submit__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 32px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
min-width: 150px;
}
.cf-submit__button:hover {
background: #005a87;
}
.cf-submit__button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.4);
}
.cf-submit__button--disabled,
.cf-submit__button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cf-submit__spinner {
display: none;
width: 18px;
height: 18px;
}
.cf-form--loading .cf-submit__spinner {
display: inline-block;
}
.cf-submit__spinner-svg {
width: 100%;
height: 100%;
animation: cf-spin 1s linear infinite;
}
.cf-submit__spinner-circle {
stroke-dasharray: 45;
stroke-dashoffset: 45;
animation: cf-dash 1.5s ease-in-out infinite;
}
@keyframes cf-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes cf-dash {
0% {
stroke-dashoffset: 45;
}
50% {
stroke-dashoffset: 10;
}
100% {
stroke-dashoffset: 45;
}
} .cf-message {
padding: 14px 18px;
border-radius: 4px;
margin-top: 16px;
width: 100%;
box-sizing: border-box;
line-height: 1.5;
}
.cf-message--success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.cf-message--error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
} .cf-form--loading .cf-submit__button {
pointer-events: none;
}
.cf-form--submitted .cf-field,
.cf-form--submitted .cf-captcha,
.cf-form--submitted .cf-submit {
display: none;
} @media (max-width: 600px) {
.cf-field--half {
width: 100%;
}
.cf-form {
gap: 12px;
}
.cf-submit__button {
width: 100%;
}
} @media print {
.cf-form-wrapper {
max-width: none;
}
.cf-submit,
.cf-honeypot {
display: none;
}
}