.wrb {
--wrb-accent: #b42318;
--wrb-accent-hover: #912018;
--wrb-border: #c8c8c8;
--wrb-focus: #1d4ed8;
--wrb-error: #b42318;
--wrb-success: #067647;
box-sizing: border-box;
margin-block: 1.5rem;
max-width: 48rem;
}
.wrb *,
.wrb *::before,
.wrb *::after {
box-sizing: inherit;
}
.wrb__primary-button {
appearance: none;
background: var(--wrb-accent);
border: 2px solid var(--wrb-accent);
border-radius: 0.25rem;
color: #fff;
cursor: pointer;
display: inline-block;
font: inherit;
font-weight: 700;
line-height: 1.25;
padding: 0.8rem 1.25rem;
text-decoration: none;
}
.wrb__primary-button:hover {
background: var(--wrb-accent-hover);
border-color: var(--wrb-accent-hover);
color: #fff;
}
.wrb__primary-button:focus-visible,
.wrb input:focus-visible,
.wrb textarea:focus-visible {
outline: 3px solid var(--wrb-focus);
outline-offset: 2px;
}
.wrb__form {
display: grid;
gap: 1.25rem;
}
.wrb__field {
display: grid;
gap: 0.35rem;
}
.wrb__field label,
.wrb__captcha legend {
font-weight: 700;
}
.wrb input,
.wrb textarea {
border: 1px solid var(--wrb-border);
border-radius: 0.2rem;
font: inherit;
max-width: 100%;
padding: 0.65rem;
width: 100%;
}
.wrb input[type="date"],
.wrb input[type="number"] {
width: auto;
}
.wrb__captcha {
border: 1px solid var(--wrb-border);
display: grid;
gap: 0.5rem;
margin: 0;
padding: 1rem;
}
.wrb__captcha input {
max-width: 8rem;
}
.wrb__help,
.wrb__required,
.wrb__optional {
font-size: 0.9em;
}
.wrb__help {
margin: 0;
}
.wrb__field--trap {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
.wrb__notice {
border-left: 4px solid;
margin-bottom: 1.25rem;
padding: 0.9rem 1rem;
}
.wrb__notice p {
margin-bottom: 0;
}
.wrb__confirmation h2 {
margin-top: 0;
}
.wrb__notice--success {
background: #ecfdf3;
border-color: var(--wrb-success);
}
.wrb__notice--error {
background: #fef3f2;
border-color: var(--wrb-error);
}