/* Forms */
.app-form {
    display: flex;
    flex-direction: column;
}

.app-form label {
    font-size: 14px;
    color: rgba(85, 85, 85, 0.75);
    margin-top: 5px;
}

.app-form input,
.app-form select,
.app-form button {
    padding: 12px;
    font-size: 16px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Updated button styles */
.app-form button {
    background-color: #5A4A4A; /* Warm gray for a neutral and elegant look */
    color: #FFFFFF; /* Keep white text for contrast */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
}

.app-form button:hover {
    background-color: #333333; /* Darker gray for hover state */
    transform: scale(1.02); /* Slight scale effect for interaction feedback */
}

/* ======================= */
/* Form Messages */
/* ======================= */
.form-messages {
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-messages.error {
    background-color: rgb(248, 215, 218);
    color: rgb(114, 28, 36);
    border: 1px solid rgb(245, 198, 203);
}

.form-messages.success {
    background-color: rgb(212, 237, 218);
    color: rgb(21, 87, 36);
    border: 1px solid rgb(195, 230, 203);
}