.contact-overlay {
    position: fixed;
    top: 21vh; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.contact-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    min-width: 500px;
    color: #361375;
}

.contact-field {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
    width: 100%;
    max-width: 520px;
    font-size: 0.9rem;
    font-weight: 100;
    font-family: 'Montserrat Alternates', sans-serif;
    border: 1px solid #94ffe8;
    border-radius: 6px;
    padding: 0.7em 1em;
    box-sizing: border-box;
    background: #f8ffff49;
    color: #361375;
}

/* FIXED: Selector typo (was missing a dot) */
.contact-field.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Make sure input and textarea text is always purple */
.contact-form input,
.contact-form textarea {
    color: #361375;
}

/* Placeholder text color */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #361375;
    opacity: 1;
}

/* Remove border and outline on focus/visible */
.contact-form .contact-field:focus,
.contact-form .contact-field.visible {
    color: #361375;
    font-weight: 500;
    outline: none;
    border: none;
}

/* Style the Send button */
.contact-form button.contact-field {
    color: #361375;
    background: #94ffe8;
    border: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1), background 0.3s, color 0.3s;
}

/* Fade in the button */
.contact-form button.contact-field.visible {
    opacity: 1;
    transform: translateY(0);
}

/* On hover/focus for button, invert for feedback */
.contact-form button.contact-field:hover,
.contact-form button.contact-field:focus {
    color: #94ffe8;
    background: #361375;
    outline: none;
    border: none;
}