.text-input {
    color: var(--neutral-20);

    font-family: var(--font-family);
    font-size: var(--text-button);
    font-weight: var(--medium);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;
    text-decoration: none;

    display: flex;
    box-sizing: border-box;
    height: 40px;
    padding: 12px 16px;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;

    border: 1px solid var(--blue-40, #02D4C3);
    --input-bg: var(--blue-100, #00332F);
    background: var(--input-bg);
}

.textarea-input {
    color: var(--neutral-20);

    font-family: var(--font-family);
    font-size: var(--text-button);
    font-weight: var(--medium);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;
    text-decoration: none;
    
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    padding: 12px 16px;
    resize: vertical;

    border-radius: 4px;
    border: 1px solid var(--blue-40, #02D4C3);
    --input-bg: var(--blue-100, #00332F);
    background: var(--input-bg);
    margin-top: 20px;
}

.textarea-input::placeholder,
.text-input::placeholder {
    color: var(--blue-20);
    opacity: 1;
}

.textarea-input:focus-visible:hover,
.text-input:focus-visible:hover,
.textarea-input:focus-visible,
.text-input:focus-visible {
    outline: none;
    border: 2px solid var(--blue-40, #02D4C3);
    --input-bg: var(--teal-100, #061B1C);
    background: var(--input-bg);
}
.textarea-input.error:hover,
.text-input.error:hover,
.textarea-input.error,
.text-input.error {
    outline: none;
    border: 2px solid var(--error, #FF4B2B);
    --input-bg: var(--neutral-100, #2F2F2F);
    background: var(--input-bg);
}

.textarea-input.error:hover::placeholder,
.text-input.error:hover::placeholder,
.textarea-input.error::placeholder,
.text-input.error::placeholder {
    color: var(--error, #FF4B2B);
}



.checkbox-inputs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 0;
}

.checkbox-input {
    display: flex;
    gap: 20px;
}

.checkbox-input label {
    color: var(--teal-20);
    cursor: pointer;
}

.checkbox-input input {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    align-items: center;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;

    border-radius: 4px;
    border: 1px solid var(--blue-40, #02D4C3);
    background: var(--blue-100, #00332F);
}

.checkbox-input input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302D4C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.checkbox-input input:focus-visible {
    outline: 2px solid var(--blue-40, #02D4C3);
    outline-offset: 2px;
}


.textarea-input:hover,
.text-input:hover {
    border: 1px solid var(--blue-40, #02D4C3);
    --input-bg: var(--blue-80, #01554E);
    background: var(--input-bg);

}


/* Honeypot (page-contact.php): hidden from people but still a real, fillable
   field, since bots skip display: none and ignore autocomplete="off". The
   endpoint treats any value here as a bot. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------------------------
   Third-party fill states

   Two different things repaint a field after something else writes into it,
   and neither can be refused from the page (autocomplete="off" does not stop
   either one), so both are painted back over here:

   1. Password managers tag the field they filled and inject an !important
      background against that tag. These selectors carry the component class
      as well, so they outrank the manager's single attribute selector.
   2. The browser's own autofill paints from the UA stylesheet, which no
      author background can beat at any specificity — an inset shadow covers
      it instead, inside the field's border radius.

   Both resolve --input-bg rather than a literal, so the hover, focus and
   error states above still read through on a filled field. */

:is(.text-input, .textarea-input):is(
    [data-com-onepassword-filled],
    [data-dashlane-rid],
    [data-dashlane-autofill],
    [data-lastpass-icon-root],
    [data-bwautofill]
) {
    /* Shorthand, so an injected background-image (the manager's badge) goes
       with it. */
    background: var(--input-bg) !important;
    color: var(--neutral-20) !important;
}

:is(.text-input, .textarea-input):is(:-webkit-autofill, :autofill),
:is(.text-input, .textarea-input):is(:-webkit-autofill, :autofill):hover,
:is(.text-input, .textarea-input):is(:-webkit-autofill, :autofill):focus {
    -webkit-box-shadow: inset 0 0 0 100px var(--input-bg);
    box-shadow: inset 0 0 0 100px var(--input-bg);
    -webkit-text-fill-color: var(--neutral-20);
    caret-color: var(--neutral-20);
    /* Chrome fades its own colour back in on blur; outrun the transition. */
    transition: background-color 600000s 0s, color 600000s 0s;
}