:root {
--itcca-primary: var(--wp--preset--color--primary, currentColor);
--itcca-font-family: var(
--wp--preset--font-family--body,
var(--global--font-family-body, inherit)
);
--itcca-error: #b3261e;
--itcca-success: #1e6b3a;
--itcca-border: rgba(0, 0, 0, 0.18);
--itcca-bg-input: rgba(0, 0, 0, 0.02);
--itcca-radius: 6px;
--itcca-gap: 1rem;
}
.itcca-form,
.itcca-form-success,
.itcca-form-error,
.itcca-form-summary {
font-family: var(--itcca-font-family), sans-serif;
}
.itcca-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 760px;
margin: 0 auto;
}
.itcca-form .itcca-honeypot {
position: absolute !important;
left: -9999px !important;
height: 0 !important;
width: 0 !important;
opacity: 0 !important;
}
.itcca-form-notice-wrap {
max-width: 760px;
margin: 1.25rem auto;
padding: 0 1rem;
}
.itcca-form-success,
.itcca-form-error,
.itcca-form-summary {
max-width: 760px;
margin: 0 auto 1.25rem;
padding: 1rem 1.25rem;
border-radius: var(--itcca-radius);
}
.itcca-alert-success,
.itcca-form-success {
border-left: 4px solid var(--itcca-success);
background: rgba(30, 107, 58, 0.08);
}
.itcca-alert-error,
.itcca-form-error {
border-left: 4px solid var(--itcca-error);
background: rgba(179, 38, 30, 0.08);
}
.itcca-alert-title {
font-weight: 700;
font-size: 1.05rem;
margin: 0 0 0.35rem;
}
.itcca-alert-success .itcca-alert-title::before {
content: "✓ ";
color: var(--itcca-success);
}
.itcca-alert-error .itcca-alert-title::before {
content: "✕ ";
color: var(--itcca-error);
}
.itcca-form-success p,
.itcca-form-error p,
.itcca-form-summary p {
margin: 0;
}
.itcca-form-success p + p,
.itcca-form-error p + p,
.itcca-form-summary p + p {
margin-top: 0.35rem;
}
.itcca-error-list {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
}
.itcca-error-list li {
margin: 0.15rem 0;
}
.itcca-section {
border: 1px solid var(--itcca-border);
border-radius: var(--itcca-radius);
padding: 1rem 1.25rem 1.25rem;
margin: 0;
}
.itcca-section legend {
padding: 0 0.5rem;
font-weight: 600;
color: var(--itcca-primary);
}
.itcca-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--itcca-gap);
}
.itcca-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.itcca-field .itcca-label,
.itcca-field label {
font-size: calc(0.92rem + 4pt);
font-weight: 500;
}
.itcca-required {
color: var(--itcca-error);
}
.itcca-form input:invalid,
.itcca-form select:invalid {
box-shadow: none;
border-color: var(--itcca-border);
}
.itcca-field input[type="text"],
.itcca-field input[type="email"],
.itcca-field input[type="tel"],
.itcca-field input[type="date"],
.itcca-field select,
.itcca-field-captcha input {
width: 100%;
padding: 0.55rem 0.7rem;
border: 1px solid var(--itcca-border);
border-radius: var(--itcca-radius);
background: var(--itcca-bg-input);
font: inherit;
color: inherit;
}
.itcca-field input:focus,
.itcca-field select:focus {
outline: 2px solid var(--itcca-primary);
outline-offset: 1px;
}
.itcca-field-has-error input,
.itcca-field-has-error select,
.itcca-field-has-error .itcca-radio-group {
border-color: var(--itcca-error);
}
.itcca-field-error {
color: var(--itcca-error);
font-size: calc(0.85rem + 4pt);
margin: 0;
}
.itcca-help {
color: rgba(0, 0, 0, 0.55);
font-size: calc(0.92rem + 4pt);
line-height: 1.4;
}
.itcca-form small.itcca-help {
font-size: calc(0.92rem + 4pt);
}
.itcca-radio-group {
display: flex;
gap: 1rem;
padding: 0.55rem 0;
}
.itcca-radio,
.itcca-checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.itcca-checkbox {
align-items: flex-start;
font-size: calc(0.92rem + 4pt);
}
.itcca-checkbox input {
margin-top: 0.25rem;
}
.itcca-field-captcha input {
max-width: 8rem;
}
.itcca-field-cf input {
text-transform: uppercase;
letter-spacing: 0.05em;
font-variant-numeric: tabular-nums;
}
.itcca-actions {
display: flex;
justify-content: flex-end;
}
.itcca-submit {
background: var(--itcca-primary);
color: #fff;
border: 0;
padding: 0.75rem 1.5rem;
border-radius: var(--itcca-radius);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.itcca-submit:hover,
.itcca-submit:focus {
filter: brightness(0.92);
}
@media (prefers-color-scheme: dark) {
:root {
--itcca-border: rgba(255, 255, 255, 0.18);
--itcca-bg-input: rgba(255, 255, 255, 0.04);
}
.itcca-help {
color: rgba(255, 255, 255, 0.55);
}
}