.contact-form[class*="color-"] {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
    font-family: "Brother", sans-serif;
}

.contact-form[class*="color-"] .page-width {
    display: flex;
    justify-content: center;
}

.contact-form[class*="color-"] :is(h1, h2, h3, h4, h5, h6, p, span, small, div, a, li, ul, ol, button, input, select, textarea, label) {
    font-family: inherit;
}

.contact-form[class*="color-"] .contact-form__inner {
    width: 100%;
}

.contact-form[class*="color-"] .contact-form__title {
    margin-block-end: 30px;
    text-align: center;
}

@media (max-width: 959px) {
    .contact-form[class*="color-"] .contact-form__title {
        margin-block-end: 20px;
    }
}

.contact-form[class*="color-"] theme-contact-form {
    display: block;
    width: 100%;
}

.contact-form[class*="color-"] theme-contact-form form {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Name + Email should be full width and stack */
.contact-form[class*="color-"] .contact-form__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Kill theme pseudo borders that cause double borders (normal + focus) */
.contact-form[class*="color-"] :is(.field, label.field)::before,
.contact-form[class*="color-"] :is(.field, label.field)::after,
.contact-form[class*="color-"] :is(.field, label.field):focus-within::before,
.contact-form[class*="color-"] :is(.field, label.field):focus-within::after,
.contact-form[class*="color-"] :is(.field__input, textarea.field__input)::before,
.contact-form[class*="color-"] :is(.field__input, textarea.field__input)::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Wrapper (single border like footer input) */
.contact-form[class*="color-"] :is(.field, label.field) {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid rgb(var(--color-text)) !important;
    border-radius: 12px;
    background: transparent;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Input/textarea normalize (fix email padding mismatch) */
.contact-form[class*="color-"] .field__input {
    width: 100%;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent;
    color: rgb(var(--color-text));
    font-family: inherit !important;

    padding: 22px 16px 10px !important;
    font-size: 16px;
    line-height: 1.2;
    min-width: 0;
}

.contact-form[class*="color-"] input[type="email"].field__input {
    padding: 22px 16px 10px !important;
}

.contact-form[class*="color-"] textarea.field__input,
.contact-form[class*="color-"] .field__input.textarea {
    resize: vertical;
    min-height: 150px;
    padding-top: 22px !important;
}

@media (max-width: 959px) {

    .contact-form[class*="color-"] textarea.field__input,
    .contact-form[class*="color-"] .field__input.textarea {
        min-height: 110px;
    }
}

/* Hide placeholder text everywhere */
.contact-form[class*="color-"] :is(input, textarea)::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Floating label (consistent for all, including email component) */
.contact-form[class*="color-"] .field__label {
    position: absolute;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    pointer-events: none;
    color: rgb(var(--color-text));
    opacity: 0.75;

    font-size: 16px;
    line-height: 1;

    transition: top 150ms ease, transform 150ms ease, font-size 150ms ease, opacity 150ms ease;
}

/* Float UP on focus */
.contact-form[class*="color-"] :is(.field, label.field):focus-within .field__label {
    top: 8px !important;
    transform: none !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

/* Float UP when field has a value (use ~ to handle extra nodes) */
.contact-form[class*="color-"] .field__input:not(:placeholder-shown)~.field__label {
    top: 8px !important;
    transform: none !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

/* Single clean focus style (no double border) */
.contact-form[class*="color-"] :is(.field, label.field):focus-within {
    outline: 2px solid rgb(var(--color-text)) !important;
    outline-offset: 2px !important;
}

.contact-form[class*="color-"] .field__input:focus,
.contact-form[class*="color-"] .field__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Tips cards spacing */
.contact-form[class*="color-"] .tips-card {
    margin-block: 10px;
}

/* Submit button respects section vars (set on wrapper) */
.contact-form[class*="color-"] .contact-form__button {
    margin-block-start: 24px;
    text-align: center;
}

.contact-form[class*="color-"] .contact-form__button .button {
    --button-bg: var(--contact-btn-bg, rgb(var(--color-text)));
    --button-text: var(--contact-btn-text, rgb(var(--color-background)));

    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-color: transparent !important;
    border-radius: 12px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
}

@media (min-width: 960px) {
    .contact-form[class*="color-"] .contact-form__button .button {
        width: auto;
        max-width: none;
    }
}