.realsteel-form {
--rs-form-teal: var(--wp--preset--color--primary, #27bcba);
--rs-form-ink: var(--wp--preset--color--secondary, #0a0a0a);
--rs-form-text: #fff;
--rs-form-hint: rgb(255 255 255 / 0.78);
--rs-form-tint: linear-gradient(rgb(255 255 255 / 0.14) 0 0);
--rs-form-field-bg: var(--rs-form-tint), rgb(10 10 10 / 0.4);
--rs-form-field-line: rgb(255 255 255 / 0.4);
--rs-form-error: #ffb4b4;
--rs-form-ok: #9ff0ee;
box-sizing: border-box;
width: 100%;
max-width: 600px;
margin-inline: auto;
color: var(--rs-form-text);
text-align: left;
}
.realsteel-form *,
.realsteel-form *::before,
.realsteel-form *::after {
box-sizing: border-box;
} .realsteel-form .form-flat {
display: flex;
flex-direction: column;
gap: 0;
}
.realsteel-form .form-flat > p,
.realsteel-form .form-flat > div > p {
margin: 0;
padding: 0;
} .realsteel-form label {
display: block;
margin: 0 0 8px;
color: var(--rs-form-text);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
} .realsteel-form .form-flat > p:not(:has(.wpcf7-form-control-wrap)) {
margin-top: 20px;
}
.realsteel-form .form-flat > p:first-child {
margin-top: 0;
}
.realsteel-form .form-flat > p:has(select) {
margin-top: 20px;
}
.realsteel-form .form-flat > p:has(select) br {
display: none;
}
.realsteel-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
} .realsteel-form input.wpcf7-text,
.realsteel-form select.wpcf7-select {
display: block;
width: 100%;
min-height: 46px;
margin: 0;
padding: 10px 20px;
border: 1px solid var(--rs-form-field-line);
border-radius: 999px;
background: var(--rs-form-field-bg);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: none;
color: var(--rs-form-text);
font: inherit;
font-size: 1rem;
line-height: 1.4;
text-transform: none;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.realsteel-form input.wpcf7-text::placeholder {
color: var(--rs-form-hint);
opacity: 1;
}
.realsteel-form input.wpcf7-text:hover,
.realsteel-form select.wpcf7-select:hover {
border-color: rgb(255 255 255 / 0.7);
} .realsteel-form .wpcf7-form-control.wpcf7-select.wpcf7-select {
border-radius: 999px;
} .realsteel-form select.wpcf7-select {
padding-right: 48px;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"),
var(--rs-form-tint);
background-color: rgb(10 10 10 / 0.4);
background-repeat: no-repeat;
background-position: right 18px center, 0 0;
background-size: 16px 16px, auto;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
text-overflow: ellipsis;
}
.realsteel-form select.wpcf7-select option {
background: #1a1a1a;
color: #fff;
} .realsteel-form input.wpcf7-text:focus-visible,
.realsteel-form select.wpcf7-select:focus-visible,
.realsteel-form input.realsteel-form__submit:focus-visible {
border-color: var(--rs-form-teal);
outline: 2px solid var(--rs-form-teal);
outline-offset: 2px;
} .realsteel-form [aria-invalid="true"] {
border-color: var(--rs-form-error);
} .realsteel-form .realsteel-form__error:empty,
.realsteel-form .realsteel-form__status:empty {
display: none;
}
.realsteel-form .wpcf7-not-valid-tip {
display: block;
margin: 6px 0 0 20px;
color: var(--rs-form-error);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
text-shadow: 0 1px 2px rgb(0 0 0 / 0.7);
} .realsteel-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .realsteel-form__turnstile {
display: flex;
justify-content: center;
margin-top: 20px;
}
.realsteel-form__turnstile:empty,
.realsteel-form__turnstile[data-rs-quiet] {
margin-top: 0;
} .realsteel-form .form-flat > center {
display: flex;
justify-content: center;
margin-top: 32px;
}
.realsteel-form input.realsteel-form__submit {
display: inline-block;
width: auto;
min-width: 180px;
min-height: 46px;
margin: 0;
padding: 12px 32px;
border: 2px solid var(--rs-form-teal);
border-radius: 999px;
background: var(--rs-form-teal);
box-shadow: none;
color: var(--rs-form-ink);
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
white-space: normal;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.realsteel-form input.realsteel-form__submit:hover {
background: #fff;
border-color: #fff;
color: var(--rs-form-ink);
}
.realsteel-form input.realsteel-form__submit:active {
transform: translateY(1px) scale(0.98);
} .realsteel-form__submit[aria-disabled="true"] {
cursor: wait;
opacity: 0.7;
pointer-events: none;
} .realsteel-form .realsteel-form__status {
margin: 24px 0 0;
padding: 12px 20px;
border: 1px solid var(--rs-form-error);
border-radius: 24px;
background: rgb(10 10 10 / 0.78);
color: var(--rs-form-error);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
.realsteel-form .realsteel-form__status.is-success {
border-color: var(--rs-form-teal);
color: var(--rs-form-ok);
}
@media (max-width: 480px) {
.realsteel-form input.realsteel-form__submit {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.realsteel-form input.wpcf7-text,
.realsteel-form select.wpcf7-select,
.realsteel-form input.realsteel-form__submit {
transition: none;
}
.realsteel-form input.realsteel-form__submit:active {
transform: none;
}
}